UX

The “S” Word

By Paz 13 February 2012

Skeuomorphism has become a contentious UX topic in the past year. The first iPhone surprised and amazed designers with its intricately crafted UI but the introduction of a virtual bookshelf with iBooks and realistic Address Books and Calendars appearing in the latest versions of Apple’s operating systems have made many designers grow tired—and in some cases vocally upset—of realistic metaphors on digital devices.

For those unfamiliar with the term, a skeuomorph retains design cues that were necessary in the original for aesthetic reasons in the new. Although the term has become popular in describing the hamfisted use of ornamental textures—particularly Corinthian leather, dark linen and brushed metal—skeuomorphism isn’t unique to digital interfaces. The cork pattern on a cigarette filter is a skeuomorph since cigarette filters are no longer made of cork. Decorative window shutters are skeuomorphs when they don’t actually shut. The copper coating on a penny is a skeuomorph since the coins are actually made of steel.

Examples of real world skeuomorphs including the printed cork of a cigarette filter and copper coating of penny

Skeuomorphism is not restricted to what we can see. Aural skeuomorphs include the shutter release sound in a digital compact camera or the fake relay clicking of the turn indicator in your car.

Skeuomorphic user interfaces have been accused of being ugly, alienating users with metaphors they’re not familiar with, hindering usability, or even stifling innovation or breaking the future. While some of these points are certainly hyperbolic, others are valid in view of usability.

The skeuomorphic bookshelf in iBooks

If done well, skeuomorphism can improve usability of a user interface by leveraging a familiar mental model. Realistic metaphors can help users who are already familiar with an existing system to adopt a new platform. Josh Clark points out that familiarity and intimacy invite touch, and texture and physicality give clues as to how an interface works. However, realism also creates expectations. Breaking the illusion is fatal for usability and is one of the main pitfalls of skeuomorphic design. Apple’s iOS5 Calendar and iBooks apps are good examples. The page metaphor in both these apps help the user to navigate but not to orientate. The stack of pages on the right does not give an indication of how far the reader is into the book or directory. This representation of paper fails to deliver the haptic expectations of the physical counterpart. Perhaps this prototype by KAIST Institute of Information Technology Convergence comes closer to the navigation paradigm of physical books but the illusion will perhaps never be perfect as long as we’re manipulating pictures under glass.

Skeuomorphic metaphors facilitate storytelling. Real world metaphors don’t only hint at how to use an interface but also what its intended use is. The nature of the address book on the iPad is instantly clear, even if you have never before owned an address book wrapped in crocodile skin.

Contrast Apple’s use of textures in its address book to Microsoft’s Metro design paradigm. Metro is a set of design principles developed by Microsoft for their Windows Phone 7 user interface. Not unlike the Modernist movement in the 1920s and 1930s, Metro aims to strip out the purely decorative and nostalgic and focus on the content. With a bare minimum of chrome, Metro is decidedly against skeuomorphic UI design.

Comparison of Apple's skeuomorphic Notes app to a Notes app following Microsoft’s Metro UI paradigm

An issue with such a modernist approach makes it difficult to distinguish between the function of different applications. Metro’s solution to communicating the function of a Notes app is not making it look like a real world notebook, but by displaying “Notes” in large letters over the top. While the use of textures and realistic details often offers (or attempts to offer) delight, warmth and familiarity, modernist approaches to design—like Metro—risk feeling cold and impersonal. Public transport signage, which was an inspiration for Metro, doesn’t have much scope for emotion. It is designed to be functional and communicate as effectively as possible, however the amount of time we spend with our mobiles warrants a more emotive connection.

Consider Apple’s Find My Friends app which has been mocked for its over-the-top use of ornamental textures. The stitched leather textures create an emotional accessibility that the purely functional and content-focused design of Google Latitude, despite having the same functionality, never seemed to achieve. This is not strictly skeuomorphic, it’s simply a way to give data a container. Similar to the leather trim dashboard of a sports car, it is a veneer for the purpose of offering delight. It’s trying to tell a story just like the fake window shutters, the cork cigarette filters and the copper plating on your steel pennies.

