Usability Design Tip: Do It Over

Take 6: An Even Bigger Color Star: 81 colors

I was on a binge with the math here, which I won't go into. But I was very proud of this arrangement, boring friends and family with it for weeks. Here was a critical point at which I almost stopped tinkering.

You know that feeling when a great idea suddenly dawns on you and you think "How could I have missed it, of course!" Well to me that indicates that reality is incredibly stuffed with great ideas waiting for someone to think of them.

"The universe is full of magical things patiently waiting for our wits to grow sharper."
—Eden Phillpots (1862-1960)

Suddenly it occurs to me that if I can show 81 neighboring colors what about showing all 216?  What about throwing out the whole iterative color picking idea entirely and just showing all the choices at once. One click equals one color choice, making maximum use of the user's effort.

In usability I think it merits tremendous effort and honor each time you save users a single click. Saving every user one click scales well. Imagine the profound boon of saving millions of clicks. (This is the kind of logic I wish I could convey to the civil planners who have strewn toll booths all over South Florida.)  But more than that, extra clicks decrease user enthusiasm. Word-of-mouth marketing hinges on wild enthusiasm.

The bright idea would take some real wrestling with the math. Pennies weren't enough any more, but my kids' blocks helped.

Take 7: All Color Choices At Once

There was much work to be done arranging all 216 colors in a way that revealed their inherent patterns and relationships. I was determined to do two things:

• Arrange by hue in a color wheel
• Group same-hue colors together

 I was able to arrange many of the colors easily into a wheel with the six primary hues (red, yellow, green, cyan, blue, magenta—15 shades of each) and six intermediates (which I named orange, spring, teal, azure, violet, pink—6 shades of each).

The leftovers, the orphans remaining after all these hue-families were assembled proved very difficult to get an intuitive handle on. That's where the blocks helped, some propped up on paperclips. (I daresay a classic quest to escape flatland.) 

Besides the blocks, I used another tool to try to arrange the orphan colors. I realized there were really twelve sets of 7 colors each and that they should be symmetrical. I wrote a Java applet where it was possible to move one set of the 7 colors and have the other eleven sets fall in line automatically. It's a crude affair, with much flickering and jumping and it really works best on a huge monitor. You're welcome to try it.

   
In the upper right corner, seven of the pink color chips are movable. (And many of those start out on top of one another, so: play around.)  The other seven pinks will only react when their counterpart is moved. It's the reddish-pinks that are draggable, the magenta-pinks are copy-cats. Dragging and dropping the seven reddish-pinks will simultaneously move all the other sets of seven around the wheel.

In the end, the Java applet looked something like this:

I used those positions to get to the final result:

The orphan colors became the six "splats" around the outside.

Today the color lab gets about 2000 visitors a day.  

I've shipped about 5000 posters to designers in 44 countries.

I don't think this would have worked with paint cans. Moral: be wise and courageous about when to start over.

The Future

The next overhaul of the color lab could be driven by a number of social and technological considerations. Designers could benefit from simulations of color deficient vision, which by some estimates affects 1 in 8 men. Users with the limited color capacity of 8-bit-palette computers are gradually declining, now at about 7% according to the www.thecounter.com/stats/. Many designers are making finer adjustments of color outside the set of 216 web-safe colors. An article by David Lehn and Hadley Stern of Razorfish researches some serious problems with 16-bit color palettes for which Web-safe colors are no protection. That article ends with helpful strategies (e.g. transparent GIFs) for avoiding unsightly borders for some users. More on color issues at the Web Color Reference.

Bob Stein can be reached at stein@visibone.com and www.visibone.com