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.
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.
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.
3. DISCUSSÃO DAS DIRETIVAS
De todas as diretivas apontadas pelo MWBP, iremos abordar as
relacionadas aos seguintes temas:
• Portabilidade
 • Navegação
• Layout e Interatividade
Como poderemos ver, algumas diretivas tendem a ficarem
ultrapassadas na medida em que a tecnologia evolui e os
aparelhos celulares ganham novos recursos, tanto visuais quanto
de processamento.

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

No Projeto X-Gov, 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. Desta forma, o
conteúdo foi criado em diversos formatos de som, vídeo e
imagem, além de ser adaptável ao tamanho da tela do dispositivo
requisitante.
Observa-se nas imagens anteriores que o conteúdo da tela ficou
ajustado à resolução do dispositivo automaticamente. A Figura 2
ilustra algumas das diferentes capacidades tecnológicas de cada
um dos dispositivos mencionados, enquanto a Figura 3 explora a
capacidade de TouchScreen do Apple iPhone, sem prejudicar a
navegação do Nokia N95 8GB.
A utilização 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 espaço
para um menu é limitado ou ícones podem ser utilizados com
muita eficiência, exatamente como o caso de celulares com
TouchScreen.

Figura 2: Características detectadas de um Apple iPhone e de um Nokia
N95 8GB
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. A aplicação
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.
3.2 Navegação
Nesta categoria, serão abordadas as questões relacionadas ao
formato e localização de menus, identificação de links e barras de
navegação.
Neste ponto, o MWBP fornece poucos princípios de design de
navegação, recomendando aos desenvolvedores que:
• Mantenham a navegação da página em uma única
direção, 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
Todas estas diretivas deveriam ser seguidas por todos os
desenvolvedores de aplicações web, não somente os de aplicações
móveis.
Diversos autores tratam destas questões, fornecendo análises de
sites existentes e propondo design patterns para resolver estas
questões 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 “Don’t Make Me Think!” [14].
No Projeto X-Gov, foram estudadas e aplicadas todas estas
diretivas propostas pelo MWBP e por estes autores, obtendo uma
navegação simples e clara, sempre ao rodapé da página. Desta
forma, o usuário pode ler o conteúdo da página e, sem precisar
retornar a um menu superior, continuar sua navegação.
Figura 4: Exemplos dos sites para mídia móvel do eBay®
(www.ebay.com) e da Amazon.com® (www.amazon.com). Em ambos os
casos, existe uma barra de navegação – vertical ou horizontal – ao final do
conteúdo principal da página.
Nota-se que estas práticas constituem um padrão de projeto –
design pattern – muito difundido, como nas amostras dos sites do
eBay e da Amazon.com.
Pode-se estender as diretivas do MWBP, acrescentando aspectos
fundamentais não mencionados ou tratados superficialmente,
como a questão de menus e o posicionamento da barra de
navegação, que são assuntos muito abordados pelos autores
citados anteriormente.
A experiência mostra que, inclusive em aplicações web
convencional, o usuário 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 usuário, portanto,
espera por uma abordagem neste sentido. Se a navegação for
horizontal ou em ambos os sentidos, o usuário ficará perdido e
terá problemas em encontrar o que deseja.
Se o conteúdo exibido for muito extenso, é recomendável que o
divida em subseções. Apenas neste caso, é recomendável que haja
uma listagem dos tópicos com links para os mesmos no início da
página. Se isto for feito, devem existir links para o início da
página ao final de cada tópico. Esta abordagem caracteriza outro
design pattern especificado por Welie [5], chamado To-the-Top
Link.
Este tipo de navegação é chamado pelo MWBP de navegação
drill-down e é fortemente recomendado, 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. O usuário não
deveria ter que rolar a página para alcançar o final do índice, por
exemplo.
3.3 Layout e Interatividade
O MWBP explora bastante as questões relacionadas ao layout das
páginas. Em geral, 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, tabelas e
imagens.
Segundo o MWBP, a utilização de imagens e outros elementos
multimídia em uma aplicação web mobile devem ser evitados,
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.
No entanto, com o avanço da tecnologia 3G, melhorias no
desempenho de hardware dos dispositivos e na qualidade dos
navegadores permitem que estes elementos sejam utilizados.
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, além disto, 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 tamanho ou resolução da tela é uma questão abordada por
muitos autores. 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.
O desenvolvedor deve estar atento a estas diferenças. Os
aparelhos possuem resoluções muitos distintas. Segundo a base de
dados da DeviceAtlas, grande parte dos dispositivos trabalham
com a resolução de 280x120 pixels, no entanto há dados de
diferentes dispositivos, mostrando a existência de pelo menos
outros 13 tamanhos possíveis de resolução. 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,
utilizando ferramentas de detecção e adaptação de conteúdo.
Com relação ao uso de cores, o MWBP possui demasiada cautela.
É verdadeira a afirmação 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. Além disto,
com o avanço da tecnologia de celulares, percebe-se uma
tendência no desenvolvimento de aparelhos cada vez mais
poderosos graficamente. Este é um exemplo de diretiva abordada
pelo W3C que tende a se tornar obsoleta, com o avanço
tecnológico, em curto espaço de tempo.
No Projeto X-Gov, 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. Cores ajudam a identificação de
elementos da navegação, como links, e destacam trechos de
conteúdo que podem ser de maior interesse para o usuário,
melhorando sua experiência na aplicação.
Outras diretivas que poderão não se aplicar em dado momento,
são as relacionadas ao uso de Cookies, frames, JavaScript e
tabelas. As melhorias tecnológicas dos dispositivos já
proporcionam, nos modelos mais atuais, a utilização destes
recursos, mostrando que esta é uma tendência dos fabricantes.Para
um futuro próximo, nota-se que estas tecnologias já estarão
disponíveis para os usuários, deixando de ser de grande relevância
para os desenvolvedores.
4. CONCLUSÃO
Analisando as diretivas do MWBP relacionadas à interação
homem-computador e à definição de interfaces com o usuário, a
partir da experiência obtida no Projeto X-Gov e de estudos de
outras publicações 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 interação
• Atualização ou modificação, 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, 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, de modo que o texto se torne mais didático
No projeto X-Gov, o conteúdo deve ser distribuído a grandes
populações, desta forma, a utilização de diretivas de boas práticas,
princípios de usabilidade e design patterns de navegação para
mídia móvel tornou-se fundamental. 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, face às diretivas relacionadas ao uso de
determinadas tecnologias, as quais tendem a se tornar obsoletas
com o passar do tempo.
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, 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
de boas práticas do MWBP. Design Patterns são uma excelente
forma de abordar esta questão de um modo timeless, ou seja, 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.
5. AGRADECIMENTOS
Este trabalho e o Projeto X-Gov são financiados pelo convênio
Fapesp/MSR no. 2007/54488-3.
6. REFERÊNCIAS
[1] World Wide Web Consortium. 2008. Mobile Web Best
Practices 1.0, http://www.w3.org/TR/mobile-bp/
[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.
[4] Tidwell, J. 2005. Designing Interfaces - Patterns for Effective
Interaction Design, O'Reilly Media.
[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, Don’t Miniaturize.
http://www.littlespringsdesign.com/blog/resources/mobilize/
[9] WURFL. http://wurfl.sourceforge.net/
[10] DeviceAtlas. http://deviceatlas.com/
[11] Codeplex. Mobile Device Browser File,
http://mdbf.codeplex.com/
[12] Kalbach, J. 2007. Designing Web Navigation: Optimizing
the User Experience. O'Reilly Media, Inc.
[13] Nielsen, J. 1999. Designing Web Usability. Peachpit Press.
[14] Krug, S. 2005. Don't Make Me Think: A Common Sense
Approach to Web Usability, 2nd Edition. New Riders Press.
[15] Baudisch, P., Xie, X., Wang, C., W. Ma. 2004. Collapse-to-
zoom: 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.