The Design of Software (CLOSED)

A public forum for discussing the design of software, from the user interface to the code architecture. Now closed.

The "Design of Software" discussion group has been merged with the main Joel on Software discussion group.

The archives will remain online indefinitely.

colo(u)rs and human factors

I use colours to help users visualise groups in PerfectTablePlan (e.g. show all the Smith family in red and the Jones family in blue). I am trying to improve the choice of colours I use.

The problem:
-I need N colours that all look sufficiently different from each other, where N >= 10 (I can use 2 colours combined to get N^2 combinations)
-only 0.5% of visitors to the website have less than 16 bit colour displays, so we can assume 16 bit colour
-the colours shouldn't be too saturated or they will be hard on the eyes
-I probably shouldn't use both red and green as a reasonable percentage of the population are red-green colour blind
-I don't want to use dark colours as the default black text won't be visible
-I don't want to use black or white as they are used for other things

Here is my attempt with N=15:
http://www.perfecttableplan.com/jos/ptp_colours.jpg

Do the colours look sufficiently distinct for you?

This must be a common problem - can anyone point me at a solution?
Andy Brice Send private email
Friday, March 10, 2006
 
 
One of the problems with those colours is that some of them are primary colours and some are secondary and some are tertiary; when rendered they differ in brightness. The eye tends to get drawn to the red one at the top, and away from the tertiary colours.

There's a percieved importance value in colours. Red, for instance, is likely to be thought of as more important than grey. Given this is a wedding and how touchy people get about this sort of thing, that may be an issue.

Could you not reduce the numbers of colours? I guess, what you're trying to do is give people a way of finding clumps of people who "haven't mixed" at a glance. But you could possibly do that with a smaller set of colours and considering only "bride's family", "groom's family", "friends of bride", "friends of groom". With only a few such colours, you may even be able to create mixtures; someone who is a friend of both halves of the marraige is the mix of their colours... which would give much the same  "overview" of the mixing, without needing all those colours.
Katie Lucas
Friday, March 10, 2006
 
 
You should let the users assign the colors

Then they can use what ever colors (of those available) they like.

I've seen sum funky desktop color schemes, so trying to guess what a colors a random user will like is a loosing strategy

cheers
Honu Send private email
Friday, March 10, 2006
 
 
It would seem you can reduce your need for colors by using some other attribute. 

The previous poster talked about bride's family and groom's family.  You could use different patterns for each family and need only half as many colors.  No?  Or use several patterns and don't bother to associate them with sides of the wedding.

If you were using text, not graphics, you could use reverse video to double your color range (that is, black on yellow is distinct from yellow on black).
Chris Nelson Send private email
Friday, March 10, 2006
 
 
Try a color book?

My all-time favorite is Leatrice Eiseman's Pantone Guide to Communicating with Color.  Page after page of color schemes. (well reviewed on Amazon)

