Interfaces de uso intuitivo, funcionalidades fáceis de achar, tarefas com 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.

Aspectos relacionados à usabilidade de interfaces web em celulares

Avaliação da necessidade de uma versão móvel independente da versão web, o que nem sempre acontece. A versão móvel é necessária para a realização de tarefas objetivas (compras, transações bancárias), e menos necessária na publicação de conteúdo editorial ou dissertativo, como notícias ou papers acadêmicos.

De qualquer forma, é importante preservar o acesso à versão web, caso o usuário queira consultar o conteúdo na íntegra, mesmo que, através de design responsivo, se deixe de publicar, para os usuários de dispositivos móveis, barras de navegação duplicadas (no alto e no pé da página), anúncios muito grandes, imagens dispensáveise e alguns recursos interativos.

Telas leves, para acelerar a carregação e prover resposta imediata. Em operações que exijam espera, o aplicativo deve mostrar o status da operação em progresso.

A experiência inicial cria engajamento com os usuários, sem exigir dados e informações que podem ser fornecidos em estágio posterior da interação. Se a primeira tela pede o preenchimento de dados de registro mesmo para quem visita o site pela primeira vez, este pode simplesmente não aceitar fazê-lo e partir para outra opção.

Seleção e publicação das informações e tarefas necessárias, pois o usuário não se atém muito tempo em cada tela. Sites móveis de comércio limitam as informações sobre produtos às que a maioria das pessoas procura. Caso seja necessário acessar mais informações pode-se prover links para a versão desktop do site.

O menor uso de recursos, com menos opções editoriais e funcionais, demanda menos esforço da memória de curto prazo para a compreensão de um ambiente online.

As opções selecionadas podem abrir-se para a exposição progressiva de elementos secundários mais detalhados, que aparecem apenas quando os usuários as solicitam, em camadas mais profundas. Este recurso favorece o aprendizado do uso e diminui a incidência de erros.

Arquitetura da informação que priorize o conteúdo mais importante e facilite a localização de informações secundárias, evitando camadas muito profundas, difíceis de acessar.

Páginas adequadas a telas com baixas resoluções. Telas como as do iPhone têm largura de 960×640 pixels. Cada tela deve ter autonomia funcional e de conteúdo, pois os usuários só podem abrir uma janela por 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 website para desktop, definir uma medida mínima para a largura das colunas em layouts líquidos, que se adaptam à largura das telas (prever pontos de quebra nas larguras 480, menor que 768, maior que 768, entre 769 e 1024, maior que 1024). A adaptação irrestrita às telas estreitas dos dispositivos faz com que muitos textos fiquem ilegíveis, especialmente se o layout tiver mais de uma coluna.

Rolagem de tela restrita ao necessário, 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 320 (verticais) até 1024px (horizontais).

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

Resumos do conteúdo antes da visualização de versões integrais, para que o usuário veja se este 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, para que o usuário decida se quer ler/ ouvir/ ver a versão integral.

Nomes intuitivos e fáceis de achar, em linguagem de fácil compreensão . Na web, URLs curtas e fáceis de digitar.

Textos com links curtos, que descrevam o que os usuários vão encontrar quando tocados e fiquem facilmente localizáveis, legíveis e compreensíveis. No entanto, textos como manchetes de notícias, publicados integralmente, evitam que o usuário acesse telas adicionais apenas para ler o título completo.

Explicação dos 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.

Caso a interface seja desenhada exclusivamente para dispositivos móveis, evitar animações e elementos de navegação em Flash. Estes arquivos são aceitos por alguns dispositivos, mas são ignorados pelos dispositivos da Apple.

Caso a interface web precise ser adaptada para estes dispositivos, prover modos de navegação e compreensão dos elementos para que os usuários 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.

Uso de CSS especialmente nos elementos da interface, como os botões e seus textos. A separação entre apresentação e conteúdo facilita a adaptação para diversos dispositivos.

Uso de marcações HTML como na web, com H1, H2, H3, divs para layout, marcações de parágrafo para textos, listas para ordenar itens.

Evitar imagens decorativas ou anúncios em janelas independentes (pop ups), que congestionam as telas. 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.

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

Poucas funcionalidades dependentes de Javascript, pois podem gerar problemas de compatibilidade, 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.

Restrição da entrada de dados em formulários, devido às limitações dos teclados, que dificultam a escrita de textos longos.

Também em formulários, facilidade de 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.

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.

(Atualizado em 10.1.2012)

 

Referências

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

10 Developer tips to build a responsive website (Infographic) (Read Write Mobile, acesso em 21.4.2013)

5 coisas que aprendi em um projeto mobile-first responsive design para o Google (Fabrício Teixeira, acesso em 23.7.2012)

The mobile context (Mark Kirby, acesso em 20.6.2012)

Designing for iPad: Reality check (iA, acesso em 12.4.2010)

Mobile web 2009 = Desktop web 1998 (Alextbox, acesso em 20.2.2009)

Livro: Designing gestural interfaces – touchscreens and interactive devices, de Dan Saffer. O´Reilly Media, 2008

W3CMobile web best practices – documento do W3C sobre o desenvolvimento de aplicativos para dispositivos móveis

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