Análise das diretivas de boas práticas do W3C no aspecto de interação homem-computador e interfaces de usuário para mídia móvel

Mauricio Cirelli Lucia Filgueiras Flávio Miyamaru Escola Politécnica da Universidade de São Paulo {cirelli.mauricio,lfilguei,fmiyamaru}@gmail.com

RESUMO
Neste artigo serão apresentados alguns comentários às diretivas de boas práticas de desenvolvimento web para mídia móvel, publicadas em Julho de 2008 pelo W3C. O foco desta análise será a interação homem-computador, de forma que abordaremos as recomendações que dizem respeito à interação, layout, apresentação e navegação da aplicação web, baseando-se na experiência que tivemos ao desenvolver aplicações web para serviços de governo eletrônico crossmedia.

A discussão deste artigo seguirá a seguinte linha: na seção 2, será apresentado um breve resumo sobre referências bibliográficas relacionadas a guias de boas praticas para projeto de interfaces. Em seguida, na seção 3, as diretivas selecionadas são analisadas e propostas de complementação são sugeridas. Por fim, na seção 4 concluímos o estudo realizado.

2. GUIAS DE BOAS PRÁTICAS
Diversos autores desenvolveram trabalhos a respeito destes aspectos de interação em mídia móvel. A Nokia [3] desenvolveu um trabalho específico para os aparelhos da série S60, que poderiam ser estendidos para qualquer aplicação móvel. Uma forma de representar recomendações de projeto é a especificação de design patterns, que são soluções para problemas recorrentes. A literatura é rica em patterns sendo alguns deles específicos para interação, como o trabalho de Jenifer Tidwell [4]; outros com escopo mais específico na interação sobre dispositivos móveis como o trabalho de van Welie [5]. Outra contribuição nesta área foi dada pela Little Springs Design, o qual amplia o conceito de mobilidade, desenvolvendo diversos padrões de projeto – design patterns – para o ambiente móvel [6]. Estes padrões levam em consideração aspectos de interface, usabilidade e portabilidade, que são fundamentais no desenvolvimento de aplicações web mobile, além de ter escrito alguns artigos sobre as diferenças entre aplicações web convencionais e web móvel. Além disto, muitos fóruns reúnem discussões relevantes aos desenvolvedores de aplicações de mídia móvel, com uma boa quantidade de dicas e exemplos e que não foram abordadas pelo MWBP em seu trabalho. Um deles é o mobiForge [7], o qual disponibiliza boas discussões a respeito do estado da arte do desenvolvimento e das tecnologias utilizadas em celulares além de excelentes tutoriais para quem está se iniciando no assunto. O objetivo da MWBP é reunir todas estas referências de forma a contemplar os principais aspectos que devem ser tratados pelos desenvolvedores.

Palavras-Chave
Mobile, web, interação homem-computador, boas práticas, interface de usuário

1. INTRODUÇÃO
Em Julho de 2009, o W3C publicou sua última versão do Mobile Web Best Practices – MWBP [1], o qual apresenta recomendações de desenvolvimento para 60 itens, podendo ser subdivididos em algumas categorias, como navegação, tecnologia de browsers e dispositivos, layout, cores, entre outros. A literatura é rica em recomendações de projeto, que são ú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 comentários sobre os itens mais relevantes da lista e que dizem respeito às questões de interface e navegação web em dispositivos móveis. Este trabalho baseia-se na experiência de desenvolvimento obtida durante a elaboração de aplicações web para dispositivos móveis no Projeto X-GOV. O Projeto X-GOV objetiva desenvolver um framework capaz de facilitar o desenvolvimento de aplicações de serviços de governo eletrônico em mídia cruzada – crossmedia [2]. As mídias escolhidas para o projeto foram Web, Televisão Digital Interativa e Web Mobile. Por se tratar de serviços de governo eletrônico, estas aplicações deveriam considerar requisitos de usabilidade, portabilidade e acessibilidade para obter alcance de uma grande população. Para tanto, procurou-se diretivas de boas práticas de desenvolvimento de forma a atender aos principais requisitos.

3. DISCUSSÃO DAS DIRETIVAS
De todas as diretivas apontadas pelo MWBP, iremos abordar as relacionadas aos seguintes temas: • Portabilidade