The Corinthian leather trim in Find My Friends serves a similar purpose to the leather trim in a Ferrari 612 (Photo credits: Apple & Ferrari)

While the heavy use of real world metaphors in digital user interfaces can quickly end up looking tacky and out of place—and even become detrimental to usability—skeuomorphism is not always the devil its made out to be. If executed well, subtle use of skeuomorphic design cues can provide a tangible wrapper for content and create emotional resonance, particularly as users become increasingly unaware of the device itself.

Above all, skeumorphism is dressing. Riccardo Mori put it aptly when he said skeuomorphism is a problem of the designer, not the user. With this in mind, any design, skeumorphic or otherwise is worth very little if it isn’t built on a foundation of solid interaction design.

Papercuts: Lessons Learned from a Foray in Digital Publishing We’re all going on a summer Proliday™

9 Comments

  • jayaseelanm

    this website looks good

    2012-03-05 10:35:00
  • A.

    @twitter-27607791:disqus I'm guessing Metro-style solid black background will feel like glass ;)

    2012-02-20 14:45:00
  • eugeniu clim

    I have one question for "texturephobs". It's only a matter of time when the technology will let us simulate different surfaces on a "flat glass". And then leather texture will feel like leather, carbon like carbon etc. What will a Metro-style solid black background feel like? 

    2012-02-20 13:13:00
  • Paz

    You're right, Jon. Often applying skeuomorphs and visual tactility, just like any other decoration, results in kitsch. Kitsch in itself, however, is not a usability problem per se. It only becomes a problem for the user if it distracts visually or poor interaction design is applied. For instance if the UI replicates the physical constraints of the referenced object unnecessarily or if it hints at interactivity that the UI doesn't deliver (like the code dial or the coffee cup in your example). It's not impossible to use decorative elements that have no actual function though. Point and click adventure games made an art of showing intricate details to aid storytelling without offering opportunities for actual interaction. There's nothing inherently wrong with the leather texture in Find My Friends other than that it may not exactly match the personal taste of a subset of users.

    2012-02-20 12:27:00
  • paz | ustwo

    You're right, Jon. Often applying skeuomorphs and visual tactility, just like any other decoration, results in kitsch. Kitsch in itself, however, is not a usability problem per se. It only becomes a problem for the user if it distracts visually or poor interaction design is applied. For instance if the UI replicates the physical constraints of the referenced object unnecessarily or if it hints at interactivity that the UI doesn't deliver (like the code dial or the coffee cup in your example). It's not impossible to use decorative elements that have no actual function though. Point and click adventure games made an art of showing intricate details to aid storytelling without offering opportunities for actual interaction. There's nothing inherently wrong with the leather texture in Find My Friends other than that it may not exactly match the personal taste of a subset of users.

    2012-02-20 12:07:03
  • Jon Gold

    Personally I loved the skeuomorphs you employed in PingIt - nice work team :) http://cl.ly/EF1m Wait no, you didn't. Of course metaphors afford familiarity, but these are awful. Visually, they're kitsch. Critiqued solely in terms of their interaction design, they're not used well.

    2012-02-19 12:50:00
  • Silje Gabrielsen

    Nice post! I enjoyed the challenge of ripping a iPhone version of an app apart, to put it back together in a Windows app. I like the sliding of the Panorama with out getting lost. And the wonderful change of using a phone stripped down to what feels like a nice wireframe. But as you say, it still feels a bit cold and impersonal. And after a 2 months fascination I'm back on the iPhone. 

    2012-02-15 08:32:00
  • Murat Mutlu

    Finally a balanced post with great examples. Totally agree with the final paragraph - it's a designer problem.  A few people in the design community is acting as if users are going around saying 'This leather is a farce!'. The reality is that they're the only ones that really care. I designed my first Windows Phone app a couple of weeks and from a designers point of view it was incredibly boring to do. Felt as if I could have done the whole thing in Excel.

    2012-02-14 21:51:00
  • Inge Kuijper

    Great article! Liking that eBook prototype, copying from the real world and / or nature can definitely be useful if applied the right way.

    2012-02-14 13:45:00

Leave a comment

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