Capa do Ebook gratuito Microcopy que Converte: Textos Curtos para UX, Onboarding e Erros

Microcopy que Converte: Textos Curtos para UX, Onboarding e Erros

Novo curso

18 páginas

Microcopy em formulários: rótulos, placeholders, ajuda contextual e validações

Capítulo 7

Tempo estimado de leitura: 13 minutos

+ Exercício

O que é microcopy em formulários (e por que ele decide a taxa de envio)

Em formulários, microcopy é o conjunto de textos curtos que orientam a pessoa a preencher campos com segurança e sem retrabalho. Ele aparece principalmente em quatro pontos: rótulos (labels), placeholders, ajuda contextual (helper text, dicas, exemplos, tooltips) e mensagens de validação (erros e confirmações). O objetivo é reduzir dúvidas, prevenir erros previsíveis e tornar o caminho até o envio mais fluido.

Formulários são momentos de “custo” na experiência: exigem esforço, atenção e, muitas vezes, dados sensíveis. Quando o texto não esclarece o que é esperado, a pessoa adivinha, erra, se frustra e abandona. Um bom microcopy em formulários antecipa perguntas comuns (formato, finalidade, privacidade, consequências) e responde no lugar certo, no momento certo.

Componentes do microcopy em formulários

1) Rótulos (labels): o contrato do campo

O rótulo é a afirmação principal sobre o que o campo pede. Ele deve ser específico o suficiente para evitar interpretações e curto o bastante para ser escaneável. Em formulários, o rótulo funciona como um “contrato”: define o dado, o contexto e, quando necessário, a unidade.

  • Rótulo bom: “Telefone celular”

  • Rótulo ruim: “Telefone” (a pessoa não sabe se pode ser fixo, se precisa DDD, se aceita WhatsApp)

    Continue em nosso aplicativo

    Você poderá ouvir o audiobook com a tela desligada, ganhar gratuitamente o certificado deste curso e ainda ter acesso a outros 5.000 cursos online gratuitos.

    ou continue lendo abaixo...
    Download App

    Baixar o aplicativo

Quando o campo tem implicações (ex.: nome que aparecerá publicamente, e-mail usado para login, documento para emissão fiscal), o rótulo pode ser complementado por ajuda contextual, mas não deve depender do placeholder para “explicar” o que é o campo.

2) Placeholders: exemplo, não instrução

Placeholder é o texto dentro do campo antes do preenchimento. Ele é útil para mostrar formato e exemplo, mas tem limitações: some quando a pessoa começa a digitar, pode ter baixo contraste e não substitui o rótulo (inclusive por acessibilidade). Use placeholder como “demonstração”, não como “manual”.

  • Bom uso: rótulo “CPF” + placeholder “000.000.000-00”

  • Mau uso: placeholder “Digite seu CPF com pontos e traço” sem rótulo

3) Ajuda contextual: a resposta no lugar certo

Ajuda contextual é o texto de apoio que aparece perto do campo (abaixo do input, ao lado, em tooltip ou em texto expandível). Ela deve responder dúvidas que não cabem no rótulo e que, se não respondidas, geram erro ou abandono. Boas ajudas contextualizam: explicam “por quê”, “para quê”, “como” e “o que acontece se”.

  • “Usaremos este e-mail para enviar o recibo.”

  • “A senha precisa ter 8+ caracteres e 1 número.”

  • “Seu nome público pode ser alterado depois.”

4) Validações: prevenção, correção e confirmação

Validações são mensagens que aparecem quando o sistema detecta algo incompleto, inválido ou inconsistente. Elas podem ser preventivas (antes do erro, como máscara e contador), em tempo real (enquanto digita) ou após tentativa de envio. O microcopy de validação precisa dizer claramente: o que deu errado, onde, por que (quando útil) e como resolver.

Além de erros, há validações positivas (ex.: “E-mail disponível”, “Código aplicado”), que reduzem ansiedade e confirmam progresso.

Rótulos (labels) na prática: como escrever para reduzir ambiguidade

Checklist de rótulos eficazes

  • Seja específico: “Endereço de entrega” vs. “Endereço”.

  • Inclua unidade quando necessário: “Altura (cm)”, “Peso (kg)”, “Renda mensal (R$)”.

  • Evite jargão interno: “Razão social” pode precisar de ajuda contextual (“Nome da empresa no CNPJ”).

  • Evite rótulos genéricos: “Informações” não diz nada; “Nome completo” diz.

  • Consistência de termos: se você usa “CEP” em um lugar, não use “Código postal” em outro (a menos que haja motivo e público internacional).

Rótulos com contexto: quando o campo tem “pegadinhas”