existem apenas duas diretivas que tratam das diferenças de características entre os dispositivos. pois. ela deseja saber a situação do vôo. Durante o desenvolvimento do Projeto X-Gov. Existem algumas ferramentas que podem ser utilizadas pelos desenvolvedores para atender a esta necessidade e. tais como: atrasos. conexão em qualquer instante ou local e tecnologias como TouchScreen – telas sensíveis ao toque . Esta mensagem poderia ser lida a qualquer momento e de qualquer lugar. 3. Após receber um SMS. dificilmente. Estas diretivas tratam de forma superficial uma questão de vital importância para uma aplicação. A primeira é uma abordagem muito semelhante à proposta pela Little Springs Design em seu artigo “Mobilize. No projeto desenvolvido pelo grupo de pesquisa explorou-se o conceito de mobilidade em um sistema de agendamento de exame médico. significa utilizar todos recursos nele disponíveis. Neste momento o usuário poderia do lugar em que estivesse. em tempo de execução. a partir de dados contidos no cabeçalho da requisição HTTP (HyperText Transfer Protocol) feita pelos dispositivos. portanto. foram utilizadas técnicas de detecção das características dos dispositivos visitantes para elaborar um conteúdo. Don't Miniaturize” [8]. após acessar um site em que o conteúdo carregado não pôde ser exibido corretamente. sempre que disponíveis. Neste trabalho. tanto visuais quanto de processamento. Um aparelho móvel está conectado o tempo todo e pode ser acessado a qualquer momento de qualquer lugar e em quaisquer situações. Figura 1: Formulário de busca por resultados de um exame médico. com isto. Exemplificando. como a mobilidade. exibida em um Apple iPhone. tais como: • • WURFL [10] DeviceAtlas [11] . Para tanto. Elas sugerem que o conteúdo a ser mostrado seja enviado em um formato que o dispositivo do usuário suporte. trazendo ao usuário a informação de que os resultados do exame realizado estavam concluídos. como Flash ou JavaScript. enquanto a aplicação móvel desta empresa deveria fornecer fácil acesso às informações do momento. algumas diretivas tendem a ficarem ultrapassadas na medida em que a tecnologia evolui e os aparelhos celulares ganham novos recursos. promover sua aplicação para uma maior quantidade de visitantes. Além disto. pois existem aparelhos e navegadores que não possuem suporte para elas. Deve-se considerar o uso de envio e recebimento de mensagens de texto. foi necessária a criação deste conteúdo em diferentes formatos. Em relação à segunda maneira. Esta característica deve ser explorada pelos desenvolvedores ao projetarem suas aplicações. em conjunto com uma base de dados adequada. horários e previsões de chegada. que o usuário pudesse visualizar em seu aparelho. Algumas recomendações citam que se deve ter cuidado ao utilizar uma determinada tecnologia. são capazes de identificar o dispositivo requisitante e suas características. A aplicação web da companhia aérea disponibiliza ferramentas para compra de passagens. os autores mostram um caso fictício de uma viagem.1 Portabilidade A portabilidade diz respeito à adequação do conteúdo e das funcionalidades da aplicação às diferentes características dos dispositivos móveis e do aproveitamento destas características para promover uma satisfatória experiência para o usuário. O MWBP aborda esta questão de duas maneiras: a questão de explorar as capacidades do dispositivo e a questão de personalizar o conteúdo de acordo com o aparelho requisitante. Além disto. estas diretivas são desencorajadas a partir do momento que o MWBP aponta diversas possíveis falhas desta abordagem.• • Navegação Layout e Interatividade Como poderemos ver. o usuário fica sabendo que os resultados de seu exame estão prontos para ser retirados. Isto foi feito com auxilio da tecnologia de mensagens instantâneas (SMS) presente em quase todos os dispositivos atuais. acessar o serviço eletrônico de agendamento e verificar a sua situação de saúde. não restringido-se apenas à uma interface Web. No caminho. Este cabeçalho contém informações que. notou-se a necessidade de distribuir diversos conteúdos em diferentes formatos de forma a atingir a maioria da população. o visitante irá retornar [9]. na qual uma mulher está a caminho do aeroporto para receber seu marido que volta de um compromisso exterior. os autores propõem que a aplicação móvel deve ser projetada especificamente para a mídia móvel e deve se aproveitar dos benefícios trazidos pela mobilidade dos dispositivos. Explorar as capacidades do dispositivo.

