Como criar mensagens de erro que reduzam a frustração
Como projetar estados de erro dos quais as pessoas podem se recuperar: posicionamento, tempo, redação, preservação de entrada, acessibilidade e movimento, com base em pesquisas de usabilidade.
Ponto principal
Uma boa mensagem de erro fica visível e colocada ao lado do problema, escrita em linguagem simples, diz como consertar, guarda o que a pessoa já digitou e nunca a culpa. Mostre quando a pessoa terminar um campo ou enviar, não enquanto ela ainda estiver digitando, e certifique-se de que os leitores de tela anunciem.
As diretrizes
Nielsen Norman Group resume mensagens de erro eficazes como altamente visíveis, construtivas e que respeitam o esforço do usuário. Na prática isso significa:
- Coloque a mensagem ao lado do campo ou elemento com o problema.
- Use uma linguagem simples e específica: "Este número tem um dígito a menos", não "Entrada inválida".
- Ofereça uma solução: qual formato é esperado, o que tentar em seguida.
- Mantenha o que as pessoas digitaram para que possam editá-lo em vez de começar de novo.
- Não culpe: evite palavras como inválido, ilegal ou errado.
Tempo
Mostrar um erro antes de alguém terminar é um dos erros mais comuns. NN/g chama os erros prematuros de padrão hostil, como avaliar um teste antes que o aluno termine. Valide um campo quando a pessoa o deixa ou envia o formulário e, em seguida, atualize a mensagem ao vivo enquanto ela a corrige.
Erros que não são sobre formulários
Para erros do sistema, como falha ao salvar ou perda de conexão, diga o que aconteceu, o que foi mantido e o que a pessoa pode fazer: tentar novamente, trabalhar offline ou entrar em contato com o suporte. Evite códigos de erro por conta própria; se precisar de um suporte, mostre-o junto com uma explicação humana.
Acessibilidade
Não confie apenas no vermelho: adicione um ícone e um texto. Conecte a mensagem ao seu campo para que os leitores de tela a leiam com o campo e movam o foco para o primeiro erro, ou um resumo dos erros, após um envio com falha.
Movimento em estados de erro
Uma pequena agitação ou mudança de cor pode chamar a atenção para o campo com o problema, mas seja breve, não repita a cada pressionamento de tecla e substitua o movimento por uma mudança de cor ou ícone quando o movimento reduzido estiver ativado. A mensagem em si é mais importante do que a animação.
Princípios-chave para lembrar
- Coloque os erros ao lado do problema, em palavras simples, com uma correção
- Mantenha o que as pessoas digitaram
- Valide após a conclusão de um campo, não durante a digitação
- Nunca confie apenas na cor; conectar mensagens para leitores de tela
- Mantenha o movimento do erro breve e respeite o movimento reduzido
Perguntas frequentes
Fontes
- Error-Message Guidelines — Nielsen Norman Group
- Indicators, Validations, and Notifications — Nielsen Norman Group