Combinaison de couleurs pour trois boutons


13

Quelle combinaison de couleurs fonctionnerait le mieux pour ces trois boutons:

entrez la description de l'image ici

Devraient-ils tous rester de la même couleur?

Ce sont mes options:

entrez la description de l'image ici

Image de la page entière

entrez la description de l'image ici


Le principal vs le défaut et le défaut vs le succès semblent distraire.
Danny Varod

En regardant la page plus grande, je demanderais ce que le bouton «effacer» est censé faire. Est-ce vraiment une option nécessaire?
DA01

Réponses:


52

Le bouton Go devrait être plus grand et avoir le contraste le plus élevé de tous, car c'est le principal.

Le bouton Clear est correct car il s'agit d'une action secondaire et il doit être neutre .

Pour moi, le bouton Switch a trop de présence à la fois en taille et en contraste. Je le positionnerais entre les listes déroulantes Origine-Destination, où cela aurait plus de sens "par lui-même".

Voici deux solutions similaires qui pour moi sont beaucoup plus propres et offrent une meilleure facilité d'utilisation à cet effet spécifique (je choisirais personnellement la première ):

entrez la description de l'image ici

Juste pour info: j'ai utilisé les icônes Font-Awesom e, celle de la première image est (selon votre version) icon-exchange / fa-exchange et les flèches sont icon- arrow-left / right et fa-arrow-left / droite

EDIT - Suppression de l'encombrement ( basé sur le commentaire d'un DA01 ):

Si le bouton Effacer n'effacera que ces deux champs (de / vers), cela ne semble pas nécessaire, car de toute façon les utilisateurs devront cliquer sur chaque liste déroulante et faire la sélection et cela ne changera pas si vous ajoutez un bouton Effacer .
Si tel est le cas, je recommanderai de le supprimer, de sorte que vous obtenez une interface plus propre et empêchez les utilisateurs d'effectuer une action qui n'ajoute aucune valeur pour eux (et en outre supprimez involontairement ce qu'ils ont sélectionné).

entrez la description de l'image ici


Les ↔︎ flèches ont aussi été ma première pensée. Découvrez comment translate.google.com procède: un bouton ↔︎ avec une info-bulle.
200_success

Si clair est vraiment secondaire, je suis d'accord. Si, d'un autre côté, il est destructeur (suppression du travail saisi), je dirais qu'il devrait vraiment être géré différemment.
DA01

@ DA01 Pourriez-vous expliquer davantage votre dernier commentaire? Quelle option serait meilleure si elle est destructrice et pourquoi? Je suis vraiment intéressé par votre POV.
Alejandro Veltri

@rewobs Je recommande généralement de ne pas avoir d'options destructrices, bien qu'elles existent toujours dans de nombreux systèmes. Comme il est destructeur, il ne devrait pas ressembler à un bouton, à mon humble avis, car les boutons peuvent devenir cliqués habituellement. Les gens remplissent souvent un formulaire puis cliquent sur le bouton le plus «évident» en bas en supposant qu'il est SOUMIS. Donc, au moins dans la conception du formulaire, je recommande généralement que le seul bouton soit soumis. S'il y a d'autres tâches, rendez-les visuellement différentes et atténuées par rapport au bouton principal.
DA01

1
@ DA01 J'ai bien compris, merci pour la clarification. De plus, j'ai lu votre commentaire dans la question, demandant si le bouton d'effacement est vraiment nécessaire et je pense que ce n'est pas le cas, car de toute façon l'utilisateur remplacera la valeur en re-sélectionnant dans les listes déroulantes, donc l'ajout d'un bouton d'effacement ajoutera un inutile action "au milieu".
Alejandro Veltri

12

Une solution consiste à séparer visuellement votre bouton par priorité.

Vous auriez généralement des boutons principaux, des boutons secondaires et parfois des boutons tertiaires et / ou des boutons d'action non préférés.

Pour le primaire et le secondaire, je suggère généralement votre couleur de marque préférée (purement subjective) en deux niveaux de contraste. Contraste élevé pour le primaire, légèrement moins contrasté pour le secondaire.

Boutons tertiaires J'essaie généralement d'éviter et d'aller plutôt avec un visuel complètement différent, comme un lien.

Donc, étant donné votre exemple et en interprétant le contexte comme un pari que je peux, je suggère quelque chose comme ceci:

entrez la description de l'image ici

Ce n'est qu'un exemple très rapide et vous devez confirmer que le contraste respecte les directives d'accessibilité et ne semble pas désactivé (ce que fait le mien, il a donc besoin d'être modifié), mais j'espère que cela fera le point.

