I am building a tool that will be used by call center agents. It is to help them support products on behalf of the customers who call up. It acts as a portal to many different types of product information - below is a simplified wireframe. I have used a tab and search model - this was as the result of usability testing against a couple of different prototypes.

enter image description here

In this particular view, the agent is viewing tools (think of these as portlets, or widgets) for a particular product (for example, a remote diagnostic tool). Effectively the agent is on the third level navigation (Home > Product Page > Tools Tab).

So far I have used contrast to highlight the different levels (Product Page, Tabs, Tools) but this is based on no training or theory.

What research, patterns or techniques will help me choose the correct colors (or saturations) to the various UI elements of the page? (e.g. Title Bar, Nav, Background, Tools, Tabs etc)

I want to make sure it is clear for the user where different parts of the page begin and end as well as clear which are related to the different areas of navigation, whilst making the page easy on the eye and readable.

For the purpose of this question we can ignore my company branding and colors - I would rather start with usability and then retrofit the branding into that. In fact, If I could find the right model in grayscale, that would be an ideal template.

  • There is no "CORRECT" color combination. There are rules, and within those rules there is enormous variation...Try something, see how it looks! – Alex Feinman Nov 28 '11 at 14:14
  • @Alex Feinman: "Try something, see how it looks", which is to my understanding, what the OP likes to know if anyone has done. Why reinvent the wheel? – Kris Nov 29 '11 at 11:17

Color Separation

I don’t know how much help this is, but I’ll re-cast your question into something more specific. As you intuit, you want high color contrast between unrelated things, and low color contrast among closely related things. So your question becomes, how do you determine the perceived degree of color contrast between any colors?

The International Commission on Illumination (CIE) long ago established equations for calculating color contrast of illuminated displays, and these equations are still largely correct for modern displays. The procedure is to convert your RGB color values to CIE Luv color space coordinates, which specify the perceived brightness (L), hue (flat angle from L axis), and saturation (distance from L axis). The degree of perceived color contrast between two colors is equal to the Euclidean distance between the two sets of Luv coordinates.

Here’re the Luv equations for the sRGB color model, which is a generally suitable estimation for typical consumer-grade displays:

  1. Convert your RGB values into “rgb” values:

    r = (R/255)^2.2

    g = (G/255)^2.2

    b = (B/255)^2.2

  2. Matrix-multiply your rgb values by a constant matrix to convert them to XYZ color coordinates. As three formulas (rounded to four decimal places), it’s:

    X = 0.4124*r + 0.3576*g + 0.1805*b

    Y = 0.2126*r + 0.7151*g + 0.0721*b

    Z = 0.0193*r + 0.1192*g + 0.9505*b

  3. Calculate L, the gray-scale brightness level:

    IF Y/0.9999 > 216/24389, L = (Y/0.9999)^(1/3) * 116 – 16

    ELSE, L =24389*Y/0.9999/27

  4. Calculate u’ and v’ for the two hue dimensions (if X, Y, and Z are all 0, then set u’ and v’ to 0):

    u’ = 4 * X / (X + 15*Y + 3*Z)

    v’ = 9 * Y / (X + 15*Y + 3*Z)

  5. Convert u’ and v’ into u and v coordinates.

    u = 13 * L * (u’ – 0.1978)

    v = 13 * L * (v’ – 0.4683)

The perceived color difference, D, between two colors (L1 u1 v1 versus L2 u2 v2) is found with the three-dimensional Pythagorean equation:

D = sqrt[ (L1 - L2)^2 + (u1 - u2)^2 + (v1 - v2)^2 ]

As a rule of thumb, for indoor use of consumer displays, a color difference of 100 is a whole lot and 20 is a very little.

There is a vast range of brightness, hue, and saturation differences that achieve the same color difference. The good news is this leaves you lots of latitude for choosing your exact colors, so you can achieve other user experience goals. The bad news is this leaves you lots of latitude for choosing your colors, so you’re pretty much on your own.

I’ve more on color use, with examples and spreadsheets at Breaking the Color Code. Bruce Lindbloom provides on-line calculators and more on color theory.

Non-color Separation

All that said, I think you should consider that maybe color choice isn’t the issue. Generally, color, especially the hue and saturation components, are not that great for indicating levels or a hierarchy. At the very least, you want it to be redundant with some other graphic dimension. For example:

Spatial Position. User will tend to assume information from the upper left to the lower right are ordered from general to specific. Content close together and separated from other content by white space will be seen as similar. Indented content is “under” outdented content.

Line. If there isn’t space for white space, lines and boxes may be used to show separation and nesting.

Size. Bigger things, especially headers in bigger font, indicate higher levels in a hierarchy.

Frankly, your current use of these elements in your wireframe looks sufficient to me –even in its current grayscale form. Using color to further distinguish the levels may be over-doing it, resulting in a cluttered-looking design. Why do you think you need color contrast to distinguish the hierarchy? Have you tested this design? Exactly what problems are you seeing? Maybe color isn’t the solution to your problem. Maybe you should use color for something else.

Sorry, impossible. You are actually asking for an introductory course to graphics design/visual communication. Given that this normally amounts to at least one year of most intensive training, this simply cannot be done within this context, I fear.

To solve your problem well, you would require practically trained, applicable knowledge of Gestalt theory, colour theory (regarding both physiological perception and cultural connotations/semantics), visual composition and some more. Alongside with the refined visual sensibility that comes only with practice.

See for starters e. g.

  • Wong, W.: Principles of Form and Design.
  • Lidwell, W./Holden K./Butler, J.: Universal Principles of Design.

… and for parts of the rationale behind my statement above

  • Schoen, D.: The Reflective Practitioner.

BTW: Colours heavily influence each other in respect to how they are actually perceived. You would need at least some of the concrete content for your wireframe boxes to make a somewhat informed guess about what colours might work well enough. You cannot make a good decision on the given level of abstraction.

  • Fair enough - appreciate your honesty. Would more detail in the question help? Or your point is that without understanding both the application/users/goals as well as visual design it is impossible to make a suggestion? – Jon White Nov 26 '11 at 23:38
  • I have had this same question on mind, and @Sascha Brossmann I am not finding what I want in this answer. Empirical results, if any, please! – Kris Nov 29 '11 at 11:19

Sascha is pretty much correct. Some quick tips, though:

  • Pick out a color palette of mostly neutrals along with a handful of emphasis colors. Use the emphasis colors sparingly.

  • Pick up any of Tufte's books. While not directly aimed at UI design, much of what he talks about is applicable to UIs (namely his justified hatred of 'chart junk'.

  • Err on the side of fewer colors rather than more.

  • work with your users on what they feel are the key elements. Do some sorting exercises with them to get a ballpark idea of what their primary needs are.

  • I feel I have a good understanding of whe users, this is something I have spent a lot of time on. So I feel for certain tasks I know what the key elements are. The wireframe above is a single user case for the application, there are many more. Would more clarification in the question help? – Jon White Nov 26 '11 at 23:40
  • The question is fairly clear. It's just that there's no easy answer. There isn't a 'template' you can use and run with. – DA01 Nov 27 '11 at 2:00

check out Adobe Kuler for color combination inspiration.

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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