---
title: "Algumas ideias sobre o design de interfaces para ecrãs táteis"
date: 2020-06-24
language: pt
topics: ["creating", "creativity", "design", "game", "howto", "iOS", "iPad", "smartphone", "snake"]
source_url: https://willem.com/pt/2020-06-24_algumas-ideias-sobre-o-design-de-interfaces-para-ecras-tateis/
---
# 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?) ](https://willem.com/global/images/9710101b75bf.webp)

## 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](https://willem.com/global/images/37433282f380.webp)

## 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](https://willem.com/global/images/1c0b65647905.webp)

## 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.](https://willem.com/global/images/9022cd4a6bb1.webp)

## 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ã](https://willem.com/global/images/9e15010dbbdf.webp)

## 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](https://willem.com/global/images/8b0744e3bebc.webp)

## 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](https://willem.com/global/images/840381231d21.webp)

Quando criei o jogo_Snake_97 (https://snake97.com) para dispositivos com ecrã tátil, recriei o velho mecanismo de entrada com uma atenção_minuciosa_ao_detalhe (https://willem.com/en/2018-02-21_updating-snake-97/). 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](https://willem.com/global/images/c673e319ed77.webp)

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