We have an application in which users carry out similar tasks on different types of reports. As such, the user's first interaction with the app is to select a Report Type. To make it easy to tell at a glance which type they're working on, each one is associated with a colour, which becomes the dominant colour in the UI whilst working on that type.

So, for example, Foo Reports use blue; the icon for selecting the Foo category is blue, the background becomes blue when working on Foo Reports, and many UI elements are drawn in shades of blue.

Bar Reports, on the other hand, use Red. Baz Reports use Yellow, etc.

This has been a successful approach for a half-dozen or so different types. But the number of report types is climbing over time, and we are naturally running out of colours which are easy to differentiate from one another.

How can we manage the profusion of different colours while keeping the UI usable? Failing that, what would be a minimally-confusing way to move away from this scheme?

  • 1
    The joys of colour coding. As you are starting to have a bigger collection of reports, are any of them thematically similar enough that they could be grouped together?
    – Matt Obee
    Commented Nov 24, 2012 at 0:35

3 Answers 3


Well, look at the Stack Exchange sites, they could face the same problem too.

Their solution is to theme the sites, mantaining the overall looking very similar.

You can use a white background everyware, and change only the header's background image. Using allusive images, or patterns, and a distictive logo could work better.

Then the category browsing list could show only the logo, and possibly an allusive background color.


Things I'd be thinking about:

  • Are their thematic groupings of reports? Is there a FooBar and FooBaz report that could both be blue?

  • Was there ever any evidence that users were confusing reports? If we switched everything to a single colour would we get more problems? Can we experiment and find out?

  • Look to producing stronger cues from text labels, etc.

  • Look to introducing other design elements like logos / watermarks / iconography to provide different visual cues.

In general I try to never use colour as the primary differentiator between categories coz:

  • There are only so many colours ;-)

  • It plays poorly with people who have any of the varieties of colour blindness, or other visual disabilities

  • Even those with 'normal' colour vision can find differentiating between and communicating with colour difficult. Especially when you are dealing with multiple languages.

(And unrelated to the question - but a fascinating snippet of information. I found out recently that there are some languages that only have words for white, black and red. All the others are descriptive (green == colour of leaves for example). See http://www.nairaland.com/290261/translate-colours-language)

  • Random additional fact: people can differentiate about 10 shades from white to black. So someone could see 10% black and say it's different from 20%. Commented Nov 25, 2012 at 4:14
  • @Tyler - References? I've just shown #191919 (90% black) and #33333 (80% black) squares to four people and nobody was able to successfully differentiate them without having them side-by-side for comparison...
    – user597
    Commented Nov 25, 2012 at 11:12
  • I'm trying to remember where I learned that... Maybe from Don Norman? For some reason it's his voice saying the fact when I recall it. Commented Nov 25, 2012 at 16:09
  • I think they made the comment that it's harder to differentiate the blackest colors. ... Maybe... Let me find the book. Commented Nov 25, 2012 at 16:10

If it's a problem of visual similarity of the UI used for different kind of reports the way I see it is to change UIs to make them easily distinguishable from each other. It could be achieved, for example, by figuring out unique properties of any report type and moving corresponding elements to the front of users eyes. It will work similar to the colour-coding, but instead of colours you will use different layouts. The idea behind this is not to introduce additional elements (like logos or additional labels), which may require users to remember things aren't related to the performed tasks (and used only to determine the context), but use existing functionality instead. Although, it's not an easy task, once achieved it may work very well.

Nevertheless, I agree with others, who suggested to try to use grouping, or labeling, or theming as an alternative. You definitely should try these options first.

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.