Alguns campos são naturalmente ambíguos. Neles, o rótulo deve reduzir a chance de interpretação errada, e a ajuda contextual deve cobrir o restante.

  • Nome: “Nome completo (como no documento)” quando o dado precisa bater com verificação.

  • Endereço: separar “Número” e “Complemento” e explicar o complemento (“Apto, bloco, casa, fundos”).

  • Documento: “CPF do titular do cartão” vs. “CPF” (se o formulário envolve pagamento).

Obrigatório vs. opcional: como sinalizar sem poluir

Uma decisão comum é como indicar obrigatoriedade. Em vez de marcar todos os campos obrigatórios, muitas interfaces marcam apenas os opcionais (porque a maioria costuma ser obrigatória). O microcopy deve ser coerente com a regra adotada.

  • Opção A (marcar opcionais): rótulo “Complemento (opcional)”.

  • Opção B (asterisco): “Nome completo*” + legenda próxima “*Obrigatório”.

Evite mensagens vagas como “Campos com * são obrigatórios” se o formulário tiver poucos asteriscos e isso não estiver visualmente claro. Quando possível, prefira explicitar “(opcional)” nos poucos campos opcionais: reduz esforço de interpretação.

Placeholders: padrões seguros e armadilhas comuns

Quando usar placeholder

  • Para mostrar formato: datas, documentos, telefone, valores.

  • Para dar exemplo de conteúdo: “Ex.: Rua das Flores, 123”.

  • Para reforçar máscara: “(11) 91234-5678”.

Quando não usar placeholder (ou usar com cuidado)

  • Como substituto do rótulo: a pessoa perde a referência ao digitar.

  • Para instruções longas: vira ruído e some no momento crítico.

  • Para informações essenciais: regras de senha, critérios de elegibilidade, política de privacidade.

Exemplos de melhoria

  • Antes: rótulo “Data” + placeholder “dd/mm/aaaa” (ok) + nenhuma validação.

  • Depois: rótulo “Data de nascimento” + placeholder “dd/mm/aaaa” + ajuda “Você precisa ter 18 anos ou mais.” + validação “Informe uma data válida (dd/mm/aaaa).”

Ajuda contextual: como decidir o que explicar e onde

Tipos de ajuda contextual

  • Helper text fixo (abaixo do campo): ideal para regras e expectativas constantes.

  • Tooltip (ícone de ajuda): útil quando a maioria não precisa, mas alguns precisam muito (ex.: “Onde encontro o CVV?”).

  • Texto condicional (aparece conforme seleção): quando a escolha muda o que é necessário (ex.: “Pessoa jurídica” mostra campos de CNPJ e inscrição estadual).

  • Exemplos dinâmicos: sugerir formato conforme país/DDD, ou mostrar “Ex.: +55 11…” quando o país muda.

O que vale explicar (e o que é excesso)

Ajuda contextual deve entrar quando há risco real de erro, ansiedade ou abandono. Alguns gatilhos comuns:

  • Campos com formato rígido: documentos, data, telefone, senha.

  • Campos com impacto: e-mail de login, nome público, endereço de entrega, dados fiscais.

  • Campos sensíveis: renda, motivo de cancelamento, dados de pagamento.

  • Campos incomuns: “Código de indicação”, “Inscrição estadual”, “Número do conselho”.

Evite ajuda contextual que repete o óbvio (“Digite seu nome no campo nome”). Prefira explicar o que a pessoa não consegue inferir sozinha: critérios, finalidade e exemplos.

Modelos prontos (adaptáveis) de ajuda contextual

  • Finalidade: “Usaremos este telefone apenas para avisos sobre a entrega.”

  • Privacidade: “Seu CPF é usado para emissão da nota e não fica visível para outros usuários.”

  • Flexibilidade: “Você pode alterar isso depois em Configurações.”

  • Critério: “A senha precisa ter 8+ caracteres, 1 letra e 1 número.”

  • Exemplo: “Ex.: apto 42, bloco B.”

Validações e mensagens de erro: como escrever para corrigir rápido

Princípios práticos para erros de formulário

  • Seja específico: diga qual campo e qual regra falhou.

  • Mostre como resolver: inclua formato esperado ou ação necessária.

  • Evite culpa: troque “Você digitou errado” por “Confira o formato”.

  • Evite códigos e termos técnicos: “Erro 400” não ajuda; “Não conseguimos validar o CEP” ajuda.

  • Priorize o que impede o envio: se há vários erros, destaque o primeiro e permita navegação até os demais.

Estrutura recomendada para mensagens de erro

Uma fórmula simples e eficaz:

  • O que aconteceu + como corrigir + (opcional) exemplo.

Exemplos:

  • “Informe um e-mail válido. Ex.: nome@dominio.com”

  • “O CPF precisa ter 11 números.”

  • “A senha precisa ter pelo menos 8 caracteres e 1 número.”

Validação em tempo real vs. após envio

