I was reading this article about Metro UI designs, and I was struck by this statement:

Example, if you look under the hood of a new car, you will see areas colored yellow whereas the rest is the same color of the engine etc. Car manufacturers do this on purpose, they want you to touch yellow yourself but if it is not yellow and you are not mechanically minded – leave alone.

The author recommends using a color like Yellow as the secondary color as a means to draw people’s attention to the fact "I’m ok if you touch this, you won’t break anything if you do" thinking .I am a little unsure about this mentality that if you see something which is marked a different color other than the primary or background color,you would immediately mark it as a safe.

What are your views on it?

  • 1
    More than marking special-colored things as 'safe', this example seems to show how you can group elements by color, so if "you know you don't need to touch the engine, anything that is the same color as the engine is probably 'part' of the engine" Commented Dec 28, 2011 at 22:00
  • @NaoiseGolden I agree with what you said about grouping them by color,but can we assume that grouping a specific set by color would give a sense of assurance to people about how to interact with it.I know there are principles which define certain colors to denote the current status (like red being dangerous or a project being delayed and green being active or so on ) but those are specific to cases.
    – Mervin
    Commented Dec 28, 2011 at 22:51
  • 1
    +1 For a creative interdisciplinary line of thought. Thanks for bringing this to the notice of UX folks around here.
    – Kris
    Commented Dec 29, 2011 at 4:57
  • Whatever you do, make sure you only use one factor for differentiating the two classes of objects: csc.ncsu.edu/faculty/healey/PP/#Preattentive
    – Erics
    Commented Jan 1, 2012 at 4:00

4 Answers 4


As the original author, i'll add my reasons:

It has to do with the fact pattern recognition is a built in component within humans, once we identify a familiar pattern it then becomes easier to seed.

The thing is, most users don't turn up to the average software as UX virgins? that is to say they aren't using a computer for the first time (some solutions are excluded of course). Typically the mainstream UX out there is often a horrible or confusing experience, all the primary / secondary color selection does is encourage that the user pick-up on the differences between chrome colors and input colors. Input colors = good!

It has a bit to do with extraneous cognitive load meets gestalt's laws of organisation.


I think the example from the post makes reference to a key concept: grouping by color (probably described by a Gestalt Principle, but I can't find a reference to it now).

In a site that has a prominent hue, an alternative hue will appear to be highlighted.

Take as an example this A/B testing.

red wins green

Both green and red are bright colors, but because the general hue of the site is green, the red button —which would normally convey caution— had better conversions.

The same happens with the car example: the motor is something that you don't need to touch. Anything that has te same color as the engine is grouped —psychologically— together. Whatever stands out, be it in yellow or any other color, will be likely to get the user's attention.


That example illustrates some cognitive psychology, named here as grouping. Works splendid!

More examples of visual cues: http://www.eruptingmind.com/depth-perception-cues-other-forms-of-perception/

Perhaps you had something else in mind? If so, please elaborate your question.

Edit: Gestallt principles that is how it's called: http://www.interaction-design.org/encyclopedia/gestalt_principles_of_form_perception.html


Color-coding is ages-old and nothing revolutionary. It's present almost everywhere in technology: from peripheral connectors to input devices to wiring to the aforementioned cars.

Traditional rules for color-coding are 1) all these go together and 2) touch these things and don't touch those at all, both of which we already follow by styling active & inactive elements differently. Meanwhile, the article suggests applying colors as "touch these without reservations and expect something more dangerous to happen if you touch those", which makes no sense at all since potentially damaging controls shouldn't be exposed to the end-user to begin with.

  • Mostly, I agree with you - but "potentially damaging controls shouldn't be exposed to the end-user" seems limiting. If I hid away anything "potentially damaging" from my users, they'd be left with a thoroughly useless application.
    – Bevan
    Commented Dec 29, 2011 at 2:51
  • If we continue the analogy with cars & heavy machinery, then the "marked as safe" are the parts that an untrained person can touch with the danger of damaging the equipment or causing harm to oneself. In software, that would be anything that causes irreversible changes in interface or data store.
    – dnbrv
    Commented Dec 29, 2011 at 3:20
  • You seem to be equating "end-user" with "untrained" - in which circumstance, I'd agree that dangerous options shouldn't be exposed. However, my end-users are like BMW certified mechanics - if the dangerous stuff gets locked away, they can't do their job.
    – Bevan
    Commented Dec 29, 2011 at 3:32
  • Ah, yeah. My approach is designing for the lowest common denominator to minimize errors unless I know end-users have sufficient technical proficiency. I also equate "dangerous options" to things that can break the web-app for everyone or damage local data requiring a backup restore.
    – dnbrv
    Commented Dec 29, 2011 at 3:54

Your Answer

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

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