Use os exemplos como laboratório visual: passe o mouse, use Tab ou toque nos pontos destacados e tente explicar a decisão antes de abrir a nota. Para guardar uma ideia, selecione qualquer trecho.
CAPÍTULO 30 DE 48
Formulários que conversam com clareza
Neste capítulo, você transforma rótulo persistente em uma decisão visual que pode ser percebida, explicada e validada por pessoas reais. Você sairá com uma decisão documentada, um teste de percepção e uma melhoria aplicável ao projeto acumulado.
Escrita, marcações e comentários ficam só neste navegador, separados por capítulo e sem sincronização com a conta. Evite informações sensíveis; limpar os dados do navegador pode remover seus registros.
As seis questões têm correção comentada. Laboratório e projeto são práticas livres, sem avaliação automática da criação.
Prepare-se — O que você vai construir
- Explicar rótulo persistente por meio de uma relação visual observável.
- Relacionar instrução preventiva à tarefa, ao conteúdo e à hierarquia.
- Aplicar erro recuperável sem sacrificar clareza, acesso ou adaptação.
Se precisar de apoio, consulte o capítulo anterior e volte a estas tarefas. Não há obrigação de seguir um prazo.
Entenda — Modelo mental e estrutura
1. Projete uma relação, não uma decoração
Formulários pedem esforço e confiança. Rótulos persistentes, agrupamento, ajuda no momento certo e mensagens específicas reduzem memória e retrabalho. Validação deve preservar dados e levar ao campo que precisa de atenção. Em rótulo persistente, forma e comportamento precisam tornar a tarefa mais legível. Relacione essa decisão com instrução preventiva e erro recuperável antes de escolher cor, sombra ou movimento. Uma composição pode impressionar em uma captura e ainda falhar quando o texto muda, quando o contraste é reduzido ou quando alguém não entende onde tocar. Design de interface é a construção deliberada dessas pistas; experiência do usuário inclui o que acontece antes, durante e depois da tela.
Defina primeiro a tarefa que rótulo persistente deve facilitar e como instrução preventiva ajuda a orientar a atenção. Escreva uma hipótese curta: “para esta pessoa, neste contexto, esta escolha deve facilitar esta ação”. Isso separa intenção de preferência pessoal. Comece com conteúdo real e uma hierarquia em preto e branco. Acrescente estilo apenas quando ele reforçar agrupamento, prioridade, identidade ou feedback. Se duas escolhas competem pela atenção, decida qual delas serve ao objetivo principal e reduza a outra.
2. Leia a interface como um sistema
.campo { display: grid; gap: .4rem; }
.campo [aria-invalid="true"] { border-color: #a31936; }
.erro { color: #7b1027; }
Observe estrutura, tokens e estados, não apenas o resultado final. O exemplo materializa rótulo persistente, usa instrução preventiva como relação visual e mantém erro recuperável disponível para refinamento. O trecho é uma representação reproduzível da decisão, e não uma receita universal. Refaça-o com outro conteúdo, outro comprimento de título e outra densidade. Pergunte o que pertence ao sistema — espaçamento, escala, raio, contraste — e o que pertence somente a esta composição.
Use o laboratório visual deste capítulo quando ele estiver disponível. Passe o ponteiro, use Tab ou toque nos pontos numerados; cada anotação explica o que está acontecendo e por que aquela escolha existe. Depois oculte mentalmente a anotação e tente explicar a evidência com suas próprias palavras. A interação serve para treinar leitura crítica, não para transformar todo layout em um conjunto de efeitos.
3. Troque gosto por critério observável
Uma solução consistente faz rótulo persistente servir à tarefa, demonstra instrução preventiva sem ruído e testa erro recuperável em contexto. Critérios úteis descrevem tarefa, condição e evidência. “Está moderno” é uma opinião; “a ação primária é encontrada em até alguns segundos sem confundir-se com a secundária” pode ser observada. Compare versões com o mesmo conteúdo, registre o que mudou e faça uma pergunta por vez. Testes curtos com pessoas revelam problemas que a familiaridade de quem desenhou costuma esconder.
A armadilha principal é: aplicar rótulo persistente como efeito decorativo sem relacioná-lo à tarefa, ao conteúdo e ao contexto de uso.. Corrija a causa antes de polir. Confira leitura em sequência, contraste, foco, zoom, toque e estados vazios ou de erro. Ao terminar, você deve conseguir defender a decisão sem dizer apenas “porque ficou bonito”: explique qual problema ela resolve, que custo introduz, para quem funciona e que sinal faria você revisá-la.
Observe — Interface em contexto
Uma crítica de design começa pela intenção, não pela preferência. Para “Formulários que conversam com clareza”, o requisito é: a interface deve tornar rótulo persistente perceptível, usar instrução preventiva com intenção e continuar compreensível quando erro recuperável variar. Observe a variação abaixo e preveja o efeito antes de renderizá-la.
input::placeholder { color: #111; }
/* Placeholder desaparece e não substitui label. */
A variação isola instrução preventiva. Compare hierarquia, esforço cognitivo, affordance e continuidade da tarefa antes de escolher a versão. Faça quatro leituras. Na primeira, afaste-se e identifique o primeiro elemento percebido. Na segunda, acompanhe alinhamentos, agrupamentos e ritmo. Na terceira, procure estados e pistas de interação. Na quarta, percorra o mesmo conteúdo sem cor, sem movimento e sem mouse. A informação central deve sobreviver a essas mudanças.
Compare a variação com o exemplo principal mantendo texto e tarefa iguais. Formule uma hipótese completa: “se eu alterar isto, espero reduzir ou aumentar aquilo, porque…”. Aplique uma única alteração e anote o resultado. A melhor versão não é necessariamente a mais silenciosa nem a mais expressiva; é a que combina propósito, identidade, legibilidade e custo de manutenção de forma consciente.
Experimente — Compare no laboratório
Monte um quadro de experimentação no navegador ou na ferramenta de prototipação que preferir. Reconstrua o exemplo, remova uma decisão visual e observe a perda de significado; depois crie uma segunda versão que aplique erro recuperável sem esconder rótulo persistente. Trabalhe em três passes: conteúdo e fluxo; composição e tokens; estados e movimento. Em cada passe, deixe uma versão anterior ao lado da nova para que a comparação não dependa de memória.
Force condições adversas: texto 200% maior, viewport de 320 CSS pixels, contraste reforçado e navegação completa por teclado. Navegue por teclado, teste toque, amplie o texto e verifique se a ordem visual acompanha a ordem de leitura. Convide uma pessoa a narrar o que acredita ser clicável e o que espera que aconteça. Não explique a tela durante a primeira tentativa: registre hesitações, interpretações e desvios. Refine a menor decisão capaz de remover o obstáculo e repita a tarefa.
Pratique — Seis decisões de design
Resolva primeiro pelo raciocínio. Consultar o capítulo e testar hipóteses no navegador faz parte do processo; depois, releia as justificativas.
Confira — Gabarito comentado
Abrir gabarito e explicações completas
E1 — A. Design começa pela tarefa e pela relação que precisa ser percebida. Defina primeiro a tarefa que rótulo persistente deve facilitar e como instrução preventiva ajuda a orientar a atenção. Assim, a estética recebe um papel verificável.
E2 — C. A evidência precisa exercitar percepção e tarefa. Peça a outra pessoa para localizar rótulo persistente, interpretar instrução preventiva e concluir a tarefa enquanto erro recuperável muda. Familiaridade e uma única viewport escondem obstáculos.
E3 — B. A armadilha é aplicar rótulo persistente como efeito decorativo sem relacioná-lo à tarefa, ao conteúdo e ao contexto de uso. Ela transforma preferência em regra e costuma quebrar quando o contexto real aparece.
E4 — A. A experiência precisa sobreviver a diferentes formas de percepção e operação: Preservar ordem, contraste, nome acessível, foco visível e alternativa textual durante a demonstração de rótulo persistente.
E5 — C. Uma comparação controlada liga decisão e consequência. Misturar variáveis impede saber o que realmente melhorou ou piorou a experiência.
E6 — B. Pronto para revisão significa apresentar intenção e evidência: A intenção de rótulo persistente está documentada, instrução preventiva foi comparado em pelo menos duas versões e erro recuperável não impede a tarefa principal.
Projete — Documente, compare e refine
Entrega incremental: um estudo comparativo de formulários que conversam com clareza com hipótese, duas variações, estados principais e justificativa baseada em evidência. Registre em até cinco linhas a pessoa, o contexto e a tarefa principal. Inclua conteúdo real, uma versão deliberadamente problemática e uma versão revisada. Marque as decisões de rótulo persistente, instrução preventiva e erro recuperável; para cada uma, escreva intenção, evidência e limite. Finalize com uma checagem de contraste, teclado, toque, zoom e redução de movimento.
Consultar um modelo possível
.campo { display: grid; gap: .4rem; }
.campo [aria-invalid="true"] { border-color: #a31936; }
.erro { color: #7b1027; }
O modelo ilustra uma possibilidade. Use os critérios para revisar suas próprias ideias, não para copiar as mesmas frases.
Critérios para revisar
- A intenção de rótulo persistente está documentada, instrução preventiva foi comparado em pelo menos duas versões e erro recuperável não impede a tarefa principal.
- Preservar ordem, contraste, nome acessível, foco visível e alternativa textual durante a demonstração de rótulo persistente.
- A comparação torna identificáveis as contribuições de rótulo persistente e instrução preventiva.
- A nota de decisão registra o teste de texto 200% maior, viewport de 320 CSS pixels, contraste reforçado e navegação completa por teclado.
Até 12.000 caracteres em cada versão. Produção livre, sem correção automática.
Retome — Organize sua revisão
- Explique, sem mostrar a tela, a relação entre rótulo persistente e instrução preventiva.
- Reconstrua a composição com conteúdo diferente e preserve o papel de erro recuperável.
- Aplique o teste “Peça a outra pessoa para localizar rótulo persistente, interpretar instrução preventiva e concluir a tarefa enquanto erro recuperável muda.” ao projeto acumulado e registre uma melhoria.
Feche a explicação, tente lembrar um exemplo e depois confira. Retome uma dificuldade no próximo encontro e alguns dias depois; ajuste o intervalo ao que ainda precisa praticar.
Use exemplos concretos na autoavaliação: “consigo explicar com consulta” ou “quero praticar novamente”. Marcar como lida não representa uma certificação.
SEU PROGRESSO NO CAPÍTULO 30
Um capítulo, no seu ritmo.
— exercícios respondidos
Carregando progresso…Você decide quando marcar este capítulo como lido. Isso não altera seus exercícios nem suas marcações.
Progresso salvo só neste navegador, sem sincronização com sua conta.