Para o caso de a detecção falhar. o MWBP fornece poucos princípios de design de navegação. existe este problema de compatibilidade entre navegadores. este pattern deve ser usado quando o espaço para um menu é limitado ou ícones podem ser utilizados com muita eficiência. favorecendo dispositivos que possuem suporte ao TouchScreen. 3. enquanto a Figura 3 explora a capacidade de TouchScreen do Apple iPhone. exibindo um pequeno aviso e uma opção ao usuário para ignorar o detector de dispositivos. chamado Icon Menu. possivelmente somente textos. identificação de links e barras de navegação. serão abordadas as questões relacionadas ao formato e localização de menus. James Kalbach em “Designing Web Navigation” [13]. por algum dos motivos citados. fornecendo análises de sites existentes e propondo design patterns para resolver estas questões de usabilidade e acessibilidade.2 Navegação Nesta categoria. .• Mobile Device Browser File [12] Todas estas ferramentas são semelhantes e caracterizam-se por possuir um banco de dados o qual armazena características físicas e tecnológicas de muitos (milhares) de aparelhos e relaciona-as com o cabeçalho da requisição HTTP que o dispositivo realiza ao acessar uma aplicação web móvel. Minimizar estas possibilidades torna o site mais confiável e atraente para o público. o desenvolvedor ainda tem a possibilidade de exibir um conteúdo enxuto. Todas estas diretivas deveriam ser seguidas por todos os desenvolvedores de aplicações web. sem prejudicar a navegação do Nokia N95 8GB. preferencialmente vertical Identifiquem os links com cores ou efeitos diferentes do restante do texto Garantam que o usuário atinja o conteúdo procurado em poucos passos • Outro exemplo de como foi abordada esta questão pelo projeto explora a tecnologia TouchScreen – telas sensíveis ao toque – presentes em alguns dispositivos mais modernos. além de ser adaptável ao tamanho da tela do dispositivo requisitante. A utilização de ícones em um menu constitui um design pattern explorado no trabalho de Welie [5]. Observa-se nas imagens anteriores que o conteúdo da tela ficou ajustado à resolução do dispositivo automaticamente. Até mesmo na web convencional. A Figura 2 ilustra algumas das diferentes capacidades tecnológicas de cada um dos dispositivos mencionados. Neste ponto. esta prática deve ser encorajada pelo MWBP e investigada mais a fundo. e outro em forma de lista. informações incorretas na requisição ou impossibilidade de reconhecimento do requisitante. estes conceitos foram explorados de forma a exibir ao usuário informações multimídia sobre o serviço eletrônico de agendamento de exames médicos. Apesar das falhas que esta abordagem possa apresentar como cabeçalhos incompletos. Desta forma. Figura 3: Menu da aplicação de agendamento de exames médicos: Apple iPhone (TouchScreen) possui um menu de ícones e Nokia N95 8GB possui menu em lista. vídeo e imagem. Segundo o autor. como a Little Springs Design. exatamente como o caso de celulares com TouchScreen. Desta forma é possível que o desenvolvedor personalize o conteúdo de acordo com a característica do dispositivo utilizado pelo visitante ao acessar sua aplicação. o conteúdo foi criado em diversos formatos de som. recomendando aos desenvolvedores que: • • Figura 2: Características detectadas de um Apple iPhone e de um Nokia N95 8GB Mantenham a navegação da página em uma única direção. não somente os de aplicações móveis. No Projeto X-Gov. favorecendo os demais dispositivos. Diversos autores tratam destas questões. A aplicação desenvolvida possui dois tipos de menus: um em forma de ícones.

