Se você já é um usuário de computador a mais de 15 minutos, provavelmente já recebeu uma mensagem de erro. E se você já leu uma destas mensagens, provavelmente clica em “Ok” toda vez que uma mensagem de erro aparece sem se dar ao trabalho de tentar ler novamente. O design pode mudar isto.
Mensagens de erro não aparecem apenas no sistema operacional. Eles ocorrem em qualquer interface que tenha um código por trás – até em sites. E muitas vezes, estas mensagens de erro se resumem ou a algo muito genérico como “Um erro ocorreu. Fechando aplicativo” até aquelas mensagens que parecem ter caracteres aleatórios:
Além destas mensagens, há ainda aqueles avisos que você não sabe do que se trata. Um exemplo clássico é o alerta JavaScript usando em sites, que podem conter de tudo: desde uma mensagem de “sucesso” até uma de “falha”. Ambos, sem distinção alguma.
Como criar mensagens de erro compreensivas?
Como designer trabalhando em algum projeto, há algumas coisas que você pode fazer para facilitar o entendimento da mensagem de erro.
Vamos levar em conta o exemplo do formulário de contato. Ao clicar em “Enviar”, o formulário pode retornar um de dois resultados: sucesso ou falha. O primeiro passo, é deixar óbvio o que é sucesso e o que é falha.
Conseguir isto é fácil. Um aviso retornando uma mensagem de “sucesso” pode usar bastante a cor verde, culturalmente associada ao sucesso e/ou falta de erro. Já uma mensagem de “erro” ou “falha” necessita de (por exemplo) um ponto de exclamação grande e vermelho. Ou, se quiser ser bem minimalista: use como cor de fundo para a caixa de aviso o verde ou o vermelho.
Mas cuidado: não vá dar uma de espertinho e inverter o significado das cores, ou até mesmo usar cores totalmente diferentes. O amarelo, por exemplo, não poderia ser usado para indicar “sucesso”, pois é uma cor que remete a “atenção”. Teoria das cores é um assunto importante neste caso.
E se você não puder usar cores no seu projeto? É possível indicar um aviso usando apenas preto e branco e tipografia diferenciada.
Informe uma mensagem de erro
Talvez uma mensagem de erro escrito apenas “Erro” não seja muito útil ao usuário. O que aconteceu? Quem errou? Foi o computador ou foi eu? Não fiz algo certo? O que não fiz certo?
Quanto mais objetivo for a mensagem de erro, menos o usuário irá errar na próxima tentativa. Mensagens como “Erro na linha 42341, código 234#49%9210″ não diz nada de útil ao usuário. Já um “você esqueceu de preencher o campo de Nome” é bem mais objetivo.
Ofereça soluções para consertar o erro
Depois de informar um erro objetivamente, o próximo passo é oferecer uma solução para este erro.
A solução pode ir de um simples “Clique aqui e preencha o campo que faltou” até um “Por favor, entre em contato com o administrador pelo e-mail (…) e detalhe o problema”. Quanto mais fácil for a solução do problema, mais chances há do usuário consertá-lo sozinho.
O usuário tentou enviar um formulário mas esqueceu de preencher um campo? A mensagem de erro deve apontar isto, deixando claro: “Você não preencheu o campo X. Clique aqui para voltar e preencher este campo”. Ele preencheu um e-mail que não segue a regra usuario@domínio.tld? A mensagem de erro deve incluir: “Seu e-mail parece inválido. Por favor, verifique se ele foi digitado corretamente”. E por aí vai.
Use uma linguagem a altura do usuário
“Os inputs não possuem valores válidos” é uma frase confusa que um usuário comum pode não entender. “Você preencheu um telefone inválido no campo Telefone” já é uma frase muito mais fácil. Use uma linguagem leiga para que qualquer usuário entenda.
Resumindo
Mensagens de erro precisam fazer 3 coisas. Elas precisam comunicar ao usuário que:
- Um erro aconteceu
- O que aconteceu
- O que pode ser feito para corrigí-lo
Um exemplo são as janelas de confirmação de envio e erro de envio que uso nos formulários de contato dos blogs que eu crio no xCakeBlogs:
No caso da mensagem de erro, ao clicar no “X” o usuário é redirecionado a página anterior onde todos os campos ainda estão preenchidos. Lá, ele pode consertar o erro.
Inspiração: CommerceTuned
Deixe seu comentário!
-
klawdyo
-
http://twitter.com/diegoponci Diego Ponciano
-
Mateus
-
sad mateus
-
deividfilipe
-
http://design.blog.br canha
-
-
-
-
http://twitter.com/PabloRD Pablo RD
-
luis
-
http://alexnascimento.com Alex Nascimento
-
Anthony
-
http://www.renatoprospero.tumblr.com Renato Prospero
-
http://www.fernandobecker.com.br Fernando Becker
-
Solano Galeão
-
Heitor Norollon
-
http://design.blog.br/web-design/design-de-mensagens-de-erros Heitor Norollon
-