Anlise das diretivas de boas prticas do W3C no aspecto de interao homem-computador e interfaces de usurio para mdia mvel

Mauricio Cirelli, Flvio Miyamaru, Lucia Filgueiras Escola Politcnica da Universidade de So Paulo {mauricio.cirelli, flavio.miyamaru, lucia.filgueiras}@poli.usp.br

RESUMO
Neste artigo sero apresentados alguns comentrios s diretivas de boas prticas de desenvolvimento web para mdia mvel, publicadas em Julho de 2008 pelo W3C. O foco desta anlise ser a interao homem-computador, de forma que abordaremos as recomendaes que dizem respeito interao, layout, apresentao e navegao da aplicao web mobile, baseando-se na experincia que tivemos ao desenvolver aplicaes web para servios de governo eletrnico crossmedia.

de exames mdicos e esta aplicao que serve de pano de fundo para a discusso deste trabalho, que se orientar na seguinte linha: na seo 2, ser apresentado um breve resumo sobre referncias bibliogrficas relacionadas a guias de boas prticas para projeto de interfaces. Em seguida, na seo 3, as diretivas selecionadas so analisadas e propostas de complementao so sugeridas. Por fim, na seo 4 conclumos o estudo realizado.

2. GUIAS DE BOAS PRTICAS

Diversos autores desenvolveram trabalhos a respeito de aspectos de interao em mdia mvel. Por exemplo, a Nokia [3] desenvolveu um trabalho especfico para os aparelhos da srie S60, que poderiam ser estendidos para qualquer aplicao mvel. Uma forma de representar recomendaes de projeto que vem sendo usada h alguns anos com sucesso a especificao de design patterns, que so solues para problemas recorrentes. A literatura rica em patterns sendo alguns deles especficos para interao, como o trabalho de Jenifer Tidwell [4]; outros com escopo mais especfico na interao sobre dispositivos mveis como o trabalho de van Welie [5]. Outra contribuio nesta rea foi dada pela Little Springs Design, a qual amplia o conceito de mobilidade, desenvolvendo diversos padres de projeto design patterns para o ambiente mvel [6]. Estes padres levam em considerao aspectos de interface, usabilidade e portabilidade, que so fundamentais no desenvolvimento de aplicaes web mobile, alm de ter escrito alguns artigos sobre as diferenas entre aplicaes web convencionais e web mvel. Alm disto, muitos fruns renem discusses relevantes aos desenvolvedores de aplicaes de mdia mvel, com uma boa quantidade de dicas e exemplos. Um deles o mobiForge [7], o qual disponibiliza boas discusses a respeito do estado da arte do desenvolvimento e das tecnologias utilizadas em celulares alm de excelentes tutoriais para quem est se iniciando no assunto.

Palavras-Chave
Mobile, web, interao homem-computador, boas prticas, interface de usurio

1. INTRODUO
Em julho de 2008, o W3C publicou a verso 1.0 do Mobile Web Best Practices MWBP [1], o qual apresenta recomendaes de desenvolvimento para 60 itens, podendo ser subdivididos em algumas categorias, como navegao, tecnologia de browsers e dispositivos, layout, cores, entre outros. O conjunto de regras de projeto neste documento bastante abrangente e visa, de forma geral, enriquecer a experincia do usurio. A literatura rica em recomendaes de projeto, teis para o projetista, mas que precisam ser usadas dentro de um contexto que nem sempre fica muito claro, principalmente para quem est iniciando um trabalho na rea. Assim, o objetivo deste artigo elaborar comentrios sobre os itens mais relevantes da lista e que dizem respeito s questes de interface e navegao web em dispositivos mveis. Este trabalho baseia-se na experincia de desenvolvimento obtida durante a elaborao de aplicaes web mobile para dispositivos mveis no Projeto X-Gov. O Projeto X-Gov objetiva desenvolver um framework capaz de facilitar o desenvolvimento de aplicaes de servios de governo eletrnico em mdia cruzada crossmedia [2]. As mdias escolhidas para o projeto foram: Web, Televiso Digital Interativa e Web Mobile. Por se tratar de servios de governo eletrnico, estas aplicaes deveriam considerar requisitos de usabilidade, portabilidade e acessibilidade para obter o alcance de uma grande populao. Para tanto, procurou-se por diretivas de boas prticas de desenvolvimento de forma a atender aos principais requisitos. No desenvolvimento do projeto foram produzidas provas de conceito (POCs). A mais recente uma aplicao de agendamento

