web-dev-qa-db-fra.com

Meilleure couleur pour afficher le chaud / froid, mais aussi marche / arrêt

Je ne suis pas vraiment sûr de certaines couleurs d'une section de l'application que j'écris.

Fondamentalement, j'ai besoin d'une section qui affiche si quelque chose est ON/OFF, mais aussi HOT/COLD.

Maintenant, généralement, je suppose que:

ON est GREEN

OFF est RED

et cela

HOT est RED

COLD est BLUE

mais dans mon cas spécifique, j'ai cette situation:

s'il s'agit de ON, cela signifie qu'il s'agit également de HOT (ne peut pas utiliser RED car cela peut être confondu avec OFF)

si c'est OFF, cela veut dire que c'est aussi COLD (peut-être que BLEU va bien?)

Comment aborderiez-vous quelque chose comme ça?

48
Nick

Le rouge peut être utilisé pour ON, la plupart des prises utilisent cette couleur quand elles sont allumées: enter image description here

Je recommanderais BRIGHT RED pour ON et DARK BLUE pour OFF. La différence de luminosité entre le rouge vif et le bleu foncé indiquera également ON/OFF. Utilisez également une forme ronde car elle ressemble davantage à des lumières LED, utilisées pour la mise sous/hors tension de nombreux appareils.

enter image description here

53
DesignerAnalyst

Je ne sais pas exactement comment fonctionne votre application, mais d'après ce que j'ai compris, j'utiliserais une couleur comme le gris pour les boutons OFF et une couleur plus lumineuse (la couleur principale de l'application peut-être) pour les boutons ON pour éviter votre problème.

enter image description here

J'utiliserais également des icônes pour servir d'indication pour le chaud/froid.

71
nuwa

enter image description here

N'utilisez pas de couleurs pour indiquer que le système est allumé ou éteint, utilisez plutôt un code linguistique, tout en utilisant un code iconique pour communiquer l'état HOT/COLD. Ici, j'ai utilisé un thermomètre de différentes couleurs (je n'ai pas utilisé l'icône de flocon de neige car elle communique plus une sensation de refroidissement actif - comme un congélateur -, plutôt qu'une dispersion passive de chaleur - comme un appareil de refroidissement éteint)

44
Marco Tatta

Mon conseil serait de perdre l'étiquetage On/Off. Cela ajoute simplement une couche de confusion.

Si ON == Froid && OFF == CHAUD, il suffit de les étiqueter CHAUD/FROID. Ils se réfèrent au même état.

Ensuite, vous pouvez simplement utiliser un interrupteur/bascule.

Dans cet exemple (voir ci-dessous), je changerais les mots "On/Off" "en" Hot/Cold "et mettrais à jour les couleurs en conséquence.

on/off switch

11
Mark

Dans la construction, la couleur des avertissements est Orange vif. Orange + enter image description here pourrait faire l'affaire.

10
shego

La bouilloire n'est pas chaude immédiatement lorsqu'elle s'allume. Il doit d'abord chauffer, donc votre nomenclature chaud/froid est trompeuse. Faites-en un interrupteur marche/arrêt. Ou mieux, équipez la bouilloire d'un thermostat.

8
nhw353

Je voudrais souligner que pour ON/OFF il y a des symboles Unicode, voir: http://unicodepowersymbol.com/

  • circle open at the top with vertical bar protruding, ISO 60417-5009 “Stand-by; Power” ⏻ Puissance: U + 23FB
  • circle encloses vertical bar, ISO 60417-5010 “ON/Off (Push-push)” ⏼ Basculer la puissance: U + 23FC
  • vertical bar, ISO 60417-5007 “On (power)” ⏽ Mise sous tension: U + 23FD
  • circle, ISO 60417-5008 “Off (power)” ⭘ Mise hors tension: U + 2B58

À mon avis, le code couleur vert = ON et rouge = OFF n'est pas très répandu, et donc le risque de confusion est faible. En ce qui concerne mon expérience, seul Microsoft l'utilise. Pour moi personnellement, le rouge transmet le sens ON, pas OFF.

Donc, j'irais pour ceci: Un symbole UNicode ON pâle à pousser pour activer la bouilloire. Lorsque la bouilloire est active, le même symbole devient rouge vif (et peut clignoter). Un symbole Unicode OFF bleu grisâtre à côté de celui-ci à pousser pour éteindre la bouilloire. Lorsque la bouilloire est éteinte, le symbole OFF devient bleu foncé. Ou quelque chose comme ça, selon les possibilités que vous avez.