Validação em tempo real reduz retrabalho, mas pode irritar se for agressiva (ex.: mostrar erro enquanto a pessoa ainda está digitando). Um padrão útil é validar em tempo real apenas quando:

  • o campo perde foco (on blur), ou

  • a pessoa termina um padrão claro (ex.: completou 11 dígitos do CPF), ou

  • há alto custo de erro (ex.: senha, e-mail de login).

Quando a validação depende de servidor (ex.: “e-mail já cadastrado”), o microcopy deve cobrir estados intermediários:

  • Carregando: “Verificando…”

  • Sucesso: “E-mail disponível.”

  • Falha: “Este e-mail já está em uso. Tente entrar ou use outro.”

Erros globais vs. erros por campo

Erros por campo são mais fáceis de corrigir porque aparecem perto do problema. Erros globais (no topo do formulário) são úteis quando:

  • há um problema geral (ex.: “Não foi possível salvar agora”),

  • há múltiplos campos com erro e você quer um resumo navegável.

Se usar resumo, escreva de forma acionável e com links/âncoras para cada campo (quando aplicável). Exemplo de texto do resumo:

  • “Revise os campos destacados: E-mail, CPF e Data de nascimento.”

Mensagens para campos vazios (obrigatórios)

Evite “Campo obrigatório” repetido em todos os lugares sem contexto. Prefira nomear o campo:

  • “Informe seu nome completo.”

  • “Informe um e-mail para contato.”

  • “Selecione um estado.”

Mensagens para formatos comuns (modelos)

  • Telefone: “Informe um telefone com DDD. Ex.: (11) 91234-5678.”

  • CEP: “Informe um CEP com 8 números. Ex.: 01001-000.”

  • Data: “Use o formato dd/mm/aaaa.”

  • Cartão: “Confira o número do cartão. Ele tem 16 dígitos.”

  • Código: “O código tem 6 dígitos. Verifique a mensagem enviada.”

Erros de senha: clareza sem expor segurança

Para senha, o microcopy deve explicar regras sem revelar detalhes que facilitem ataques. Em geral, é seguro listar critérios mínimos (tamanho, tipos de caracteres) e usar feedback progressivo.

Exemplo de ajuda contextual (antes do erro):

  • “Use 8+ caracteres, com pelo menos 1 letra e 1 número.”

Exemplo de validação (durante):

  • “Falta 1 número.”

  • “Faltam 2 caracteres.”

Passo a passo prático: como revisar o microcopy de um formulário existente

Passo 1 — Liste todos os campos e identifique o “risco de erro”

Faça um inventário do formulário: campo, tipo (texto, seleção, data), obrigatoriedade, dependências e validações atuais. Em seguida, marque campos com alto risco:

  • formatos rígidos (data, documento),

  • campos sensíveis (pagamento, identidade),

  • campos com termos ambíguos (endereço, nome, empresa),

  • campos que costumam gerar suporte (observado por tickets ou analytics).

Passo 2 — Reescreva rótulos para remover ambiguidades

Para cada campo de risco, pergunte: “Uma pessoa nova entenderia exatamente o que colocar aqui?” Ajuste rótulos para incluir contexto mínimo.

  • Antes: “Documento”

  • Depois: “CPF” (se só aceita CPF) ou “CPF/CNPJ” (se aceita ambos).

  • Antes: “Nome”

  • Depois: “Nome completo” (ou “Nome completo (como no documento)” se houver validação posterior).

Passo 3 — Transforme placeholders em exemplos de formato

Revise placeholders e elimine instruções longas. Converta para exemplos e padrões.

  • Antes: placeholder “Digite seu telefone com DDD e sem espaços”

  • Depois: placeholder “(11) 91234-5678” + ajuda contextual “Usaremos este número para avisos da entrega.”

Passo 4 — Adicione ajuda contextual apenas onde ela evita erro ou ansiedade

Para cada campo, escreva uma ajuda curta respondendo a uma destas perguntas (quando relevante):

  • Para que serve este dado?

  • Como devo preencher (formato)?

  • O que acontece depois?

  • Isso é público ou privado?

Exemplos práticos:

  • Rótulo: “E-mail” Ajuda: “Você usará este e-mail para entrar e receber confirmações.”

  • Rótulo: “Complemento (opcional)” Ajuda: “Apto, bloco, casa, fundos.”

Passo 5 — Padronize validações com mensagens acionáveis

Crie um padrão de escrita para erros e aplique em todos os campos. Um padrão simples:

  • Campos vazios: “Informe + [campo]”.

  • Formato inválido: “Use o formato + [exemplo]”.

  • Regra não atendida: “Precisa ter + [regra]”.

Exemplos:

  • “Informe seu CEP.”

  • “Use o formato 00000-000.”

  • “A senha precisa ter 8+ caracteres.”

Passo 6 — Trate estados intermediários e falhas técnicas

