Guy in the Hat

Iconic Icons

The icons on the original Macintosh were simple 32 x 32 grids of black and white pixels. Nevertheless, Susan Kare was able to create some of the most easily-recognizable icons of all time, including a frighteningly realistic Steve Jobs, under these harsh technological restrictions.

Why is it that such simple forms can communicate what an icon represents so efficiently, while high-resolution and photo-realistic representations of real objects are often not immediately recognizable?

About 7 minutes into this UI and Us interview, Wil Shipley explains what makes an icon iconic. in his words, “An icon is supposed to be the minimum number of elements that suggests something.”


UIandus.com Interview with Wil Shipley from Keith Lang on Vimeo.

One example Shipley uses is the “Picasso” Mac logo. But along with Susan Kare’s icons, the only good examples of “iconic” icons so far are as old as the Mac itself. What are some more recent examples?

Leopard’s new folders, for all of their flaws, are very iconic in the sense of using few elements to represent their contents. In addition, each “stamp” into the folders can be represented with very few pixels, which allows Apple to use the same symbols for the smallest representation of each icon (16 pixels square).





An even better modern attempt comes from David Lanham in the form of Sticker Icons. Among the most radical reinventions of famous icons are Flash, Photoshop, and Preview:



That Torrent icon isn’t bad either. Small raindrops making up a larger one is both easily recognizable as a play on the word “torrent” and as a visual metaphor for what torrent applications actually do.

Such icons aren’t well-recieved in all corners of the Mac community. Using a simple, memorable design instead of a photorealistic metaphor for what an application does is often seen as overt branding.

Adam Betts had the following to say about Yojimbo’s icon, which he was given and asked to “gloss-ize:”

“I do understand that they were only looking for pure branding logo and not standard icon but personally I strongly believe that this kind of app is better suited for standard design […] The icon they went with is ugly as hell in my opinion. […] But do they work well as a brand? I’m afraid so.”

In this case, the “standard design” is a photo-realistic icon of a journal, which could represent a huge variety of things, one of which is Yojimbo.

BareBones carries this icon philosophy over from their resolution-limited “Classic” Mac days, when they sold BBEdit with a similarly iconic icon. Note that TextMate, a competing product created after the rise of Mac OS X, uses a photo-realistic pen and paper metaphor for its icon (one that bears similarity to TextEdit, Property List Editor, and nearly every other document-editing application on OS X).

Before I end this post, I’d like to give a dishonorable mention to what may be the least iconic icon I’ve ever seen attached to an application:



Hmm… what exactly am I looking at? I understand Brent Simmons made this icon himself, and I’m assuming that means it’s temporary, but it’s a bit ridiculous to expect a user to recognize your application by a monochrome close-up of the desktop icon (that blob on the left is supposed to be the top of South America, if you’ve never seen NNW before).

How could we make this a bit more iconic? Well, there’s already a universally-recognized symbol for RSS feeds, and with a little NewsGator branding and 3 minutes in an image editor, you get something like this:



I am by no stretch of the imagination a graphic artist, but I’m assuming you get the general idea.

Of course, icons are a bad way to represent applications and commands in the first place, and we’d all be better off dropping them for simple words, but while icons are the entrenched platform standard, they might as well be a bit more iconic.

Analogies

Fraser Speirs has an analogy for RAM vs. hard disk space for new computer users.

“Think of RAM as your physical wooden-or-formica desktop. It has a certain fixed size and, if you want to work on paper documents, you have to have them on your desk.”

It’s a good analogy, but I think it’s a very bad idea. Nobody but a technophile should ever have to care about the difference. I like Jef Raskin’s idea of making all technical concepts, including file systems and operating systems, completely invisible to the user.

“the reason why PARC invented the desktop was to make the idea of an operating system and other technical underpinnings of computers easily understood by representing them graphically. The better idea would have been to eliminate the irrelevant technical details.”

Kindle

There is a widespread belief that once books go electronic, something of immense value dies. Reading comfortably by a fire will be forever tainted by the soulless machine, its cruelly glaring screen, its cold metallic emptiness.

Story time.

