Category: Usability Basics

In a recent interview, the interviewer commented thusly:

With iOS 7, Apple finally dismisses that infamous skeuomorphism.¹

That’s a typical, and typically hostile, view of skeuomorphism, and it makes you wonder why people generally feel so strongly against them.

Skeuomorphism is more than aesthetics

Most of the countless blog posts and articles about skeuomorphism seem to focus on the use of “rich Corinthian leather”, faux green felt, and fake wood in Apple’s iOS.

While that particular view on the topic may, indeed, warrant discussion, skeuomorphism in user interface design is not (just) about visual aesthetics.

Rather, it’s about designing controls that resemble those from older technology in terms of appearance and behavior, even if, technically, that specific design approach is not necessary anymore.

By tying into a user’s experience and familiarity with using older technology, newer technology can be more accessible and easier to use.

Here’s the more terse definition Wikipedia has to offer:

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

For a user experience design point-of-view, let me add one word for clarity:

A skeuomorph is a derivative object that retains ornamental design cues to a structure that were functionally necessary in the original.

An example for skeuomorphism is the button layout of most calculator apps. Technically, a calculator app could accept entire free-form mathematical equations. Nevertheless, most such apps offer the familiar button panel with buttons for digits, operations, the equals sign, etc.

My favorite example for a skeuomorph is entirely non-digital: door lock pins in cars.

A real-world skeuomorphism: Door lock pins in cars

For a few decades, locking pins were the standard control for locking and unlocking a car door.

These pins would stick out vertically from the doors’ inside “window sills”. Pulling a pin upwards would unlock the door; pushing it in would lock them.

A quick aside: Why car door lock pins were positioned where they were positioned

On the front doors, the lock pins were positioned towards the rear of the door; on rear doors towards the front. These mounting positions were not dictated by the location of the door locks themselves, but followed ergonomic considerations.

To this day, most cars only have outside key slots in the front doors. So, to unlock the rear doors in a car that does not have electric locks, you would unlock a front door, reach around the car’s “B” pillar on the inside, and reach for the rear door’s lock pin. If the pin would have been located towards the rear of the door, you would not have been able to reach it that way.

A welcome side effect: Lock pin position maps door locking status

Besides “affording” the actual locking and unlocking operation, the functional design of the door lock pins provided a built-in status indicator. Pin is pushed in: door is locked. Pin sticks out: door is unlocked.

Want to check whether you properly locked the car? A quick glance at the lock pins through a car window is enough to find out.

From fundamental functional control to pure status indicator

The skeuomorphic angle to this story?

Most cars these days come equipped with electric door locks, which can be conveniently unlocked from a wireless remote. Therefore, there is no more need to use door lock pins.

And yet, some cars still provide door lock indicators in the same position of, and with the same appearance as, the now-unnecessary lock pins.

Here is an example from a BMW E46 3 series, showing the front door’s pin in the “unlocked” position.

The pin’s only purpose is to reflect the door’s locked status. You cannot push it in to lock the door, and if the door is locked, the pin is recessed completely, so that it sits flush with its bevel. You literally cannot grab it, so that you cannot use it to unlock the door either.²

The button that actually operates the door locks in this car is located in the center console near the gear shifter. It’s far away from the doors, yet much easier to reach for both driver and co-pilot than the (now “fake”) door lock pins.

Just like metaphors, skeuomorphs are about transferring usage experience from one realm to another

BMW’s designers could have come up with a completely novel, totally original visual indicator. For example, they could have grouped four control lights together — one for each door — and placed them at the top of the center console.

These indicators would still be visible through the windows from outside the car. It would also be easier to check them for the people inside the car, because they would not have to turn their heads as they do for checking the “lock pins”.

Nevertheless, someone decided to give the “new” indicators the same visual appearance and mounting location “that were necessary in the original“. Even though they were not technically necessary anymore for the new, electrically operated door locks.

Here’s an important detail, though: Check out the position of the rear (“fake”) lock pin.

