Designing With Metaphors & Skeuomorphs

Metaphors are often used in interface designs as a shortcut to tell a story, mimic something tangible and in general make otherwise puzzling digital products more relatable.

Digital metaphors date back to when Xerox PARC first invented the GUI (that Apple and then Microsoft subsequently commercialized). Here we got metaphors for “desktop”, “documents”, “trash bin” and “folders”, that all visually looked and conceptually functioned much like their real-world siblings. These concepts have since evolved beyond the simple visual metaphor to a point where the digital use often supersedes the original physical object.

In this article we’ll look into some of the benefits and pitfalls of designing with metaphors in digital products (be it a website or a piece of software).

Instant Recognition

The main benefit of using a metaphor for you digital product is that you can tap into the user’s conceptual understanding of the physical object. This familiarity results in less initial friction which is critical to the adoption of the product – especially for novice users. In some cases the perceived value of a digital product can also increase with the use of a metaphor, simply because the digital product itself seems more tangible.

A metaphor so commonly used that we hardly recognize it anymore is the e-book. Here the file (e.g. a PDF file) is split into multiple pages although technically there’s no reason to do so. It could just have been one long file without any “page breaks” (e.g. an HTML document).

But the e-book is a strong metaphor that help carry over the conceptual connotations and attributes of a physical book: it has a front cover, is divided into chapters, includes valuable content, time and effort has been put into making it, it costs money when on a store shelf, provides value to the reader, etc. If you were to deliver the exact same content in “one long file” and not as an e-book, you would have to do a whole lot of explaining to potential customers as to exactly what “product” they would get.

Skeuomorphs and the Pitfalls of Metaphors

Skeuomorph: a derivative object that retains design cues to a structure that was necessary in the original object. For digital skeuomorphs this often boils down to a visual replication of the original physical object.

There are many well-written articles arguing the pitfalls of digital skeuomorphs, so I won’t do another one here but instead recap the main points:

• The visual replication of the physical object “promises” the user certain features and possibilities. E.g. how do I tear out a page from my digital notepad? When the capabilities between the physical object and the visually similar digital counterpart begin to diverge the user is likely to be mislead by the interface as the metaphor falls apart.
• Skeuomorphs can limit the design by taking up screen real estate and adding clutter to the overall UI design – moving attention away from the very purpose of using the product. Aaron Weyenberg points to the iPad Newsrack app, showing how 73% of the app’s screen real estate is devoted to the visual metaphor and only 23% to useful content.
• Skeuomorphs can also be so restrictive to the design that you (accidentally) end up with other usability problems. Take the dial for the alarm clock in iOS. Here a 1,67% input error margin can result in a 98,33% output error if the minute dial is scrolled one field too far and ends up at 59 instead of 00, causing the alarm to be set at 10.59 instead of 10.00 (or vice versa).

A Balancing Act

Designing with metaphors in practice is – like most things in design – a balancing act:

On one hand you have a powerful way to tap into existing conceptual understandings and expectations by applying a metaphor to your digital product, lowering the barrier to entry by adding instant recognition.

On the other hand the metaphor can put severe constraints on your UI design and may even break user expectations if there’s a mismatch between the capabilities of the digital product and the mimicked physical object.

As a general guideline only the overall conceptual understanding and semantics of the metaphor should be carried over to the digital product along with a few basic visual clues.

An example of such a balancing act is seen at Bagcheck, a webservice for sharing a list of your favorite items. The metaphor of conceptually showcasing the items you have in your “bag” makes it very easy to understand the site’s purpose and what you are supposed to do there. From a pure technical point of view, it’s “just” a user generated list of links, descriptions and images, but the metaphor infuse these elements with a new meaning.

However, Bagcheck never take the metaphor too far – the interface is not a bag that you have to drag open with your mouse and pull out items one by one, or some other crazy skeuomorphic UI like that. The metaphor is used to set a context, to instantly convey the meaning of the site’s content and features, without ever being used visually (you’ll notice that there are no bags or backpacks to be found in their interface).

Metaphors can be a powerful shortcut when designing digital products but they require careful implementation. When used correctly, a metaphor adds familiarity and instant meaning to an otherwise abstract digital product. When taken too far and too literally, the metaphor (or skeuomorph) can end up misleading users and limit the design and features of your product.