We’ve all heard the sound — that tinny shutter clicking sound point-and-shoot cameras make when you take a photo.

There’s no complex mechanical mirror assembly swinging upward when the shutter opens. No matter, though. The cigarette box sized camera burps out a faux ka-click anyway. The mechanism producing this noise was quite necessary for its predecessor, the SLR/DSLR camera, but now functionally irrelevant in the newer point-and-shoots. This design cue (audible in this case) inherited from an ancestor is referred to as a skeuomorph, and they can be found everywhere in our daily lives — air intakes on the electric Chevy Volt, window shutters that don’t shut, copper cladding on zinc pennies, nonwinding watch winders. Even the brown cork-pattern on cigarette tips is a holdover from the days when cork was used as a filter.

These design cues are deliberately preserved in the derivative object. They’re used to ease us into a new idea by associating that new idea with its familiar lineage. Sometimes these cues die out. Sometimes they persist. In either case, the original function of the skeuomorph in its ancestor is lost or irrelevant in its derivative. Occasionally design decisions stick for good, and in fact cannot (or is prohibitively expensive to) be changed — even if that change were to result in greater efficiency. This is known as path dependence. The QWERTY keyboard is a often cited example of path dependence.

Skeuomorphic UI design cues

Speaking of keyboards, my high school typing class enlightened me to the brilliant purpose behind the raised bar or dot on the F (or D) and J (or K) keys. The tactility of those keys assist blind users and touch-typers to orient their fingers on home row. These bars provide a clear and intentional function. The iPad’s derivative keyboard still honors this feature.

The iPad obviously lacks tactility, but the raised bars add little sprinkle of realism without getting in the way. You may not have even noticed it. The overall design of the keyboard control is unadorned, clean, contemporary and consistent. Now imagine if this design had been inspired by the keys of an antique Underwood typewriter from the mid 20th century. Visually rich and magnificent, perhaps. But would that positively impact its experience value? How about its usability value?

When Apple introduced the iPad, along with it came a set of Human Interface Guidelines. The HIG encourages app developers to “delight people with stunning graphics” and to “add physicality and heightened realism…The more true to life your application looks and behaves, the easier it is for people to understand how it works and the more they enjoy using it.”

This idea is essentially doubling down on skeuomorphic realism  — a derivative device containing features from an analog ancestor for purely aesthetic or emotional reasons.

But how good is that advice, generally? This is clearly a call for more than just the polished aesthetic details and refinements a designer takes pride in. This is about advancing literalist design styles and skeuomorphics on the grounds that it improves usability through a natural understanding of how an app works. Apple rightly resisted this temptation in many cases, but the Notes and Calendar apps are a different story. Apple combined analog design with modern UI patterns at the expense of affordance. My real life, analog paper doesn’t scroll. Are we now to expect its digital replication should?

Usability pitfalls

Literal replications of once-mandatory controls and features can add a positive emotional response, and even aid in the understanding of how the app is supposed to function. However, taking this approach also introduces some usability risks. Skeuomorphic and realistic UI components are susceptible to the following hazards:

• Changing the original component’s behavior to fit a new function or feature
• Straining or breaking established UI standards
• Incorrectly assuming the user is familiar with the original component
• An appetite for screen space

Nice rack

News Kiosk, an iPad news reader, is instructive to help illustrate the last point. Here’s the main view showing me stories from sources I’ve subscribed to. The 9.7 inch screen of 786,423 pixels lets me see exactly six news stories and (possibly) a frustrating glimpse of the excerpt text (depending on the length of the headline). A little arithmetic exposes how crazy this is. This news rack design offers about 27%* of its space to actual content. The remaning 73% is devoted to making me feel like I’m standing in front of kiosk on the corner of 14th and 3rd. How about a little ambient audio? Taxi horns, people talking on cell phones and a street musician might complete the experience.