Now that there is no more need to actually reach the pins from the front seats, they have been moved to the rear of the door. However, the appearance and vertical position, i.e., the “design cues” of this “derivative object” are still identical to the “original”.

Dismiss skeuomorphism? At your own peril.

Like so many other UI design techniques, skeuomorphism is just another useful tool in a designer’s tool belt. Applied deliberately and in well-defined doses, it may be just what is needed to make a certain aspect of a system’s UI more user-friendly.

Outrightly dismissing any such tool as soon as a new contrarian design fashion comes along (“flat design”, anyone?), says more about a commenter’s narrow-mindedness than the tools’ inherent merits.

Mads Soegaard from Interaction-Design.org has published a set of restored videos from a 1994 CD-ROM edition of Donald A. Norman’s book, “The Design of Everyday Things.” In these videos, Norman explains key concepts from his book.

It’s odd to think that, from a human’s point of view, the videos are only 17 years old and at the same time, in Internet time, are already 17 years old. But as it says in the video captions: “Vintage video from 1994 – still highly relevant today” — highly relevant today, indeed!

Videos: 17 years old — Video Contents: timeless

Among the videos, I’ve found two favorites: Video #1, which addresses “affordances,” the abstract concept that may be a bit difficult to understand — until you see the video in which Norman explains it.

And video #6, “Conceptual Models of File Systems,” which provides a wonderful example for how easily the user’s mental model can depart from the one that the designer had considered to be perfectly obvious and appropriate.

On his own website, Norman himself provides a bit of background information about these videos.

When I decided to submit my first-ever Ignite presentation, I knew from the start that it would be about usability. After juggling a few topics for Ignite Fort Collins #6, I settled on “How Gestalt Psychology Can Help You Make Better High-Tech Purchasing Decisions.”

With only twenty slides and five minutes available per talk, you can barely begin to scratch the surface of something like Gestalt Theory. But five minutes do suffice to grab some of your audience’s mindshare and get them interested in learning more about your topic.

Which is where this blog post comes in, whose link is conveniently featured on the last slide of my talk.

How to gauge a product’s usability before you buy

The motivation behind the talk is to get average customers interested in the topic of usability. Why is it that similar products can provide very different user experiences? What is it that makes a product easy to use? How can I tell if a product will be easy to use before making a purchasing decision?

If this is something that interests you, my article, “The Ten Rules for Usable Technology,” is for you. It explains what good usability is, and how you can apply a set of simple rules to gauging a product’s ease-of-use before you part with your money.

More on Gestalt Theory

While the Gestalt Laws presented in my talk — Closure, Similarity, Proximity — are among the most important ones, Gestalt Theory extends way beyond these three. To learn more about this subject, here are three starting points for your intellectual journey.

A great introduction, presenting further Gestalt Laws, is presented in the first 45 minutes of this video from the Designing Interactive Systems 1 course from RWTH Aachen University.

Wikipedia’s article on Gestalt Psychology provides a concise overview over the topic including its history, fundamental principles, and the people behind it.

If you’re a designer who would like to get a feel for how to apply the Gestalt Laws to your work, read “The Rules of The Gestalt Theory And How To Apply It to Your Graphic Design Layouts” at the The All Graphics Design blog. This article also features lots of great example images.

Let’s put the pressure on

As I said in my presentation, there is no excuse for technology being difficult to use.

Usability has been a subject of scientific research for decades. Just being aware of something as — surprisingly intuitive — as the Gestalt Laws should enable product designers to make every one of their creations reasonably easy to use.

And yet, the spectrum of badly designed products ranges from simple alarm clocks that make it a pain to set the alarm time, all the way to smart phones that hide the number pad so successfully that average users have a hard time making a phone call…

By refusing to buy products that are difficult to use, every one of us can contribute to putting the pressure on high-tech companies and convince them of the value of good, human-oriented design.

Update 2010-09-24: Added YouTube video.