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
Reprinted from WebReference.com.
IE 7
Firefox 2.0
