Componentes que você já usa todo dia: anatomia de um bom exemplar
Botão, input, card, modal — você já codou cem vezes, mas talvez nunca tenha parado pra ver o que separa um bom exemplar de um ruim.
Você provavelmente já implementou dezenas de botões, inputs, cards e modais. Mas implementar a estrutura (HTML/JSX) é diferente de entender o que faz um componente parecer certo — o tipo de coisa que só percebemos quando está faltando.
Botão: affordance é a palavra-chave
Affordance é a pista visual que sugere o que um elemento faz e como interagir com ele. Um botão precisa parecer clicável antes mesmo de alguém passar o mouse: contraste de cor em relação ao fundo, bordas ou sombra sutil que sugerem "isso está acima da superfície", cursor de ponteiro. Um botão que parece um texto qualquer (mesma cor, sem contorno, sem peso diferente) obriga a pessoa a testar clicando pra descobrir se funciona — isso é affordance fraca.
.botao-fraco {
background: transparent;
color: #64748b;
border: none;
} /* parece texto comum, não sinaliza que é clicável */
.botao-com-affordance {
background: #2563eb;
color: white;
border-radius: 8px;
padding: 10px 18px;
font-weight: 600;
cursor: pointer;
}Input: placeholder não é label
O placeholder é uma dica de formato ("ex: joao@email.com"), não uma identificação permanente do campo — ele desaparece assim que a pessoa começa a digitar. Um input bem feito tem sempre um label visível e associado (via htmlFor/id), independente de também ter um placeholder pra formato.
Card: fronteira clara
Um card existe pra agrupar informação relacionada e separá-la visualmente do resto — ele só cumpre esse papel se tiver uma fronteira perceptível (borda sutil, sombra leve, ou diferença de cor de fundo em relação ao que está atrás). Um "card" sem nenhuma dessas pistas não é um card, é só texto solto que por acaso está dentro de uma div — o princípio de figura-fundo da Gestalt (lição 5) só funciona se existir alguma diferença perceptível entre o card e o que está ao redor dele.
Modal: foco e saída óbvios
Um modal bem feito escurece o resto da tela (reforçando que ela virou "fundo" temporariamente), captura o foco de teclado dentro dele, e oferece uma saída óbvia — um botão de fechar visível, e geralmente também a tecla Esc e o clique fora dele. Um modal sem essas três coisas prende a pessoa numa caixa sem indicar como sair, o que é frustrante mesmo que a ação dentro dele esteja correta.
Exercício
Um formulário de login tem um campo só com placeholder="Senha", sem label, e um botão de entrar que é um texto azul sublinhado sem nenhum fundo ou borda. Aponte os dois problemas de affordance e proponha a correção de cada um.