Before the printing press, when Europe was wailing in the depths of the Dark Ages, books were made in remote monasteries.

The same people who bound the lambskin pages raised the lambs.

Each text was accompanied by notations in the margins, the copyist musing over particularly insightful passages as he wrote them by hand.

The typographical flourishes, the intricate art, everything was done uniquely for a single copy of a book.

Story time two.

Each and every book you own was made on an assembly line in the most identical and cost-effective manner possible.

Moral of our story:

Your books have no soul to lose.

If you think that books shouldn’t trade personality and craftsmanship for mass distribution, that ship already sailed. Centuries ago.

The Kindle might suck (and it definitely does), but “it isn’t a book” is not the reason why.

An Example

So I keep saying the Finder should be more spatial. But that’s a bit vague—what does it even mean? Here’s an everyday example of why spatiality is nice.

I have several folders on my Mac devoted to solely to images from the internet. Since such images usually have gibberish filenames and the content is what’s important, Cover Flow is perfect for viewing these folders in the Finder. But doing so effectively requires a big Finder window. This is a problem, since most of my Finder windows are small (a folder with, say, ten sub-folders is still a relatively tiny window). The normal browser-like behavior of the Finder is to replace the contents of the front window with the contents of the folder you open. Let’s see how that works for my Wallpapers folder, which I’ve set to always open in Cover Flow (in Show View Options).

My Pictures folder:

And opening Wallpaper:

Ooh, not good. Cover Flow gets squished into that tiny window. I’d have to manually resize it and then do the reverse every time. Now let’s try the same thing under old-school spatial mode (click the pill button on the top right).

Once again, the Pictures folder:

And Wallpaper:

My viewing preferences for this window were preserved from where I left it last. Beautiful.

So what’s the problem? Why don’t I just keep on going in old-school mode for the rest of my days? Unfortunately, the Finder exhibits browser-like behavior for the different views (icon, list, etc.) even when it looks old-school. So if I switch one folder to Cover Flow, then open another that used to be in icon view, that folder will also show up in Cover Flow. The Finder treats the views as a switch for newly opened folders: off or on. Boo.

To get the desired effect above, I had to go into View Options and set it manually as I described. This is a terrible state off affairs. New users are never going to see this option, and without it, old-school mode is exactly like browser mode except without the toolbar. In short, it looks inherently worse at face value. Not to mention the annoyance of opening that palette all the time.

So won’t you join in my crusade? Who will be strong and stand with me? Beyond the barricade, is there a Finder you long to see? Then join in the fight that will give you the right to be free!

[Editor’s Note: I keep capitalizing Cover Flow. I don’t know why, I guess it looks more official that way.]

Mindless Automation Tutorial Update

For all of you MtG Players out there, I’ve made some small Leopard-related updates to the Mindless Automation tutorial.

Mindless is a free, ugly-as-sin Linux application that lets you connect to the Apprentice network and play Magic: the Gathering against your geeky friends. A port of it can be run on a Mac using X11:

If you check the tutorial’s comments, there’s also a bit of troubleshooting, as well as an explanation of how to make your life a bit easier using Porticus, a DarwinPorts GUI.

Awwww...

Is it weird to get sentimental over an application icon? I just noticed this about TextEdit:

Wood

I was reading through the DrunkenBlog archives (as I often do), when I came across the interview with Wil Shipley (which, by the way, is required reading), and noticed this early mockup of Delicious Library:

It reminded me immediately of the most recent MyDreamApp post (which isn’t very recent at all—MyDreamApp is dying) about Cookbook’s interface, which looks something like this:

If you think that an all-wooden interface is a silly idea, that’s because it is. As Wil Shipley puts it:

“At one point we had an interface where we replaced Apple’s brushed-metal with wood, and it looked really amazing but there were some technical issues and we finally decided that, actually, it was cool but it made the interface harder to understand. Sometimes you do stuff that’s just cool for cool’s sake, but you can’t do it if it actually gets in the way of the app’s transparency.”

Let’s hope Austin Sarner or whoever actually ends up implementing the Cookbook interface (if it ever gets made at all) comes to a similar realization.