Além de “válido/inválido”, formulários têm estados como carregando, indisponível, timeout e falha de rede. Escreva microcopy para esses estados para evitar sensação de travamento.

  • Carregando: “Salvando…”

  • Falha temporária: “Não foi possível salvar agora. Tente novamente.”

  • Falha com alternativa: “Sem conexão. Verifique sua internet e tente de novo.”

Passo 7 — Teste com cenários reais (e refine)

Crie uma lista de cenários de preenchimento e tente quebrar o formulário:

  • dados incompletos,

  • formatos diferentes (com/sem pontuação),

  • nomes compostos,

  • endereços com variações,

  • e-mails com caracteres comuns (ponto, mais),

  • erros de digitação previsíveis.

Para cada cenário, verifique se a mensagem indica claramente como corrigir. Ajuste textos que geram dúvida (“inválido”, “erro”, “incorreto”) para instruções concretas.

Exemplos completos: antes e depois (rótulo, placeholder, ajuda e validação)

Exemplo 1 — Campo de e-mail

  • Rótulo: “E-mail”

  • Placeholder: “nome@dominio.com”

  • Ajuda: “Você usará este e-mail para entrar e receber confirmações.”

  • Erro (vazio): “Informe seu e-mail.”

  • Erro (formato): “Informe um e-mail válido. Ex.: nome@dominio.com”

Exemplo 2 — Campo de endereço

  • Rótulo: “Rua e número”

  • Placeholder: “Ex.: Av. Brasil, 1500”

  • Ajuda: “Use o endereço onde você pode receber a entrega em horário comercial.”

  • Erro: “Informe rua e número. Ex.: Av. Brasil, 1500.”

Exemplo 3 — Campo de CPF

  • Rótulo: “CPF”

  • Placeholder: “000.000.000-00”

  • Ajuda: “Usamos o CPF para emissão de nota e validação do titular.”

  • Erro: “O CPF precisa ter 11 números.”

Exemplo 4 — Campo de senha com feedback progressivo

  • Rótulo: “Senha”

  • Placeholder: “Crie uma senha”

  • Ajuda: “Use 8+ caracteres, com pelo menos 1 letra e 1 número.”

  • Erro: “A senha precisa ter 8+ caracteres e 1 número.”

  • Sucesso: “Senha forte.”

Biblioteca rápida de microcopy para formulários (para adaptar)

Ajuda contextual (curta)

  • “Você pode alterar isso depois.”

  • “Usaremos este dado apenas para [finalidade].”

  • “Ex.: [exemplo realista].”

  • “Não compartilhamos seus dados com terceiros.” (use apenas se for verdade e sustentado por política)

Validações (modelos)

  • Vazio: “Informe [campo].”

  • Seleção: “Selecione [opção].”

  • Formato: “Use o formato [exemplo].”

  • Tamanho mínimo: “Precisa ter pelo menos [n] caracteres.”

  • Inconsistência: “Os campos não coincidem. Confira e tente novamente.”

  • Indisponibilidade: “Não conseguimos validar agora. Tente novamente em instantes.”

Mensagens positivas (quando ajudam)

  • “Tudo certo por aqui.”

  • “Código aplicado.”

  • “E-mail disponível.”

  • “Dados salvos.”

Implementação: como alinhar microcopy com comportamento do campo

Microcopy e máscara de entrada

Se o campo usa máscara (CPF, telefone, data), o microcopy deve ser coerente com ela. Se a máscara aceita apenas números e formata automaticamente, evite instruções como “Digite com pontos e traço”. Prefira dizer o essencial:

  • Ajuda: “Digite apenas os números.” (se for verdade)

  • Ou omita a instrução e deixe o placeholder mostrar o formato, se a máscara já guia.

Microcopy e autocompletar

Quando há autocompletar (endereço por CEP, sugestões de cidade), a ajuda contextual pode reduzir estranhamento:

  • “Ao informar o CEP, preencheremos rua e bairro automaticamente.”

Microcopy e campos condicionais

Se uma opção abre novos campos, antecipe a consequência:

  • “Selecionar ‘Pessoa jurídica’ vai solicitar CNPJ e razão social.”

Isso reduz surpresa e abandono quando o formulário “cresce” de repente.

Agora responda o exercício sobre o conteúdo:

Qual é o uso mais adequado de placeholders em formulários, considerando clareza e acessibilidade?

Você acertou! Parabéns, agora siga para a próxima página

Você errou! Tente novamente.

Placeholders funcionam melhor como exemplo e demonstração de formato. Eles somem ao digitar e não substituem rótulos, então a explicação do campo deve estar no label e, quando necessário, na ajuda contextual.

Próximo capitúlo

Mensagens de erro úteis: diagnóstico, causa, impacto e caminho de recuperação

Arrow Right Icon
Baixe o app para ganhar Certificação grátis e ouvir os cursos em background, mesmo com a tela desligada.