web-dev-qa-db-fra.com

La couleur rouge est-elle vraiment appropriée pour les erreurs de validation de formulaire?

Il semble être tenu pour acquis que la couleur rouge est appropriée pour mettre en évidence les erreurs. En cas d'erreurs système graves, je suis d'accord. Cependant, je doute que ce soit le bon choix pour les erreurs générées par l'utilisateur, comme la validation de formulaire.

Il est courant de voir quelque chose comme ça:

Red colored error message

Pour moi, cela revient à blâmer ou à crier sur l'utilisateur. J'ai plutôt pensé à quelque chose comme ça:

Yellow colored error message

Cela ressemble à un message avec un ton plus doux même si les mots sont les mêmes.

Mon avis: les utilisateurs n'ont pas besoin de sentir comme ils ont causé une "erreur", et les formulaires sont déjà assez ennuyeux, surtout quand vous avez fait une erreur ou deux (parce qu'après tout, l'utilisateur n'est pas essayant de transmettre exprès un e-mail invalide). C'est juste une petite erreur corrigeable - pas un arrêt de spectacle.

Les erreurs système sont une chose différente: elles ne sont pas nécessairement la faute de l'utilisateur, et elles peuvent vraiment signifier que quelque chose est cassé ou hors du contrôle de l'utilisateur. Y a-t-il une raison pour laquelle les erreurs générées par l'utilisateur devraient (ou ne devraient pas) être rouges?

Remarque: je suis préoccupé par les couleurs, pas nécessairement le texte du message ou les icônes.

38
Wesley Murch

Je pense que le rouge est à peu près la convention dans ce contexte, vous devez donc utiliser le rouge pour les erreurs qui doivent être corrigées avant de pouvoir passer/envoyer le formulaire. Le jaune est généralement utilisé pour les avertissements (par exemple, l'utilisateur devrait peut-être/pourrait améliorer quelque chose, mais cela ne s'arrête pas). Le jaune peut être utilisé avec par exemple avec l'un de ces trucs de force de mot de passe où la barre montre la force de votre mot de passe: avertir l'utilisateur quand il donne un mot de passe faible ou très commun.

Vous devez suivre les conventions (sauf si vous avez une raison très forte de ne pas le faire). Pour paraphraser Loi de Jakob sur l'expérience utilisateur Web : les gens passeront la plupart de leur temps ailleurs que sur votre site Web.

Un point important à comprendre est que l'utilisation de couleurs conventionnelles pour les erreurs est importante car elles rendent les erreurs plus visibles. L'utilisateur ennuyé par la couleur du message d'erreur pose beaucoup moins de problèmes que l'utilisateur ne pouvant pas remplir le formulaire car il n'a pas remarqué l'erreur. Du moins dans la plupart des cas.

29
Illotus

Le rouge pour les messages d'erreur et les alertes concernant quelque chose qui est d'une attention critique est assez courant dans la société occidentale.

Il est bien utilisé dans les systèmes d'exploitation, comme Windows et OSX pour utiliser le rouge pour l'erreur, le jaune pour l'avertissement et le vert pour les messages de réussite. Cela peut être aussi subtil que de simplement avoir un "X" rouge ou une coche verte, mais ils communiquent l'état du message. Voici quelques directives pour les développeurs Windows pour l'utilisation des couleurs: http://msdn.Microsoft.com/en-us/library/windows/desktop/aa511283.aspx#meaning

Vous le remarquerez même sur nos routes. Feux rouges, jaunes et verts. Panneaux d'arrêt rouges et panneaux d'interdiction. C'est une référence culturelle à laquelle nous sommes très habitués.

Stop sign

En fait, lors d'une récente série de tests d'utilisabilité, nous avons eu des messages incorrectement colorés en tant qu'avertissements alors qu'ils auraient dû être rouge d'erreur, et les commentaires des utilisateurs étaient que ceux-ci devaient être plus clairs et ressembler davantage à un message d'erreur. Dans certains cas, la préférence était rouge.

Si le contexte pour le rouge est requis, les utilisateurs ne se sentiront généralement pas criés ou se sentiront obligés de paraître mauvais.

Sauf si vous avez une très bonne raison de ne pas utiliser le rouge pour les messages d'erreur, vous devez vous conformer aux coutumes et conventions culturelles. Si vous décidez d'utiliser quelque chose de différent, assurez-vous de le tester pour vous assurer qu'il fonctionne.

J'espère que ça aide.

14
DigiKev

Je pense que nous négligeons un cas d'utilisation important: les couleurs de marque de certaines entreprises sont rouge/orange/rose, et dans de nombreux cas, associer la couleur de marque à des erreurs n'est pas une bonne pratique.

La couleur n'est qu'un outil de conception - dans ces cas, il est préférable d'utiliser une icône d'avertissement/d'erreur qui n'est pas rouge (jaune/violet - quelque chose avec un contraste relatif).

2
jared

D'après mon expérience, le "rouge" semble être la couleur que la plupart des utilisateurs associent à l'erreur. La plupart des environnements utilisateur utilisent le rouge pour les avertissements et répondent en conséquence. Cependant, si l'arrière-plan ou le texte ne contraste pas bien, l'utilisation d'une autre couleur est acceptable.

0
Matt Lynch