MISE À JOUR: Je viens de remarquer en publiant ceci que c'est le modèle utilisé par StackExchange lors de la création d'un nouveau message. Le bouton SAVE est principal, CANCEL est tertiaire et affiché sous forme de lien plutôt que de bouton.


1

Les couleurs à contraste élevé (par exemple noir-blanc) sont toujours les meilleures, ce qui élimine l'option orange. Et puis, en ajoutant un peu de marketing au mélange, quel est le schéma de couleurs utilisé pour le reste de votre page en termes de boutons, d'application? Mais si je devais choisir: Go: vert; Interrupteur ...: bleu marine; Clair: noir-blanc. Gardez à l'esprit que la couleur est également liée à la préférence.

(Hors sujet: vous pouvez éliminer la longue étiquette de commutation par un bouton marqué d'une icône entre les deux champs)


1
Bienvenue sur UX.stackexchange. Quelles preuves avez-vous que le contraste élevé est toujours le meilleur?
Mayo

1
Eh bien, ce n'est peut-être pas la meilleure solution dans n'importe quel contexte, mais le contraste élevé améliore la lisibilité car il distingue le texte de l'arrière-plan. Sinon, cela devient flou. Considérez le daltonisme (le plus courant: vert-rouge): le texte rouge sur fond vert ou vice versa est la façon dont vous détectez cette forme de daltonisme.

1
Voici un article qui répertorie différents arguments pour les couleurs: usertesting.com/blog/2014/12/02/color-ux-conversion-rates

Il y a un point où le contraste n'est pas assez grand et la lisibilité diminue. Je suppose que je me concentrais excessivement sur l'exemple en noir et blanc dans la première phrase. Il arrive un moment où la lisibilité est «atteinte», puis «plus» n'augmente pas les performances de l'utilisateur. Encore. Bienvenue à UX
Mayo

1

Je dirais changer le contraste d'une nuance de couleur similaire pour montrer l'accent . Pourquoi? ( 1 homme sur 12 est daltonien et 1 femme sur 200 est daltonien

Vous souhaitez également guider les utilisateurs vers le chemin prévu à travers le système afin que je rende le bouton Go plus sombre. Ils pourraient numériser tous les boutons et les traiter ou ils pourraient avoir quelque chose comme une couleur plus foncée ou une taille plus grande les attirer vers le choix prévu ou 80% le plus courant de cette façon, ils y regardent en premier et disent oui, cela leur fait gagner du temps.

Cet article dit que celui-ci devrait ressembler au bouton le plus important

Voir leur exemple ci-dessous

entrez la description de l'image ici

Ne semble pas aussi bon que l'image ci-dessous (à mon avis)

entrez la description de l'image ici

Cet article mentionne également de mettre les boutons dans un ordre raisonnable . Donc, à mon avis, je mettrais le bouton aller à droite parce que les utilisateurs anglophones de gauche à droite (donc ils regardent naturellement vers la droite pour terminer les signes). Je le mettrais à gauche pour les utilisateurs arabes. Voilà comment je l'organiserais pour un marché anglais.

entrez la description de l'image ici

Un dernier sujet de cet article est Rendre plus difficile la recherche de boutons destructeurs.Dans votre scénario, je changerais votre commande de cette façon si vous cliquiez dessus et que vous manquiez accidentellement à gauche, vous changeriez peut-être l'emplacement d'expédition plutôt que de détruire l'action. Vous pouvez également confirmer la tâche destructrice si vous le jugez nécessaire (c'est-à-dire êtes-vous sûr?).


"parce que les utilisateurs anglophones lisent de droite à gauche" - hein? Parlons-nous du même anglais?
BlueRaja - Danny Pflughoeft

édité ... whoops
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.