turtle_rabbit Theory

How metaphors can improve your user experience

“The way we think, what we experience, and what we do every day is very much a matter of metaphor.”

In their frequently cited book Metaphors we live by, Lakoff and Johnson demonstrate the important role of metaphors in our language, and also in our every day life. They claim that our conceptual system is largely metaphorical, which means that we use metaphors to reason and understand the world.

Conceptual metaphors link a familiar concept with one that is unfamiliar. They help us better understand something that might otherwise be too complex or too abstract for our mind to grasp. Conceptual metaphors make abstract concepts more concrete and therefore bring them within our reach.

Metaphors consist of two parts: a vehicle and a tenor. The vehicle is a concept that we are familiar with. The tenor is the concept to which the metaphor is applied. Because of visual, functional, or structural similarities, we can transfer our knowledge about the vehicle to the tenor and consequently make sense of this unfamiliar concept.

Visual similarities indicate that both the familiar and the unfamiliar concept look alike and can be compared based on external features. Functional similarities are based on common functions or features, unrelated to their appearance. Last but not least, structural similarities are related organizational structures of both the familiar and unfamiliar concept. In any case, existing mental schemata can be applied in order to understand something unfamiliar.

Metaphors on the Web

On the Web, we can make use of metaphors in different ways. In general, conceptual metaphors are a great tool to increase the user experience of your website. However, beware to use metaphors with caution and not overload your page with them. Metaphors that are used consciously can help your users understand abstract content, create a sense of familiarity, trigger emotions, draw attention, or motivate action.

Metaphors on the Web can represent a whole website, or single elements on your site. They can be either interaction or content metaphors and they can be both visual and verbal.

Make the abstract concrete

As described above, conceptual metaphors help us to understand abstract concepts. We refer to familiar schemata in order to make sense of something unfamiliar. Here are several examples of how metaphors are used on the Web to help users make sense of things.

One popular metaphor on websites is tabbed browsing. Different web pages are structured in a way that reminds us of traditional register cards. For example CNN and The Times make use of this metaphor.

Tabbed Browsing on CNN.com

Tabbed Browsing on thetimes.co.uk

The file sharing tool dropbox makes use of a metaphor to help us understand their services. In their name and logo they simply refer to a dropbox, a box that you can drop things into.
Everyone is familiar with a cardboard box to store things. Dropbox has adapted this concept and transferred it to an online tool that stores documents.

Dropbox works with the metaphor of a cardboard box to store things in.

Icons are other frequently used examples of metaphors on the Web that help us understand unfamiliar concepts. There are icons for many things, like shopping baskets, home buttons, printers, and many more. For example amazon makes use of a shopping basket that even shows the number of collected items. The amazon wish list is also a metaphor, giving us an instant idea of what it is and what kind of features we can expect of it.

Metaphor of a shopping cart and a wish list on amazon.com

Make the unfamiliar familiar

Through metaphors you can awake a sense of familiarity within your users. Make sure you awake positive associations to increase your users’ willingness to get engaged. For example newspapers, like The Times make use of structural similarities people are used to from the paper version.

The Times refers to a classic newspaper look.

Another example for familiarity on the Web is the calculator of web2.0.calc. Not only do they offer a calculator with all common functions, they also make it look exactly like a hand calculator.

Online calculator that looks just like a hand calculator

Make the obvious emotional

With metaphors you can trigger emotions. Link your product with a familiar concept and transfer emotions that come with this concept to your product. For example, the car brand Jaguar places its product in a blurry savanna setting that naturally reminds us of the extremely fast panther, where the Jaguar originally got its name from.

Jaguar transfers emotions to their product.

Another example of a metaphor on the Web that makes use of emotions can be found on the homepage of Sparkbox. They use a humorous metaphor to appeal to people and sell their service: websites that adjust to variable screen sizes. They put mobile devices on a tandem to illustrate their mobile nature.

Sparkbox puts mobile devices on a tandem to illustrate their mobile nature

Make the boring salient

Use metaphors to draw people’s attention. Keep in mind that visitors are likely to leave your website as fast as they found it. To make sure they stay, you need to grab their attention. Metaphors are a nice and visual way to grab your visitors’ attention, even with content that is itself rather boring in nature.

For example, the website of the online retailer dripping in fat presents its organic t-shirts on hangers on a clothesline. With the courser, the visitor can pull the clothesline to both sides to see all products. This metaphor definitely grabs visitors’ attention and engages them with the products.

Dripping in fat uses a very visual metaphor to engage visitors.

Another, more subtle possibility to catch visitors’ attention can be found on the expedition and adventure page of Tanja and Denis Katzer. The big world image in the background already makes the visitor curious. The content area reminds us of an antique letter and promises exciting content.

A real exhibition experience on the Web as actionable metaphor.


      

Make the static actionable

You can use metaphors to engage your users in actions. For example, the gallery Michael Schultz offers an online exhibition experience. Visitors of the site can actually take a tour through the exhibition. This presentation of what we know from a real exhibition is very engaging and actionable.

A real exhibition experience on the Web as actionable metaphor.

In sum…

Metaphors can be used to increase your user experience in many ways. Use metaphors to explain complex or unfamiliar concepts, to trigger emotions, and engage your user in actions. Be careful to use metaphors wisely and make sure they work before implementing them in your design. Metaphors are not universal, but they are time and culture sensitive. Test your metaphors to make sure they work for and not against you.

2 comments

  1. Pingback: Reviews and News on Tech Products, Software and Downloads | PCWorld

  2. Pingback: Le metafore nel Gamification Design

Leave a Reply

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