3. DISCUSSO DAS DIRETIVAS

Das diretivas apontadas pelo MWBP, iremos abordar as relacionadas aos seguintes temas: Portabilidade Navegao Layout Interatividade

3.1 Portabilidade
A portabilidade diz respeito adequao do contedo e das funcionalidades da aplicao s diferentes caractersticas dos dispositivos mveis e do aproveitamento destas caractersticas para promover uma satisfatria experincia para o usurio. O MWBP aborda esta questo de duas maneiras: a questo de explorar a caracterstica de mobilidade do dispositivo e a questo de personalizar o contedo de acordo com o aparelho requisitante. A primeira uma abordagem muito semelhante proposta pela Little Springs Design em seu artigo Mobilize, Don't Miniaturize [8]. Neste trabalho, os autores propem que a aplicao mvel seja projetada especificamente para a mdia mvel e se aproveite dos benefcios trazidos pela mobilidade dos dispositivos, contrariando a tendncia anterior do COPE - Create once publish everywhere. Exemplificando, os autores mostram um caso fictcio de uma viagem, na qual uma mulher est a caminho do aeroporto para receber seu marido que volta de um compromisso exterior. No caminho, ela deseja saber a situao do vo, tais como: atrasos, horrios e previses de chegada. Porm, a aplicao web da companhia area no explora o contexto da mobilidade e disponibiliza ferramentas para compra de passagens, enquanto a aplicao mvel desta empresa deveria fornecer fcil acesso s informaes do momento. Um aparelho mvel est conectado o tempo todo e pode ser acessado a qualquer momento de qualquer lugar e em quaisquer situaes. Esta caracterstica deve ser explorada pelos desenvolvedores ao projetarem suas aplicaes. Na elaborao da POC, explorou-se o conceito de mobilidade em um sistema de agendamento de exame mdico. Isto foi feito com auxilio da tecnologia de mensagens instantneas (SMS) presente em quase todos os dispositivos atuais. Esta mensagem poderia ser lida a qualquer momento e de qualquer lugar, trazendo ao usurio a informao de que os resultados do exame realizado estavam concludos. Neste momento o usurio poderia do lugar em que estivesse, acessar o servio eletrnico de agendamento e verificar a sua situao de sade. Interpretamos, portanto, que explorar as capacidades do dispositivo, como a mobilidade, significa utilizar todos os recursos nele disponveis, no se restringido apenas a uma interface Web. Deve-se considerar o uso de envio e recebimento de mensagens de texto, conexo em qualquer instante ou local e tecnologias como TouchScreen telas sensveis ao toque , sempre que disponveis. Em relao segunda maneira, existem duas diretivas que tratam das diferenas de caractersticas entre os dispositivos. Elas sugerem que o contedo a ser mostrado seja enviado em um formato que o dispositivo do usurio suporte, a partir de dados contidos no cabealho da requisio HTTP (HyperText Transfer Protocol) feita pelos dispositivos. Este cabealho contm informaes que, em conjunto com uma base de dados adequada, so capazes de identificar o dispositivo requisitante e suas caractersticas. Estas diretivas tratam de forma superficial uma questo de vital importncia para uma aplicao, pois, dificilmente, aps acessar um site em que o contedo carregado no pde ser exibido corretamente, o visitante ir retornar [9]. Alm disto, estas diretivas so desencorajadas a partir do momento que o MWBP

aponta diversas possveis falhas desta abordagem, ao invs de descrever os benefcios que tais prticas podem trazer. Algumas recomendaes citam que se deve ter cuidado ao utilizar uma determinada tecnologia, como Flash ou JavaScript, pois existem aparelhos e navegadores que no possuem suporte para elas. Na POC do projeto X-Gov, notou-se a necessidade de distribuir diversos contedos em diferentes formatos de forma a atingir a maioria da populao. Para tanto, as tcnicas de deteco das caractersticas dos dispositivos visitantes foram usadas para elaborar um contedo, em tempo de execuo, que o usurio pudesse visualizar em seu aparelho. Alm disto, foi necessria a criao deste contedo em diferentes formatos. Para identificar a capacidade do dispositivo, existem algumas ferramentas que podem ser utilizadas pelos desenvolvedores e, com isto, promover sua aplicao para uma maior quantidade de visitantes, tais como: WURFL [10] DeviceAtlas [11] Mobile Device Browser File [12]

