Skeuomorphism (skyoo-uh-morf-ism)

Most software developers have heard of skeuomorphism, but often the meaning is misunderstood so here is the full definition.

The practice of incorporating obsolete or skeuomorphic elements into a design, for familiarity or out of tradition, even though they no longer serve any functional purpose.

Wordnik

In other words, skeuomorphism is the incorporation of functional design elements from an older object in a new version of that object. An early example of skeuomorphism is faux fur. The first fur coats were actually made of fur, but new garment materials allowed us to make a coat that looked like it was fur when it was not. Another example would be fake wood panelling in cars. It hearkens back to an era when cars were actually made of wood, but the car itself is actually made of other materials.

In user interface design, the word skeuomorphism is generally used to describe interfaces that try to simulate their real-life counterparts. A highly controversial example of this was iOS before version 7.

The iOS 3.2 notes app
Figure 1: The iOS 3.2 notes app [JPG]

Some examples of skeuomorphism in the figure above would be the faux leather texture, the fake wood, and even the font. All of these are simulations of an actual notebook, used to make the interface feel like something the user is already accustomed to using in real life.

It is important to realize that the textures are not the only things that make an interface skeuomorphic. Even something relatively abstract like a button is skeuomorphic because it simulates a real object.

Good or Bad?

Skeuomorphism is not necessarily good or bad in and of itself. However, if it interferes with the user interface, then it becomes bad.

The Android Ice dial pad, an example of good skeuomorphism.
Figure 2: The Android Ice dial pad, an example of good skeuomorphism. [JPG]

The Android dial pad is an example of good skeuomorphism. It is familiar, does not interfere with the design, and does what it was made for (possibly better than less skeuomorphic alternatives).

NoteONE, an example of bad skeuomorphism.
Figure 3: NoteONE, an example of bad skeuomorphism. [JPG]

NoteONE, on the other hand, has some severe issues. The page curls keep us from reading anything more than two lines of text, and the date picker/calendar switch is cumbersome and difficult to understand: tap or swipe?

Skeuomorphism or Not?

The old Simple login form
Figure 4: The old Simple login form [JPG]

A common misconception is that skeuomorphism equals textures. This is not true. For instance, the figure above is not skeuomorphic since there is no real-world version of a form that looks like this (last time I checked paper forms didn’t have indented fields).

How does this relate to web design?

Since much of web design is spent building user interfaces, skeuomorphism could very easily make or break your design. Here are some things to consider.

Load times

Especially in this age of mobile devices, we can’t afford to have our designs increase the page load time. So if you want to do something very skeuomorphic, make sure you can do it without tons of images. CSS3 can help a lot with this, as a few lines of code to add a shadow is much quicker to load than an image of a shadow.

Usability

As mentioned above, make sure your interface is functional. Don’t let skeuomorphs cost the user time and effort.

Taste

Be tasteful. Please don’t build something tacky like a wood thermometer (which isn’t even a skeuomorph since real thermometers are glass).

About Mark Fischer, Jr.

Mark is a web developer and programmer. He likes reading classic novels, listening to classical music, skiing, and eating donuts.

Filed under design