5 Reasons Why Metaphors Can Improve the User Experience

May 11 2012 by Sabina Idler | 18 Comments

5 Reasons Why Metaphors Can Improve the User Experience

There are many ways to experience the world around us. Especially offline, we can make use of our different senses to collect information, interpret our environment and make judgments.

On the Web, however, our senses are more limited. As designers, we need to present information carefully to make sure our users think, feel and do the right thing.

A great way to help your users understand abstract content, create a sense of familiarity, trigger emotions, draw attention and motivate action are metaphors.

"The way we think, what we experience, and what we do every day is very much a matter of metaphor."  
- Lakoff and Johnson

In their frequently cited book, Metaphors We Live By, Lakoff and Johnson demonstrate the important role of metaphors in our language and in our everyday lives. Our conceptual system is largely metaphorical, which means that we use metaphors to reason and understand the world.

Let’s look at how you can use metaphors to add to the user experience on your website. Below are five reasons why metaphors can improve the user experience.

1. Metaphors Can Put Abstract Concepts in Concrete Terms

Metaphors are a great tool to help your users understand abstract or unfamiliar content. By linking abstract information to a concrete concept, it becomes easier for people to understand the information.

Let’s start off with the most basic and common use of metaphors on the Web: Icons. These little symbols help users grasp a concept quickly. Icons usually refer to something that we know from the physical world and that we can somehow relate to an abstract concept on the Web.

For example, on the site Startups, This Is How Design Works, you can see how a light bulb icon is used to denote the word "innovation", a wrench icon to refer to making a product useful (utility), and a paintbrush icon to represent the word "aesthetic":

5 Reasons Why Metaphors Can Improve the User ExperienceSource

Metaphors can be used creatively to explain complex or uncommon concepts. For example, take a look at Huw Wilkins’s 404 error page on his blog:

Source

Many Web users don’t know what a 404 error is, and generic 404 error pages may be intimidating to them. Instead of giving a technical explanation of why the requested page is not available, the user gets a humorous image of a running ninja who stole the page being requested.

Metaphors can also be used to explain a process. Datashift shows an imaginary machine that turns different social media icons into statistics that can be displayed on your screen:

Source

Of course, the machine isn’t real and the process is way more abstract than what’s displayed in the image, but it becomes very clear what kind of service they offer.

2. Metaphors Create Familiarity

We love to recognize things. Whenever we can’t recognize something, our brain tries its best to make sense of whatever we’re looking at. (That’s why Gestalt principles can be applied to our design work.)

In his article Brains Agree: The Case for Website Usability Guidelines, Todd Follansbee explains that we use patterns to get an idea of what to expect. Recognizing mental patterns helps us to accept and understand the unfamiliar.

The user interface of Paper, a drawing app for the iPad, makes use of a sketchbook metaphor to create familiarity:

Source

The app is designed to look and work like a sketchbook. You can easily bring sketches onto paper, choose between different pens and colors, flip through the pages and show your creations to friends by sharing them on social media. By applying familiar features to a digital tool, interactions become very intuitive and easy to learn.

Everyone knows knock-knock jokes, right? The people from Knock Knock Factory use the positive associations linked to the words for the image of their company.

Source

Not only does the name promise us that they’re a down-to-earth company, it also sounds familiar. Even someone who has never heard of the agency before will most likely have some fun and positive memories that stem from the company’s name.

3. Metaphors Can Trigger Emotions

You can use metaphors to trigger emotions. Emotions not only make your design appealing to people, but also more effective, pleasurable and memorable.

As mentioned before, icons help us grasp abstract concepts. However, if exaggerated and designed with personality, like on the site of Eye Bridge, they can also trigger emotions:

Source

While we associate the abstract icon of a coffee cup with a certain meaning or function, a detailed picture makes us think of yummy, hot coffee at the same time.

The Roambi app works with a metaphor to trigger emotions as part of their marketing strategy:

Source

Of course, a business doesn’t have a pulse and taking a pulse into your hand is not physically possible either. However, the idea of doing so anyways is very attractive.

