My name is Jake Marsh.
I'm a developer, designer, and writer.

Subscribed via Push Notifications. You can also subscribe via RSS or Twitter.

Subscribe via RSS or Twitter.

Subscribe via Push Notifications, RSS or Twitter.

On Skeuomorphism

 •  5 minutes to read

iPad Calendar & Contacts

Skeuomorphism is a fantastic technique and I couldn't be happier with how it is used in the design of some applications. When used both properly and effectively, I believe it can lead to some of the best user interfaces the world has seen.

The "official" definition:

A skeuomorph or skeuomorphism is a derivative object that retains ornamental design cues to a structure that was necessary in the original.

In our world it's actually something a little more specific. I think my buddy Mike Rundle summed it up best in his post on Hacker News today:

There's a difference between "looking like something I'm familiar with" and "working like something I'm familiar with". The problem with bad skeuomorphic design is when it looks familiar but doesn't act like the thing it's mimicking.

I couldn't agree more.

I would take it a step further and say that the interactions of such an interface need to be intuitive and discoverable on the platform. Take this app:

Korg iELECTRIBE

Yes, it does somewhat resemble a real world object. But, putting aside my own personal disdain for how hideous it looks, it has a major flaw: It is not usable. The minimum usable height for tap targets on iOS is 44 points. Take UIBarButtonItem for example, here's one:

UIBarButtonSystemItemAction

The good folks over at Korg completely ignore this fact. They have many buttons that are only 20 points tall. This not only makes the buttons hard to tap, but their placement makes the virtual "knobs" quite difficult to interact with. Also, given the large and clumsy nature of our pointing devices (otherwise known as "fingers"), turning virtual knobs is a very non-intuitive method of choosing a value from a range of values on a digital screen. A better way of handling this type of interaction could be something like the iOS movie player, which allows you to intuitively scrub through the timeline of the movie at high and slow speeds depending on the vertical position of your finger after beginning your action.

My point is that an app doesn't have to completely replicate the real-world interface to which it's referring. You merely have to remind the user with subtle but recognizable visual cues, then embrace the platform.

The Early Edition 2 for iPad does a pretty great job of this:

The Early Edition 2

The Early Edition 2 Sharing Screen

Their story-sharing screen is one of my favorites in any app, you really have to see the animations and interactions to truly appreciate it. They remind the user of a newspaper, even allow you to pull down the corner of the page and turn to the next, but they don't go too far. They don't make you un-fold the paper, shake to make the ads fall out, or (an unrelated rant) throw in full page ads in between the content you're trying to read. Their sharing screen is so elegant. It sort of mentally nudges you into understanding what's going on by emulating a manila envelope, even taping it closed for you.

Then we come to this little bastard:

Find My Friends

It resembles no actual recognizable interface or object (other than maybe a super shiny baseball glove or a native american friend-finding dreamcatcher). It is themed, at least it would seem, for the sake of being themed. At a glance, it doesn't necessarily look bad, it just doesn't make much sense. Apple has top-notch designers. I almost feel bad bringing Find My Friends up as it has been sort of hammered to death recently. However, I couldn't finish out this post without mentioning it.

If you aren't going to make a truly skeuomorphic interface, but are just going for a good looking app, then use textures and patterns with extreme care. Your users, and hyper critical bloggers like myself, will thank you.

Vote on Hacker News