Mensagens de erro

As mensagens de erro devem ser claras e devem ajudar o utilizador a corrigir ou utrapassar os erros. Uma mensagem do tipo: "Ocorreu um erro ao preencher o formulário" não ajuda em nada a saber a razão pela qual ocorreu o erro nem como o corrigir.

Sempre que possível, deve evitar-se sequer que os erros ocorram, como por exemplo dando dicas juntos dos campos sobre o tipo de informação pretendida, ou limitando a forma como os dados são inseridos (ex: num campo onde se pedem números de telefone, o campo aceitar apenas números e não letras)

As mensagens de erro devem ajudar a identificar o que aconteceu e como corrigir

Localização das mensagens

As mensagens de erro devem estar junto do campo a que dizem respeito. No exemplo abaixo, colocámos a mensagem de erro dentro da própria <label>, o que nos dá algumas vantagens em termos de acessibilidade, pois a mensagem de que o campo contém erros pode ser lida antes de chegar ao respectivo campo, ex:

<div class="erro">
	<label for="nome">Nome <em>Erro: este campo é de preenchimento obrigatório</em></label>
	<input id="nome" type="text" name="nome" value="" />
</div>

A forma como colocamos a mensagem de erro junto ao campo pode varias, o importante é que os campos que contêm erros sejam claramente identificados como tal, e tenham a informação contextual de ajuda sobre o tipo de erro e como resolvê-lo.

Exemplo de um campo com mensagem de erro

No caso de ser um formulário extenso (maior do que a altura visível do ecrã), é útil indicar no topo da página que existem erros de preenchimento no formulário abaixo. Esta informação pode também conter links directos para os campos que necessitam de ser corrigidos.

Exemplo de bloco com mensagens de erro e links para os respectivs campos que pode ser usado no topo do formulário

Visibilidade das mensagens

As mensagens de erro devem distinguir-se claramente dos restantes elementos do formulário. Normalmente a cor vermelha é associada às mensagens de erro, e como tal deve ser evitado o seu uso nos formulários, a não ser quando existam de facto erros de preenchimento.

As mensagens de erro podem ser mostradas à medida que o utilizador vai preenchendo o formulário (inline) ou apenas depois do utilizador submeter o formulário. Na maior parte dos casos, mostrar os erros inline ajuda os utilizadores a preencher o formulário mais rapidamente e a corrigir potenciais problemas antes de fazer o envio final dos dados. No entanto, a escolha entre uma opção ou a outra vai depender do contexto do website e do próprio formulário. Aqui a questão importante é sempre a utilidade e a localização das mensagens no formulário.

Mensagens de sucesso

O utilizador deve receber feedback de que a sua acção foi realizada com sucesso. Este feedback não deve ser intrusivo e não deve ser um beco sem saída.

A melhor forma não intrusiva de mostrar as mensagens de sucesso é disponibilizar essa informação no topo da página logo após o utilizador ter submetido os dados do formulário. Isto pode ser feito recarregando novamente a página do formulário com essa informação de sucesso no topo, ou carregando uma página de sucesso (preferível).

As cores e a iconografia das mensagens de erro e de sucesso devem ser imediatamente perceptíveis. Normalmente o verde é sinónimo de que tudo correu bem enquanto que o vermelho é sinónimo de erro. Por motivos de acessibilidade, não devemos confiar apenas na cor para diferenciar a informação erro/sucesso, daí a necessidade de incluir iconografia ou que a própria mensagem inclua os termos "erro" ou "sucesso".

Diferenciação clara entre mensagens de sucesso e de erro

Mensagens inline

Por vezes, poderemos usar mensagens de sucesso inline para dar pistas ao utilizador de que os campos foram preenchidos correctamente.

No entanto, não convém abusar deste tipo de mensagens. A informação de sucesso apenas deve ser mostrada quando a informação que é pedida não é óbvia. Ou seja, nos campos em que se pergunta o nome, género sexual, país, etc não se devem usar mensagens de sucesso porque as respostas são óbvias para o utilizador. As situações onde se devem usar mensagens de sucesso inline são, por exemplo, quando o utilizador regista uma nova conta e escolhe um nome de utilizador, aqui podemos mostrar se esse nome está disponível com uma mensagem de sucesso, ou mostrar uma mensagem de erro (e sugestões de outros nomes) caso esteja indisponível.

Uso de mensagens de sucesso inline

Páginas de erro (404)

As páginas de erro são páginas que devemos evitar que os utilizadores vejam. Se o utilizador chegou a uma página de erro, é porque algo correu mal. Quando isso acontece, devemos dar os meios para que o utilizador possa recuperar desse erro e continuar a sua navegação.

Um dos pontos mais importantes numa página de erro é não criar um beco sem saída para o utilizador. Estas páginas devem ter a navegação principal do site ou, no mínimo dos mínimos, fornecer um atalho para voltar à página inicial. Muitos utilizadores usam os atalhos para a página incial como que para "começar de novo" quando se sentem perdidos ou se deparam com erros inesperados.

O acesso ao formulário de pesquisa também é recomendado, pois se o utilizador chegou a esta página quando procurava por um conteúdo em particular, pode tentar usar a pesquisa para ver se consegue encontrar o conteúdo que procura.

Finalmente, deve-se tentar não usar terminologia demasiado técnica (a não ser que o público alvo do website a compreenda) para indicar que a página não foi encontrada. Ou seja, não basta indicar o código 404, é preciso explicar o que aconteceu, ex: "Página não encontrada".