Fix the Leopard Folders (FTLF or FTFLF)

Over the past few months, there’s been a lot of discussion about the new UI changes in Leopard. These mainly revolve around the dock [1] [2] and the menu bar which has recently been improved. Surprisingly, I have yet to see anyone comment on the new folders.

Folder icons in Mac OS should serve the following purposes:

  • Fit in aesthetically with the other Apple-designed icons provided in the Leopard install
  • Make it very easy to distinguish between folders at a glance
  • Quickly describe the contents of the folder

The new folders in Leopard fail on all counts for the four reasons listed below.

1. Usability: Each icon has the same shape

There has been some excellent research done in the cognitive science field on the topic of how icon shape affects human cognition. The overall conclusion is that having different icon shapes greatly increases the ability for the individual to rapidly discriminate one icon from another.

This is essentially because of how the human visual system functions. The system encodes data into two pathways, the magnocellular pathway which contains information about overall shape (among other properties), and the parvocellular pathway which contains information about detailed shape (also among other properties). When the user is trying to distinguish between two icons, the pathways associated with each icon are compared against each other and if their difference is greater than some arbitrary value then the brain registers that the icons are indeed different.

Granted, the folder icons in Tiger don’t have different overall shapes (with some exceptions). But in the past couple years, many designers have released third-party folder sets that take advantage of shape. So I think it’s reasonable for one to expect that Apple’s icons be at least on par with those from a usability standpoint.

Agua folder set by David Lanham

You can see that the silhouette of each folder icon from the Agua set has a different shape while each Leopard folder has the same shape. It’s important to make sure that the shape of the icon’s silhouette is different from the other icon silhouettes around it. And I’m not the only one recommending that icons have different overall shapes. It’s recommended in both the Apple HIG (second paragraph under Fig. 10-14) and the Gnome HIG (second bullet).

2. Usability: Colour cues are not used

A more obvious clue than shape is colour. As an exercise, rotate your head about 20 degrees from your head’s current position (facing the monitor) such that the icons below are in your peripheral vision (i.e. your eyes aren’t focused on them). Notice how you can recognize at least a few icons in the folder set with colour but can not recognize any icons in the Leopard set.

Cats + AquaBlend folder set by Laurent Baumann and Susumu Yoshida

This demonstration speaks volumes about how colour impacts our ability to see icons that are not our line of focus. Colour is beneficial because once the user plans on clicking a coloured icon that’s not in focus, they’ll be able to click it immediately (without scanning the screen for the icon) because they already know its position.

3. Aesthetics: Folders do not fit in with the Mac OS X experience

Aside from the new folder icons, Apple has introduced quite a few new icons in Leopard. All of these fit into the general Aqua aesthetic that Apple has developed over the years. The only exception to this are the new folders. They stick out in the dock like a sore thumb. Below are some screenshots of different folders in the dock. Notice how the third-party folders fit in with the Aqua aesthetic much better than the official Leopard folders do.

QuickLook folder set by Jonas Rask (inspired by folders from an early Leopard build)

Folder from the Vitae icon set by Dan

Folder icon from Leopard

Leopard Folders folder set by Orhan Okay

Folder from the Mac OS X Cats icon set by Susumu Yoshida

I’ve spoken to dozens of Mac users about this and all of them have told me that the Leopard folders don’t look right in the dock. I’ve also read countless comments to this effect on various Mac-related forums. But no one I’ve spoken to can quite pin down what it is in particular about these icons that make them so un-Aqua like. What interests me is why the folders don’t fit in properly. That knowledge can then be applied to analyzing our own third-party application icons for aesthetic suitability.

Every Apple-produced application icon can be broken down into having any combination of the following components:

  • Gloss effect applied somewhere in the icon
  • Matte area with sheen providing luminance
  • Object with a shine inherent to one of its materials

What you’ll find when looking at the icons on your Mac is that every attractive third-party application icon will contain at least one of these components. You may also find that many third-party app icons that you feel don’t fit in with the OS X experience contain none of these components.

Not to say that if an icon has one of the three components, it will fit in to the Aqua user experience. But it’s clear that if an app icon contains none of the components, it will likely not be a successful icon on the Mac.

Folder icons must co-exist with application icons on the dock and thus also need to contain at least one of these components. The fact that the Leopard folders contain none of them is a contributing factor to the folders not fitting in aesthetically.

4. Usability: Embossed glyphs rely solely on contrast

The designer has to take into consideration that the user will be viewing their icons on a wide variety of displays. These displays can be improperly calibrated, set to have a high or low gamma, set to be low contrast, or have other odd configurations. On my Cinema Display with the provided colour profile, I have no problem recognizing the embossed glyphs after pausing on them for a moment. But someone on a display with a low contrast image will likely have a fair bit of trouble making out the shapes of the embossed glyphs. This is a serious usability issue.

All of the aforementioned usability issues serve to make it very difficult for users to differentiate between folders at a glance and the poor aesthetics prevent the folders from fitting in with the Mac OS X experience. It’s interesting because when designing there are often trade-offs made between aesthetics and usability. Either aesthetics improve at the expense of usability or there is an improvement in overall usability at the expense of aesthetics. In rare cases, with excellent designers and exceptional attention to detail, both dimensions can be very strong (e.g. iPhone UI). In the case of these folders however, there was a large decrease in both aesthetics and usability. There are not many upsides to this design as far as I can tell.

Now, I’m not saying that we should go back to the folder icons from Tiger. They were certainly becoming dated and were getting tiresome to look at. A revamp was definitely necessary. But I think it’s pretty clear that Apple could have done a better job with these.

Aside from these folders, there have been some excellent improvements in Leopard. Especially with respect to consistency and provided controls. I’ll have more on this in October when Leopard is released.

About this entry