4 pontos para se pensar ao projetar interfaces mobile

No Brasil, a acesso à internet pelo celular já ultrapassa o acesso através do desktop. É o que mostra a pesquisa The Connected Consumer Survey 2016, do Google: 59% afirmaram que o smartphone é seu dispositivo prioritário para navegar. Portanto, é imprescindível prestar muita atenção aos detalhes que garantem a qualidade da experiência do usuário no mobile.

A diferença do tamanho da tela já seria o suficiente para justificar todo um conjunto de diretrizes e boas práticas específicas para o design de interação no mobile. Mas há também outras características importantes que precisam ser levadas em consideração para o desenvolvimento de interfaces para o celular. Este post inaugura uma série em que vamos explorar em profundidade tudo que deve ser pensado para garantir uma excelente experiência do usuário no mobile.

Começamos falando sobre alguns pontos de partida para projetos responsivos:

Projete interações de acordo com os contextos de uso

Houve um tempo em que os sites eram projetados tendo em vista o usuário sentado na frente do computador: tela grande, teclado e mouse. Agora, o usuário não está mais lá parado – enquanto navega no Facebook, fala no WhatsApp ou consulta um mapa no Waze, ele está no carro, no metrô, digitando enquanto dirige (não pode!) ou conversando, caminhando na rua, fazendo compras, fazendo as unhas.

Antes de começar a projetar as interações no mobile convém dar uma olhada em pesquisas que avaliam a forma como as pessoas usam seus celulares (Luke Wroblewsk e Jakob Nielsen costumam publicar em seus sites dados interessantes sobre isso). Ter em mente os principais contextos de uso facilita o desenho de interações e ferramentas úteis e que façam sentido – tanto para o usuário quanto para os objetivos de negócio.

Por outro lado, também não tente “editar” o conteúdo ou funcionalidades de um site só porque a tela é pequena e os usuários vão estar fazendo outra coisa durante a navegação. Se algo não é importante para a interface do celular, provavelmente não é importante para nada e não precisa estar nem na versão desktop.

Affordance – ou: seus cliques têm cara de links?

Como diferenciar elementos clicáveis dos não clicáveis nas interfaces mobile? No desktop, quando passamos o cursor sobre uma área de clique, há (ou deveria haver) uma indicação clara de que ali tem alguma coisa. Mas como indicar isso no mobile – que não tem mouse, e portanto não tem mouseover? Botou o dedo em cima, foi.

Ou não foi. Já fizemos testes nos quais os usuários tocavam em todos os quadrados com ícones, ou em todas as bolinhas que viam, procurando um clique. Geralmente, eles param de tocar em tudo quando descobrem o padrão utilizado na interface para essa indicação.

É preciso deixar evidente o que é clicável sem a necessidade de ação prévia – utilizando cor ou outros elementos de design. Ou através do texto, com instruções e calls to action claros.

(Esse artigo traz dicas sobre a affordance em mobile).

Área de clique: não faça ninguém pensar que tem dedos gordos

Os elementos gráficos que acionam interações precisam ser maiores no mobile. No desktop, você tem o ponteiro do mouse para fazer coisas; no celular, o seu dedo, consideravelmente maior que a seta do mouse, faz esse papel – o que exige botões também maiores.

Na Saiba+, quando testamos interfaces adaptadas para o mobile, mas que ainda têm campos que não foram projetados para interações com o dedo, escutamos com frequência frases como “meu dedo é gordinho, por isso não consigo”…

Formulários têm que ser inteligentes

O segredo de todo o formulário, em qualquer dispositivo, é: ser curto e ter recursos que facilitem o preenchimento. Quando o usuário realiza essa ação na tela do celular, essas duas diretrizes se tornam ainda mais importantes.

Ofereça, sem moderação, recursos como autocomplete, geolocalização, login social, OCR (para converter papéis escaneados, arquivos PDF e imagens capturadas com câmera digital em dados editáveis) e qualquer outra função que torne o preenchimento de formulários menos penoso e até encantador (é possível! Já vi usuários superfelizes ao clicar no GPS e a localidade ser preenchida como um toque de mágica).

Mas a primeira coisa é fazer uma análise dos campos e tentar diminuir a quantidade deles. Precisa mesmo do nome da mãe? E de um telefone fixo??

 


, updated on

comente