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.

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 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, em que a tela se mantem estruturada para tamanhos que variam de 5.5 a 21 polegadas a tamanhos maiores. 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 modelos diferentes.

Site com URL diferente, com versão preparada para acesso móvel. Pode-se assim 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 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 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 dos usuários para verificar se o desenvolvimento e a manutenção dedicados vale a pena.

Fatores críticos

Interface limpa e despojada, sem elementos em excesso. Abas e menus verticais ajudam a economizar o espaço da tela. Em casos como de ledores de livros, a interface pode desaparecer para o leitor se concentrar 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 rolagens de tela.

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

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

É 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 priorizar algumas configurações – sem inviabilizar o acesso das demais.

É importante testar o resultado no máximo possível de situações, seja nos próprios dispositivos e em emuladores, 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.

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

Código de cores que identifique funcionalidades e facilite a identificação. É importante também facilitar o acesso de usuários que não identificam facilmente esses 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 a funcionalidade dos elementos, para que sejam vistos e diferenciados em diferentes iluminações e em monitores com diferentes ajustes de brilho.

(Texto publicado em 20.9.2009. Atualizado em 10.2.2014)