Ubuntu’s Semantic Indicator Color Palette

4 Responses · July 27, 2010

It wasn’t until Mark Shuttleworth’s announce­ment of “windi­ca­tors” that I learned of the ratio­nale behind the palette of noti­fi­ca­tion col­ors in the indi­ca­tor applet. To quote:

[Windi­ca­tors] would fol­low the same styling as Ayatana indi­ca­tors: Seman­ti­cally col­ored: with red for crit­i­cal prob­lems, orange for alerts, green for pos­i­tive sta­tus changes and blue for infor­ma­tive states that are not the default or usual state.

This came as a real sur­prise given that I had (and still have) never seen a blue or orange indi­ca­tor icon.

The obvi­ous and pri­mary objec­tion is that four col­ors in a palette to con­vey mean­ing is far too many. Shut­tle­worth even said as late as April 1 — just four weeks before Lucid’s release — “Per­son­ally, my expec­ta­tion is that green vs orange/red is as far as we want to go.” Two col­ors is an absolute max­i­mum here — one for neg­a­tive mes­sages about some­thing being bro­ken, the other merely to notify you of some­thing — although even one should suf­fice: “Some­thing has changed; request­ing your attention.”

If “orange is for alerts” and “green is for pos­i­tive sta­tus changes,” then why do new IM mes­sages turn the mes­sag­ing icon green? Isn’t that an alert? What is “pos­i­tive” about get­ting a new mes­sage? What if it’s your boss fir­ing you? Your boyfriend break­ing up with you? A spambot?

If red is “for crit­i­cal prob­lems,” why does your sound indi­ca­tor icon turn red when something’s try­ing to play while it’s muted? Is that really “crit­i­cal”? Doesn’t that deserve some­thing more accu­rately described as “an alert” (orange)?

Fur­ther­more, if it’s up to the appli­ca­tion devel­op­ers to spec­ify the “sever­ity” of an alert — which is not even an accu­rate descrip­tion of the pur­pose of these col­ors, as they’re not a spec­trum of sever­ity, but rather a whole hand­ful of mes­sages — will this not result in a great deal of incon­sis­tency? If one appli­ca­tion feels that its behav­ior is more impor­tant than that of other appli­ca­tions, it can choose to make its indi­ca­tor icon red rather than green (or orange or blue) on an event. And, more fun­da­men­tally, you’re plac­ing a bur­den on devel­op­ers who wish to use indi­ca­tor icons for alerts to choose from among four dif­fer­ent states, rather than just cod­ing for “Alter the color of my [w]indicator icon to what­ever the user’s desk­top theme calls for.”

It even appears as though this “spec” isn’t com­plete; Rhythmbox’s indi­ca­tor icon is black when play­ing, gray when not play­ing (under the Radi­ance theme). What does gray mean? Before I started writ­ing this blog post, in fact, I’d have guessed it meant that Rhythm­box was min­i­mized, as I fre­quently see a gray icon when Rhythm­box is hid­den. Turns out I was wrong, and that’s after using Lucid and Rhythm­box daily for three months.

The intent behind the spec­i­fi­ca­tion is flawed for those and prob­a­bly other rea­sons, and the exe­cu­tion is flawed as well. If you inspect the col­ors of the green and red indi­ca­tor icon col­ors — I couldn’t man­age to turn any of them blue or orange, so if you have, please leave a com­ment — you’ll see that green is #4dcb00 and red is #dc0000. I imag­ine we’ll never know why these col­ors were cho­sen, but some­thing is revealed in the choice of that green in particular.

“Ubuntu Aubergine” has a hue (in RGB col­or­space) of 328. Just oppo­site that on the color wheel — the most basic color com­ple­ment pair you can find — is a color with a hue value of 81: a par­tic­u­lar shade of green. And not the shade being used by indi­ca­tor icons.

That’s right: even though the indi­ca­tor icon color spec called for a shade of green, and even though there is a shade of green directly oppo­site Ubuntu Aubergine on the color wheel, Canonical’s design­ers chose an utterly arbi­trary shade of green with a hue of 95.

