5.5 Validação de componentes - Erro

Definição:

Todo sistema deve possuir uma forma bem clara e definida de retornar erros, sejam eles cometidos pelo usuário ou pelo próprio sistema. Todas as mensagens devem ser claras, objetivas e diretas, evitando que o usuário tenha dúvidas de como proceder para reparar o erro.

 Este manual trata isoladamente cada tipo de erro:

 a.1) Erro em campo de formulário:

 Alguns campos podem ter o preenchimento obrigatório exigido. Para indicar isto, um asterisco vermelho é colocado antes do label. Caso um desses campos não seja preenchido ou seja preenchido de maneira incorreta uma mensagem de erro será apresentada logo abaixo, além disso, o campo é contornado de vermelho, a fim de facilitar a localização do campo com erro em casos de formulários mais complexos. A seguir, alguns exemplos:

a.2) Erro em panels:

 Os Panels também deverão ser contornados de vermelho (se estiver fechado) para indicar que há um erro em pelo menos um elemento contido contido nele. Desta forma, mesmo com um panel fechado, o usuário saberá que há um erro em algum elemento dentro do panel. Se o panel estiver aberto, apenas o elemento com erro deverá ser indicado de vermelho. 

 Atenção: Quando houver apenas um panel na tela, não há necessidade de identificar o erro no panel, pois o mesmo já será apresentado na tela aberto sinalizando os elementos que possuem erros.

a.3) Erros em wizzard e abas:

 Abas contêm vários elementos e podem conter um erro em uma aba fechada, o que dificulta a visibilidade do mesmo. Pensando nisto, mesmo que a aba não esteja ativa ela é sinalizada em vermelho (Para mais detalhes, consulte os tópicos 4.10 e 4.13):

 

a.5) Erro em telas:

 Agora exemplificamos como se comporta uma tela que contenha erros:

Neste exemplo, alguns campos de formulários são contornados de vermelhos, indicando erro e logo abaixo uma breve descrição do que deve ser feito para reparar o erro. Além disso, todo o panel fechado é contornado de vermelho, indicando que elementos contidos nele possuem erro.

Além de tudo isso, uma mensagem de sistema (consulte o tópico 4.2 deste guia) logo abaixo do título da tela informa de maneira geral que há erros nesta tela e que precisa ser reparado. Esta mensagem não descrimina os erros, apenas indica que há erros. As mensagens abaixo de cada item irá especificar o tipo de erro.

Por fim, os botões finalísticos da tela se apresentam inativos, impossibilitando que o usuário prossiga para a tela seguinte sem antes retificar os erros (para mais detalhes sobre botões, consulte o tópico 4.1 deste guia). Uma vez todos os erros reparados, os botões assumem a forma normal e o usuário poderá prosseguir sua navegação.

 a.5.1) Distâncias:

              Distância entre o título da tela e a mensagem do sistema: 40px

              Distância entre o input e a mensagem de erro: 5px

 a.5.2) Cores:

              vermelho: #f84444

 a.5.3) Textos:

              Textos de erro: OSr/13 (10)

             Textos da mensagem dos sistema: OSsb/13 (9)

 

Relação das possíveis mensagens de erro:

1- Campo de preenchimento obrigatório.
2- Selecione um item.
3- Selecione pelo menos uma opção.
4- Caracteres inválidos.
5- Por favor, corrija os campos indicados em vermelho abaixo.
6- Data inválida.
7- Data não pode ser maior que xx/xx/xxxx.