As a side note, great references for emotional design are Don Norman and Aarron Walter, who both focus on the additional value we can add to a website when we consider human emotions.

4. Metaphors Can Draw the Attention of Users

Numerous techniques can make certain elements of a web design more distinctive than others, and the use of metaphors is among them. Metaphors can be used to draw attention to a website in general or to very specific elements within a web page. Things we recognize draw our attention, just like when we recognize familiar faces in a big crowd of unfamiliar people.

For example, we associate nametags with events and social gatherings, such as conferences and workshops. A nametag means that you are a registered member, a paying attendee, or entitled to things people without a nametag are not entitled to. So a nametag metaphor was used in the following login web form concept by Meng To to make an otherwise plain web form more attractive:

Source

Flourish decided to use a tree illustration to explain what they do, along with the tagline "We plant Web sites that flourish in the harshest climates." They show a big flourishing tree in the middle of a desert to denote the power of their services. The illustration and metaphor is eye-catching and memorable.

Source

5. Metaphors Can Motivate Users into Action

Another interesting aspect of metaphors is that they can influence people’s actions. By translating interactions that we know from the real world to the Web, we can also transfer our knowledge to the screen. This way, metaphors can be very engaging and actionable because we intuitively know what to do.

The Cascade Brewery Co website offers a very engaging metaphor for their navigation menu:

Source

Users can brew their own content by adding different proportions of content categories. It is quite creative how this navigation menu grabs your attention and makes you check out the content just to see what happens if you change the brewing proportions.

Another great way to trigger users to register for beta access is this countdown clock on Minute Race:

There is no indication of what happens if the time has run out, but still, I felt a strong urge to register as quickly as possible. Also, making it sound like a competition adds to my motivation to register immediately.

Conclusion

Metaphors can be a powerful tool for improving the user experience. Metaphors can:

  • explain abstract or complex concepts
  • create a sense of familiarity
  • trigger emotions
  • draw attention to your site or certain components of it
  • motivate users to take action

How do you use metaphors in your designs? Have you seen other great examples of how metaphors are used on the Web?

Related Content

About the Author

Sabina Idler is community manager, information designer and writer on Usabilla. Her education focused on usability, her passion is the user experience and design is her key to both of them. Follow her on Twitter @sabinaidler and .

18 Comments

Jonas

May 11th, 2012

I think it is important to clarify in what degree metaphors helps. You use a metaphor to explain a (complex) system in a way people are familier with. But the metaphor can only explain some part of the system, or else it would not be a meaphor. I have done some studies where metaphors in a GUI was designed as a metaphor which was designed as very abstract towards the system (meaning very familiar for the users) and metaphors in a GUI(the same system) which were very litteral towards the system..it actually showed that when problems occur with a system, the metaphors which is more abstract to the system, would more often lead users to error, exactly because the rely on the metaphor.

So when designed a system bear in mind that people think in the way of the metaphor you design in the gui. Does it always makes sense to use a metaphor that is very known to poeple but very abstract reagarding the system. Think about the problems user may meet when using the system, can the metaphor help solveing that?

/engineer psychologist

Paul

May 11th, 2012

Actually, I think the cascade brewery interface to be really unintuitive and confusing. not a good example at all.
And lightbulb = innovation??
How about the save icon which is represented by a floppy disk? Who knows what a floppy disk is?
It’s really hard to pull off a good metaphor.

Offlajn

May 11th, 2012

Some of these design are smashing. I like the last two concepts.

Steve Bosworth

May 11th, 2012

Really enjoyed your article? Linking metaphors to the customer experience jumped out at me….kinda like a bird on a bug. Thanks

Larry Castle

May 11th, 2012

Excellent post! Thanks for the insights.

Robin

May 12th, 2012

Totally new to this term metaphor in website user experience. and thanks a lot for the write up. Cheers.

Robin.

Saya

May 12th, 2012

@jones, I agree.
It is really important to know the categories of your metaphors, such as abstract, icon,…and how it developed (from 2d to 3d). Off course what can be useful in one design and system can not be done or duplicated in another one. This is the problem you see all around the Web gui. Copying successful sites icons and metaphor without knowing why.

