Unidade Acadmica de Sistemas e Computao Universidade Federal de Campina Grande (UFCG) Campina Grande PB Brasil
diegocharles.basilio@yahoo.com.br, mbarros@dsc.ufcg.edu.br
Abstract. With the growth of the number users with access the Internet in broad band, also increased the interest of the companies of software development on web applications, but to consolidate itself ahead of an increasing and competitive market, an web application must offer to the users an interface that, among others, either of easy learning and makes possible immediate recognition of its tools. Accordant these necessities, this article describe the results gotten during the study of the difficulties related to the activities of edition and document sharing using the web applications: Google Docs and Zoho. Through the accomplishment of Tests of Usability with real users, as well as with the study of the possibility for development of web application interfaces capable to suggest the tools that assist it user in the execution of the task, based on action of the user (mouses clicks, to select elements). So, obtain as result a relation of imperfections found in the applications and a functional component capable to identify the type of element selected in the document, a possibility to become the intuitive interfaces. Resumo. Com o crescimento do nmero de usurios com acesso a internet em banda larga, tambm aumentou o interesse das empresas de software pelo desenvolvimento de aplicaes web, mas para se consolidar diante de um mercado crescente e competitivo, uma aplicao web deve oferecer aos usurios uma interface que, entre outras, seja de fcil aprendizado e possibilite reconhecimento imediato de suas ferramentas. Cientes destas necessidades, este artigo descreve os resultados obtidos durante o estudo das dificuldades relacionadas s atividades de edio e compartilhamento de documentos utilizando as aplicaes web: Google Docs e Zoho. Atravs da realizao de Testes de Usabilidade com usurios reais, bem como com o estudo da possibilidade de desenvolvimento de interfaces de aplicao web capazes de sugerir as ferramentas que o auxiliem usurio na execuo da tarefa, baseada em aes do usurio (cliques de mouse, selecionar elementos). E, como resultado uma relao de falhas encontradas nas aplicaes e um componente funcional capaz de identificar o tipo de elemento selecionado no documento, uma possibilidade de tornar as interfaces mais intuitivas.
1. Introduo
Com o crescimento do nmero de usurios com acesso a internet em banda larga, aumentou tambm o interesse das empresas de software no desenvolvimento de aplicaes web. Segundo a Topic Point no final do primeiro trimestre de 2007 havia 298 milhes de usurios com acesso a banda larga no mundo, este crescimento no se limita a conexes fixas, segundo a GSM Association o nmero de conexes mveis teve um crescimento de 850% em 2007 representando cerca de 32 milhes de conexes. Para se consolidar diante de um mercado crescente e competitivo, uma aplicao web deve possibilitar, entre outras, conforto aos usurios e ser de fcil aprendizado e reconhecimento. Apesar das restries impostas pelos diversos softwares de navegao disponveis no Mercado e a forma com que estes renderizam uma pgina web, devido principalmente s incompatibilidades e dependncia de plug-ins de terceiros, possvel desenvolver interfaces ricas (RIA Rich Internet Application) seguindo os padres estabelecidos pela W3C (World Wide Web Consortium). Mesmo em uma ambiente web a interao homem-mquina deve seguir os padres impostos pelos aplicativos desktop com os quais os usurios esto familiarizados, e assim poder usufruir das vantagens de compartilhamento e edio de documentos independente de plataforma operacional. Ciente das possibilidades e limitaes foi proposta a realizao de uma pesquisa cujo objetivo identificar fatores que dificultam o compartilhamento e edio de documentos utilizando os aplicativos web: Google Docs e Zoho bem como quais as possibilidades de aplicao de recursos intuitivos no ambiente web.
2. O Estado da Arte
A interface grfica parte fundamental de qualquer produto de software, uma boa interface pode determinar a aceitao pelos usurios, diante destas hipteses muito se tm desenvolvido neste campo da interao homem-mquina.
2.3. Cores
Ainda dentre os fatores bastante ponderados no campo de desenvolvimento de interfaces so as cores. As cores transmitem mensagem e provocam sensaes. A tabela 1 fornece a relao de sensaes que as cores podem produzir [Sthelin e Amante 2004].
Tabela 1. Relao de Sensaes provocadas pelas Cores.
Cores
Sensaes
Vermelho Dinamismo, fora, baixeza, energia, revolta, movimento, barbarismo, coragem, furor, esplendor, intensidade, paixo, vulgaridade, poderio, vigor, glria, calor, violncia, excitao, ira. Laranja Amarelo Verde Azul Roxo Marrom Prpura Fora, luminosidade, dureza, euforia, energia, alergia, advertncia, tentao. Iluminao, conforto, alerta, gozo, cime, orgulho, esperana. Adolescncia, bem-estar, paz, sade, ideal, abundncia, tranqilidade, segurana, natureza, equilbrio, esperana, serenidade, suavidade, crena. Espao, viagem, verdade, sentido, intelectualidade, paz, advertncia, precauo, serenidade, infinito, meditao. Fantasia, mistrio, profundidade, eletricidade, dignidade, justia, egosmo, grandeza, misticismo, espiritualidade, delicadeza, calma. Pesar, melancolia. Estima, valor, dignidade.
2.4. Usabilidade
Os usurios de uma interface precisam saber como ela funciona e como us-la sem esforo excessivo [Krug 2006], quando o usurio fica em dvida na utilizao de algum elemento da interface, ele sente que est perdendo o controle o que acarreta em perda do foco da tarefa, produtividade e conseqente desinteresse pela interface. A usabilidade permite que interfaces sejam de fcil aprendizado e memorizao. Aplicar boas prticas de usabilidade e acessibilidade no design das interfaces facilita o aprendizado dos usurios [Martins 2007]. Dentre os tpicos importantes para a usabilidade de uma interface temos: o tempo de resposta, as convenes para links, cones, menus e botes, caixas de dilogo, descries pop. Estes guiam o usurio na busca pela informao facilitando a memorizao e tornando a interface mais intuitiva.
2.5. Concluso
Proporcionar o reconhecimento e no impor a lembrana um dos principais objetivos buscados atravs da aplicao dos conceitos obtidos a partir da pesquisa bibliogrfica, Tcnicas que possibilitam a focalizao na tarefa a ser executada e no em como execut-la.
No foram encontrados estudos relacionados a interfaces grficas para aplicaes web de edio de documentos bem como o desenvolvimento de interfaces intuitivas capazes de responder a aes do usurio, tornando a proposta bastante original.
3. Metodologia
Aplicar boas prticas como usabilidade e acessibilidade no design das interfaces facilita o aprendizado dos usurios, alm de reduzir eventuais chamadas ao suporte tcnico para sanar dvidas quanto utilizao da aplicao ou site. Assim, sero gastos menos recursos financeiros com treinamento, no caso de aplicativos, e as informaes relevantes sero acessadas com maior rapidez pelas pessoas, no caso de sites [Martins 2007]. A metodologia abaixo se baseia principalmente nos conhecimentos obtidos sobre o desenvolvimento de interfaces grficas.
Trabalho Realizado
Artefato Produzido
Verificar a existncia das ferramentas Lista de ferramentas para edio de texto, planilhas de clculo, disponveis em cada uma das apresentao de slides, recursos de aplicaes em estudo. compartilhamento, importao e exportao de documentos (Seo 4.1). Verificar o desempenho de usurios na realizao de tarefas de edio, importao/ exportao de documentos e quais os pontos negativos e positivos apontados por estes (Seo 4.2). Medio do grau de aceitao dos usurios e uma relao de benefcios e malefcios observados durante a realizao dos testes e apontados por estes.
Verificar o comportamento da aplicao Identificao da no no que diz respeito antecipao da ao do existncia de uma interface intuitiva. usurio e disponibilizao das ferramentas necessrias a execuo de determinada tarefa (Seo 4.4).
fornecendo-lhe o recurso certo no momento oportuno uma caracterstica determinante na usabilidade e desempenho de seus usurios. A anlise das ferramentas em estudo poder gerar novo conhecimento no que diz respeito ao desenvolvimento de aplicativos de escritrio web-based, bem como auxiliar o usurio na escolha de um aplicativo e as empresas de desenvolvimento na escolha de recursos a serem oferecidos.
3.4. Variveis
A pesquisa props as seguintes variveis que serviu de medida para os experimentos. 1. Existncia de perda de dados nos processos de importao/exportao. 2. Existncia e identificao de perda de formatao de dados (alinhamento, justificao, tipologia). 3. Editor de Texto. 4. Editor de Planilha de Clculo 5. Editor de Slides. 6. Tempo gasto na realizao das tarefas. 7. Respostas do aplicativo a interaes do usurio 3.5. Universo da pesquisa e Amostra Para a realizao das entrevistas e do experimento foi considerada uma populao de dois alunos do Laboratrio de Modelagem e Simulao (MODS) da Unidade Acadmica de Engenharia Mecnica onde sero realizados os experimentos.
Elemento Tamanho da fonte do corpo Tamanho da Fonte do Ttulo Tipologia Formato do Papel Alinhamento do Texto Rodap ndice Figura Tabela
Formato 11pt 16pt Calibri A4(210x297) Justificado Nmero da pgina Ttulos, subttulos, n de pgina Centralizada com legenda Centralizada com legenda
4. Resultados
Esta seo apresenta os dados coletados durante a realizao dos testes com as aplicaes em estudo. 4.1. Recursos Oferecidos A Tabela 3 exibe o resultado da verificao dos recursos disponveis nas aplicaes testadas, com o objetivo de comparar as aplicaes quanto ao nmero de recursos de edio de documentos disponveis, podemos notar que ambas as aplicaes oferecem os mesmos recursos.
Usurio X Tarefa Google Docs Importao de Documento Formatao 00:02:32:94 00:10:18:42 Zoho 00:00:47:99 00:15:04:00
Devido impossibilidade de execuo total da tarefa de formatao, elaboramos uma tabela listando os elementos para os quais a possibilidade de aplicao da formatao prevista no teste ou no foi possvel da forma esperada.
Elemento Tamanho da fonte do corpo Tamanho da Fonte do Ttulo Tipologia Formato do Papel Recuo de primeira linha (Pargrafo) Alinhamento do Texto Rodap ndice Figura Tabela
*Disponvel apenas para a impresso
Formato 11pt 16pt Calibri A4(210x297)mm 1.27cm Justificado Nmero da pgina Ttulos, subttulos, n de pgina Centralizada com legenda Centralizada com legenda
Aps a realizao do teste, solicitamos que os usurios respondessem ao questionrio de Teste de Usabilidade (ver Anexo). A Tabela 6 exibe o resultado obtido da Questo 1 do questionrio: Atribuio de um grau em uma escala de 0 a 5.
Tabela 7. Grau de aceitao atribuda pelos usurios
Usurio X a. Facilidade de Utilizao b. Organizao das Informaes c. Layout das telas d. Nomenclatura utilizada nas telas (nome de comandos, ttulos, campos, etc.) e. Mensagens do Sistema f. Assimilao da Informao g. No geral a realizao do teste foi 1 2 2 1 2 2 1 1 1 0 1 1 1 0
Usurio Y 1 1 1 0 1 1 2 1 1 2 1 2 2 3
A partir da Tabela 6 foi possvel construir o Grfico 1 que nos possibilita ter uma comparao visual do grau atribudo a cada item avaliado pelos usurios em cada aplicao.
Este resultado demonstra pela opinio dos usurios que as aplicaes no so de fcil utilizao, devido, principalmente, ao fato de as informaes no serem de fcil acesso ou localizao. Ainda a partir do questionrio foi possvel obter uma lista de itens para os quais os usurios apontaram dificuldades, os quais se justificaram pelas informaes sobre a disponibilidade de recursos para execuo da tarefa apresentada na Tabela 5, dentre eles podemos destacar: 1. Dificuldade de importao de arquivo; 2. Ajustar o tamanho do recuo do pargrafo; 3. Visualizar a diviso de pginas em modo de edio; 4. Localizao da opo de exportao do arquivo; 5. Quebra de pgina incompatvel com a aplicao desktop. Dentre as propostas sugeridas pelos usurios podemos destacar: Google Docs 1. Incluso de rgua horizontal; 2. Visualizao da diviso de pginas; Zoho 1. Permitir que o usurio visualizasse a diviso de pginas enquanto edita o documento; 2. Permitir o recuo de primeira linha do pargrafo.
Pde-se notar que em ambas as aplicaes a formatao do layout de pgina e pargrafo bastante deficiente, a aplicao Zoho obriga os usurios a conhecer a medida das margens em relao ao percentual da pgina enquanto que o Google Docs s oferece a medida em polegadas. 4.3. Teste de Compatibilidade Aps a realizao do Teste de Usabilidade foram realizados teste para aferir a compatibilidade das aplicaes Google Docs e Zoho com um aplicativo desktop popular bem como a integridade dos dados, para tal utilizamos um documento previamente formatado segundo a Tabela 2. O resultado deste teste encontra-se na Tabela 7, vale salientar que nenhuma alterao em sua estrutura foi realizada apenas a sua visualizao no ambiente da aplicao web testada.
Tabela 8. Erros identificados aps os processos de importao e exportao.
Elemento Tamanho da fonte do corpo Tamanho da Fonte do Ttulo Tipologia Formato do Papel Recuo de primeira linha (Pargrafo) Alinhamento do Texto Rodap ndice Figura Tabela Quebra de Pgina Nenhum Nenhum Nenhum
Google Docs Nenhum Nenhum Nenhum Nenhum Nenhum Nenhum Perda total
Zoho
Perda das Margens Nenhum Nenhum Perda total Perda da estrutura original, (Convertido para texto simples) Perda total Perda da formatao original (Espaamento e Bordas) Perda parcial devido converso do ndice.
Perda da estrutura original, (Convertido para hiperlinks) Nenhum Nenhum Perda parcial devido converso do ndice.
4.4. Respostas a Aes do Usurio Ainda durante a realizao do teste foi observado o comportamento de cada um dos aplicativos a interao do usurio. Em geral nenhuma das aplicaes props ao usurio uma dica que o auxiliasse na execuo de sua tarefa, apenas uma simples descrio popup com o nome do componente sobre o qual o cursor do mouse se posicionava foi verificada em ambas as aplicaes. O aplicativo Zoho oferece ainda um menu de contexto especfico para cada elemento do documento (tabela, figura, texto simples) enquanto que o Google Docs apenas para alguns elementos com tabela e figura.
function addEvent(obj, eventType, toMake){ if (window.addEventListener) { obj.addEventListener(eventType, toMake, false); return true; } else if (window.attachEvent) { var r = obj.attachEvent("on" + eventType, toMake); return r; } else { return false; } } function rmEvent(obj, eventType, toStop){ if (window.removeEventListener) { obj.removeEventListener(eventType, toStop, false); return true; } else if (window.detachEvent) { var r = obj.detachEvent("on" + eventType, toStop); return r; } else { return false; } } Listagem 9. Funes para anexar\remover ouvintes a eventos de um documento HTML.
Desta forma possvel anexar comportamentos de ouvinte a qualquer elemento de um documento HTML. Dentre os eventos disponveis em um documento HTML definidos no padro W3C para aes do mouse podemos citar: onclick, onmousemove, onmouseout, onclickup, e para o teclado onkeydown, onkeypress e onkeyup, cada elemento da pgina herda este e outros eventos do n pai. Cada elemento, ou tag, de um documento HTML possui um nome (nodeName ou tagName), dependendo do navegador, que o identifica na estrutura DOM, por exemplo, um n de texto denominado #text conforme apresentado na figura abaixo.
Utilizando as funes apresentadas na Listagem 9 para anexar um comportamento ouvinte ao n document, que responda a eventos onselect ou onselectstart suportardo nos navegadores Internet Explorer, Opera e Mozilla Firefox definido desde o modelo DOM 1 proposto pela W3C, foi possvel identificar quando um n de texto era selecionado. Atribuindo a este ouvinte a funo de exibir uma caixa de formatao de texto na ocorrncia deste evento foi possvel desenvolver um componente capaz de responder a aes do usurio fornecendo-lhe a ferramenta adequada a formatao do texto. A figura a seguir exibe o resultado.
5. Discusses
O Teste de Usabilidade e de Compatibilidade possibilitaram a identificao de deficincias nas aplicaes Google Docs e Zoho nos itens interface do usurio e compatibilidade com aplicaes desktop causadores das dificuldades de edio e compartilhamento de documentos. Estes resultados demonstram que o desenvolvimento de aplicaes web ainda uma rea da tecnologia de informao e interface do usurio a ser ainda muito explorada. A partir dos resultados obtidos possvel definir novas metas no desenvolvimento de aplicaes web que satisfaam as necessidades dos usurios. O desenvolvimento do componente de interface intuitiva se apresenta em forma funcional como uma possibilidade de reduo das falhas na interface das aplicaes em estudo, bem como uma perspectiva positiva para o desenvolvimento de interfaces intuitivas para aplicaes web-based.
5.1. Concluses
A partir dos resultados colhidos com os testes de usabilidade e desenvolvimento de um componente de interface intuitiva possvel concluir que a web se apresenta como uma rea de desenvolvimento que oferece recursos interessantes aqueles que se aventuram a desenvolver aplicaes web e que nem mesmo grandes corporaes conseguiram lidar com todas as suas funcionalidades. As aplicaes em estudo apresentaram muitas falhas na interface do usurio principalmente no que diz respeito localizao e disponibilizao de recursos, fatores que dificultam as tarefas de edio e compartilhamento de documentos por seus usurios.
Referncias
Crane, D., Pascarello, E., James, D.(2007) Ajax em Ao, So Paulo: Pearson Prentice Hall. 478p. Ferreira, K. G. (2002) Teste de Usabilidade. Especializao em Informtica. Departamento de Cincia da Computao. Universidade Federal de Minas Gerais. Belo Horizonte, 60f. http://homepages.dcc.ufmg.br/~clarindo/arquivos/disciplinas/eu/material/referencias/ monografia-avaliacao-usabilidade.pdf. Junho de 2008. Gomes Filho, J. (2007) Gestalt do Objeto: sistema de leitura visual da forma. 8 Ed. So Paulo: Escrituras. 136p. Martins, A. C. C. Projeto de Interfaces Grficas para Web. (2005). Bacharel em Cincia da Computao. Departamento de Cincia da Computao. Universidade Federal de Juiz de Fora. Juiz de Fora, 113f. http://ana-martins.com/mono/anaMono.pdf. Junho de 2008. Flanagan. D. (2006) JavaScript: The Definitive Guide, O'Reilly. 5th Edition.1010p
Anexos
Questionrio de Avaliao do Sistema pelo Participante [Ferreira 2002] O objetivo deste questionrio colher informaes sobre a opinio do participante do teste de usabilidade que foi realizado utilizando as aplicaes Google Docs e Zoho. As informaes fornecidas so vitais para o aprimoramento do sistema. Nas questes de marcar, favor circular o nmero correspondente ao grau de concordncia. A no ser que esteja indicado, dever ser marcada somente uma resposta por questo. Por favor, leia com ateno as questes a seguir e em caso de dvida, solicite esclarecimento com o avaliador. 1. Favor marcar o nmero correspondente ao grau que voc mais concorda:
2. Aponte situaes em que voc achou fcil utilizar no sistema: 3. Aponte situaes que voc sentiu dificuldades: 4. Voc utilizou a Ajuda on-line do sistema em algum momento? a. Sim b. No
Em caso afirmativo, descreva em quais situaes voc utilizou a Ajuda on-line do sistema (comente tambm se as informaes da Ajuda on-line foram de pouca ou grande valia): 5. Diante do teste realizado, voc acha que o programa atingiu o objetivo para o qual foi desenvolvido? Explique. 6. O espao abaixo reservado para que voc exponha sua opinio e sugerir melhorias na aplicao.