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:

mensagem-de-erro-confusa

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.

mensagem-de-erro-incompreensivel

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.

mensagem-de-erro-minimalista

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:

error-design-success

error-design-fail

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.

Gostou? Compartilhe!

Comentários fechados