Quando alguém encontra um erro no teu formulário, está a um momento de sair. Estudos mostram que mais de 75% dos utilizadores abandonam formulários quando surgem erros e não os conseguem corrigir de imediato. Não é um problema pequeno. São três em cada quatro potenciais clientes, leads ou subscritores a ir embora. A diferença entre os manter e os perder resume-se muitas vezes a uma só coisa: a mensagem de erro. Uma mensagem de erro confusa afasta-os. Uma mensagem de erro clara e útil traz-os de volta e leva-os a concluir o formulário.
Uma mensagem de erro é a oportunidade de o teu formulário guiar alguém para a conclusão quando comete um erro. Uma má mensagem de erro (vaga, a culpar ou inútil) faz o utilizador sentir-se confuso ou culpado. Uma boa mensagem de erro diz-lhe exatamente o que correu mal, porque importa e como corrigir, em linguagem simples. Este artigo explica como escrever mensagens de erro que funcionam, onde as colocar para que não passem despercebidas, que tom realmente cria confiança e porque é que a precisão é a diferença entre abandono e conclusão.
O que torna uma mensagem de erro eficaz
Uma mensagem de erro eficaz faz três coisas. Primeiro, diz claramente o que correu mal. Não "Entrada inválida." Em vez disso, "Os endereços de email precisam de um símbolo @." Segundo, explica porque é que a entrada foi rejeitada, se isso ajudar. "As palavras-passe têm de ter pelo menos 8 caracteres, porque as mais curtas são mais fáceis de piratear." Terceiro, diz ao utilizador exatamente o que fazer a seguir. "Volta ao campo da palavra-passe e acrescenta pelo menos mais 4 caracteres." O utilizador fica a saber o problema, percebe porque importa e sabe como corrigir.
O tom de uma mensagem de erro importa mais do que a maioria das pessoas pensa. Uma mensagem de erro que soa zangada ou condescendente faz o utilizador sentir-se culpado. "Esqueceste-te do símbolo @" parece culpa dele. "Os endereços de email precisam de um símbolo @" é a mesma informação, mas sem culpa. Um tom útil reconhece o erro sem fazer a pessoa sentir-se mal.
O momento e a posição de uma mensagem de erro determinam se o utilizador sequer a vê. Uma mensagem de erro que aparece três ecrãs abaixo do campo que a causou passa facilmente despercebida. Uma mensagem de erro que aparece ao lado do campo com problema, no momento em que tentam avançar, obriga-os a reparar nela e a corrigir logo.
Validação em linha vs. validação na submissão
A validação em linha mostra uma mensagem de erro no momento em que alguém preenche um campo incorretamente, antes de submeter o formulário. Um campo de palavra-passe mostra um erro assim que escrevem uma palavra-passe demasiado curta. Um campo de email mostra um erro assim que saem do campo sem um símbolo @. O feedback em tempo real é poderoso porque as pessoas corrigem os erros imediatamente, em vez de os descobrirem depois de preencher o formulário todo.
A validação em linha faz uma coisa especialmente bem. Cria confiança. Quando alguém escreve um endereço de email e vê aparecer um visto verde, sabe que acertou. Avança sem dúvidas. Sem essa confirmação, pergunta-se se a entrada estava correta e duvida de si próprio.
A validação na submissão é o que acontece quando alguém clica em enviar e o formulário verifica todos os campos de uma vez. Se algum campo tem um erro, aparece no topo do formulário um resumo de validação com todos os problemas, e cada campo com erro fica destacado. A validação na submissão apanha os erros que a validação em linha deixou passar e dá aos utilizadores um quadro completo do que precisa de ser corrigido.
A melhor abordagem é ambas. Usa a validação em linha para campos que podem ser verificados instantaneamente (formato do email, tamanho da palavra-passe, formato do código postal). Usa a validação na submissão como rede de segurança final. Quando alguém clica em enviar, se algum campo ainda tiver um erro, mostra-lhe de imediato o que precisa de ser corrigido antes de poder submeter.
Escrever mensagens de erro específicas e acionáveis
Uma mensagem de erro específica diz ao utilizador exatamente qual é o problema. Uma mensagem de erro genérica deixa-o a adivinhar. Compara estas duas:
Genérica: "Número de telefone inválido."
Específica: "Os números de telefone precisam de 10 dígitos. Introduziste 9. Acrescenta mais um dígito."
A mensagem genérica diz ao utilizador o que está errado, mas não porquê nem como corrigir. A mensagem específica diz-lhe o problema, porque aconteceu e exatamente o que fazer. A mensagem específica demora um pouco mais a ler, mas poupa ao utilizador minutos de frustração.
Uma mensagem de erro acionável inclui instruções. "As palavras-passe têm de conter pelo menos um número" diz o que falta. "As palavras-passe têm de conter pelo menos um número. Volta ao campo da palavra-passe e acrescenta um número." diz o que fazer. Nos formulários, a instrução costuma ser óbvia (voltar ao campo), mas escrevê-la ajuda quem não está familiarizado com formulários ou usa tecnologia de apoio.
Usa linguagem simples. Não "Formato do código postal incorreto." Em vez disso, "Os códigos postais têm 5 números. Introduziste letras." Não "Formato de email inválido." Em vez disso, "Os endereços de email precisam de um símbolo @ e de um domínio (exemplo: name@company.com)."
Posição que torna os erros impossíveis de ignorar
Uma mensagem de erro colocada longe do campo que a causou passa facilmente despercebida. Quando alguém preenche um formulário com muitos campos, concentra-se num campo de cada vez. Uma mensagem de erro que aparece no fundo do formulário enquanto ainda estão focados no topo fica por ver.
A melhor posição para uma mensagem de erro é diretamente por baixo ou ao lado do campo com o erro. Quando passam ao campo seguinte ou tentam submeter, aparece uma mensagem de erro logo por baixo do campo que acabaram de preencher. Não podem evitar vê-la, porque aparece onde esperam que esteja a ação seguinte.
Para um resumo de validação (que lista todos os erros de uma vez depois da submissão), coloca-o no topo do formulário. Isto dá ao utilizador uma visão completa de todos os problemas. Depois, à medida que desce, os erros de cada campo aparecem de novo junto de cada campo que precisa de corrigir. Esta abordagem dupla serve dois propósitos: mostra-lhes toda a extensão do que precisa de ser corrigido e lembra-os enquanto trabalham em cada campo.
Nunca uses mensagens de erro do tipo toast nos formulários. Um toast é uma notificação que aparece brevemente no canto do ecrã e depois desaparece. Nos formulários, é a pior posição possível. O erro aparece longe do campo que o causou. Desaparece antes de o utilizador ter tempo de o ler. Cria uma desconexão entre o problema e o sítio onde o corrigir. Se uma mensagem de erro tem de desaparecer, só deve ser depois de o utilizador ter corrigido o campo com sucesso.
Design visual das mensagens de erro
A cor sozinha não chega para comunicar um erro. Alguém com daltonismo pode não ver a cor vermelha que sinaliza um erro. Um ícone de erro muito pequeno pode escapar a alguém com visão reduzida. Apoia-te em vários sinais: cor mais texto mais ícone.
Uma borda vermelha à volta do campo. Um ícone vermelho ou laranja junto à mensagem de erro. Texto que diz claramente o problema. Os três juntos criam um estado de erro que quase todos conseguem reconhecer.
O tamanho da letra importa. O texto da mensagem de erro deve ter o mesmo tamanho da etiqueta do campo. Se a mensagem de erro for mais pequena, as pessoas podem não a ver ou achar que é menos importante do que é. A mensagem de erro merece o mesmo peso visual que a etiqueta.
A etiqueta do campo com problema também pode mudar. O texto da etiqueta pode ficar vermelho ou a negrito. Isto cria outro sinal visual que ajuda o utilizador a percorrer o formulário depressa e a encontrar o campo que precisa de atenção.
Tom e cortesia nas mensagens de erro
As mensagens de erro devem soar como se estivesses a ajudar alguém, não a culpá-lo. Evita palavras que soem duras ou acusatórias.
Dura: "Introduziste um endereço de email inválido."
Útil: "Os endereços de email precisam de um símbolo @. Verifica o que escreveste e tenta outra vez."
Dura: "A palavra-passe é demasiado fraca."
Útil: "As palavras-passe precisam de pelo menos 8 caracteres. As mais longas são mais seguras."
Dura: "Esqueceste-te de preencher este campo."
Útil: "Este campo é obrigatório. Diz-nos o que pensas."
Um tom útil reconhece o erro sem fazer a pessoa sentir-se mal. Explica porque existe a regra (quando ajuda). Avança sem insistir no erro.
Erros comuns nas mensagens de erro
O erro mais comum é ser vago demais. "Entrada inválida" não diz nada ao utilizador. "Algo correu mal" é igualmente inútil. Sê específico sobre qual é o problema.
Um segundo erro é usar linguagem técnica. "Regex mismatch" ou "Validation failed" podem dizer algo a engenheiros, mas as pessoas comuns não fazem ideia do que estes termos significam. Traduz os erros técnicos para linguagem simples.
Um terceiro erro é mostrar demasiados erros de uma vez. Se um formulário tem 20 campos e os 20 mostram erros, o utilizador sente-se esmagado. Prioriza que erros são críticos (como um campo obrigatório vazio) e mostra esses primeiro. Os erros secundários (como um campo com um problema de formatação mas opcional) podem ser mostrados depois.
Um quarto erro são mensagens de erro que repetem a etiqueta sem acrescentar informação nova. A etiqueta diz "Endereço de email." A mensagem de erro diz "O endereço de email é inválido." O utilizador já sabe qual campo tem o problema (vê a borda vermelha), mas continua sem saber porque é inválido. A mensagem de erro deve acrescentar informação, não repetir a etiqueta.
Um quinto erro é não oferecer um caminho para resolver o problema. "A palavra-passe não cumpre os requisitos" diz ao utilizador que algo está errado, mas não quais são os requisitos. "A palavra-passe não cumpre os requisitos. As palavras-passe precisam de pelo menos 8 caracteres e um número" diz-lhe o que corrigir.
Como o WEMASY te ajuda a criar mensagens de erro claras
O criador de formulários do WEMASY inclui mensagens de erro predefinidas para os tipos de campo mais comuns. Os campos de email mostram "Os endereços de email precisam de um símbolo @" quando o formato está errado. Os campos de telefone mostram "Os números de telefone precisam de 10 dígitos" quando o tamanho está incorreto. Os campos de palavra-passe mostram os requisitos de segurança enquanto o utilizador escreve. Estas mensagens são claras, específicas e úteis por defeito.
Podes personalizar as mensagens de erro para combinarem com o tom da tua marca. Muda a mensagem de "Os endereços de email precisam de um símbolo @" para "Ups, isso não parece um email. Tentas outra vez?" O tom muda, mas a precisão mantém-se. Controlas como a mensagem soa sem sacrificar a clareza.
Para validação personalizada (campos com regras específicas e únicas do teu formulário), podes escrever as tuas próprias mensagens de erro diretamente no criador de formulários. O sistema ajuda-te a colocar a mensagem junto do campo, a mostrá-la no momento certo (em linha ou na submissão) e a estilizá-la para combinar com o design do formulário.
A validação em tempo real está incorporada, por isso as mensagens de erro podem aparecer enquanto os utilizadores escrevem, e não só depois de submeterem. Isto apanha os erros cedo e evita a frustração de preencher um formulário inteiro só para descobrir problemas no fim.
Vê que funcionalidades de formulários estão incluídas no teu plano WEMASY.