existe uma barra de navegação – vertical ou horizontal – ao final do conteúdo principal da página. espera por uma abordagem neste sentido.Jakob Nielsen em “Designing Web Usability” [9] e Steve Krug em “Don’t Make Me Think!” [14].com® (www. segundo a base de dados da DeviceAtlas. inclusive em aplicações web convencional. 3. tabelas e imagens. acrescentando aspectos fundamentais não mencionados ou tratados superficialmente. é recomendável que o divida em subseções. A experiência mostra que. em curto espaço de tempo. continuar sua navegação. Processo semelhante acontece na web. as recomendações são: • • • • Evite o uso de elementos gráficos e multimídia Teste o site em diferentes resoluções de dispositivos O uso de cores não deve ser essencial para o entendimento do conteúdo Questões relacionadas ao uso de frames. o usuário está acostumado a ter uma barra de rolagem apenas no sentido vertical. O tamanho ou resolução da tela é uma questão abordada por muitos autores. no entanto há dados de diferentes dispositivos. Métodos de ampliação de trechos da página [15] ou mecanismos de detecção de resolução de tela e adaptação do conteúdo em tempo de execução são abordagens bastante usuais. Figura 4: Exemplos dos sites para mídia móvel do eBay® (www. o usuário pode ler o conteúdo da página e. sempre ao rodapé da página. melhorias no desempenho de hardware dos dispositivos e na qualidade dos navegadores permitem que estes elementos sejam utilizados. Se o conteúdo exibido for muito extenso. Por este motivo é altamente recomendável que sua aplicação móvel seja flexível quanto às medidas e adaptável ao dispositivo do usuário. a utilização de imagens e outros elementos multimídia em uma aplicação web mobile devem ser evitados. Apenas neste caso. com o avanço da tecnologia 3G. Com relação ao uso de cores. pois gera um aumento no tráfego de informações o que pode acarretar maiores custos para o usuário e maior espera de carregamento dos elementos. Este tipo de navegação é chamado pelo MWBP de navegação drill-down e é fortemente recomendado. que são assuntos muito abordados pelos autores citados anteriormente. como a questão de menus e o posicionamento da barra de navegação. as questões de portabilidade já discutidas anteriormente são capazes de resolver os problemas de exibição de conteúdo em diversos aparelhos. O usuário não deveria ter que rolar a página para alcançar o final do índice. com o avanço tecnológico.com. Pode-se estender as diretivas do MWBP. o usuário ficará perdido e terá problemas em encontrar o que deseja. por exemplo. o MWBP possui demasiada cautela. e terminarem na parte inferior da folha. Esta abordagem caracteriza outro design pattern especificado por Welie [5]. Segundo a base de dados da DeviceAtlas. com o avanço da tecnologia de celulares. Se isto for feito. percebe-se uma tendência no desenvolvimento de aparelhos cada vez mais poderosos graficamente. Se a navegação for horizontal ou em ambos os sentidos. portanto.amazon. Este é um exemplo de diretiva abordada pelo W3C que tende a se tornar obsoleta. grande parte dos dispositivos trabalham com a resolução de 280x120 pixels. No Projeto X-Gov. No entanto. é recomendável que haja uma listagem dos tópicos com links para os mesmos no início da página. Nota-se que estas práticas constituem um padrão de projeto – design pattern – muito difundido.3 Layout e Interatividade O MWBP explora bastante as questões relacionadas ao layout das páginas. porém nenhum exemplo é fornecido e este tipo de navegação exige o cuidado para que a quantidade de tópicos não seja muito extensa. utilizando ferramentas de detecção e adaptação de conteúdo. foram estudadas e aplicadas todas estas diretivas propostas pelo MWBP e por estes autores. O desenvolvedor deve estar atento a estas diferenças. a grande maioria dos dispositivos possui monitores coloridos e navegadores com suporte a estes recursos. Além disto. Nossa experiência no Projeto X-Gov mostrou que pequenos vídeos e sons podem ser carregados em curto intervalo de tempo utilizando conexão 3G ou wireless local. Em geral. além disto. obtendo uma navegação simples e clara. chamado To-the-Top Link. É verdadeira a afirmação de que existem aparelhos celulares sem suporte a cores.ebay. É comum para as pessoas iniciarem uma leitura no topo de uma folha de papel. Segundo o MWBP. O usuário. Isto é encorajado por estes autores. No entanto.com) e da Amazon. devem existir links para o início da página ao final de cada tópico. Os aparelhos possuem resoluções muitos distintas. sem precisar retornar a um menu superior. mostrando a existência de pelo menos outros 13 tamanhos possíveis de resolução. . por exemplo. Em ambos os casos. Desta forma. como nas amostras dos sites do eBay e da Amazon.com).

