the Adobe CS3 icons

So this week's reading about HCI (human-computer interface) brings to mind the tempest brewing over Adobe's redesigned icons for the upcoming CS3 (Creative Suite 3). When the original Creative Suite debuted, the beloved Venus icon from Illustrator was replaced with a flower, and the eye icon from Photoshop was replaced with a feather. (InDesign already had a butterfly metaphor, which was retained but updated). Go Live, Adobe's web design program (which has a very small market share compared to industry leader Dreamweaver), got a star metaphor.






Those icons were tweaked in CS2 (created with xray photography), and looked like this:







Users had mixed feelings about these icons, but Adobe's decision to release the products on a synchronized schedule as a suite certainly argued for an overall branding strategy.

In much the same fashion, Adobe's 2005 purchase of Macromedia and resulting integration of the (now confusingly large) product line created the need for a consistent branding strategy.

Here's where it gets interesting. Adobe has traditionally been very secretive about upcoming releases, but decided to break tradition and join the public beta craze with Photoshop CS3. Designers who downloaded the beta noticed a new "PS" icon, and many concluded it must be only for the beta, because it was so minimalist and (some argued) poorly designed.

Lo and behold, John Nack's Adobe blog revealed that these icons are going to ship with the product, and published a link to the remainder of the icons, which can be seen here.
























The design user community's response has been overwhelmingly negative. On a good day, designers make Simon Conwell look generous, and they resoundingly gave a thumbs-down to the new design.

Reasons included the following: the two-letter abbreviations force users to perform recall rather than recognition, since the letters must first be interpreted, unlike a symbol. The squares do not differentiate products and therefore don't help the user. The colors do not map via product line (Dreamweaver is one one side of the wheel, Go Live on the other--both are web design tools). The icons may not be accessible to colorblind users. Many two-letter abbreviations might have two meanings: PS could refer to Photoshop or PostScript. The second letter is sometimes lowercase, sometimes small capital.

As an experiment, without comment, I put the wheel up for my design students who are learning the Adobe and Macromedia products, and asked for their feedback.

A sampling of comments: it looks like alphabet soup, how are we to remember what the abbreviations stand for, it resembles the periodic table (which in fact is the metaphor Adobe used), I like the color wheel, why aren't the symbols superimposed on the squares to provide reference, how will I differentiate the icons in the taskbar, why do products such as Flash and Acrobat retain their symbols. My students did solve the mystery of the lowercase vs. small caps: small caps are used for acronyms (FH=Freehand), while lowercase indicates the first two letters (Au=Audition).

One commenter to John Nack's blog (Brian Ellis, 12/28/06--you'll have to search John's page for his comments, as I couldn't link directly to them) did a heuristic analysis which gets to the heart of HCI.

Anyway, I thought the icon redesign makes a wonderful case study for usability analysis. Can't wait to see if the Adobe designers consider the feedback and redesign the icons before the product is released (rumored to be between April and June, so it's very late in the cycle to incorporate changes). It's worth considering that all this pre-release feedback wouldn't have happened without the public beta. Seems to validate the idea that the it's difficult for insiders to accurately analyze design usability. Team members are just too close to the project.