Distinguishing Between Ornamental and Functional Skeuomorphism

By the amount of times I’ve read the word “skeuomorphism” in the last year, it’s easy to assume the world has taken an internet in rather ethereal UX language. But of course that’s not the case. I think more tech journalists use it because they feel it gives them a sense of authority. In fact, the only thing it does is to perpetuate a common misunderstanding of the benefits of skeuomorphism, and that happens when you only focus on one implementation of this concept.

Most of the conversation has been around skeuomorphism in iOS. You can even see the Google search trends for “skeumorphism,” and it’s directly tied to the uptick in the iOS conversation. However, when most people used that term it is used to mean “ornamental skeuomorphism.” Let’s distinguish between the two for some much needed clarity.

Ornamental Skeuomorphism

Ornamental skeuomorphism is the use of real world textures and designs to mimic a physical interface. It is done purely for ornamentation and not functional. Here are a couple of examples.

< iOS 6 Calendar: Here you see the appearance of a physical calendar that adds nothing to the experience. (The page flipping animation in this app and iBooks serves more as a functional role, albeit a poor one.)

iPad Calendar in < iOS 6

iPad Calendar in < iOS 6

Same with an iOS app called iStudiez Pro.

iStudiez Pro (iOS App)

iStudiez Pro (iOS App)

You can see there is nothing functional about the look. It’s only made to imitate its real-life counterpart.

Functional Skeuomorphism

Functional skeuomorphism is the use of real world analogies and behaviors to help the user match a physical appearance with a digital one. The thought was that skeuomorphic functions can assist in the transition from physical to digital.

The most obvious and well used is the folder paradigm introduced way back in the early GUI days. The analogy was used to help transfer people’s thinking of storing objects in a container (the file folders). This comes from the filing cabinet in the physical world. Here is one example of this in Windows (and it’s similar in OS X).

Folders in Windows

Folders in Windows

Here is an example of “folders” in iOS that have no ornamental skeuomorphism to match the functional use. (As as side note, I wish they would’ve called these “stacks” from OS X, but you can see now why they kept the name.)

Folders in iOS

Folders in iOS

Functional skeuomorphism has other application outside of digital interfaces. Does your car really need to beep when you lock/unlock it? Of course not, but it fits our mental model of a confirmation noise, and it is, I think, appropriate (think of the noise that bolt locks made when locking and unlocking).

Skeuomorphic Iconography

An interesting application is in the realm of iconography. It’s has been an area ripe to marry functional and ornamental skeuomorphism although it probably leans more heavy on the ornamental side. There have been good critiques against using dated analogies such as the next example.

Here is the often debated floppy disk save icon in the very recent Word 2013.

Save Icon in Word 2013

Save Icon in Word 2013

I read a usability report recently on how quickly users still identified the floppy disk as a “save action.” What was supposed to only have a temporary significance has now crossed over into becoming a convention despite the fact a large majority of people using computers today have never had to use a floppy disk. When designing these icons you have ask if the relationship between the signifier and the signified is still appropriate. For more details see this Boxes and Arrows post: Optimizing UI icons for faster recognition.

Conclusion

So let’s remember there are more uses for skeuomorphism beyond green felt in an iOS app, and to write off the approach entirely is foolish. Through good user research there maybe value to be found in it to ensure we match mental models. Just remember to constantly evaluate your use of skeuomorphism to ensure its relevancy.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>