Unfortunately for you, she references the Pantone color numbers (duh...) but I can usually get a good-enough match with any graphics-app color picker (caveat:  I'm an artist in one of my other lives).  Ask your wife to help...

(I imagine) You could even offer "colorways" that a user could pick for an event--sets of 15 different colors.  Not all of her schemes have enough contrast to use for your purposes, but you'll get some ideas you won't cook up on your own, for sure.  Pricy book, but every time I've made a piece of art using one of her schemes, it sells, and quickly.  People expect to see these colors--for crying out loud, Pantone MAKES the world's color market.

(Here we go again with the "wedding aura" thing--I suggest PTP needs more glamour.  YMMV.)(Aside:  My dream life has some component that would justify a subscription to the Pantone color predictor magazine; two issues a year, US $1400 / year.  Right--$700 an issue.  I love this stuff.)
Ideophoric Send private email
Friday, March 10, 2006
 
 
I may allow colours to be customised at some future point. But I need a sensible default colour scheme - at a large corporate event their might be 100+ groups to visualise.

These colours are not intended to appear in the final printouts. They are just one of the ways I offer to visually assess how good a seating plan is.
Andy Brice Send private email
Friday, March 10, 2006
 
 
Here is an example from a small event:

http://www.perfecttableplan.com/jos/ptp_colours2.jpg
Andy Brice Send private email
Friday, March 10, 2006
 
 
I think I like the idea of patterns - how about solid circles and rings (maybe concentric in different colours) - so red/yellow would be different to red/blue?

Friday, March 10, 2006
 
 
I think customizability is the way to go here. Letting the user select a color for each group makes it easy for them to highlight the group(s) they care about.

For color-blind users, you're pretty much going to need to rely on patterns or shapes rather than pure colors.

Actually, that's an interesting idea - makes the different groups different shapes. Or maybe decorate the existing circles with fancy icons - like those wine-glass charms people use at parties.

That way, you can leave the text in a readable color combination, and use some other attribute to denote group.

So how many instantly-recognizable simple shapes can I come up with of the top of my head?
Triangle
Square
Diamond
Pentagon
Octagon
Circle
Star
Heart
Snowflake
Cross

That's ten. Make two or three variations of each with a different background pattern, and you're all set. This has the potential additional advantage of being legible after printing in black and white, or faxing...
Mark Bessey Send private email
Friday, March 10, 2006
 
 
An interesting problem, and, yes, a common one, and, unfortunately, I think you’re hosed. I don’t think it is possible to come up with a set of 10+ colors that meet all your requirements. One problem isn’t so much color discrimination as assigning meanings to the colors. Color is such an arbitrary code that it’s difficult for human to memorize the meanings for more than about 6 or 7 colors. You’re hobbled by the meaning that people will bring with them to your app regarding color. Some colors with more contrast to the background will stand out more than others, perhaps misleading the users. Visual similarity in colors may have unintended consequences: users will tend to see two similar colors as indicating similarity on the dimensions they represent. For example, dark and light cyan circles may be seem more similar than they really are; likewise for solid magenta circles and magenta-and-yellow circles. Is that your intention? Color coding is great to help users pick out an object of a particular category, but it loses much of this advantage once a symbol has multiple colors. Finding a cyan circle among other solid-color circles is easy. Finding a cyan circle with a purple border among other multi-color circles is much harder. Also, putting one color next to another changes the appearance of the colors. Piling on code dimensions on top of each other (e.g., shape and color) likewise make finding and interpreting any value slow and painful. Letting the user pick the colors or other codes is a recipe for disaster. If *you* can’t pick a very good color set after extensive study and research, why should the user be able to do so? This is not a case that your users know something you don’t. Custom colors would just making extra work for the user to obtain a result that is likely worse than you can do. Combine all this with your valid concerns of colorblindness and you are, like I said, hosed. When you’re dealing with 15 (let alone 100) or more categories, text usage (i.e., category names) is probably the only effective way to code attribute values.

I think the way to get dehosed is to take a step back and re-evaluate what you want to accomplish. What is the purpose of color coding? What are the users’ tasks and goals? In this case, what makes a satisfactory table plan? Let’s say it’s putting similar or related people together –same families, same friends, same interests, same age groups, etc. What coding scheme can you develop that will make a satisfactory plan visually distinct from an unsatisfactory plan? How can graphic codes be used to help the user move from unsatisfactory to satisfactory.

For example, instead of a static code for each category or value of a dimension of relatedness, maybe you should *dynamically* code the degree an individual is related to his seatmates. Develop a metric that combines the values from all those seated at a table and represents the degree an individual is related to the others nearby and show that graphically perhaps as a shade of gray. Individuals that fit in at a seat appear pale gray or white. A dark individual is a sign of someone in an uncomfortable position. Now the problems areas are immediately obvious to the user. When the user selects the individual, the app uses the same metric to show where related people are seated for that individual, helping the user decide how to re-arrange things. When the whole room is reasonably pale, and not getting any paler, the job is done. Note that with this scheme it is not necessary for the user to memorize categories or even know the precise value of relatedness. The degree circles are visually similar becomes an asset, not a source of confusion. Two dark circles next to each other? Try moving them away from each other.

If you want to use color coding, it may be good for something like gender. I hear boy-girl seating is desired in some circles. It’s only a couple values to memorize, there already exist cultural stereotypes to exploit (blue-male, pink/red-female), and, again the code helps the user discriminate successful and unsuccessful states. Candy-cane baby-blue-and-pink at all tables? It’s Miller time.
Michael Zuschlag Send private email
Friday, March 10, 2006
 
 
What are you trying to communicate?  Is this a distinct color for each person?

Maybe you making this more complex then it needs.  Your average political map doesn't have a distinct color for every country.  Maybe you only need enough colors so that no two adjacent seats share the same color.  I think having 100 colors adds so much visual clutter that it outweighs any benifit.  How many of your users are going to say "Oh yeah, Joe, he is the Cyan-Magenta and his wife Jill is Yellow-Cyan."  Probably not many.

Whatever you decide, dont forget to run your colors through Vischeck: http://www.vischeck.com/.  You can't about the large colour blind swath of your userbase.

A good (dry college) textbook on this topic is the "famous" Information Visuization: http://tinyurl.com/lhha7 .  A lot of the book is about what types of shapes, patterns and colors your visual system processes ("pre-attentive") and what types of things it has to process in a linear fasion (use your brain and think).  You dont want to pick the wrong ways to differentiate your data or it will be impossible to understand.  If you have a university nearby they might have it in their library.  Otherwise, this might get you started:

http://www.csc.ncsu.edu/faculty/healey/PP/
http://tinyurl.com/nc59n
Cory R. King
Friday, March 10, 2006
 
 
Thanks for the feedback. The intention of this feature is to show how the groups are distributed, 1-colour per group. The user can assign groups how they like, but usually on the basis of family or company affiliation. There are various other visualisations, including:

compatibility:
http://www.perfecttableplan.com/html/tour_11.html

gender/vip status:
http://www.perfecttableplan.com/html/tour_9.html

Trying to convey all this information in one go would probably be unwise.

Adding shapes is a possibility, but not one I intend to explore right now.
Andy Brice Send private email
Friday, March 10, 2006
 
 
http://vischeck.com/ is very cool. Thanks Cory!
Andy Brice Send private email
Friday, March 10, 2006
 
 
Can you have a "group highlighter" type of function where the user can select a specific group or groups and the selected group(s) show in color while the rest are a shade of grey?

To me, at least, this would be a better UI as I'm not immediately looking at a plan with 15 different colors which initially might frazzle the mind a bit.  With a click, however, I'd be able to isolate a particular group to see where they've been seated.

If you allow multiple selections in your picklist you can have the user set which colors to use for the 1st group picked, 2nd group picked, etc.

Just a thought.
!
Friday, March 10, 2006
 
 
These 10 colours look quite distinct to me and with the 2 commonest forms of colour blindness (according to http://vischeck.com ):

http://www.perfecttableplan.com/jos/ptp_colours6.jpg
Andy Brice Send private email
Friday, March 10, 2006
 
 
I agree with Mr. !, the group highligher tool sounds like a great idea.  Probably harder to code though.
Cory R. King
Friday, March 10, 2006
 
 
Boy I wish I had your software when I was planning my wedding.  What a pain that was.
missed the boat
Friday, March 10, 2006
 
 
If you really just want 10 colors that are strongly and consistently distinctive from each other, the real way to do it is to pick 10 coordinates in Luv space that constitute equally distant points on the surface of a large sphere within the color gamut of a typical monitor. Of course, you can’t have equal distinctiveness of all possible pairs of colors with more than 4 colors, but I think using the surface of a sphere will get you just about as close as you’re going to get to it. The Luv coordinates can then be converted to RGB ( see http://www.brucelindbloom.com/ ). I’d expect that the simplified sRGB color system will be good enough for your purposes. By “rotating” the sphere (and the points with it), I think you’ll eventually hit on a set that is also reasonably distinct given various forms of colorblindness.
Michael Zuschlag Send private email
Friday, March 10, 2006
 
 
Michael,

Sounds like a fun exersize. But surely its been done before? I don't want to re-invent any wheels.
Andy Brice Send private email
Friday, March 10, 2006
 
 
Andy, I think all the color sets you picked are fine, as is the way you arrange them in a circle. I can definitely tell the difference between each color.
Art Wilkins
Saturday, March 11, 2006
 
 
Andy,

I had a similar problem with displaying jobs assigned to various people on a map. I didn't solve it so thanks for the thread.

Point of my post: where do you get the icons in your program from? They look ace and my program needs decent icons desperately.
cja Send private email
Saturday, March 11, 2006
 
 
CJA,

They are a combiantion of 2 similar looking stock icon sets. There are plenty of good looking icoms sets out there.
Andy Brice Send private email
Saturday, March 11, 2006
 
 
+1 to "Try a color book"

A non-pantone option is Jim Krause's Color Index, which has RGB values.

It is a good idea to try to get colors with the same (as in hue, saturation, and value), so that some don't jump out at you. Color books can help with that.

The colors you chose are certainly distinct, but some do draw my eye more than others.
EKB Send private email
Saturday, March 11, 2006
 
 
i'm red-green colour blind. The second set of colours you posted look ok, except maybe 5 & 6 appear very close (darken 5 a little maybe?). The first set of 15 gives me a lot of problems, 4, 8 & 10 look near identical as do 5 & 14 and 12 & 13
Colour blind guy Send private email
Sunday, March 12, 2006
 
 
I've tweaked the colours to reduce saturation of the more garish colours slightly and to try to make 5 & 6 more distinct to red/green colour blind people. Checks out ok on www.vischeck.com. Does it work for you 'Colour blind guy'?

http://www.perfecttableplan.com/jos/ptp_colours7.jpg
Andy Brice Send private email
Sunday, March 12, 2006
 
 
Those work pretty well for me (not color blind). I hesitated slightly when trying to distinguish 4 & 6. The others were automatic.
EKB Send private email
Sunday, March 12, 2006
 
 
Andy,

Take a good map. Carthographers have the same problem. Fortunately, the human eye is very sensitive to greens, blues and browns. Pick these natural colors and you can pair clarity with beauty.
Karel Thönissen Send private email
Monday, March 13, 2006
 
 
Your last one is much better, but I would probably have trouble picking 1/9, 2/5/8, or 3/7 out of a lineup. I second the pattern idea.
UNIX Guy
Monday, March 13, 2006
 
 
>I second the pattern idea.

Patterns won't work so well when you are zoomed back.
Andy Brice Send private email
Monday, March 13, 2006
 
 
Karel,

Hadn't thought about maps. Thanks.

I was quite suprised that I couldn't find anything about this problem on Google. Surely its a common problem?
Andy Brice Send private email
Monday, March 13, 2006
 
 

This topic is archived. No further replies will be accepted.

Other recent topics Other recent topics
 
Powered by FogBugz