11

I am currently redesigning an LoB application that makes use of color coding in tables to 'categorize' each row of data.

Example of color coding in table

For instance, in the picture above, the 'St' column (which stands for 'Status'), the background color of the cell changes according to the status of the record, but there are several problems:

  • There are more than 10 possible values, which makes it difficult to find as many different distinguishable colors.
  • The user has to remember which color is assigned to each value.
  • Visual clutter, especially if multiple columns are involved.
  • Color-blind people might not be able to distinguish between different colors.

Can you think of an alternative approach to this problem?

Improve this question
4
  • Are the status values in any kind of hierarchy?
    – icc97
    Jan 16, 2013 at 16:30
  • In fact, would it be possible to give a list of the potential statuses if the list isn't too long?
    – kastark
    Jan 16, 2013 at 16:53
  • Actually, 'Status' is just an example, as other properties can also be color coded (making some tables look like a Christmas tree).
    – Julien Poulin
    Jan 16, 2013 at 17:25
  • 1
    Can you explain what the colors are actually highlighting? The example is confusing. Also, read up on 'chart junk' from Tufte: en.wikipedia.org/wiki/Chartjunk
    – DA01
    Jan 16, 2013 at 17:31

8 Answers 8

Reset to default
7

How about "tagging" cells or rows with color-coded labels? Keeping the color helps people understand your data at a glance, and the text labels are descriptive enough for the colorblind.

Gmail uses this technique to categorize dense rows of data rather well:

enter image description here

Improve this answer
4

I agree with other commentators. Going with 10 colors is difficult for reasons you yourself mentioned and for reasons others mentioned.

Maybe you should think about coming up with shorthand for each status.

For example,

Status types

DSV = 1 ( discovery )

CRT = 2 ( court )

TRT = 3 ( Treaty )

This way you DON'T have annoying colors everywhere, you don't have to use large words that take up a lot of space, AND it can be mnemonic in a way if you choose the 3 ( or more ) letter shorthand properly.

I read a part of the chart junk wiki mentioned by @DA01 and it was right on the money with what all those colors would end up being, junk on the screen that distracts users from content.

i would say go with the shorthand acronyms and highlight every odd row so users don't lose themselves on long rows.

Improve this answer
3
  • 1
    I don't see much advantage over color as far as cognitive load goes as the user still has to learn a lexicon of shorthand values which is just as high a cognitive load as colors. It does solve the color blindness problem, however. A good example of how imposing shorthand can be are METAR reports (aviation weather). Here is an example of the current METAR for KPAE in Everett, WA: KPAE 171553Z 00000KT 10SM CLR M02/M03 A3043 RMK AO2 SLP310 BCFG ALQDS T10221033. Once you learn all the shorthand, this would mean something. But short of that, it's pretty daunting.
    – Charles Wesley
    Jan 17, 2013 at 16:38
  • 2
    I was assuming that since this is a specialized application that the users would be familiar with typical shorthand. They might even already have a shorthand established for each code. If anything, a key/legend would help as well, although it would be pretty long. Tooltips on each shorthand could help as well but that doesn't solve the larger issue of having too much data in one place that isn't easily consumable.
    – Jerry Saravia
    Jan 17, 2013 at 17:09
  • it's a valid point -- which approach is best is often very situational depending on the exact use case and business process
    – Charles Wesley
    Jan 17, 2013 at 17:48
2

You have 10 values of 10 statuses? May be that is the first place to simplify!

If there are more than 4 values of statuses, you need to go with text only .

Improve this answer
2
  • 1
    The application deals with legal stuff and thus, I'm not able to remove values. As for text only, it quickly becomes hard to read. Also, it can take up a lot of space, especially if several columns are color coded.
    – Julien Poulin
    Jan 16, 2013 at 17:32
  • You can then try and group these status and have 3high level statuses. When you hover over them then you can give more details in the tooltip
    – ripu1581
    Jan 16, 2013 at 17:37
2

I'm not entirely sure your problem is the colors in and of themselves. When a table starts getting messy looking, it usually means it had a messy foundation to begin with. Tufte coined the term 'chart junk' to refer to these types of extraneous visual elements that, while on the surface seem to make sense ultimately just get in the way of seeing the actual data:

http://en.wikipedia.org/wiki/Chartjunk

The easiest example of chart junk in table is vertical divider lines between table cells. In most cases, the data, itself, creates a visual line for you. No need to add yet-another line to clutter things up.

So, I suggest going back and decluttering the presentation of the table as much as you can. At that point, you might then be able to see much simpler solutions for the highlighting issue.

Improve this answer
2

Do users really need to see all that information in a single view? Even if you find an alternative to using colours, that's a lot of information to present at once.

If the purpose of these statuses and the colour coding is to allow a user to mentally filter the information and to quickly locate and compare specific pieces of information, consider taking that cognitive load away from the user and instead provide controls within the interface to filter the table based on the user's preferences.

Improve this answer
0

If it's a simple number range like 1 though 10, maybe use shades of grey. The shade might not be precisely interpreted but it would give the user a good idea of the magnitude. A white background with black text, and a black background with white text would be identifiable to most users for special significance.

In any case be sure to not reduce too much the legibility of the numeric text.

Improve this answer
0

Images are alternative to colors - each status has corresponding descriptive icon.

Improve this answer
0

I see two problems here.

  1. It's really hard for your users to understand the meaning of 10 (or more) numbered statuses.

    To solve this problem I suggest to replace numbers with "text representations" of every status.

  2. It's hard to distinguish categories based on 10 (or more) statuses.

    It's hard because there is actually too many different statuses (i.e. categories). And there is no effective way of quick identification of every status (because our short-term memory can operate with just about 7 different kinds of items effectively, see Short-Term Memory), so introducing images instead of colours or other kinds of identification will still not work effective.

    To solve that problem you should reduce number of categories (by joining several statuses together) or find another ways of data categorization inside your table (use filtering to subset data and then color code the result, or analyze the data and find which rows are more important for your users and which are not and apply categorization to important rows only, etc).

Improve this answer

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.