Interfaces de uso intuitivo, funcionalidades fáceis de achar, tarefas com poucas etapas, facilitam a vida dos usuários e realizam as promessas de oferecer informações e produtos para acesso a qualquer hora, em qualquer lugar.

Sobre a usabilidade de interfaces de celulares

■ Pode ser preciso criar experiências móvel e de desktop diferentes, o que nem sempre acontece. A versão móvel é prorizada para a realização de tarefas (compras, transações bancárias).

De qualquer forma, é importante preservar o acesso à versão web, caso o usuário queira consultar o conteúdo na íntegra, mesmo que 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áveis e e alguns recursos interativos.

■ Telas leves aceleraram a carregação e provêm 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, mesmo 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 não aceitar e partir para outra opção.

■ Seleção e publicação das informações e tarefas, 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 maiori 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 quando os usuários as solicitam, em camadas mais profundas. Este recurso favorece o aprendizado do uso e diminui a incidência de erros.

■ A arquitetura da informação prioriza o conteúdo mais importante e facilita a localização de informações secundárias, evitando camadas muito profundas, difíceis de acessar.

■ As telas são adequadas a telas ao pequeno tamanho. 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 necessidade mais urgente, deve ser fácil retornar à última janela acessada.

■ A rolagem de tela é restrita ao necessário, especialmente a horizontal. A rolagem horizontal e o excesso de rolagem vertical são críticos para a experiência dos usuários.

■ Apresentação de resumos do conteúdo antes de mostrar 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, descritivos, facilmente localizáveis, legíveis. No entanto, textos como manchetes de notícias, publicadas 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 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 exclusiva para dispositivos móveis, evitar animações nos elementos de navegação.

Caso a interface web precise ser adaptada para estes dispositivos, prover navegação e compreensão dos elementos para o suporte dos os usuários.

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

Nas imagens:

■ 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 tela estruturada mesmo se o browser/programa 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”.

■ Restrição de 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, apps ou não. Pode-se usar pequenos protótipos de papel, como os 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

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