Skeuomorphism – a familiar touch or kitschy ornament?

It happens daily in front of our eyes, but few of use might have heard of “Skeuomorphism” so far. Originally referring to the marks left by tools on a product (such as brush traces on metal), it is also a technique in visual interface design. There, it means applying textures of physical objects to screen elements, sometimes also bringing entire metaphors from the physical to the digital world.

"corrugated" window resize handle in Mac OS 9

“corrugated” window resize handle in Mac OS 9 (source: guidebookgallery)

This has happened from the very beginnings of the interface but it popped up as a discussion at IxDS very recently. The latest Apple OS 10.7 Lion might have been the reason, or at least a prominent example and of course our design for the SiMKo security phone.

The OS X native Address Book and also the Calendar show very strong references to former filofax-style organizers – probably, I must add, since I have never used such organizers and few people around me have. Even less in the expensive leather bound examples that the Apple software now imitates. And with this description, I already mentioned two questionable properties of this interface style or technique: it refers to very old artefacts, that younger people might have little relation to; and it imitates material while it is obviously not there.

The iOS 5 Address Book on the iPad (source: rivacrmintegration)

Apple is known for appealing interfaces that are easy to use. In the highly dynamic field of mobile UI design, however, we also find completely opposing and aesthetically remarkable approaches in Micrsoft’s Metro style and Android Holo. The question – that I won’t be able to answer in this article: Is skeuomophism just a matter of style or does it really help people (i.e. a question of user experience)?

People Hub in Windows Phone 7 (source: wpcentral)

 

Let’s see what arguments we can bring to the debate. Good contributions to this debate come from Tobias Bjerrome Ahlin from Spotify and Thom Holwerda (both articles from 04/2012) and I added some considerations of my own and from office discussions.

Arguments on the pro side

  • Familiar: Skeuomorphic styles use visual elements that people know already to make them feel more at home. It lowers the entry barriers.
  • Easy to learn: Physical world references help users understand an application easier because they can reuse their knowledge.
  • Luxury: Textures from expensive materials make an application look more valuable or at least fit better into the portfolio of a particular target group
  • Hardware-Software-Consistency: Former Apple UIs were in line with the hardware around it and created “one piece” impression. Aluminium cases and brushed metail surfaces. Or colourful plastic enclosures and the Aqua interface. Not true for the latest UIs of Apple. (even from OS X 9 on)

    A bit of aluminium from the casing on the left and brushed metal UI elements (source: xverse10)

  • Playful: They are fun because skeuomorphic metaphors are still a bit surprising in digital interfaces, and they invite to touch and use an application. (from Ahlin)
  • Storytelling and “Framing”: Especially on personal devices such as phones and pads, users think less in tasks and more in leisure time categories. A visually rich interface tells them a story through the appearance not an info text and thus gets them in the right mood (or matches their mood) for this particular app. (from Ahlin)

Arguments on the con side

  • Disappointing: the textures are very obviously a simulation. What you feel is still the plastic of the touch screen, what you smell is still the electronic device, not the leather it displays. Even the reflections on the display tell you that. You feel fooled, at least unconsciously.
  • Outdated: I and even less the “digital natives” have ever used a physical address book or an expensive leather book as a calendar. Hence, the references used by Apple have no target to point to (the signs have no thing, no designata, as semioticians would put it)
  • Inconsistent: a lot of core interface elements don’t fit into a physical metaphor. No physical calendar has a dialog box with “OK” buttons. No book has scrollbars, you flip pages (some applications have both, nevertheless, point from Holwerda). This might also be called the “Microsoft Bob” argument.
    Apple Address Book uses the book metaphor heavily, it even as a page-flipping animation when you “add” a contact – but you can’t go from one contact to another by flipping pages.

    Old leather from the Calendar app frame meets glossy, virtual frame from the dialog box. (source: berlagelyceum)

  • Ego-Centric: textures, layout, behaviour is optimised for one app, to mimic it’s physical counterpart. In a different app, the same buttons might be in different places, the user has to learn each app UI anew. (see the layouts of Calendar and Address Book above) (from Holwerda)
  • Media Ignorant: the UIs are running as software; on devices that allow very very little physical experience. Designs that concentrate on this “bodyless” character make much more sense (to me) or are at least aesthetically far more interesting because they offer something “unseen”.
  • Clutter: skeuomorphic details take up screen space that might be used better for other purposes (including empty space). This is an efficiency argument and needs to be balanced with e.g. playfulness. But “could less be more?” is still a valid question.

Looking at these lists now, alternatives to skeuomorphism seem to be the better choice. However, a couple of arguments lack empirical validations and hinder clear decisions. We can get at least some of the validation from good user tests (e.g. for “Easy to Learn”) but user experience is more difficult to test unequivocally. This is something I’ll have an eye at.

The lists are a good ressource for pitfalls or important questions, however, that might help us defining a design strategy. When going for a very clean and digital interface, did we care enough about making it accessible, engaging and fun? And when we went for skeuomorphic designs: are our designs clear enough, do the metaphors still work well with the digital environment they are in, are we clear about the story to tell or is it just decoration?

For the question of the “better” approach, the debate is still on!

comment!
. .