Todas estas ferramentas so semelhantes e caracterizam-se por possuir um banco de dados o qual armazena caractersticas fsicas e tecnolgicas de muitos (milhares) de aparelhos e relaciona-as com o cabealho da requisio HTTP que o dispositivo realiza ao acessar uma aplicao web mvel. Desta forma possvel que o desenvolvedor personalize o contedo de acordo com a caracterstica do dispositivo utilizado pelo visitante ao acessar sua aplicao. Apesar das falhas que esta abordagem possa apresentar como cabealhos incompletos, informaes incorretas na requisio ou impossibilidade de reconhecimento do requisitante, esta prtica deve ser encorajada pelo MWBP e investigada mais a fundo. At mesmo na web convencional, existe este problema de compatibilidade entre navegadores. Minimizar estas possibilidades torna o site mais confivel e atraente para o pblico. Para o caso de a deteco falhar, por algum dos motivos citados, o desenvolvedor ainda tem a possibilidade de exibir um contedo enxuto, possivelmente somente textos, exibindo um pequeno aviso e uma opo ao usurio para ignorar o detector de dispositivos. No Projeto X-Gov, estes conceitos foram explorados de forma a exibir ao usurio informaes multimdia sobre o servio eletrnico de agendamento de exames mdicos. Desta forma, o contedo foi criado em diversos formatos de som, vdeo e imagem, alm de ser adaptvel ao tamanho da tela do dispositivo requisitante. Outro exemplo de como foi abordada esta questo pelo projeto explora a tecnologia TouchScreen telas sensveis ao toque presentes em alguns dispositivos mais modernos. A aplicao desenvolvida possui dois tipos de menus: um em forma de cones, favorecendo dispositivos que possuem suporte ao TouchScreen; e outro em forma de lista, favorecendo os demais dispositivos.

No Projeto X-Gov, foram estudadas e aplicadas todas estas diretivas propostas pelo MWBP e por estes autores, obtendo uma navegao simples e clara, sempre ao rodap da pgina. Desta forma, o usurio pode ler o contedo da pgina e, sem precisar retornar a um menu superior, continuar sua navegao. Nota-se que estas prticas constituem um padro de projeto design pattern muito difundido, como nas amostras dos sites do eBay e da Amazon.com da Figura 2.

Figura 1: Menu da aplicao de agendamento de exames mdicos: Apple iPhone (TouchScreen) possui um menu de cones e Nokia N95 8GB possui menu em lista.

Observa-se nas imagens anteriores que o contedo da tela ficou ajustado resoluo do dispositivo automaticamente. A Figura 1 explora a capacidade de TouchScreen do Apple iPhone, sem prejudicar a navegao do Nokia N95 8GB. A utilizao de cones em um menu constitui um design pattern explorado no trabalho de Welie [5], chamado Icon Menu. Segundo o autor, este pattern deve ser usado quando o espao para um menu limitado ou cones podem ser utilizados com muita eficincia, exatamente como o caso de celulares com TouchScreen.
Figura 2: Exemplos dos sites para mdia mvel do eBay (www.ebay.com) e da Amazon.com (www.amazon.com). Em ambos os casos, existe uma barra de navegao vertical ou horizontal ao final do contedo principal da pgina.

3.2 Navegao
Nesta categoria, sero abordadas as questes relacionadas ao formato e localizao de menus, identificao de links e barras de navegao. Neste ponto, o MWBP fornece alguns princpios de design de navegao, recomendando aos desenvolvedores que: Mantenham a navegao da pgina em uma nica direo, preferencialmente vertical Identifiquem os links com cores ou efeitos diferentes do restante do texto Garantam que o usurio atinja o contedo procurado em poucos passos