Dainis Graveris

May 12th, 2012

Glad to see article here after long time! Very interesting article and yes, it’s all about how we differentiate from others, and using metaphors is one of the ways we can do it. You could also mention having mascots :)

Adam Turner

May 12th, 2012

Great article! I’m definitely going to try and find ways to work more metaphors into my websites…

Lol, it one of those things when someone points it out to you, you feel stupid for not noticing it before.

Robin Jennings

May 12th, 2012

Standing out from the crowd is so important and using metaphors to do this can really work as discussed above.

The vast majority of my clients don’t know what a 404 error is so that’s an area that needs major improvement on almost all websites.

Anita

May 14th, 2012

Metaphors and mental models are great – but as earlier commenters have mentioned they have to fit to be effective.

The huwshimi 404 page is charming – but is it helpful?
Maybe the website’s visitors are all cool and hip enough to recognize the metaphor and the humour. But if they are not the page is just another internet weird thing. It doesn’t say what has happened and it doesn’t offer a solution (even going back to the home page.) It would be a litte more explicable if the huwshimi site had a Japanese them running through it, but it doesn’t asfaics.

Sabina

May 14th, 2012

Thanks everyone for sharing your thoughts on this!

I totally agree that ‘real world’ metaphors need to be used carefully and at times they might not be the best choice for your UI.

However sometimes they work just fine in order to explain something. For example the error 404 message doesn’t actually explain the problem, but still it offers a sufficient explanation of what happened to most people. At other times, they offer a great way to get to people emotionally.

Bottom line, I think metaphors work great to improve your user experience. They might not always be the best choice regarding the usability.

At times they might not be extremely helpful to explain how something works, but I do believe that they can improve the user experience.

John

May 14th, 2012

I agree that metaphors can improve the user experience but at the same time you have to be very creative and clever to find the best metaphors, otherwise they won’t do the trick!

Rachael

May 16th, 2012

There are some great examples here of metaphors used in web designs. I think its something you have to be careful with whilst its creative to use something else to express your company’s message/something that you want the user to do – I think it’s important that they are kept quite obvious, and not to use too many through the design.

To me the log in form and knock knock, they are both nice designs, but neither of these are really metaphors, if the comments you give for these designs are metaphors then most of the websites you see are a metaphor for one thing or another!

Danielle Chutinthranond

May 18th, 2012

Thanks for the cool links. I enjoyed looking at these websites.

I don’t agree that the Minute Race is an effective metaphor that creates a better user experience. UX to me is about empowering the user through clean and clear designs that ultimately have a calming effect. The timer seems like a gimmick and trick, something that’s better grouped with advertising and marketing. “Motivating” the user seems like a euphemism for bullying them into giving up their email addresses.

UX Designer/Dev

Dee

May 19th, 2012

User experience should be companies’ #1 priority. You shared some excellent examples of creativity. Some of them really help UX, some just trigger emotions.

Metaphors have to be used carefully – they should be both tightly connected with the theme of the website and be straightforward. No one really has the time to sit and consider what the webmaster wanted to ‘say’

Jonathan Horne

May 31st, 2012

Visual metaphors are also important for people who process information in different mediums. I for example am hopeless at reading text, however can interpret images and put the story together much quicker visually.

Good design should take into account different ways of processing information.

Maurice Kindermann

June 14th, 2013

Great article. You should download and try iOS7. It’s going to be interesting the cool new things people will start making with the crazy API changes. Most people don’t realise Apple have spent a tonne of time updating all their API’s, in fact all their new apps are built with the API’s us developers will be able to use.

Here’s a UX comparison between Android and iOS standard widgets, with links to the documentation on the relevant Apple / Android websites. It’s a nice way to get started learning all the technical terms. (ios6 / Android)

http://kintek.com.au/blog/portkit-ux-metaphor-equivalents-for-ios-6-and-android-4/

Leave a Comment

Subscribe to the comments on this article.