8
emi

De ne autre réponse , je suggère fortement que vous envisagiez d'utiliser des "commutateurs" qui minimisent les commutateurs du monde réel pour clarifier l'état:

enter image description here

Avec ces conceptions, l'état du commutateur est très clair, de sorte que les couleurs peuvent être adaptées à l'application en cours.

4
dotancohen
  • Jaune = chaud (le soleil) et allumé (électricité, ampoules, etc.)
  • Bleu = froid (glace, ciel) et éteint (couleur apaisante)
2
Luke

Ne dépendez jamais de la couleur seule pour un composant d'interface critique.

  • Beaucoup de gens, peut-être plus de 1 sur 10, ont une forme de daltonisme qui limite leur perception de certaines couleurs.
  • Regarder les couleurs peut amener nos yeux/cerveaux à inverser les couleurs, où vous voyez littéralement une couleur totalement différente. Le vert devient rouge, le jaune devient bleu. Les premiers astronautes en ont fait l'expérience et NASA a appris à éviter de ne dépendre que de la couleur comme indicateur.

Comme indiqué dans d'autres réponses, votre couleur ne doit compléter ou mettre en surbrillance que le message délivré par un autre mécanisme (message texte, forme du widget, taille du widget, garniture/chrome autour du widget, etc.).

Ne combinez pas plusieurs messages lorsqu'ils sont d'une importance critique.

S'il existe une déconnexion entre ON et être HOT, créez ces messages séparés. Votre question n'était pas exactement claire à ce sujet. Si, comme avec un poêle, allumer ne signifie pas immédiatement chaud et éteindre ne signifie pas immédiatement refroidir, alors utilisez un indicateur séparé. Nous voyons cela sur les cuisinières électroniques modernes où un indicateur est allumé lorsque l'alimentation est envoyée à un brûleur tandis qu'un indicateur séparé indique quand le brûleur est chaud. L'indicateur de chaleur s'allume plus tard et s'éteint plus tard que l'indicateur d'alimentation.

Dans cette image, notez que le panneau avant indique qu'au moins le brûleur est actuellement alimenté, tandis que les quatre indicateurs de surface indiquent l'état de contact direct de chaque brûleur. La surface supérieure en verre retient la chaleur, donc l'indicateur séparé.

enter image description here

S'il n'y a pas de déconnexion de l'alimentation et de la chaleur, si ON signifie toujours CHAUD et OFF signifie toujours FROID, et que vos définitions de couleurs sont clairement imprimées par vos utilisateurs, choisissez quel aspect est plus critique et utilisez cette couleur. Si la surface est légèrement chaude au toucher mais peut entraîner la mort par électrocution à 400 volts, le message ON est plus important que la température, utilisez donc la couleur ON.

Si les définitions de couleurs ne sont pas imprimées sur vos utilisateurs, votre choix de couleur ne me semble pas important. J'utiliserais n'importe quelle couleur, peut-être en concentrant votre attention davantage sur la luminosité/l'attention (ON/HOT) que sur la luminosité/la fade (OFF/COOL) plutôt que de vous soucier de couleurs particulières.

2
Basil Bourque

Interfaces différentes pour deux fonctionnalités différentes

Exemple de cas: interfaces de climatisation de voiture

Autant d'exemples de conditions d'air de voiture que la première fonctionnalité on/off définie avec un bouton à bascule (indicateur lumineux); tandis que l'élément de réglage du chauffage est défini avec (bouton et couleurs bleu-rouge).

enter image description here

Les couleurs ne sont pas la seule variable que vous pouvez jouer lorsque vous construisez un modèle mental. S'il y a une fonctionnalité on/off avec fonctionnalité température; les éléments peuvent avoir différents contrôleurs (dans le boîtier du climatiseur: bouton (température) et bouton (marche/arrêt)

Si ces éléments doivent être réunis en raison du manque d'espace, tourner la roue avec bouton peut être une bonne option pour tester comme ci-dessous. Si vous cherchez des couleurs, une forme illuminée d'échelle verte et rouge-bleue conviendra.

enter image description here

2
Abektes

Aller "grisé" avec la bascule On/Off

Je suggérerais d'utiliser l'approche "grisée" pour la bascule ON/OFF, plutôt que le codage couleur. Fiez-vous à la langue, pas à la couleur ici.