Crossmedia .com/blog/resources/mobilize/ [9] WURFL. Designing Interfaces . Don’t Miniaturize. [4] Tidwell. princípios de usabilidade e design patterns de navegação para mídia móvel tornou-se fundamental. Don't Make Me Think: A Common Sense Approach to Web Usability. C. desta forma. Designing Web Navigation: Optimizing the User Experience. http://deviceatlas. 1999. http://www. Xie. 2007/54488-3. 91-94. Proceedings of the 17th annual ACM symposium on User interface software and technology. Mobile Device Browser File. como links. considerando a tecnologia atual da maioria dos dispositivos Abordagens mais aprofundadas com questões relacionadas à portabilidade e distribuição de conteúdo para diferentes dispositivos. as quais tendem a se tornar obsoletas com o passar do tempo. S60 Platform: Designing XHTML Mobile Profile Content. frames.org/TR/mobile-bp/ [2] Boumans. Os avanços da tecnologia dos dispositivos e dos navegadores móveis junto às técnicas propostas de portabilidade suprirão a necessidade destes cuidados em algum momento.sourceforge. O MWBP poderia complementar suas diretivas de modo que as questões mais fundamentais com relação à usabilidade em aplicações mobile tivessem maior relevância.com/ [8] Little Springs Design. Collapse-tozoom: viewing web pages on small screen devices by interactively removing irrelevant content. USA: ACM. 6. a partir da experiência obtida no Projeto X-Gov e de estudos de outras publicações sobre o assunto. http://patterns. ou seja. http://www. 2005. o uso de cores foi tratado como um elemento de fundamental importância para a navegação e obtenção de um layout claro da aplicação. 2008. CONCLUSÃO Analisando as diretivas do MWBP relacionadas à interação homem-computador e à definição de interfaces com o usuário.w3. mostrando que esta é uma tendência dos fabricantes. 2005. 5. http://wurfl. Ma.welie. • [13] Nielsen.No Projeto X-Gov. nos modelos mais atuais. pp.com/ [6] Little Springs Design.. 2004. Cores ajudam a identificação de elementos da navegação. NM. W. de modo que a experiência do usuário na aplicação tornar-se-á o problema mais relevante para os desenvolvedores e deve ser o foco das diretivas [15] Baudisch. S. deixando de ser de grande relevância para os desenvolvedores. http://www. http://mobiforge. P. de boas práticas do MWBP. de modo que o texto se torne mais didático [3] Nokia.com [7] mobiForge.Anticipating Content Technology Needs. o conteúdo deve ser distribuído a grandes populações. 2004. O'Reilly Media.. J.net/ [10] DeviceAtlas.. AGRADECIMENTOS Este trabalho e o Projeto X-Gov são financiados pelo convênio Fapesp/MSR no. J. são as relacionadas ao uso de Cookies. [14] Krug. de um modo que as diretivas não sejam comprometidas pelo avanço tecnológico extremamente rápido destes dispositivos e sejam mais focadas nos conceitos de design de navegação e usabilidade. As melhorias tecnológicas dos dispositivos já proporcionam. Mobile Web Best Practices 1. Designing Web Usability. inclusive com a definição de um padrão no tráfego e armazenamento de tais informações Explanações mais detalhadas sobre cada uma das diretivas. a utilização de diretivas de boas práticas.Patterns for Effective Interaction Design. New Riders Press. a utilização destes recursos. 2nd Edition. Design Patterns são uma excelente forma de abordar esta questão de um modo timeless. [5] Welie. Outras diretivas que poderão não se aplicar em dado momento. 2007.littlespringsdesign. Version 1. No projeto X-Gov.4. melhorando sua experiência na aplicação. Inc. J. JavaScript e tabelas. R. REFERÊNCIAS [1] World Wide Web Consortium.codeplex. nota-se que estas tecnologias já estarão disponíveis para os usuários. ACTeN . 2005.0. 4. Santa Fe.com/ [12] Kalbach. X. Mobilize. http://mdbf. . face às diretivas relacionadas ao uso de determinadas tecnologias. J.Para um futuro próximo. Wang.littlespringsdesign. O'Reilly Media.e-content report 8.com/ [11] Codeplex. e destacam trechos de conteúdo que podem ser de maior interesse para o usuário. Peachpit Press. 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 interação Atualização ou modificação.