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

Escrita · 24 jun 2020

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

Criar interfaces intuitivas e naturais

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.

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!

Recriar padrões de UI antigos num dispositivo tátil moderno não te vai render nenhum prémio de usabilidade... (embora, quem não tem saudades do Clippy?)
Recriar padrões de UI antigos num dispositivo tátil moderno não te vai render nenhum prémio de usabilidade... (embora, quem não tem saudades do Clippy?)

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.

Manipular diretamente os elementos no ecrã é natural: aqui, um rato seria redundante
Manipular diretamente os elementos no ecrã é natural: aqui, um rato seria redundante

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.

Os botões grandes de 'sim/não' reduzem a probabilidade de erro, pois não exigem a precisão de píxeis de um cursor de rato
Os botões grandes de 'sim/não' reduzem a probabilidade de erro, pois não exigem a precisão de píxeis de um cursor de rato

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.

Os teclados contextuais são uma melhor forma de permitir a introdução de texto. Não faz sentido mostrar um teclado QWERTY completo se só pedes um valor numérico.
Os teclados contextuais são uma melhor forma de permitir a introdução de texto. Não faz sentido mostrar um teclado QWERTY completo se só pedes um valor numérico.

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.

Os botões Voltar / Ocultar / Guardar ficam junto ao polegar: estão ao alcance e não tapam o conteúdo do ecrã
Os botões Voltar / Ocultar / Guardar ficam junto ao polegar: estão ao alcance e não tapam o conteúdo do ecrã

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.

As estruturas de navegação que dependem do hover NÃO vão funcionar em ecrãs táteis
As estruturas de navegação que dependem do hover NÃO vão funcionar em ecrãs táteis

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.

Snake '97: é divertido, mas o seu design de UI é, sem dúvida, mau
Snake '97: é divertido, mas o seu design de UI é, sem dúvida, mau

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.

Lançar pássaros com uma catapulta é divertido graças à interação natural que é a chave do jogo Angry Birds
Lançar pássaros com uma catapulta é divertido graças à interação natural que é a chave do jogo Angry Birds

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á!

← Mais textos