Using Metaphors in Web and Mobile Design

Screen Shot 2012-10-02 at 12.17.36 PM

Metaphors have been used in Web User Interface designs from the earliest stages of the web. As technology evolved into the mobile and tablet arena with smaller screen sizes, using metaphors has become even more useful and at the same time more sophisticated.

Meaning of metaphor:

First lets find out what is the meaning of metaphor:

met·a·phor (m t -fôr , -f r) n. 1.

A figure of speech in which a word or phrase that ordinarily designates one thing is used to designate another, thus making an implicit comparison, as in “a sea of troubles” or “All the world’s a stage”(Shakespeare).

2. One thing conceived as representing another; a symbol: “Hollywood has always been an irresistible, prefabricated metaphor for the crass, the materialistic, the shallow, and the craven” (Neal Gabler).

One of the main reasons of using metaphors is to save “time ” in browsing the web and mobile.

As Krug says in his book “Don’t Make me Think” 2006 “We don’t read text, we scan it”

Using metaphors helps us scan the web faster and more efficiently.

Two ways of using metaphors:

1-    Symbolic & Iconic : Designer mimics real life objects, with similar shapes and functions to real life.

For example: Buttons in navigation were the first metaphors utilized in early web design. The form, shape, and function of a button is the same as it is in real life. You push it, and it does something.

The only state that is not in real life is the “Hover” state. This stage informs users about ” this is a button and you can press it” . It is an informational stage for virtual platform.

Look at the apple system preferences icons: everything is pretty much very close to their real version.

Metaphore in UI and UX design

 

For example “Mouse”, “Keyboard” , and “Print and scan” are  comparable  with real ones.

In mobile apps some functions like sliding a button or having an off /on handle are similar the real life.

By having the identical shape and function web/mobile designer doesn’t need to explain about  the function and how to use it. Make the function more universal and based on common sense rather “how to” manuals.

 

metaphore in web and mobile design   Source: http://www.thefreedictionary.com/metaphor

 

2- Complex metaphor, nonrealistic:

“An interesting semiotic process occurs when two or more signs are perceived simultaneously and are in conflict with one another.” Source: http://www.rdillman.com/HFCL/TUTOR/Semiotics/sem4.html

For example if you say “I am so excited that I can fly,” and you simultaneously see a picture of a woman flying in the sky; even though in reality this wouldn’t be possible, you still accept it.

In the complex use of metaphors there are actions, ideas, places and items that logically can not be combined or used together.

Storytelling, poems and fantasy have been using this aspect of metaphors for a long time.

Now let’s see how metaphors are being introduced and perfected in web and mobile design. We believe  ”Visual Storytelling in mobile and web” is an important factor that designers and developers need to know.

Why?

Because:

1-     Users’ attention spans keep getting shorter.

2-     This provides a better connection with users.

Why is this approach compelling? Combining conflicting objects or subjects triggers people’s imaginations. Users tend to either finish or fantasize the rest of the story in their mind or follow what designer offers. In both cases the result will be staying longer on the site and paying more attention.

For example :

 

http://www.html5lab.pl/

metaphore in web and mobile design

Using PSD and HTML in a factory setting is not logical. However, using an image to convey turning a PSD file into HTML by using a machine makes sense.  Using this metaphor makes the concept easy to understand and fun to view.

Tearound mobile app :

The metaphor of creating a cup of (virtual) tea in a mobile app through shaking the phone, and the feeling of having your cup of tea ready at the end in the mobile app is a nice way of using metaphors.

 

Using metaphors in web and mobile

Metaphors and use of it web and mobile

Source: http://www.tearoundapp.com/#step2

 

Mascots as metaphors:

Using animals and giving them human personality has been used in storytelling and advertising forever. Now mobile and web designers understand how it can help these platforms too. See below:

 

using metaphors in web and mobile http://www.betyourfollowers.com/  

 

 

Using metaphors in web and mobile

 http://www.pixelthread.co.uk/  

 

 

  http://mailchimp.com/    

 

Using metaphor and mobile design

 

Splingo’s Language Universe is an app for speech therapy where the integration of mascot and metaphor is very clever and useful.

 

Conclusion:

Metaphors are not just for stories and poems. User interface design can reap the benefits of using them in web and mobile platforms to convey messages in a fresh and compelling way.

 

About the author:

Saya is a web and graphic designer, fine artist and a bit more. Follow her on Twitter / Facebook.

5 comments on “Using Metaphors in Web and Mobile Design

  1. Pingback: Using Metaphors in Web and Mobile Design

  2. Pingback: Using Metaphors in Web and Mobile Design | Design News

Leave a Reply

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

*

5 × = ten

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>