Metaphor in UI design
How do metaphors enhance the overall user experience and design?
The word ‘metaphor’ is derived from the Greek μεταφορά (metaphor), meaning ‘to transfer’ or ‘to declare’. Aristotle’s definition of metaphor is still very relevant today. “Metaphor is the naming of something else,” he said.
User Interface Design and Metaphor User interface visualization is a set of actions and processes that utilize specific knowledge that users already have from other domains. The purpose of the interface metaphor is to provide a quick understanding of how the user interacts with the interface. In design, metaphors are considered approximations that help to perpetuate design ideas and to deal with poorly defined design problems. Metaphorical reasoning is a repetitive process through which designers gradually increase their knowledge of the design state.
Metaphors are everywhere. Sometimes we can no longer see them: the “product life cycle” is a great example. They are really helpful tools in daily life as well as in design and business. And let’s learn a little bit about metaphors in this process. Metaphors provide a great domain for creating interactive mobile interfaces and solving problems that users often encounter when using mobile applications.
How do metaphors enhance the overall user experience and design?
Metaphors are factors that can enhance the user experience
There are many ways to see the world around us. Especially offline, we can use our various senses to gather information, understand our environment and make decisions. However, our senses on the web are very limited.
As designers, we must carefully provide information so that our customers can see, feel and do the right thing. Metaphors are a great way to help your customers understand, introduce, evoke emotion, attract attention and drive invisible action.
“The way we think, what we experience and what we want to do every day is a matter of metaphor.” – Lockoff and Johnson
Our perceptual system is mostly metaphorical, which means we use metaphors to understand and comprehend the world. Let’s see how you can use metaphors to add user experience to your website. Below are the possible reasons why metaphors can enhance the user experience.
1. Metaphors can put abstract concepts in concrete terms
Metaphor is a great tool for helping your customers understand abstract or unknown content. Information can be easily understood by linking abstract information to concrete concepts. Let’s start with the most basic and common use of metaphors on the web and in apps.
Icons: Small icons help users to quickly understand the concept. Symbols usually refer to what we know from the physical world and may have something to do with the abstract concept on the web. For example, on a startup site, you can see how this design works, using the light bulb symbol to indicate the word “innovation” and the wrench mark to make the product useful (utility). And the paintbrush symbol represents the word “beauty”.
For example, see the 404 error page in Hugh Wilkins’ blog.
Most web users do not know what a 404 error is and simple 404 error pages can scare them. Instead of providing a technical explanation as to why the requested page is not available, the user will receive a humorous photo of the running ninja who stole the requested page. Metaphors are also used to describe a process.
2. Introduce metaphors
We like to understand things. When we do not recognize anything, our brain tries to understand what we see. (So Gestalt principles can be applied to our design work.
In the article, Brains agrees: For website usage guidelines, Todd Florence explains that we use templates to figure out what to expect. Identifying mental patterns helps us to accept and understand the unknown. The paper’s user interface, the drawing app for the iPad, uses the Sketchbook metaphor to create familiar ones.
You can easily draw sketches on paper, choose between different pens and colors, turn the pages and show your creations to friends by sharing them on social media. By applying the familiar features as a digital tool, the conversation can be learned very naturally and easily. Knock-knock jokes everyone knows, right?
People at Knock Knock Factory use positive attachments to words to describe their company.
3. Metaphors can arouse emotions
You can use metaphors to evoke emotions. Emotions not only attract people to your design but also make it more impressive, enjoyable, and memorable. As mentioned earlier, symbols help us to understand abstract concepts.
4. Metaphors can attract the attention of consumers
Many techniques can make some elements of web design more distinctive than others and the use of metaphors is one of them. Metaphors are commonly used to draw attention to specific aspects of a website or webpage. Just as we recognize the faces we know in a large group of strangers, the things we recognize attract our attention.
For example, we associate name tags with social functions such as events and conferences, and workshops. Nametag means that you are a registered member, a participant in the payment, or a person who does not have the nametag you are entitled to. Hence the name tag metaphor is used to make a plain web form more attractive.
5. Metaphors can lead users to action
Another very nice aspect of metaphors is that they can influence people’s actions. By translating the conversations we know on the web from the real world, we can also transfer our knowledge to the screen. In this way, metaphors are very attractive and functional because we naturally know what to do.
The Cascade Brewery Company website offers a very attractive design for its navigation menu.
Metaphors are a powerful tool to enhance the user experience.
The metaphor may be:
Explain abstract or complex concepts
Create a sense of introduction
Stir the feelings
Focus on your site or its components
Encourage customers to take action
In short, we can say that metaphors are used to enhance your customer experience in many ways. Use metaphors to describe complex or unfamiliar concepts, evoke emotions, and engage your client in actions. Be careful to use metaphors wisely and make sure they work before applying them to your design. It presents how mobile metaphors can be applied to facilitate human-computer interaction and improve interface design for mobile applications. Metaphors are not universal, but they are sensitive to time and culture. The use of metaphors in mobile devices allows potential users to understand perhaps unknown phenomena by forming associations with known objects and concepts.