Astra profundo · Capítulo 8 de 31 · 30 min
Projetar os estados da escolha à confirmação
Você sai com um fluxo de reserva que explica ao visitante o que pode fazer e o que aconteceu.
Este capítulo faz parte do curso gratuito Astra profundo.
Uma pessoa escolheu o horário da visita do Estúdio Aurora, caso fictício, e preencheu seus dados. Agora ela precisa saber se a ação está em andamento e quando a reserva foi concluída. Nesta aula, você projeta os estados dessa experiência para que a interface acompanhe o visitante durante todo o percurso, inclusive quando ele precisa corrigir uma informação.
Você conhece essa necessidade fora da tela: ao fazer um pedido, espera uma resposta que mostre se ele foi recebido e o que vem depois. Em uma interface, cada situação do processo é um estado. A experiência de uso, ou UX, organiza o caminho até o resultado; a interface, ou UI, torna esse caminho visível por conteúdo, controles e respostas.
O estado responde à pergunta do visitante
| Situação | Pergunta | Resposta da interface |
|---|---|---|
| Escolha | Qual horário selecionei? | Resumo com data e horário |
| Preenchimento | Como completo este campo? | Rótulo e orientação próximos |
| Envio | Meu pedido está em andamento? | Mensagem de processamento |
| Correção | O que preciso ajustar? | Mensagem junto ao campo |
| Conclusão | O que foi confirmado? | Resumo da reserva demonstrativa |
No exemplo resolvido, o Aurora mostra o horário escolhido acima do formulário. O campo de contato mantém seu rótulo após a digitação. Se o formato informado precisar de ajuste, a mensagem aponta o campo e explica como corrigir, preservando os demais valores. Quando o envio termina, a tela apresenta a experiência e o horário. A confirmação tem conteúdo verificável, além de um sinal visual.
Aprofunde as decisões desta aula
Como organizar as passagens entre estados?
Comece pela passagem entre situações. Antes de escolher, a pessoa vê os horários disponíveis no exemplo. Depois da seleção, o resumo mostra a opção escolhida. Ao enviar o formulário, uma mensagem explica a espera. Ao concluir, a confirmação apresenta os dados da reserva demonstrativa. Cada mudança responde a uma pergunta que o visitante poderia fazer naquele momento.
Como projetar mensagens, rótulos e alternativas da agenda?
Desenhe também a ausência de opções. Uma agenda sem horários pode explicar que a programação daquela data ainda não está disponível e oferecer retorno à seleção de datas. A mensagem deve corresponder ao que o sistema sabe. Para o protótipo do curso, use dados demonstrativos e permita alternar as situações. Isso torna possível revisar os estados sem depender de um serviço de reserva real. O texto dos controles participa do fluxo. Escolher horário comunica uma decisão diferente de confirmar reserva. Quando um botão muda de função, seu rótulo deve acompanhar a etapa. Durante uma ação em andamento, o visitante precisa perceber que o pedido foi recebido. Cor, mensagem e comportamento trabalham juntos para explicar a situação, inclusive para quem interpreta a tela de outra forma.
Peça ao Astra que produza uma forma de visitar os estados durante a revisão. Em um protótipo, isso pode ser um conjunto de dados de demonstração que dispara cada situação. Examine o percurso com teclado e confira onde o foco fica após uma mensagem ou mudança de tela. A revisão ganha profundidade quando acompanha a ação inteira, em vez de observar apenas a tela preenchida.
Faça agora: percorra todos os estados
Use dez minutos para leitura e desenho e 20 para montar e revisar a demonstração.
Passo 1: Desenhe a sequência
Ligue escolha, preenchimento, envio e confirmação.
Deu certo quando: Cada etapa prepara a seguinte.
Passo 2: Escreva as respostas
Defina mensagem e ação para cada situação da tabela.
Deu certo quando: O visitante recebe uma orientação concreta.
Passo 3: Prepare dados de exemplo
Crie situações para ausência de horário e correção de campo.
Deu certo quando: Você consegue abrir cada estado.
Passo 4: Execute o percurso
Faça a reserva demonstrativa e confira o resumo final.
Deu certo quando: A confirmação corresponde à seleção realizada.
No fim você tem: Um fluxo demonstrativo com estados revisáveis e conteúdo de orientação pronto.
Cada estado responde à dúvida daquele momento. A correção preserva o trabalho já realizado. A confirmação mostra o resultado da ação escolhida.
Seu caderno neste capítulo
Abrir o caderno completoSelecione um trecho do capítulo para destacar ou anotar. Nos vídeos e áudios, use Anotar este momento. No teclado, selecione com Shift e as setas e use Alt+Shift+D para destacar ou Alt+Shift+N para anotar.
Salvo neste navegador. Entre na sua conta para levar o caderno a outros aparelhos.
Entre na sua conta para compartilhar o que aprendeu e convidar alguém para estudar com você.
Conexões deste capítulo
Veja o que estudar antes e para onde seguir depois, explore os conceitos e compare abordagens em outros cursos. Sugestões marcadas como “sugerido pelo grafo” vêm dos assuntos em comum, não do índice do curso.
Estude antes
- Frontend vs Backendsugerido pelo grafoApresenta o conceito “Frontend”, usado em “Projetar os estados da escolha à confirmação”.
- CursoEscrever bem com IAsugerido pelo grafoAs primeiras aulas do Astra pedem um briefing com referências e dirigem cada iteração por texto. O curso de escrita ensina a decidir o que pedir, dar contexto e conferir a saída, que é a base dessas aulas. Ordem decidida quando o Astra ganhou uma página por aula (Etapa 4, wave 3), para que as 31 aulas mostrem o que estudar antes.
- CursoNode.js: JavaScript no Servidorsugerido pelo grafo4 capítulos de “Astra profundo” usam conceitos apresentados em “Node.js: JavaScript no Servidor”.
Conceitos deste capítulo
O mesmo assunto em outros cursos
- Frontends com VibecodingDirigir o prompt e avaliar a entrega do agenteExaminar conexões de Dirigir o prompt e avaliar a entrega do agente
- Software e IA para executivosResponder ao cliente agora e deixar o resto para depoisExaminar conexões de Responder ao cliente agora e deixar o resto para depois
- Segundo cérebro com IAComo ligar o assistente à agenda de reservas sem perder o controleExaminar conexões de Como ligar o assistente à agenda de reservas sem perder o controle
- Bastidores: Como Este Portal Foi ConstruídoConta, progresso, certificado e gamificaçãoExaminar conexões de Conta, progresso, certificado e gamificação
Leve uma ideia para a prática
Escolha uma atividade no painel e volte a este curso quando quiser.
Atividades e evolução ficam reunidas no painel da sua conta.