The “S” Word

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.

frame 1

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.

frame 21

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.

frame 3

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.

frame 4

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.