Combinaison de couleurs pour trois boutons

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

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

Ce sont mes options:

Image de la page entière

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 ):

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é).

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:

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.

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)

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

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

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.

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?).