Algumas ideias sobre o design de interfaces para ecrãs táteis

Resumo

Nas últimas semanas tenho andado a trabalhar numa nova app de saúde pessoal. O principal desafio é encontrar uma interface intuitiva e natural, que funcione bem em dispositivos pequenos com ecrã tátil. Mas o que torna boa uma interface de ecrã tátil? Lê até ao fim para ver algumas boas práticas.

Texto completo

A herança do rato e do teclado

As interfaces tradicionais das aplicações de PC foram pensadas e desenvolvidas, acima de tudo, para dispositivos de entrada distintos, como o teclado e o rato. Muitas convenções, boas práticas e padrões de design têm raízes nesse passado. Não há problema quando estás a criar uma app para PC tradicionais, mas é provável que o teu público use hoje dispositivos modernos com ecrã tátil. Seria um erro recriar a velha UI nesses dispositivos!

Interações naturais

Os dispositivos modernos com ecrã tátil permitem interações mais naturais, porque dispensam dispositivos de entrada como o rato. O dispositivo é o botão: os elementos no ecrã manipulam-se facilmente, de forma direta e imediata, com toque e gestos.

Menos confusão e elementos com o tamanho certo

Um dedo é muito maior do que um cursor de rato pontiagudo, e isso exige outra abordagem ao tamanho dos elementos da interface. Os elementos interativos devem ser grandes o suficiente para serem tocados, com margens generosas entre eles. Alvos demasiado próximos aumentam a probabilidade de erro.

Otimiza a introdução de texto

Dependendo do que estás a construir, é provável que, a certa altura, precises de algum tipo de entrada de texto ou de números. A forma fácil (e errada) de o fazer é mostrar simplesmente um teclado virtual completo. Em vez de recriares uma recriação virtual do passado (o teclado físico), deves aproveitar a oportunidade para repensar o que estás a perguntar ao utilizador. Consoante este contexto de entrada, deves então mostrar um teclado mínimo, só com as teclas relevantes.

Repensar as posições

Onde as aplicações de PC tradicionais costumam ter as barras de ferramentas no topo das janelas, replicar isso num dispositivo tátil faria com que as mãos tapassem o resto do ecrã. Além de manteres o conteúdo do ecrã visível, deves também pensar na ergonomia de pegar no dispositivo. Os botões usados com mais frequência devem ficar, de preferência, perto da posição natural dos dedos.

Esquece o hover e os tooltips

Esquece os elementos de interface, como as estruturas de navegação, que dependem de passar o cursor por cima. A maioria dos ecrãs táteis não regista dedos a pairar sobre o vidro. Também não podes contar com tooltips para explicar as funcionalidades da tua interface. Uma UI tátil deve ser clara para o utilizador logo à primeira vista.

Sê criativo

Criar para interação tátil é algo que deves encarar, acima de tudo, como um ato criativo. Em vez de recriares o antigo, deves pensar em todas as possibilidades que o novo oferece.

Quando criei o jogo Snake 97 para dispositivos com ecrã tátil, recriei o velho mecanismo de entrada com uma atenção minuciosa ao detalhe. Acho isso divertido, mas é, sem dúvida, mau design de UI, porque ignora por completo as possibilidades da nova tecnologia. Não admira, por isso, que jogos como o Angry Birds tenham tanto sucesso: aproveitam por inteiro a interação natural que o toque permite.

Conclusão

Um professor muito influente perguntou-me uma vez: "Mas é divertido, Willem?". Quando crias para toque, deves mesmo pensar nesta pergunta. Se responderes "SIM!", podes considerar-te no bom caminho.

Deves reinventar a interação em vez de recriares coisas antigas. Claro que nem tudo o que é velho é mau; mas seria um erro ignorar o potencial que a tecnologia moderna nos dá!