Pas un bon exemple, mais restez avec moi s'il vous plaît ... Je suis pressé par le temps. Ignorez l'orange ... ou peut-être pas ... cela (ou une couleur plus bénigne) peut fonctionner.

enter image description here

Pour la température, allez-y avec du rouge et du bleu. Quelqu'un d'autre en a montré un excellent exemple. enter image description here

Suivre la même idée lors de la mise hors tension et surveiller le refroidissement, évidemment.

Deux suggestions supplémentaires ...

Ma seule autre recommandation serait:

  1. Quelques mots d'accompagnement pour les engager et leur faire savoir que cela fonctionne.

"Chauffe maintenant!" "Presque prêt!"

Ce genre de chose. Surtout si vous pouvez trouver un moyen de le rendre un peu divertissant.

  1. Compte à rebours ou mise à jour, si possible.

"Le délice est à moins de 3 minutes!"

Nous, les humains, sommes assez mauvais en patience.

1
Melissa Fabina

Puisqu'il s'agit spécifiquement d'une bouilloire, ils ont traditionnellement une lumière LED pour indiquer quand ils sont en train de bouillir. Une fois bouillie, cette lumière s'éteint.

Votre application pourrait imiter ce comportement et afficher éventuellement du texte muet indiquant "Bouillant ..." à proximité.

Si votre application connaît la température de l'eau, vous pouvez afficher séparément un thermomètre traditionnel rouge à bleu, ou simplement la valeur numérique, par ex. 50 ° C.

Cependant, si votre application n'est pas en mesure de surveiller la température, l'affichage chaud/froid peut ne pas être exact. Une bouilloire pleine d'eau refroidira plus lentement qu'une autre avec une petite quantité d'eau.

1
rybo111

Tl; dr: On = vert, chaud = ambre, off + froid = non allumé. Lisez la suite pour comprendre pourquoi.

Vous devez encoder des informations qui ne sont pas complètement synchronisées.

Il y a quatre états pour communiquer:

  1. La bouilloire est éteinte, la bouilloire est froide.

  2. La bouilloire est allumée, la bouilloire est froide.

  3. La bouilloire est allumée, la bouilloire est chaude.

  4. La bouilloire est éteinte, la bouilloire est chaude.

L'utilisateur a quelques besoins qui déterminent les quatre états ci-dessus:

  • Je veux savoir quand la bouilloire consomme de l'énergie, parce que je veux peut-être m'assurer qu'elle est allumée, ou l'éteindre si je ne veux pas l'utiliser.

  • Je veux savoir quand la bouilloire est chaude, pour que je ne la prenne pas et ne me brûle pas, ou pour savoir si l'eau est encore chaude pour être utilisée.

La question à laquelle nous essayons de répondre est la suivante: pouvez-vous coder ces quatre états dans un seul indicateur, et cet indicateur communiquera-t-il sans ambiguïté les quatre états?

  1. La norme générale pour "on" est un voyant est allumé, et "off" est un voyant n'est pas allumé. Les appareils qui ne respectent pas cette maxime ont tendance à prêter à confusion (combien de fois avez-vous allumé un téléviseur doté d'un indicateur d'alimentation bicolore parce que vous avez oublié ce qui était quoi?)

  2. Comme vous le constatez, différentes couleurs signifient différentes choses. une lumière qui n'est pas allumée serait froide et les couleurs chaudes sont généralement associées à des choses chaudes.

Les quatre états suivants vous permettent à la fois de communiquer que le pot est en marche et que quelque chose peut être chaud.

  1. Arrêt + froid: sombre

  2. On + Cold: vert (toute lumière signifie faire attention)

  3. On + Hot: ambre

  4. Off + Hot: ambre

La clé est l'étape 2. Les couleurs chaudes (rouge, jaune, orange) sont facilement associées à la chaleur, donc l'utilisation de cette couleur pour l'indicateur chaud est intuitive pour l'utilisateur. Ce dont nous avons besoin est une deuxième couleur pour indiquer que le pot est en cours d'utilisation, mais ne pas dire qu'il est encore chaud (vous devrez décider de la température).

Le bleu est éteint parce que, bien qu'il soit associé à quelque chose qui est sous tension, il est également associé à des choses cool et, si la bouilloire est chaude ou presque chaude, une personne ne devrait toujours pas la toucher, ce que le bleu pourrait encourager.

Le vert est la couleur de choix pour l'état 2 car il n'est pas explicitement lié à la température, n'est pas dans la même famille que l'ambre, mais est associé à une électronique sous tension.

0
Matt