Este um caso em que se podem estender as diretivas do MWBP, acrescentando os aspectos de menus e posicionamento da barra de navegao, que so assuntos abordados pelos autores citados anteriormente. A experincia mostra que, inclusive em aplicaes web convencional, o usurio est acostumado a ter uma barra de rolagem apenas no sentido vertical. Isto encorajado por estes autores. comum para as pessoas iniciarem uma leitura no topo de uma folha de papel, por exemplo, e terminarem na parte inferior da folha. Processo semelhante acontece na web. O usurio, portanto, espera por uma abordagem neste sentido. Se a navegao for horizontal ou em ambos os sentidos, o usurio ficar perdido e ter problemas em encontrar o que deseja. Se o contedo exibido for muito extenso, recomendvel que o divida em subsees. Apenas neste caso, recomendvel que haja uma listagem dos tpicos com links para os mesmos no incio da pgina. Se isto for feito, devem existir links para o incio da pgina ao final de cada tpico. Esta abordagem caracteriza outro design pattern especificado por Welie [5], chamado To-the-Top Link. Este tipo de navegao chamado pelo MWBP de navegao drill-down e fortemente recomendado, porm nenhum exemplo fornecido e este tipo de navegao exige o cuidado para que a quantidade de tpicos no seja muito extensa. O usurio no

Todas estas diretivas deveriam ser seguidas por todos os desenvolvedores de aplicaes web, no somente os de aplicaes mveis. Diversos autores tratam destas questes, fornecendo anlises de sites existentes e propondo design patterns para resolver estas questes de usabilidade e acessibilidade, como a Little Springs Design, James Kalbach em Designing Web Navigation [13], Jakob Nielsen em Designing Web Usability [9] e Steve Krug em Dont Make Me Think! [14].

deveria ter que rolar a pgina para alcanar o final do ndice, por exemplo.

contedo que podem ser de maior interesse para o usurio, melhorando sua experincia na aplicao. Outras diretivas que podero no se aplicar em dado momento, so as relacionadas ao uso de cookies, frames, JavaScript e tabelas. As melhorias tecnolgicas dos dispositivos j proporcionam, nos modelos mais atuais, a utilizao destes recursos, mostrando que esta uma tendncia dos fabricantes. Para um futuro prximo, nota-se que estas tecnologias j estaro disponveis aos usurios, deixando de ser de grande relevncia para os desenvolvedores.

3.3 Layout e Interatividade

O MWBP explora bastante as questes relacionadas ao layout das pginas. Em geral, as recomendaes so: Evite o uso de elementos grficos e multimdia Teste o site em diferentes resolues de dispositivos O uso de cores no deve ser essencial para o entendimento do contedo Questes relacionadas ao uso de frames, tabelas e imagens.

4. CONCLUSO
Analisando as diretivas do MWBP relacionadas interao homem-computador e definio de interfaces com o usurio, a partir da experincia obtida no Projeto X-Gov e de estudos de outras publicaes sobre o assunto, pode-se concluir que muitas diretivas do MWBP poderiam ser complementadas ou modificadas com: Exemplos de uso Propostas de design patterns para tentar solucionar os problemas conhecidos de interao Atualizao ou modificao, considerando a tecnologia atual da maioria dos dispositivos Abordagens mais aprofundadas com questes relacionadas portabilidade e distribuio de contedo para diferentes dispositivos, inclusive com a definio de um padro no trfego e armazenamento de tais informaes Explanaes mais detalhadas sobre cada uma das diretivas, de modo que o texto se torne mais didtico

