Usabilidade (dispositivos móveis)
Interfaces web móveis (usabilidade)
Interfaces de uso intuitivo, funcionalidades fáceis de achar, tarefas realizáveis em poucas etapas, facilitam a vida dos usuários e realizam as promessas dos serviços móveis de oferecer informações e produtos para acesso a qualquer hora, em qualquer lugar. Ver também Design para a tela pequena.
As condições de uso da web em dispositivos móveis ainda deixam a desejar em muitos casos. Pesquisa (PDF, 8 páginas) realizada em 2009 pela empresa Gomez, Inc. mostra que 50% dos usuários se dispunham a esperar de 6 a 10 segundos para o site carregar, sendo que 61% não retornariam se não conseguissem acessá-lo. 51% disseram que acessaram sites que paralisaram as telas dos dispositivos ou enviaram mensagens de erro; 48% reclamaram de sites difíceis de ler. De maneira geral, 60% dos usuários tiveram problemas no acesso móvel a web sites.
Aspectos relacionados à usabilidade de interfaces web em celulares
◊ Avaliar a real necessidade de uma versão móvel independente da versão web, o que nem sempre acontece.
◊ Se necessário, desenhar um web site pu app para publicar o conteúdo online nestes dispositivos. Em situações ideais, o melhor seria preparar interfaces separadas para smartphones e aparelhos que usam tecnologia menos avançada. (1)
◊ Criar URLs curtas e fáceis de digitar.
◊ Formatar as páginas para telas com baixas resoluções. Telas como as do iPhone têm largura de 960x640 pixels. Cada tela deve ter autonomia funcional e de conteúdo, pois os usuários só podem abrir uma janela de cada vez. Além disso, se o uso for interrompido por uma ligação ou outra necessidade mais urgente, deve ser fácil retornar à última janela acessada.
Para facilitar o acesso de um web site projetado para PCs, definir uma medida mínima para a largura das colunas em layouts líquidos, que se adaptam à largura das telas. A adaptação irrestrita às telas estreitas dos dispositivos faz com que muitos textos fiquem ilegíveis, especialmente se o layout tiver muitas colunas.
◊ Preparar páginas com tamanho máximo de 20Kb, para acelerar a carregação e prover resposta imediata ao uso. Em operações que exijam espera, o aplicativo deve mostrar o status da operação em progresso.
◊ Usar CSS especialmente nos elementos da interface, como os botões. A separação entre apresentação e conteúdo facilita a adaptação para diversos dispositivos.
◊ Usar as marcações HTML como na web, com H1, H2, H3, divs para layout, marcações de parágrafo para textos, listas para ordenar itens.
◊ Explicar os textos no título, com o mínimo de palavras, 50% a menos do que os publicados na web. Palavras de fácil compreensão, em linguagem familiar à maioria dos usuários, aceleram a leitura. Rótulos curtos para os links também ficam mais facilmente localizáveis, legíveis e compreensíveis.
◊ Evitar imagens decorativas ou anúncios em janelas independentes (pop ups), que congestionam as telas dos aparelhos. As imagens, em JPEG e GIF (sem entrelaçamento, transparência ou animação), devem ficar identificáveis tanto em monitores coloridos quanto em preto e branco.
Nas imagens:
▪ Prover texto alternativo com descrição, para facilitar a leitura antes da carregação (a velocidade de transmissão ainda é lenta).
▪ Não ultrapassar a altura do monitor com uma única imagem (240 x 320 ou 320 x 240 pixels no modo de visualização como paisagem).
▪ Publicar galerias de imagens pequenas ampliáveis, para evitar a carregação de imagens grandes na área de conteúdo.
▪ Usar CSS para imagens em backgroud, que mantém a página estruturada mesmo se o browser não mostrá-las.
▪ Usar CSS em vez de Javascript em rollovers, assim não é preciso carregar duas imagens diferentes para os estados "ativo" e "inativo".
◊ Evitar funcionalidades dependentes de Javascript, pois isto cria problemas de compatibilidade em alguns dispositivos, causando interrupção da transmissão e aumentando o tempo de carregação. O efeito de mouseover não faz sentido em dispositivos móveis.
◊ Restringir a entrada de dados em formulários, devido às limitações dos teclados, que dificultam a escrita de textos longos.
◊ Também em formulários, facilitar a entrada de dados com valores default nos campos de entrada, em menus e caixas de opções, permitindo que o foco mude com o uso das setinhas do teclado.
◊ Usar cores contrastadas, sem muitas sombras e meios tons, em palheta que diferencie bem a funcionalidade dos elementos.
◊ Prover um botão "Voltar ao alto" no pé das páginas para facilitar o acesso à barra de navegação.
É simples e útil criar protótipos rápidos para testar as interfaces móveis, sejam apps ou não. Pode-se usar pequenos protótipos de papel, à semelhança dos usados para projetos web, e realizar testes como se fossem dispositivos de verdade. Testes com protótipos proveem retorno rápido em relação ao que funciona e o que ainda precisa ser aperfeiçoado.
Assuntos relacionados
► Design para telas pequenas
► O tamanho do monitor e a resolução de tela
► Testes
► Testes de usabilidade
► Flexibilidade
Referências sobre interfaces web móveis
► Designing for iPad: Reality check (iA, acesso em 12.4.2010)
1) Mobile web 2009 = Desktop web 1998 (Alextbox, acesso em 20.2.2009)
Mais informação sobre o assunto (links externos)
► Consider these design issues when developing mobile applications (TechRepublic, acesso em 17.7.2006)
► W3CMobile web best practices 1.0 - Documento do W3C sobre o desenvolvimento de aplicativos web para dispositivos móveis. Redigido por profissionais da Ericsson, Google, Nokia, Microsoft, AOL, Microsoft, e desenvolve temas como layout, publicação de conteúdo, preparo de imagens
► Forum Nokia : Usability - Linhas de ação para a usabilidade de aplicativos para dispositivos móveis
► Tech companies agree on mobile web rules (Znet, acesso em 27.6.2006)
