Skeuomorphism: the good, the bad, and the ugly

I’m really getting tired of hearing people complain about skeuomorphic user interfaces, especially tech journalists that don’t understand what they’re discussing. Podcasts on the TWiT network (yes, I’m looking at you, Leo) have been especially annoying. So, here’s an example. The next time you hear somebody complain about Apple’s skeuomorphic leather stitching, please send them here.

The Ugly
This is Apple’s much maligned Notes app from the iPad. There are a lot of people that strongly dislike the visual aesthetic. Some people like it, perhaps because it is familiar or it resonates with past experiences and sensations. Other people don’t care one way or another. For the most part, this is a matter of personal taste. As I’ve explained before, this is fashion. It’s also a bit of branding, and a case can be made that the visual design of the application has some utility, as it immediately communicates which application you are using. Many people seem to have just taken an intractable stance against skeuomorphic designs because it’s currently hip to do so, but for the most part, there is no negative effect on the usability of the application. The stitching is purely decoration, but there is a good reason for providing some amount of margin between the interactive components and the edge of the screen. The notepad doesn’t require a binding, but it benefits from a title bar, the height of which is based on the size of the button that resides within it. The one skeuomorphic treatment that is wasteful is the pocket on the left. It serves no functional purpose, and it takes up a significant chunk of what could be usable space. If you had a lot of notes, the pocket would obscure two (and part of a third) that you would otherwise be able to see and tap on.

The Bad
This is the iPhone app Metronome by MarketWall. It is almost completely skeuomorphic. It looks like a traditional, mechanical metronome. To set the tempo, you have to drag the weight up and down the arm. To start the metronome, you drag the arm to one side and release it. The arm animates back and forth just as on a mechanical metronome, and it makes a ticking sound. Now, you can like or dislike the visual design of it. When I first saw it, I thought, “Oh, that’s cute,” and I enjoyed playing with it briefly. But then when I had to actually use it, I immediately realized that it is a poorly designed application. It is really difficult to get the weight to the exact tempo you want to set. Some tempos I couldn’t get at all. It was really frustrating. The application is hard to use because it is limited by the constraints of the physical object and it’s translation as a skeuomorph.

The Good
This is Pro Metronome, an iPhone app by EUMlab. The visual design of this UI is also skeuomorphic, imitating a handheld, electronic metronome. It is designed to mimic a physical object with an LCD screen, beveled buttons, and a click wheel similar to a classic iPod. This is unnecessary, and the screen-within-a-screen is downright silly, but it isn’t detrimental to usability. The click wheel, however, is actually a very good interface for setting the tempo. You can quickly get to the tempo you want, and the control is fine enough to easily adjust the tempo by single digits. I find it preferable to other methods of entering a tempo (e.g. numeric keypad, increment/decrement buttons). Furthermore, I immediately knew how to use it—a primary benefit of a skeuomorphic UI.

My point here is that there are two distinct ways to critique skeuomorphism. One is purely aesthetic, and if you are critiquing the aesthetics, than realize that you are making a personal judgment based on your own tastes and prejudices. This is not a basis by which to declare skeuomorphism as good or bad. The other way to critique skeuomorphism is to consider it’s functionality. Is it making the product easier to understand? Is it obscuring information? Does it actually result in an ineffective UI? Asking such questions will result in an intelligent analysis of the design.

  1. courtneybolton reblogged this from designaday
  2. chipped-tooth reblogged this from designaday
  3. designaday posted this
blog comments powered by Disqus