Segundo o MWBP, a utilizao de imagens e outros elementos multimdia em uma aplicao web mobile devem ser evitados, pois gera um aumento no trfego de informaes o que pode acarretar maiores custos para o usurio e maior espera de carregamento dos elementos. No entanto, com o avano da tecnologia 3G, melhorias no desempenho de hardware dos dispositivos e na qualidade dos navegadores permitem que estes elementos sejam utilizados. Nossa experincia no Projeto X-Gov mostrou que pequenos vdeos e sons podem ser carregados em curto intervalo de tempo utilizando conexo 3G ou wireless local, alm disto, as questes de portabilidade j discutidas anteriormente so capazes de resolver os problemas de exibio de contedo em diversos aparelhos. O tamanho ou resoluo da tela uma questo abordada por muitos autores. Mtodos de ampliao de trechos da pgina [15] ou mecanismos de deteco de resoluo de tela e adaptao do contedo em tempo de execuo so abordagens bastante usuais. O desenvolvedor deve estar atento a estas diferenas. Os aparelhos possuem resolues muitos distintas. Segundo a base de dados da DeviceAtlas, grande parte dos dispositivos trabalham com a resoluo de 280x120 pixels, no entanto h dados de diferentes dispositivos, mostrando a existncia de pelo menos outros 13 tamanhos possveis de resoluo. Por este motivo altamente recomendvel que a aplicao mvel seja flexvel quanto s medidas e adaptvel ao dispositivo do usurio, utilizando ferramentas de deteco e adaptao de contedo. Com relao ao uso de cores, o MWBP possui demasiada cautela. verdadeira a afirmao de que existem aparelhos celulares sem suporte a cores. No entanto, segundo a base de dados da DeviceAtlas, a grande maioria dos dispositivos possui monitores coloridos e navegadores com suporte a estes recursos. Alm disto, com o avano da tecnologia de celulares, percebe-se uma tendncia no desenvolvimento de aparelhos cada vez mais poderosos graficamente. Este um exemplo de diretiva abordada pelo W3C que tende a se tornar obsoleta, devido ao avano tecnolgico, em curto espao de tempo. No Projeto X-Gov, o uso de cores foi tratado como um elemento de fundamental importncia para a navegao e obteno de um layout claro da aplicao. Cores ajudam a identificao de elementos da navegao, como links, e destacam trechos de

No projeto X-Gov, o contedo deve ser distribudo a grandes populaes, desta forma, a utilizao de diretivas de boas prticas, princpios de usabilidade e design patterns de navegao para mdia mvel tornou-se fundamental. O MWBP poderia complementar suas diretivas de modo que as questes mais fundamentais com relao usabilidade em aplicaes mobile tivessem maior relevncia, face s diretivas relacionadas ao uso de determinadas tecnologias, as quais tendem a se tornar obsoletas com o passar do tempo. Os avanos da tecnologia dos dispositivos e dos navegadores mveis junto s tcnicas propostas de portabilidade supriro a necessidade destes cuidados em algum momento, de modo que a experincia do usurio na aplicao tornar-se- o problema mais relevante para os desenvolvedores e deve ser o foco das diretivas de boas prticas do MWBP. Design Patterns so uma excelente forma de abordar esta questo de um modo timeless, ou seja, de um modo que as diretivas no sejam comprometidas pelo avano tecnolgico extremamente rpido destes dispositivos e sejam mais focadas nos conceitos de design de navegao e usabilidade.

5. AGRADECIMENTOS
Este trabalho e o Projeto X-Gov so financiados pelo convnio Fapesp/MSR no. 2007/54488-3.

6. REFERNCIAS
[1] World Wide Web Consortium. 2008. Mobile Web Best
Practices 1.0, http://www.w3.org/TR/mobile-bp/

[10] WURFL. http://wurfl.sourceforge.net/ [11] DeviceAtlas. http://deviceatlas.com/ [12] Codeplex. Mobile Device Browser File,
http://mdbf.codeplex.com/

[2] Boumans, J. 2004. Crossmedia - e-content report 8,

ACTeN - Anticipating Content Technology Needs.

[3] Nokia. 2005. S60 Platform: Designing XHTML Mobile

Profile Content, Version 1.4.

[13] Kalbach, J. 2007. Designing Web Navigation: Optimizing

the User Experience. O'Reilly Media, Inc.

[4] Tidwell, J. 2005. Designing Interfaces - Patterns for Effective

Interaction Design, O'Reilly Media.

[14] Krug, S. 2005. Don't Make Me Think: A Common Sense

Approach to Web Usability, 2nd Edition. New Riders Press.

[5] Welie, R. http://www.welie.com/ [6] Little Springs Design, http://patterns.littlespringsdesign.com [7] mobiForge. http://mobiforge.com/ [8] Little Springs Design. Mobilize, Dont Miniaturize.
http://www.littlespringsdesign.com/blog/resources/mobilize/

[15] Baudisch, P., Xie, X., Wang, C., W. Ma. 2004. Collapse-tozoom: viewing web pages on small screen devices by interactively removing irrelevant content, Proceedings of the 17th annual ACM symposium on User interface software and technology, Santa Fe, NM, USA: ACM, pp. 91-94.

[9] Nielsen, J. 1999. Designing Web Usability. Peachpit Press.