Este artigo foi escrito em 6 de novembro de 2026.
As ferramentas de IA mudam rapidamente. O dever da interface de informar o que acabou de acontecer não muda. Botão (button), link (link), rótulo (label), erro (erro), mensagem temporária (toast), esqueleto de carregamento (skeleton), estado vazio (empty state) e dica de ferramenta (tooltip): essas são as formas pelas quais uma página responde a uma pessoa. O estilo dos ícones vai mudar com o tempo; encare este texto como uma regra de transparência, e não como uma apresentação de componentes.
Uma página que não confirma o que faz leva as pessoas a clicarem duas vezes. Elas clicam de novo porque nada na tela indicou que o primeiro toque foi registrado. Os modelos de IA são bons em desenhar o botão inicial, mas falham em criar a resposta posterior, a menos que você peça essa resposta como uma parte separada. O retorno do sistema não é enfeite: é a diferença entre um formulário que realmente envia um agendamento e um que apenas parece funcionar.
Um botão realiza uma ação. Um link leva a outro lugar.
Um botão (button) altera algo na hora: enviar, salvar, agendar ou excluir. Um link (link) direciona para outro endereço: a página de amanhã, um mapa ou uma política de privacidade. Quando o modelo exibe todo texto como se fosse um botão, o usuário não consegue diferenciar navegação de ação. Quando exibe toda ação como um link, a opção “excluir” parece uma página comum (e às vezes é, o que é pior). Na sua instrução técnica, defina verbos de ação como botões e destinos como links. Um único botão principal por tela é suficiente; os demais devem ter menor destaque visual. Colocar dois botões principais é transferir uma indecisão de design para o usuário.
Escreva o texto do botão usando um verbo que a pessoa possa conferir mais tarde. A frase “Agendar consulta” permite verificar se o processo deu certo; já palavras como “Continuar” ou “OK” não confirmam nada. Se os seus leitores leem em português, o verbo visível deve estar em português. O nome do componente na instrução da IA —button, link— deve continuar em inglês.
Um formulário é um conjunto de perguntas rotuladas
Um formulário (form) não é apenas um amontoados de caixas cinzas. Cada campo é um campo de entrada (input), e todo campo precisa de um rótulo (label) fixo e visível no topo, e não de um texto de exemplo (placeholder) que some assim que a digitação começa. O texto indicativo dentro da caixa é só uma dica temporária, e uma dica não substitui um nome. As pessoas esquecem qual informação deveria entrar ali, e ferramentas de tradução não conseguem ler um texto que desapareceu. Defina no prompt: todo campo de entrada deve ter um rótulo visível acima dele, escrito no idioma do leitor.
Uma mensagem de erro (error) deve ser exibida em texto ao lado do campo de entrada correspondente, acompanhada de um resumo no topo caso vários campos apresentem falhas. Usar apenas cores não é suficiente para indicar erro: vermelho e verde são indistinguíveis para muitas pessoas e são o recurso fácil que as IA costumam aplicar. Especifique no prompt: “mensagens em texto ao lado do campo, e não apenas mudança de cor”.
A condição de campo obrigatório é algo que você deve declarar explicitamente, e não um asterisco que se pressupõe universal. Diga com clareza quais campos podem ficar em branco. Pedir um número de telefone pode ser obrigatório em um país e opcional em outro; esse detalhe deve ser explicado no seu idioma logo abaixo da instrução em inglês.
Avisos temporários, avisos permanentes e ausência de dados
Uma mensagem temporária (toast, às vezes chamada de snackbar) é um aviso curto que surge geralmente na parte inferior da tela após uma ação e desaparece sozinho: “Salvo” ou “Copiado”. Três segundos de exibição são mais do que suficientes. Ela jamais deve ser o único registro de uma falha. Erros devem continuar visíveis ao lado do campo afetado ou no topo do formulário até que a pessoa os corrija. Uma mensagem temporária que diz “Não foi possível agendar” e some em seguida gera total desorientação.
Um esqueleto de carregamento (skeleton) é a estrutura cinza que reserva o espaço na tela enquanto o conteúdo real termina de carregar. Ele oferece uma experiência muito melhor do que uma tela em branco e é mais claro do que um ícone giratório (spinner) que não explica nada. Use-o enquanto uma lista está sendo baixada. Não o transforme em um design permanente: se os dados não chegarem, o esqueleto deve dar lugar a um estado vazio.
Um estado vazio (empty state) é a tela exibida quando ainda não há dados para mostrar: sem agendamentos ativos, sem aulas programadas para esta semana ou sem resultados na busca. Ele informa a ausência de conteúdo e sugere uma ação clara para continuar. Uma tabela em branco sem explicações não é um estado vazio; é uma interface que travou. Esse é o detalhe que pequenas organizações costumam esquecer e que os primeiros visitantes encontram no dia de estreia quando a lista está realmente vazia.
Uma dica de ferramenta (tooltip) consiste em poucas palavras que surgem ao passar o cursor ou focar com o teclado sobre um ícone que, de outra forma, seria confuso. Não é o lugar para explicar políticas do serviço nem funciona de forma confiável em celulares. Se a informação importa para o usuário, ela deve estar visível como texto na tela. A dica de ferramenta é um recurso secundário, não um documento.
O perigo do segundo toque
Um pai agendou uma aula para o filho pelo celular no caminho para casa. O botão dizia apenas “Continuar”. Ao tocar, nada na tela mudou de forma visível, então ele tocou novamente. A escola recebeu dois agendamentos duplicados. A recepção chamou de erro do usuário, mas na verdade foi uma falha de retorno da interface. “Continuar” não é um verbo que confirma algo, e uma tela em silêncio não é uma resposta válida.
A página que funciona usa elementos claros e diretos. O botão diz “Solicitar vaga nesta aula” no idioma do pai. Cada campo mantém seu rótulo visível o tempo todo. Se o telefone não for preenchido, um texto explicativo aparece ao lado do campo e permanece ali até a correção. Quando o envio dá certo, uma mensagem temporária (toast) confirma o recebimento antes de sumir, enquanto o próprio formulário se transforma em um comprovante curto que pode ser consultado ao rolar a página. Se não houver aulas disponíveis no momento, o estado vazio (empty state) explica a situação e oferece um botão direto para consultar outras datas, em vez de exibir uma tabela vazia que parece quebrada. Nada disso tem a ver com modismo visual: é o compromisso da tela de não fazer o usuário adivinhar.
Ao montar essa instrução, mantenha os termos em inglês —button, label, error, toast, empty state— e escreva cada frase que a pessoa vai ler no idioma local. Se você fornecer à IA apenas rótulos em inglês, ela vai publicar o site com rótulos em inglês. Esse é um erro diferente da falta de avisos, mas igualmente comum. A estrutura técnica é compartilhada em inglês para que o funcionamento seja correto; as palavras são escritas no idioma local para que o usuário saiba exatamente o que acabou de fazer.
Um exemplo de instrução técnica
Build a booking form. Each input has a visible label. Errors are written beside the field in words, not by color alone. After a successful send, show a toast that says the visit is requested and leaves after a few seconds. If sending fails, keep the error on the form. If there are no visits yet, show an empty state with one button to add the first.
Em seguida, escreva os rótulos e as mensagens de erro no seu idioma. O bloco em inglês define a estrutura do sistema; as frases que você adicionar abaixo representam a atenção ao leitor. O modelo de IA não sabe como uma clínica na sua cidade responde com cortesia; você sabe. O próximo artigo abordará o uso de movimento e os efeitos visuais que podem esperar até que essas respostas básicas estejam funcionando.