web-dev-qa-db-fra.com

Quand le rouge est-il la bonne couleur pour un bouton?

Après avoir lu cette question sur Big Bad Red buttons , où il était généralement convenu que les boutons rouges poussent l'utilisateur à cliquer, je me suis dit: alors quand sont-ils une bonne conception de l'interaction et de la capacité?

  • Les boutons rouges signifient généralement quelque chose de négatif, donc je suppose que les utilisateurs s'attendront à celui d'un bouton rouge.

  • Les boutons rouges incitent les utilisateurs à cliquer au lieu de l'éviter.

Les deux déclarations ci-dessus semblent fonctionner l'une contre l'autre. La couleur rouge est-elle "éteinte" pour les boutons? Quand est-ce une bonne idée de l'utiliser, le cas échéant?

24
Vic Goldfeld

Les boutons rouges sont appropriés lorsqu'une action principale est de nature négative.

Autrement dit, l'utilisateur est très susceptible de vouloir appuyer sur le bouton de toute façon, et l'action déclenchée annule, termine, supprime ou toute autre action "négative". Voici quelques exemples d'iOS:

enter image description here

Notez que dans l'image de droite, l'utilisateur a déjà indiqué il souhaite quitter la page actuelle, il est donc probable qu'il souhaite cliquer sur le bouton "Supprimer le brouillon". Si cette action avait été d'une importance secondaire dans ce contexte, je n'irais pas avec le rouge (et cet emplacement et cette taille à l'écran).

Ce modèle renforce la nature de l'action tout en attirant l'attention sur l'endroit où vous voudrez probablement cliquer/toucher compte tenu du contexte.

31
peteorpeter

Peut ne pas être pertinent dans le contexte ci-dessus, mais je me souviens vaguement que dans votre vision périphérique, la couleur rouge est la couleur la plus facilement distinguée. Cette application est souvent utilisée dans des interfaces utilisateur réelles plutôt que sur des écrans. Je suppose que les écrans sont généralement assez petits pour que vous n'ayez pas besoin de votre vision périphérique.

4
Sheff

Bien sûr, toute cette "sagesse conventionnelle" peut maintenant être remise en question de manière appropriée étant donné que Google a maintenant complètement violé cette "règle" sur la plupart de ses applications Web.

Voici une conversation G + sur la même chose: https://plus.google.com/113117251731252114390/posts/RNM3ki72Yby

1
Jay Stevens

La couleur rouge indique dans la plupart des cas un risque potentiel. Mais en plus de la couleur des actions, la séquence, le placement, le regroupement (voir écran 2) et la forme/taille sont importants. J'utiliserais d'autres couleurs pour les boutons d'attention.

1
sysscore

Bien sûr, vous devez trouver l'adresse dans les directives de marque, mais à certains moments, la couleur rouge signifie "refuser", mais si vous avez vérifié les images ci-dessous, vous voyez quelques exemples de celles utilisées en rouge pour obtenir des actions. Netflix

invision

1
Mohsen Samoodi