Aston­ish­ingly, the orig­i­nal pro­posal for a green col­or­ing of a new indi­ca­tor mes­sage was closer to the Ubuntu Aubergine com­ple­ment than the final imple­men­ta­tion (with a hue of 72, just 9 degrees from the “cor­rect” hue). It’s worth not­ing, of course, that Ubuntu Aubergine had not been for­mal­ized and doc­u­mented at this point (nor had it been as of April 28.)

It’s also worth men­tion­ing that a green hue of 104 is tri­ad­i­cally com­ple­men­tary to the pair of col­ors of Ubuntu Orange and Ubuntu Aubergine. So either of these two greens — 81 and 104 — could work in the­ory. But nei­ther was used.

Find­ing red and blue com­ple­ments is a bit more dif­fi­cult, mak­ing stronger the case for a sin­gle noti­fi­ca­tion color. Although “blue” is a com­ple­ment of “orange,” Ubuntu Orange isn’t quite “orange” enough to have a 180° blue com­ple­ment. The best I could man­age is a hue of 191, which is a tri­adic com­ple­ment of Ubuntu Orange with a 42° dif­fer­en­tial (the same as that between Ubuntu Aubergine and Ubuntu Orange). The “proper” red would be just between Ubuntu Aubergine and Ubuntu Orange, or a hue of 351. The cur­rent red has a hue of 0 — i.e., pure red — which should come as no sur­prise. Red = red, right Canonical?

Still, I con­tend that one color should suf­fice, and in that case, Ubuntu Orange is prob­a­bly the way to go, if the plan is to con­tinue with an Ubuntu Aubergine desk­top wall­pa­per and Ubuntu Orange high­lights in the GTK theme.

The impor­tant point to take away from this is that the cur­rent col­ors are symp­to­matic of a lack of con­cern for fun­da­men­tal design prac­tices within the Canon­i­cal design com­mu­nity. The hues of green I’ve men­tioned, for instance, may be indis­tin­guish­able to most users in prac­tice (even to design­ers, given the size of the icons), but that I’ve so eas­ily shown them not to be “cor­rect” is alarming.

Funny enough, on a tech­ni­cal side, libap­pindi­ca­tor spec­i­fies exactly three sta­tuses: Pas­sive (means hid­den), active (means vis­i­ble in nor­mal state) and atten­tion (means vis­i­ble request­ing the users atten­tion), see http://people.canonical.com/~ted/libappindicator/current/AppIndicator.html#AppIndicatorStatus

And it is tech­ni­cally pos­si­ble to spec­ify icons for the two vis­i­ble states, active and atten­tion. So on the API side, your idea of just hav­ing one atten­tion color in addi­tion to the mono­chrome nor­mal state is imple­mented. And in order to use more col­ors, one has to work around the API and set dif­fer­ent icons for active/attention status.

Frederik · 28 Jul 2010

Thanks for the info, Fred­erik. As you can tell, I’m not a pro­gram­mer, and as such, there’s only so much I can glean from mail­ing lists, blogs, and wikis about Canonical’s design spec­i­fi­ca­tions. Glad to know things are as sim­ple as that. Does this mean that the sound indi­ca­tor is work­ing around the API when it paints the muted speaker red? Or is green the exception?

Here’s hop­ing the spec doesn’t grow to include blue and orange.

Jay · 28 Jul 2010

I’m not really an expert on the pro­gram­ming side, but I think some­times a look into the code reveals some of the basic con­cepts used in the appli­ca­tion design. (On the other side, I find your insights into design prin­ci­ples really enlightening.)

I think the sound indi­ca­tor doesn’t use the AppIndi­ca­tor API, which is rather an abstrac­tion layer for eas­ier inte­gra­tion into appli­ca­tions. But e.g. the rhythm­box indi­ca­tor does use set_icon() a lot, while the orig­i­nal idea seems to be to just use set_icon() and set_attention_icon() once and then use set_status() to show one of them. So it is of course pos­si­ble to use as many icons as you want (and rhythm­box needs it to show play­ing state etc.), but the API clearly defines only one sin­gle atten­tion status.

Frederik · 29 Jul 2010

One thing to keep in mind is that per­ceived colour can be very dif­fer­ent from the absolute colour code. The design team may have aimed at the com­ple­men­tary colour, but found that it didn’t look right on the panel’s background.

But, nice arti­cle, keep up the good work and make sure the design team notices.

Snader · 4 Aug 2010

Leave a Comment or Subscribe