Do primeiro ecrã ao protótipo.
Desenha uma escolha, liga dois ecrãs e observa se o caminho faz sentido para outra pessoa.
Um workshop de fotografia. Um sábado para experimentar.
Um bom primeiro exercício de Figma tem uma decisão concreta. Vamos desenhar a escolha de um workshop: a pessoa vê os detalhes, carrega num botão e chega a uma confirmação. No fim, consegues testar se o caminho se percebe, antes de existir uma aplicação.
Escreve a tarefa antes de desenhar
Usa um ficheiro de design no Figma e cria duas frames para representar ecrãs de telemóvel. Chama-lhes Detalhes do workshop e Confirmação. Trabalha com a mesma largura nas duas. Os nomes ajudam-te a encontrar o destino quando ligares a interação.
O cenário é fictício: um workshop de introdução à fotografia, num sábado de manhã. A tarefa é reservar um lugar. Nesta fase, não há pagamentos, contas ou inscrições reais. Esse limite deixa-te concentrar na clareza do percurso.
Desenha a informação pela ordem da decisão
No primeiro ecrã, escreve o nome do workshop, para quem é, o que é necessário levar e o horário de exemplo. Acrescenta um botão com o texto Reservar lugar. No segundo, usa Reserva de exemplo concluída e uma ação para voltar aos detalhes.
Começa com texto e formas simples. Usa uma cor para a ação principal e dá mais espaço aos elementos que precisam de ser percebidos em conjunto. Um botão com o mesmo aspeto de um parágrafo obriga quem o vê a adivinhar o que pode fazer.
- Confirma que o nome do workshop é a primeira informação que identificas.
- Agrupa horário e requisitos perto da ação de reservar.
- Mantém margens consistentes e evita texto colado às bordas.
- Na confirmação, diz o que aconteceu e qual é o próximo passo.
Liga os dois ecrãs no modo de protótipo
Seleciona o botão Reservar lugar e, na área de prototipagem, cria uma ligação para a frame de confirmação. Configura o clique ou toque como disparador e a navegação para essa frame como ação. Liga também a ação de voltar ao primeiro ecrã.
Define os detalhes do workshop como ponto de partida e abre a apresentação do protótipo. A documentação do Figma distingue o elemento que inicia a interação, o disparador e a ação. Os nomes e a posição dos controlos podem mudar; verifica a referência se a tua interface for diferente.
Testa sem dizer onde carregar
Pede a outra pessoa que imagine querer participar no workshop e encontre como reservar. Mostra o protótipo a partir do primeiro ecrã. Resiste à vontade de explicar o desenho enquanto ela tenta concluir a tarefa.
Anota onde hesita, o que lê primeiro e o que acha que aconteceu no fim. Se carregar no lugar errado, regista o motivo que ela apresenta. Uma observação é uma pista para melhorar este desenho; não é uma conclusão sobre todos os utilizadores.
- A pessoa percebeu o que estava a reservar?
- Encontrou o botão sem ajuda?
- Conseguiu distinguir os detalhes da confirmação?
- Havia alguma informação de que precisava antes de decidir?
Revê uma decisão e guarda o motivo
Escolhe a dificuldade mais clara e altera uma coisa: o texto da ação, a posição do horário ou a mensagem de confirmação. Repete a tarefa e compara as observações. Guarda uma nota com o problema, a alteração e o que ainda ficou por testar.
Um protótipo ajuda a explorar o percurso, mas não demonstra que uma aplicação funciona em produção. Validação de formulários, acessibilidade no navegador e tratamento de erros terão de ser verificados na implementação. O teu resultado aqui é um fluxo compreensível e uma decisão de design explicada.