Exemplos de mensagens de erro: ruins, boas e ótimas, reescritas
Oito mensagens de erro subindo de um código bruto até um texto que as pessoas conseguem usar. Cada degrau explicado, a fórmula de três linhas por trás das ótimas e um checklist para a sua próxima revisão.
Uma ótima mensagem de erro diz três coisas às pessoas: o que aconteceu, por que aconteceu e o que fazer em seguida, com um botão que faz isso. A maioria dos produtos para na primeira, e muitos nem passam de um código. Abaixo estão oito mensagens de erro subindo de ruins a ótimas, o motivo de cada degrau e uma fórmula para usar na próxima que você escrever.
O que muda de ruim para ótimo
Ruim
Ótima
A mensagem ruim foi escrita para o servidor. Um 403 é um código de status real e está correto, mas quem lê não aprende nada que possa usar. A mensagem ótima foi escrita para a pessoa: nomeia o arquivo, explica que ele é privado, diz quem pode abri-lo e transforma o próximo passo em um toque.
Cada degrau acrescenta uma coisa:
| Degrau | O que dá às pessoas | O que ainda deixa de fora |
|---|---|---|
| Ruim | Um código ou uma palavra vaga como "falhou" | O que houve, por quê, o que fazer |
| Boa | O que houve, em palavras simples | Por quê, e o que fazer em seguida |
| Ótima | O que houve, por quê e o próximo passo num botão | Nada que a pessoa precise decidir |
1. Sem acesso
Ruim
Erro 403.
Um código de status. Correto para quem desenvolve, vazio para todo o resto do mundo.Boa
Você não tem acesso a este arquivo.
Diz o que aconteceu, nas palavras de quem lê. Mas deixa a pessoa travada.Ótima
Este arquivo é privado. Peça acesso ao Sam e avisaremos quando for seu.
Diz por quê (é privado), quem pode resolver (Sam) e o que acontece depois. O botão é Solicitar acesso, então pedir leva um toque.
Um 403 significa que a pessoa está logada, mas sem permissão. Essa distinção importa para o texto: ela não precisa entrar de novo, precisa que alguém compartilhe o arquivo.
2. Cartão recusado
Ruim
Falha na transação.
"Falha" sem sujeito. Foi o cartão, a loja, a conexão?Boa
Seu cartão foi recusado.
Nomeia a causa, e a pessoa pode agir sobre ela.Ótima
Seu cartão foi recusado. Seu banco negou. Tente outro cartão ou peça ao banco para aprovar.
Coloca o problema no banco, não na pessoa, e dá duas saídas. O botão é Usar outro cartão, a mais rápida.
Erros de pagamento envolvem mais dinheiro e mais constrangimento. Não culpe ninguém e mantenha a saída na mesma tela.
3. Um arquivo grande demais
Ruim
Erro de upload.
Pode ser qualquer coisa, então as pessoas tentam o mesmo arquivo e batem na mesma parede.Boa
Este arquivo é grande demais.
A causa, mas sem dizer por quanto.Ótima
Este vídeo tem 2,4 GB. O limite é 2 GB. Corte um pouco e tente de novo.
Os dois números, para a pessoa ver que a diferença é pequena. O botão é Cortar vídeo, que resolve sem sair do app.
Quando há um limite, diga o limite. Ninguém consegue corrigir um número que nunca foi informado.
4. Ficar offline
Ruim
Erro de rede.
Parece que algo quebrou, e talvez que o trabalho foi perdido.Boa
Você está offline.
Simples, mas a primeira preocupação de qualquer um é: "perdi minhas alterações?"Ótima
Você está offline. Suas alterações estão salvas neste celular e serão sincronizadas quando você voltar.
Responde à preocupação antes de ela ser feita. O botão é Tentar de novo.
5. Ser deslogado
Ruim
Erro 401: Não autorizado.
"Não autorizado" soa como acusação, e de novo é um código.Boa
Sua sessão expirou.
Correto, mas "sessão" é palavra de desenvolvedor.Ótima
Você foi desconectado. Já se passaram 30 dias. Entre de novo e traremos você de volta para cá.
Explica o motivo e promete que a pessoa não perderá o lugar. O botão é Entrar.
Um 401 é o caso oposto ao 403: a pessoa não está logada, ou o login venceu. Levá-la à tela de login é a solução, e dizer que ela voltará ao ponto onde estava elimina o motivo para hesitar.
Mais três, escritas do zero
As mesmas regras valem para situações que as cinco acima não cobrem. Estes três exemplos são nossos.
Ruim
Erro 500. Algo deu errado.
O código não acrescenta nada, e "algo" admite que não sabemos.Boa
Não conseguimos salvar suas alterações.
Assume o problema e diz o que falhou.Ótima
Não conseguimos salvar suas alterações. O problema é do nosso lado, não do seu. Seu texto continua aqui, então tente de novo daqui a um minuto.
Diz de quem é a culpa e que nada foi perdido. O botão é Salvar de novo.
Ruim
Requisições demais.
Linguagem de máquina para uma pessoa que provavelmente já está frustrada.Boa
Tentativas demais. Tente de novo mais tarde.
Claro, mas "mais tarde" pode ser um minuto ou um dia.Ótima
Tentativas demais. Para sua segurança, o login está pausado por 15 minutos. Você pode redefinir sua senha agora.
Dá o tempo de espera, o motivo e um caminho mais rápido. O botão é Redefinir senha.
Ruim
Link inválido.
Sugere que a pessoa digitou algo errado.Boa
Este convite expirou.
A causa real, sem culpa.Ótima
Este convite expirou. Os convites duram 7 dias. Peça à Maya para enviar um novo.
Diz por que os links expiram e quem pode resolver. O botão é Pedir novo convite.
A fórmula: o que houve, por quê, o que fazer
Toda mensagem ótima acima cabe nas mesmas três linhas:
[What happened, in the reader's words.]
[Why, in one short sentence.]
[What to do next.] [Button: the next step as a verb]
| Mensagem | O que houve | Por quê | O que fazer |
|---|---|---|---|
| Sem acesso | Este arquivo é privado | Só pessoas convidadas podem abri-lo | Solicitar acesso |
| Cartão recusado | Seu cartão foi recusado | Seu banco negou | Usar outro cartão |
| Grande demais | Este vídeo tem 2,4 GB | O limite é 2 GB | Cortar vídeo |
| Offline | Você está offline | As alterações estão salvas neste celular | Tentar de novo |
| Deslogado | Você foi desconectado | Já se passaram 30 dias | Entrar |
A linha do "por quê" é a primeira que os times cortam, e a que evita o próximo chamado de suporte.
Um checklist para a sua próxima revisão
- Sem códigos brutos. Deixe 403, 401 e 500 nos logs, fora da mensagem.
- Sem culpa. "Seu banco negou", não "Você digitou um cartão inválido".
- Diga os números. Um limite de tamanho, um tempo de espera, um número de dias.
- Um botão, nomeado como verbo. "Cortar vídeo", não "OK".
- Diga o que foi mantido. Se nada foi perdido, diga.
- Não confirme contas no login. "Senha errada" avisa a um estranho que a conta existe. Diga "Esse e-mail e essa senha não correspondem".
- Depois confira a cor. As palavras carregam o erro; cor e ícone dão apoio. Nosso paper sobre cor de mensagem de erro traz os vermelhos para usar no claro e no escuro.
Paper
Cor de mensagem de erro: os 8 vermelhos para usar no lugar de #FF0000
O irmão deste paper: as palavras estão aqui, as cores, ícones e código estão lá.
FAQ
Como escrever uma boa mensagem de erro?
Diga o que aconteceu em palavras simples, por que aconteceu em uma frase curta e o que fazer em seguida. Coloque o próximo passo num botão nomeado como verbo, como Tentar de novo ou Usar outro cartão.
Quais são exemplos de mensagens de erro ruins?
Códigos brutos e palavras vagas: "Erro 403", "Erro 401: Não autorizado", "Falha na transação", "Erro de upload" e "Erro de rede". Todas estão corretas e nenhuma diz às pessoas o que fazer.
Mensagens de erro devem mostrar códigos de erro?
Não como a mensagem em si. Um código ajuda o suporte e quem desenvolve, então mantenha-o nos logs ou em texto pequeno abaixo da mensagem real, se o seu time de suporte pedir.
Qual é a diferença entre uma mensagem de erro 401 e 403?
Um 401 significa que a pessoa não está logada ou o login expirou, então a mensagem deve mandá-la entrar. Um 403 significa que ela está logada, mas sem permissão, então a mensagem deve dizer quem pode dar acesso.
Por que um erro de login não deve dizer "senha errada"?
Porque isso confirma que a conta existe, o que ajuda quem tenta adivinhar contas. As recomendações de segurança sugerem uma única mensagem genérica para e-mail errado ou senha errada.
Fontes
- Códigos de status HTTP: 403 Forbidden e 401 Unauthorized na MDN.
- Error-message guidelines, Nielsen Norman Group.
- Writing, Apple Human Interface Guidelines.
- Authentication and error messages, OWASP Cheat Sheet Series.
- Publicado originalmente como carrossel no UX Brainy.
Want every error, empty and loading state written and designed as one system? Our team designs product UI with the words in it from the first draft.
Get Started
