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).
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.
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.
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.
Join 22,000+ readers and get Baymard’s research articles by RSS feed or
Topics include user experience, web design, and e-commerce
Articles are always delivered ad-free and in their full length
1-click unsubscribe at any time
© 2021 Baymard Institute US: +1 (415) 315-9567 EU: +45 3696 9567 firstname.lastname@example.org