web-dev-qa-db-fra.com

Est-il acceptable d'utiliser la couleur orange pour les boutons et le rouge pour les messages / boutons d'avertissement?

J'ai une barre de navigation avec une fonctionnalité de recherche qui a deux boutons "Rechercher" et "Avancé". Ma couleur principale est le bleu # 2a7ab0 Je l'utilise pour les boutons et du texte. La couleur du texte sur le bouton bleu est blanche #fff. Pour les actions risquées, soit un texte, soit un bouton que j'utilise en rouge # e00000. Ma question est de savoir si je devrais utiliser l'orange # d43900 comme bouton secondaire pour "avancé". Y aura-t-il une confusion entre celui-ci et le rouge pour les actions risquées? Je pense aux personnes daltoniennes. J'ai essayé le vert, mais c'était soit trop sombre et moche, soit trop clair pour le texte blanc. Je considérerais d'autres couleurs autres que les violets et les roses.

enter image description here

1
Bilal Khoukhi

Je conserverais votre action principale telle quelle, mais ferais de votre action secondaire un lien utilisant la même couleur que le bouton principal.

De cette façon, votre action secondaire ...

  • est moins important et pas si "en face", permettant aux utilisateurs de se concentrer sur les actions principales
  • utilise le schéma de couleurs existant plutôt que d'ajouter une nouvelle couleur sans raison valable
  • différencie le type d'action, c'est-à-dire ' effectuez la recherche', ' amenez-moi à utilisation avancée "

Voir aussi - les recherches de Luke Wroblewski sur Actions primaires et secondaires dans les formulaires Web .

enter image description here

9
Roger Attrill

En ce qui concerne l'accessibilité, l'orange et le rouge doivent se fermer pour se distinguer. Vous pouvez les différencier par contraste de légèreté.

Il serait préférable d'utiliser un champ de recherche clair comprenant une étiquette, un texte de conseil dans le champ de saisie et un texte d'aide en dessous.

Les icônes par défaut aident les utilisateurs à reconnaître rapidement la fonctionnalité. Le bouton des paramètres avancés est désormais placé à côté du champ de recherche principal, ce qui en fait une option plus approfondie.

enter image description here

2
Rien Daamen