There’s a good chance you’ll want to peer downward for more newspapers, just as you would at a real kiosk. But the modern page indicator UI control is used to shift the whole rack horizontally in sets of three. The creators of this app thought the newsstand literalism was worth the tradeoffs. Do you?

Proliferation into mobile apps

Camera+ is a nifty photography app that lets you capture, creatively edit and distribute photos. Though I think it gives wonderful results, I’m going to use Camera+ to illustrate the other pitfalls of Skeuomorphic realism.

The Camera+ menu view is shown above/right. It’s contained within a literal reproduction of a DSLR LCD panel. There are two things of note here. First, the size of the LCD display is quite small compared to the device screen. A modal screen could fit all the settings in one view, but this LCD is burdened with containing all these settings and options within a small area. Second, this confinement requires the app to bless the LCD with scrolling powers while real life LCDs do not enjoy this ability.

To show how skeuomorphic realism’s proclivity to intrude on UI standards, consider the Camera+ Lightbox view.

It displays the photos in a negative filmstrip. If you ignore the fact that the photos aren’t negatives at all, but positives, you’d be OK to assume that the filmstrips scroll horizontally — just as you would expect a  filmstrip to do. They don’t. The entire view scrolls vertically to expose more negative filmstrips containing groups of three images. There’s really three weaknesses here: Inaccurate portrayal of the filmstrip skeuomorph (1), which causes poor scrolling affordance (2), requiring more space (3).  Compare this view to the native Camera Roll which displays 20 photos.

The iDial app serves as a great specimin for showing how realism can backfire. This app rewound the hands of time, turning the most advanced smartphone ever developed into a rotary phone.

It’s likely a college student has never seen a rotary phone, much less used one. As far as the rest of us are concerned, would we use this for any other reason than to enjoy a brief moment of nostalgia only to ditch the app minutes later for its modern, efficient, intuitive derivative? This reminds me of an app I once saw that required one to click on a blue U.S. Postal mailbox to contact them. I suppose it’s possible they didn’t care about international users figuring out what that blue box was supposed to represent, but it’s not likely.

Realism and affordance preservation

I’ve suggested how staying “true to life” has demonstrable drawbacks. But does this mean we have to abandon any degree of realism altogether?

Mint’s iPhone app offers a view displaying a single transaction (income or expenditure). This example resembles a paper receipt, yet makes no compromises in terms of clarity or affordance. The typewritten font, watermark, shadowing and disclosure arrows offer a balance.

The common meanings we’ve come to associate with icons have much more to do with symbolism (or a path dependent association with a literal or analog counterpart) than with skeuomorphic realism. Even though the icon may borrow directly from some ancestral technology (such as an envelope to symbolize email) it is not skeuomorphic because the design creates meaning and provides access to an existing function or feature.

Path dependence and the creation of meaning

Consider the following icon, found in many familiar applications.

These icons provide access to an object inspector or more information about a given item. This icon has gained so much traction (that is, gone so far down the “dependent” path) that even if someone came up with a more brilliant way to represent the concept of an object inspector/info, we’ve become too accustomed to associating the “i” with this function. Changing this would incur a usability cost. This icon has emerged as a standard, but still duking it out for a path dependent standard are icons for settings (main contenders: gear cog and sound mixer slider controls) and favoriting (main contenders: heart and star).

How real should real be?

If it feels like you’re shoehorning an experience to fit a real world, analog, nostalgic version of it, you’re probably at risk of overdoing it. Many times it’s just not worth overtaxing an app’s UI design in order to fit a function or feature. Similarly, stretching the app’s function or feature to play nicely with a skeuomorphic design element is also a risky approach with more downside than upside. Lastly, be mindful that employing skeuomorphs and realism in UI design gives you a set of benefits, but also a set of shortcomings.

Keeping an honest balance sheet of the gains and compromises can help shape better UI design decisions. If it begins to feel too much like a device within a device, it might be worth taking a step back and evaluating what you’re gaining and what you’re giving up.

Where is your balance? Does the degree of realism weigh heavily in measuring usability? Let me know what you think.