Layouts não adaptados para as telas pequenas, bem como para o uso em deslocamento ou em locais de passagem, dificultam o uso das interfaces em dispositivos móveis. A adequação do conteúdo a diversas resoluções, tamanhos e orientações das telas faz parte do projeto destas interfaces. Ver também Interface web móveis (usabilidade).

A diversidade, que reflete a fragmentação do mercado de dispositivos móveis, cria problemas para o design de aplicativos e interfaces web para pequenas telas. Para enfrentá-los, hoje procura-se enfrentar a grande diversidade de resoluções e dispositivos, apresentando conteúdo móvel de quatro modos diferentes:

Site com mesmo HTML que a versão desktop, por meio de design responsivo – O design responsivo permite que a tela se mantenha estruturada para tamanhos que variam de 5.5 a 21 polegadas a tamanhos maiores. Neste caso, os recursos e conteúdo do site para desktop são acessáveis integralmente no site móvel. Para sites com notícias e públicos especializados, por exemplo, o público talvez precise acessar o conteúdo em sua versão intergral.

Site com a mesma URL, usando HTML e CSS diferentes.

Site com URL diferente, com versão preparada especialmente para acesso móvel (2) – Ou seja, um website ou aplicativo desenhado para uso por dispositivos móveis. Pode-se com esta solução usar mais recursos nativos dos dispositivos, como relógio ou GPS.

Para serviços adequados a uso em movimento, como a leitura de notícias ou a postagem em redes sociais, a criação de sites dedicados para smartphones, com menos recursos e menos conteúdo que a versão desktop e adaptação ao toque, ajuda o uso.

Já os aplicativos são opções que priorizam a experiência de uso, especialmente dos mais fiéis, além do uso de browsers, embora não sejam indicados para todos os casos. É importante acompanhar os hábitos da maioria dos usuários para verificar se o desenvolvimento dedicado realmente vale a pena, inclusive o custo de atualização de vários canais.

Fatores críticos

Interface limpa e despojada, sem elementos em excesso. Abas e menus verticais por exemplo, ajudam a economizar o espaço da tela. Em alguns casos, como de ledores de livros, a interface pode desaparecer para o leitor se concentrar melhor na leitura.

 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”, 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.

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 responsivo adaptado a cada uma), por isto é melhor a priorização de 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 Prism, para incluir o maior número possível de usuários.

Alvos de toque, como botões e links, com tamanhos adequados, de modo a evitar erros. Jakob Nielsen define o tamanho de 1 x 1cm como o ideal para o tato.(3)

Menor tamanho e quantidade de imagens, facilitando o aumento e a diminuição de imagens com a mão, sejam fotos publicadas pelos usuários, sejam fotos de produtos.

Código de cores que identifique funcionalidades e facilite sua identificação. No entanto, é importante também facilitar o acesso de usuários que não conseguem identificar facilmente estes códigos. Ver W3C mobile web best practice (use of color).

Uso de cores contrastadas para os elementos, sem muitas sombras e meios tons, em palheta que diferencie bem a funcionalidade dos elementos,para que sejam vistos e diferenciados em diferentes condições de iluminação e em monitores com diferentes ajustes de brilho.

(Texto publicado em 20.9.2009. Atualizado em 10.2.2014)

 

Referências

3) Livro: Mobile Usabilitys, Jakob Nielsen e Raluca Budiu. Berkeley: New Riders, 2013

Multi-device layout patterns, de Luke Wroblewski (LukeW, acesso em 6.7.2012)

2) The New Mobile SEO Strategy (Search Engine Watch, acesso em 6.7.2012)

Screen size matters, dictating primary use of smart mobile devices, de Rick Vogelei (In-Stat, acesso em 12.1.2012)

1) Mobile screens size trends (Sender11, acesso em 20.9.2009)

Off canvas layouts (Zurb, acesso em 29.6.2012)

Mobile usability (AlertBox, acesso em 21.7.2009)

W3C Mobile Checker – ferramenta para avaliação de sites móveis