Quelle couleur choisir comme "danger" si la couleur principale de mon application est rouge
J'ai cette question enroulée autour de ma tête depuis un certain temps. Le fait est que mon application principale a un thème de couleur rouge. Et pour annuler uniquement les boutons, je n'utilisais que des couleurs grises mais maintenant que j'ai besoin d'une couleur "danger" ... Que dois-je utiliser? Violet? Orange? Utiliser à nouveau le rouge est gênant, peut-être un rouge plus foncé?
PD: Je ne peux pas utiliser le bleu car c'est la couleur de nos concurrents.
Je pense que vous devez jouer. Si vos écrans sont rouges et que vous êtes sur le point d'utiliser un avertissement ou un danger. J'ai les suggestions suivantes:
1- Vous pouvez toujours utiliser du rouge mais à des degrés différents afin de différencier la couleur de l'application et votre action de danger.
2- Vous pouvez utiliser un popup blanc pur et appliquer des icônes rouges , un point d'exclamation ou des signes dans ce popup.
3- Une autre suggestion consiste à utiliser la couleur noire, et utiliser des signes blancs sur le popup noir . Cela peut être un changement.
Si vous pouvez nous fournir un écran de votre système rouge, je peux vous donner une solution simple.
Plutôt que de se concentrer uniquement sur la couleur du bouton, il est préférable de se concentrer sur l'expérience dans son ensemble pour cette tâche particulière. Vous n'avez pas nécessairement besoin d'une couleur de danger distincte pour un bouton de suppression. Vous pouvez utiliser votre bouton rouge standard, mais le soutenir avec d'autres messages de danger. Comme ça:
Si votre utilisateur est sur le point de faire quelque chose de dangereux, il est préférable d'utiliser une alerte et un message pour mettre en évidence le danger, plutôt que de simplement compter sur la couleur des boutons.
Cela vaut également la peine de dire qu'il n'y a rien de intrinsèquement dangereux ou effrayant dans une application rouge. J'ai conçu pour Coca-Cola pendant un certain temps, et leur couleur de marque principale est le rouge. Ils sont un très bon exemple de la façon d'appliquer la marque rouge aux sites Web et aux applications, si vous en recherchez un. Ils utilisent principalement le noir, le gris et le blanc comme couleurs d'accentuation.
Une chose absolument clé à noter ici:
Ne vous fiez pas uniquement à la couleur pour transmettre du sens.
Les couleurs sont pratiques pour transmettre un message visuel, mais vous devez tenir compte de l'accessibilité lorsque vous prenez ce type de décisions UX. Si votre utilisateur souffre d'une forme de daltonisme ou d'une autre déficience visuelle, vous avez besoin d'un autre type d'indicateur (icônes ou libellé) pour transmettre la signification. Le fait que le bouton soit intitulé Delete est formidable, mais si vous craignez qu'il s'agisse d'informations "critiques pour le système", cela doit être transmis bien au-delà de la simple utilisation de la couleur comme indicateur.
Cet article couvre l'utilisation de la couleur en ce qui concerne l'accessibilité, et contient un paragraphe spécifique à ce sujet:
"... assurez l'accessibilité en vous assurant que vous ne comptez pas sur la couleur pour relayer les informations système cruciales. Ainsi, pour des choses comme les états d'erreur, les états de réussite ou les avertissements du système, assurez-vous d'incorporer une messagerie ou une iconographie qui indique clairement ce qui se passe sur."
En outre, étant donné que le rouge est la couleur clé de votre application: assurez-vous que vous utilisez un contraste d'au moins 4.5:1 pour adhérer à WCAG 2 niveau AA au minimum. Ceci est un outil vraiment pratique pour vérifier que: https://webaim.org/resources/contrastchecker/
À mesure que le nombre d'options viables augmente, il peut devenir plus difficile de prendre une décision finale. Une fois que vous l'avez réduit à quelques-uns, vous pouvez envisager d'autoriser les utilisateurs à sélectionner le schéma qu'ils préfèrent .
Quelques schémas de couleurs à considérer:
Rouge = danger = votre application est dangereuse. Modifiez la couleur principale de votre application.
Bleu = couleur du concurrent. Concurrent = dangereux. Utilisez du bleu pour le danger. Alors qu'un bleu plus clair peut être confondu avec une alerte positive (comme le succès), un bleu foncé ne le peut pas.
Utilisez du noir et du blanc. Les exemples de réponse de Khalil Hanna sont frappants. Le problème est que le noir/blanc peut être confondu avec du texte ordinaire. Le noir + orange/jaune peut ne pas avoir le même problème.
Utilisez des couleurs standard quelle que soit la couleur principale de votre thème. Vert = succès. Jaune/Orange = Attention. Rouge = danger/avertissement. Etc.
Cependant, comme souligne Aline , le Google Material Design Color Usage conseille: "Puisque le rouge est une couleur de marque, ne utilisez-le pour transmettre un état d'erreur . Choisissez des couleurs d'alerte alternatives qui n'utilisent pas la coloration de la marque. " Leur exemple utilise de l'orange. Mais le violet semble également une option viable.
![Material Design Example]()
La "couleur de danger" doit se démarquer du jeu de couleurs de votre application. Il est également bon de considérer le sens. Rouge/Orange/jaune, dans la plupart des cultures, indique un danger, une alerte, une attention. Habituellement, si je vois un message bleu ou vert, je pense automatiquement que c'est une rétroaction réussie. Je pense que vous devriez utiliser l'orange ou le jaune pour vous démarquer des couleurs principales.
Dans Google Material Design, ils utilisent l'orange avec des thèmes rouges: https://material.io/design/color/color-usage.html#meaning
La première palette de couleurs qui vient à l'esprit pour indiquer le danger est une combinaison de jaune et de noir, en particulier si le noir est en bandes diagonales. Je soupçonne que l'association avec le danger vient des abeilles dans la nature.
Il suffit de taper yellow black sign dans Google entraînera de nombreux signes indiquant un danger quelconque. Chante sur le poison, le danger de tomber, la bande utilisée autour des scènes de crime, etc.
J'ai personnellement vu des boîtes de message avec une bordure épaisse, jaune et noire à rayures diagonales, et elles me font toujours penser qu'il y a quelque chose de potentiellement dangereux, probablement une décision potentiellement dangereuse à prendre. Voir un bouton avec un triangle arrondi avec le même motif me dirait que je devrais être très prudent si j'appuie sur ce bouton.
Pour moi, le rouge uni n'est pas aussi fort et aurait besoin de blanc et de noir pour traverser complètement le même niveau de danger.
Si vous utilisez déjà la couleur rouge, utilisez le jaune et le noir. C'est un signe d'avertissement naturel de la nature et attirera certainement l'attention. Il est également utilisé sur de nombreux signaux de danger pour les chantiers de construction.
Dans les pays occidentaux, rien de culturellement plus dangereux que le noir sur rouge:
AVOIR DE L'ATTENTION
LA COULEUR MANQUE DE SIGNIFICATION
La couleur seule ne transmet pas de sens, et en tant que telle, elle ne doit pas être invoquée pour toute expression de "danger" ou "d'avertissement". De plus, les déficiences visuelles telles que la deutéranomalie (6% des hommes affectés) rendent certains contrastes de couleurs invisibles, sans parler des différences culturelles comme plusieurs l'ont mentionné.
CONTRASTE, SYMBOLES et TEXTE
Des couleurs telles que le rouge, le jaune, l'orange ont été choisies non pas parce que la couleur a une signification spécifique, mais parce que la couleur fournit un certain contraste de couleur, un contraste de luminance et un "accroche-regard", et se démarque ainsi sur le fond.
Il est plus important d'avoir un contraste de luminance adéquat et d'utiliser des symboles orientés attention/attraction qui sont clairs dans leur intention.
Le contraste de luminance ne repose pas sur le contraste des couleurs qui peut être mal perçu en raison de déficiences ou de différences culturelles, et aide le symbole à se démarquer. L'utilisation d'un contraste de luminance plus élevé que les stimuli environnants (texte, boutons, etc.) contribuera à attirer l'attention et à concentrer l'utilisateur.
Le contraste des couleurs peut aider à accroître la prise de conscience en termes de reconnaissance cognitive d'un avertissement, mais il doit être une considération de conception secondaire. Par exemple, si le marché est l'Amérique du Nord, le vert est peut-être un mauvais choix pour un avertissement - Mais le vert en combinaison avec sa couleur rouge (y compris les violets) ) crée une détection Edge très puissante dans la perception visuelle humaine normale.
Les symboles compréhensibles peuvent être très utiles pour transmettre du sens d'une manière qui (idéalement) ne nécessite pas de traduction. Encore une fois, les différences culturelles peuvent avoir une forte influence.
À Las Vegas, le MGM Grand Hotel a été conçu à l'origine où l'entrée principale se faisait par la bouche d'un lion géant de couleur émeraude. Peu de temps après avoir ouvert la pensée, ils l'ont démolie et reconstruit l'entrée pour enlever la bouche du lion parce qu'ils ont découvert qu'une bouche de lion avait un symbolisme particulièrement négatif dans certaines cultures asiatiques.
Cependant, dans le domaine des ordinateurs, il existe des icônes communes qui ont atteint une acceptation internationale de certaines significations - le bien compris est généralement le meilleur choix, en particulier pour transmettre un avertissement.
Le texte est roi, malgré les différences de langue. Un texte clair et simple est le meilleur moyen de transmettre une signification spécifique. Un seul mot avec une info-bulle contextuelle d'informations supplémentaires est ma préférence personnelle pour la convivialité.
L'animation et le mouvement affecteront l'attention si tel est le but. Une seule LED rouge clignotante sur un mur de 1000 LED rouges attirera sûrement votre attention par exemple.
TL; DR
En bref, il est plus important d'avoir un contraste de luminance bon/élevé et un texte et des symboles descriptifs que toute combinaison de couleurs spécifique.
Voici un exemple d'utilisation du contraste de luminance, une modification de votre exemple de bouton de suppression par rapport au bouton d'enregistrement:
Quelque chose à considérer lors de la création d'interfaces utilisateur est que la couleur ne doit jamais transmettre de sens. Cependant, vous pouvez mettre en évidence des boutons destructeurs en les rendant différents des autres boutons ou du reste de votre interface. Au lieu de penser aux couleurs que vous pourriez utiliser, essayez de penser à comment rendre le bouton différent .
Changer le design
- Bordures - Si votre conception actuelle a des boutons sans bordure, essayez d'ajouter une bordure noire ou blanche très distincte (épaisse?). Cela rend le bouton "pop" du reste de l'interface.
- Taille - Essayez de jouer avec la hauteur ou la largeur du bouton. La taille peut aider à différencier les boutons destructeurs des boutons normaux. Mais cela ne doit pas toujours être de la taille du bouton, peut-être pourriez-vous changer la taille de la police de l'étiquette?
- Style de police - En parlant de polices, que diriez-vous d'ajouter un soulignement, de l'italique ou du gras à l'étiquette pour la faire ressortir?
- Style - Peut-être ajouter une ombre ou avoir seulement des bordures et pas de couleur de remplissage. Jouez avec le design et donnez-lui un aspect différent .
Couleurs
Le côté créatif de chacun varie, donc si vous voulez conserver votre style actuel mais changer les couleurs, je recommanderais de regarder une roue chromatique pour les couleurs opposées à vos rouges. Cela aidera à faire ressortir le bouton. Vous pouvez également souligner le bouton en optant pour des couleurs destructrices comme les jaunes, les rouges (évidemment plus foncés ou plus clairs), le noir ou le blanc (si cela convient à votre conception.)
Le design est une partie très difficile du processus de développement, donc jouer avec vous sera certainement utile. Obtenez l'opinion des gens - demandez-leur de choisir un design. Faites des maquettes. J'espère que cela a aidé.