50

I'm not really sure about some colours of one section of the application I am writing.

Basically, I need to have a section that displays if something is ON/OFF, but also HOT/COLD.

Now, usually, I will assume that:

ON is GREEN

OFF is RED

and that

HOT is RED

COLD is BLUE

but in my specific case, I have this situation:

if it is ON , that means it is also HOT (cannot use RED as may be confused for OFF)

if it is OFF, that means it is also COLD (maybe BLUE is fine?)

How would you approach something like this?

Improve this question
15
  • 1
    It is an application that allows people to control home furniture remotely. In particular for this case, a kettle (if on, it heats up the water inside it) otherwise water is still cold
    – Nick
    Apr 5, 2016 at 14:09
  • 6
    @Nick What do you want to communicate with cold/hot, on/off? Why both things are valuable information to the user?
    – Alejandro Veltri
    Apr 5, 2016 at 15:33
  • 10
    You need two separate indicators, because the kettle does not instantly become hot when it's turned on, nor instantly cold when it's turned off. The hot/cold indicator should be controlled by an actual temperature sensor on the device.
    – zwol
    Apr 6, 2016 at 13:25
  • 1
    will you show a real-time state of the water temperature ALL the time no matter if the kettle is on or off?
    – Alejandro Veltri
    Apr 6, 2016 at 17:32
  • 2
    ^^ OFF = black in my head, never red. Red is associated with on (but green also works), never "off." (Red is associated with "stop" though.) Cultural reference point: U.S./UK hybrid. :-)
    – T.J. Crowder
    Apr 9, 2016 at 13:56

14 Answers 14

Reset to default
53

Red can be used for ON, most sockets use this color when they are on : enter image description here

I would recommend BRIGHT RED for ON and DARK BLUE for OFF. The brightness difference between the bright red and dark blue will also indicate ON/OFF. Also use round shape because it resembles more with LED lights, used for power ON/OFF in many devices.

enter image description here

Improve this answer
15
  • 2
    +1 for the bright / dark distinction. That makes the indicator work for even the most extreme color blindness.
    – plainclothes
    Apr 5, 2016 at 15:49
  • 5
    Do I have some kind of color blindness, a bad monitor or does the second picture show a large red dot next to a black one, not the expected dark blue?
    – Crissov
    Apr 5, 2016 at 20:51
  • 3
    @Crissov I see a really dark blue that looks like black, so you're not alone.
    – Spotlight
    Apr 5, 2016 at 22:46
  • 34
    I never got the red thing on the switches (in my native country, we don't have it but I've seen it abroad). Does that mean it is on, or that pressing the side with the red line will turn it on?
    – CompuChip
    Apr 6, 2016 at 8:10
  • 3
    @CompuChip: Perfectly reasonable question. In the picture above, it seems like the red is on the surface of the switch, but it's actually on the edge, and only visible when the switch is in the "on" position (alternate photo, amusingly from the same Amazon product listing as the one above: ecx.images-amazon.com/images/I/31sdQEYuDuL.jpg). E.g., it's a status indicator, not a label; if you see the red, it's on.
    – T.J. Crowder
    Apr 9, 2016 at 14:03
73

I'm not exactly sure how your app works, but from what I understood, I would use a color like grey for the OFF buttons and a brighter color (the primary color of the application perhaps) for the ON buttons to avoid your problem.

enter image description here

Also I'd make use of icons to serve as an indication for Hot/Cold.

Improve this answer
2
  • This is a good solution. It may even be possible to use a single on/off toggle, surrounded by more descriptive indicators (with icons) of what on/off actually means (namely, "Something Hot" and "Something Cold"). Relying on color alone may cause difficulties, for example, for colorblind individuals.
    – voithos
    Apr 6, 2016 at 0:29
  • 1
    You toggle the switch to the left to turn it on?
    – kevin
    Apr 10, 2016 at 7:50
44

enter image description here

Do not use colors to indicate that the system is ON or OFF, use instead a linguistic code, while use an iconic code to comunicate the HOT/COLD state. Here I used a thermometer with different colors (i did not use the snowflake icon since it communicates more a sense of active cooling -like a freezer-, rather than a passive dispersion of heat -like some cooling device turned off)

