Usabilidade

■ O blog Sender11 publica uma pesquisa sobre o uso de resoluções de tela de 400 dispositivos móveis de 2005 a 2008 e resume assim a grande variedade de configurações:

Ao longo dos anos, as diferenças relativas entre os tamanhos das telas aumentou. A diferença entre o tamanho da tela menor (128 de largura x 128 de altura) e a maior (800 x 480) é hoje um fator de 23. Isto significa que a tela de maior tamanho é 23 vezes maior que a tela de menor tamanho.

Podemos ver que as telas menores têm orientação de retrato e as telas maiores tem orientação de paisagem. Entre elas, há os telefones que mudam a orientação da tela e podem funcionar tanto em modo retrato quanto paisagem. De modo geral, o tamanho de resolução dominante é 240 x 320. (1, traduzido para esta citação)

■ Esta diversidade, que reflete a fragmentação do mercado de dispositivos móveis de modo geral, cria problemas muitos específicos para o design de aplicativos e interfaces web. Estes problemas vão desde a criação e publicação de conteúdo, até o enquadramento dos elementos, que eventualmente ficam fora de vista e os usuários não sabem que existem (normalmente não se dispõem a fazer rolagem de tela horizontal, ou horizontal e vertical combinadas, para descobri-los).

Fatores críticos

◊ Manter a interface limpa e despojada, sem elementos demais. Abas e menus verticais por exemplo, ajudam a economizar o espaço da tela.

◊ Selecionar e publicar apenas as informações necessárias, pois o usuário não se atém muito tempo em cada tela.

◊ Evitar o excesso de rolagem de telas, especialmente a rolagem horizontal, de baixa usabilidade mesmo em PCs. A rolagem horizontal e o excesso de rolagem vertical são fatores críticos para a experiência dos usuários destes dispositivos.

A largura de tela deve ir, na medida do possível, desde 240 (verticais) até 800px (horizontais).

Elementos de largura fixa, como logotipos e elementos de identidade visual, por exemplo, não devem ultrapassar a largura de 240px.

◊ Localizar ferramentas de navegação em locais de fácil acesso, de preferência no alto ("hot spot") ou na base de cada tela, com menos opções que na web "fixa", para evitar muitas rolagens de tela.

Botões ou links facilmente localizáveis para voltar à tela Principal (como "migalhas de pão"ou breadcrumbs, por exemplo), bem como barras de navegação e menus drop-down com atalhos bem visíveis, ajudam o deslocamento pelo site.

Também as telas dispostas como slides, com botões laterais para "trazê-las para a frente" funcionam bem nestes dispositivos.

◊ Prever textos de links bem curtos, para que fiquem facilmente localizáveis, legíveis e compreensíveis.

◊ Prover resumos do conteúdo antes da visualização de versões integrais, para que o usuário veja se este realmente o interessa, antes de selecioná-lo. A edição "em camadas" vale tanto para os textos quanto para áudios e vídeos - podem ser publicadas versões resumidas de textos (leads), áudios e vídeos (trailers) que apresentem seleções do conteúdo completo, para que o usuário decida se quer ler/ ouvir/ ver a versão integral.

◊ Caso a interface seja desenhada exclusivamente para dispositivos móveis, evitar a publicação de animações e elementos de navegação em Flash. Estes arquivos são aceitos pelos dispositivos mais novos, mas tendem a ser ignorados pelos dispositivos mais antigos.

Caso a interface web precise ser adaptada para estes dispositivos, prover modos de navegação e compreensão destes elementos de forma que os usuários que não os virem se sintam de alguma forma "amparados".

Estas recomendações seguem as normas de acessibilidade da internet "fixa", com o provimento de informações para os usuários que não conseguem acessar ou ter pleno uso dos arquivos neste formato, bem como de arquivos de filmes e de áudio.

◊ Facilitar o aumento e a diminuição de imagens, sejam fotos publicadas pelos próprios usuários, sejam fotos de produtos à venda.

◊ Criar um código de cores que identifique diferentes funcionalidades, para que os usuários aprendam rapidamente a identificá-las. No entanto, é importante também facilitar o acesso de usuários que não usam dispositivos coloridos ou não conseguem identificar facilmente estes códigos. Ver W3C mobile web best practice (use of color).

◊ Manter alto contraste entre os elementos, para que possam ser vistos e distinguidos em diferentes condições de iluminação e em monitores com diferentes ajustes de brilho.

◊ Já descrevemos em Aplicativos móveis, mas repetimos aqui que é praticamente impossível manter uma visualização ideal em todas as situações de uso móvel (embora muitas configurações possam ser detectadas para a aplicação de CSS adaptado a cada uma), por isto é melhor priorizar algumas configurações - sem, no entanto, inviabilizar o acesso das demais.

É importante testar o resultado no máximo possível de situações, seja nos próprios dispositivos, seja em emuladores como mtld.mobi, dev.mobi, para incluir o maior número possível de usuários.
Texto publicado em 20.9.2009.

Assuntos relacionados
► Aspectos a considerar
► Textos em telas pequenas
► O tamanho do monitor e a resolução de tela
► Testes de usabilidade
► Flexibilidade

Referências sobre design para telas pequenas
► 5 Can't-miss usability tips for mobile website designs (spyrestudios, acesso em 28.3.2010)
1) Mobile screens size trends (Sender11, acesso em 20.9.2009)

Mais informação sobre o assunto (links externos)
► More on mobile screen size trends (blog da mBricks, acesso em 20.9.2009)
► Mobile usability (AlertBox, acesso em 21.7.2009)
► New phone features 'baffle users' (BBC, acesso em 19.1.2009)
► Mobile web design: Be swift about it! (SitePoint, acesso em 15.1.2009)
► Study: Mobile Web sites need improvement (CNet News, acesso em 9.10.2008)
► Designing for the mobile web (SitePoint, acesso em 14.3.2008)

• Quem somos
• Glossário
• Receba o boletim