Improve this answer
4
  • +1 great advice. It could prevent potential dangers, due to ambiguous switches, from using electrical appliances.
    – NVZ
    Apr 7, 2016 at 21:33
  • Can we come up with something that is not already outdated and which a large segment of the population might never see? (What does a Phone look like, by the way?) What sort of modern icon indicates temperature? Some digits? Great! This is the problem with converting things from things to screens: they no longer look like anything. Or, everything looks the same! Argh!
    – user67695
    Apr 10, 2016 at 22:54
  • Outdated objects do not make good icons. Find the modern equivalent of thermometer. (Looks like everything else modern? Oops! Poor Industrial Design!) Different functions should look obviously different. They should look like what they do, or are. What does "Hot" look like? Fire? Still outdated. Modern Problems... Ugh.
    – user67695
    Apr 10, 2016 at 23:23
  • I understand your point. Anyway I somehow disagree since objects design is currently used for many understandable icons (the old fashioned reciever is still in my iPhone as icon, as the envelope for the Mailbox; people from '00 do not probably know what a floppy disk was, but still can correctly indicate its icon as the "save button"). The icon retains the functional meaning of am object even if it is not in use anymore.
    – Marco Tatta
    Apr 11, 2016 at 7:21
11

My advice would be to lose the On/Off labeling. It's just adding a layer of confusion.

If ON == Cold && OFF == HOT, just label them HOT/COLD. They are referring to the same state.

Then you could just use a switch/toggle.

In this example(See below), I would change the words "On/Off"" to "Hot/Cold" and update the colors accordingly.

on/off switch

Improve this answer
2
  • The word "loose" should be "lose".
    – Monty Harder
    Apr 5, 2016 at 17:45
  • 3
    On == Hot and Off == Cold. Not the other way around.
    – wizzwizz4
    Apr 7, 2016 at 20:19
10

In construction the color for warnings is Bright Orange. Orange + enter image description here could do the trick.

Improve this answer
1
  • 2
    Warning: Open Can Of Worms!!!!
    – user67695
    Apr 10, 2016 at 22:57
8

The kettle is not hot immediately when it turns on. It needs to heat up first, so your hot/cold nomenclature is misleading. Just make it an on/off switch. Or better, equip the kettle with a thermostat.

Improve this answer
8

I would like to point out that for ON/OFF there are unicode symbols, see: http://unicodepowersymbol.com/

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

In my opinion, the color code green = ON and red = OFF is not very widespread, and therefore the risk of confusion is low. As far as my experience goes, only Microsoft uses it. For me personally, red conveys the meaning ON, not OFF.

So, I would go for this: A pale red unicode ON symbol to be pushed in order to activate the kettle. When the kettle is active, the same symbol turns bright red (and possibly blinks). A grayish blue unicode OFF symbol next to it to be pushed to turn the kettle off. When the kettle is off, the OFF symbol becomes dark blue. Or something like that, depending on the possibilities you have.

Improve this answer
2
  • The first symbol is not "Power" but "Stand-By" (like on your TV). This switch does not reduce power consuption to 0. In contrast, the second and fourth do that (like the switch on the backside of your computer's power supply). Also Wikipedia states that.
    – Mononess
    Apr 7, 2016 at 18:46
  • 1
    Emergency off buttons are usually red. (Example)
    – Bergi
    Apr 7, 2016 at 22:58
4

From another answer of mine, I highly suggest that you consider using "switches" that minimc real-world switches to clarify state:

enter image description here

With these designs the state of the switch is very clear, so the colors can be fit to the application at hand.

Improve this answer
2
  • Yellow = hot (the sun) and on (electricity, light bulbs, etc.)
  • Blue = cold (ice, sky) and off (calming color)
Improve this answer
1
  • Few people are yellow-blue colorblind, so this is good.
    – user67695
    Apr 10, 2016 at 23:00
2

Never depend on color alone for a critical interface component.

  • Many people, perhaps upwards of 1 in 10, have some form of color-blindness that limits their perception of certain colors.
  • Staring at colors can lead to our eyes/brains inverting colors, where you literally see a totally different color. Green become red, yellow becomes blue. Early astronauts experienced this and NASA learned to avoid depending on color alone as an indicator.

As shown in other answers, your color should only supplement or highlight the message being delivered by some other mechanism (text message, shape of widget, size of widget, trim/chrome around widget, and so on).

Do not combine multiple messages when of critical importance.

If there is any disconnect between ON and being HOT, make those separate messages. Your Question was not exactly clear about this. If, as with a stove, turning on does not immediately mean hot, and turning off does not mean immediately cool, then use a separate indicator. We see this on modern electronic stoves where one indicator is lit when power is being sent to a burner while a separate indicator indicates when the burner is hot. The heat indicator comes on later, and turns off later, than the power indicator.

In this picture notice the front panel indicates at least on burner is currently powered, while the four surface indicators indicate hot-to-touch status of each burner. The glass top surface retains heat, thus the separate indicator.

enter image description here

If there is no disconnect power & heat, if ON always means HOT and OFF always means COLD, and your color definitions are clearly imprinted on your users, then choose which aspect is more critical and use that color. If the surface is mildly warm to the touch but may result in death from electrocution at 400 volts, the ON message is more important than temperature so use the ON-color.

If color definitions are not imprinted on your users, then your choice of color does not seem important to me. I would use any color, perhaps focusing your attention more on brightness/attention-grabbing (ON/HOT) versus dimness/blandness (OFF/COOL) rather than worrying about particular colors.

Improve this answer
1
  • This would be more or less my answer
    – Alejandro Veltri
    Apr 8, 2016 at 14:34
2

Different Interfaces for two different functionality

Example case: Car air condition interfaces

As many example of car air conditions the first on/off functionality defined with a toggle button (light indicator); while heating adjustment element is defined with (knob and blue-red colors).

enter image description here

Colors are not the only variable that you can play when you are building a mental model. If there is an on/off functionality with temperature functionality; the elements can have different controllers (in air conditioner case: knob (temperature) and button(on/off)

If these elements shall be together due to the lack of space, turning wheel with button can be a nice option to test like in below. If you are looking colors an illuminated form of green and red-blue scale will be fine.

enter image description here

Improve this answer
1

Go "Grayed-Out" with the On/Off Toggle

I would suggest using the "grayed out" approach for the ON/OFF TOGGLE, rather than color-coding. Rely on language, not color here.

Not a great example, but bear with me please... I'm pressed for time. Ignore the orange... or maybe not... that (or a more benign color) may work.

enter image description here

For the temperature, go for it with red and blue. Someone else showed a great example of that. enter image description here

Following the same idea when turning off, and watching for cooling, obviously.

Two Additional Suggestions...

My only other recommendation would be:

  1. Some accompanying words to engage them and let them know it's working.

"Heating up now!" "Almost ready!"

That kind of thing. Especially if you can find a way to make it a bit entertaining.

  1. A countdown or updating time frame, if possible.

"Deliciousness is less than 3 minutes away!"

We humans are pretty bad at patience.

Improve this answer
2
  • 2
    Graying-out the label by convention means a disabled option. When I see your first graphic, I read "ON, and stuck ON, cannot be turned OFF".
    – Basil Bourque
    Apr 8, 2016 at 1:56
  • No, outdated icons depicting objects that many people have not seen and fewer will as time passes are not the way to go. Get a child to suggest the icon, not an adult. They have to live with it a lot longer. We have to start using universal symbols which will stay universal. Good luck!
    – user67695
    Apr 10, 2016 at 23:03
1

Since this is specifically for a kettle, they traditionally have an LED light to indicate when they're in the process of boiling. Once boiled, this light goes off.

Your app could mimic this behaviour, and optionally show some muted text that says "Boiling..." nearby.

If your app knows the temperature of the water, you could separately show a traditional red-to-blue thermometer, or just the numerical value, e.g. 50°C.

However, if your app is unable to monitor the temperature, displaying hot/cold might not be factually accurate. A full kettle of water will cool slower than one with a small amount of water.

Improve this answer
0

Tl;dr: On = green, hot = amber, off+cold = not lit. Read on to understand why.

You need to encode to pieces of information which are not completely synchronized.

There are four states to communicate:

  1. The kettle is off, the kettle is cold.

  2. The kettle is on, the kettle is cold.

  3. The kettle is on, the kettle is hot.

  4. The kettle is off, the kettle is hot.

The user has a couple of needs which drive the four states above:

  • I want to know when the kettle is consuming energy, because maybe I want to make sure it's turned on, or turn it off if I don't mean to be using it.

  • I want to know when the kettle is hot, so that I don't grab it and burn myself, or so that I know if the water is still hot for use.

The question we're trying to answer is, can you encode those four states in a single indicator, and will that indicator unambiguously communicate the four states?

  1. The general standard for "on" is a light is lit, and "off" is a light is not lit. Devices that break this maxim tend to be confusing (how many times have you turned a TV on that had a bi-color power indicator because you forgot what was what?)

  2. As you note, different colors mean different things. a light that's not lit would be cold, and warm colors are generally associated with warm things.

The following four states allow you to both communicate that the pot is running, and that something may be hot.

  1. Off + Cold: dark

  2. On + Cold: green (any light means pay attention)

  3. On + Hot: amber

  4. Off + Hot: amber

The key is step 2. Warm colors (red, yellow, orange) are easily associated with heat, so using that color for the hot indicator is intuitive for the user. What we need is a second color to indicate that the pot is in use, but not say that it's hot yet (you'll need to decide how hot is hot).

Blue is out because, while it's associated with something that's energized, it's also associated with cool things and, if the kettle is warm or nearly hot, a person still shouldn't touch it, which blue might encourage.

Green is the color of choice for state 2 because it's not explicitly tied to temperature, is not in the same family as amber, but is associated with energized electronics.

Improve this answer
2
  • Maybe there should be an indication of "you've turned it off now" (or else indicators of "flicking the switch did work", "don't keep flicking it" and "now you've just blown the fuse, the switch worked the first time!").
    – wizzwizz4
    Apr 7, 2016 at 20:24
  • You could actually use red for the 4th state. If you put a red and a green LED under a common lens, and tie the green LED to the power state and the red LED to the temperature state, then when they're both on at once, you'll see amber. And red appears "darker" than both green and amber, helping to represent "not energized". The red LED could even vary in brightness with temperature, so that turning the kettle on would give you green, fading to amber as it warms up, then turning it off would instantly make it bright red, fading to black as it cools down.
    – Dan Henderson
    Apr 7, 2016 at 21:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.