Metaphors in Designing UIs
Using Metaphors to enhance User Experience & design is to provides the user with instant knowledge of how to interact with the user interface.
Stepping into the digital realm of designing apps i.e web, iOS, Android, for starters, one must not remain oblivious about the use of metaphors. You must be wondering, “Aren’t metaphors a fancy way to grease the artistry wheels of writers and poets?” Well, allow us to enlighten your thoughts.
As Aristotle explicitly states, “Metaphor is the naming of something related to something else,” the word is derived from the Greek μεταφορά (metaphor), meaning ‘to transfer’ or ‘to declare.’
A metaphor’s chore is straightforward. Apps have a tendency to present users with new and uncanny ideas, tools and methods to do things. Draping the app in a warm, intimate metaphor will relieve the burdens of comprehension. For that very reason, Apple’s design guidelines foster metaphor usage under its wing, “When virtual objects and actions in an app are metaphors for familiar experiences — whether these experiences are rooted in the real world or the digital world — users quickly grasp how to use the app.”
Ergo, metaphors act as a lucid translation in order to enhance User Experience & Design by untangling the complications which may otherwise be associated with the user interface.
Metaphors vs. Skeuomorphism
Let us firstly steer clear from the fog. No doubt, skeuomorphism may touch upon the surface of metaphors in a literal way; the two are nevertheless poles apart as metaphors are phrases applied to an object or action to which it is not literally applicable. Skeuomorphism supremacy reigned for a momentary period of time where the meticulously detailed designs attempted to copy its real-life counterparts. In the words of Clive Williams, they are “bits of design that are based on old-fashioned, physical objects […] hobbling innovation by lashing designers to metaphors of the past” in ‘Retro Design is Crippling Innovation.’
User Interface Design and Metaphor User interface visualizations on the other hand, are a set of actions and procedures that use specific knowledge that users already have from other domains. The purpose of the interface metaphor is to provide the user with instant knowledge or information on how to interact with the user interface. In design, metaphors are considered as heuristics that help to maintain design ideas and deal with poorly defined design problems. Metaphorical reasoning is a repetitive process through which designers gradually increase their knowledge of the design situation.
From our day-to-day lives in road signs and application icons to the business domain in interface widgets and browser navigation, metaphors can be found anywhere and everywhere.
How can metaphors improve overall User Experience and design?
Metaphors are factors that can enhance the user experience. Physically, there are umpteen ways to decipher the world around us. The five senses mightily aid in accumulating knowledge and analyzing the surroundings to make judgments. When switching to online, the Web constrains such flexibility.
“The way we think, what we experience, and what we do every day is very much a matter of metaphor.” — Lakoff and Johnson
As a designer, we must present information carefully to ensure that our customers think, feel, and do the right thing as intended. Metaphors are a great way to help your customers understand abstract content, interact, evoke emotions, attract attention, and evoke action.
Since our conceptual system mainly comprises metaphors which means they are anything but trivial in matters of understanding the world, let us plunge into the depths of how metaphors help in adding user experience to your website.
1. Establishes abstract concepts in concrete terms
Metaphors are a great tool to help your customers understand abstract or unknown content. The information can be easily understood by linking the abstract information to the concrete concept. Let’s start with the most basic and common use of metaphors on the web and app.
Symbols: The small icons help users quickly grasp the concept. Symbols usually represent what we know from the physical world and we 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, the use of the light bulb symbol to indicate the word “innovation”, the wrench symbol to make the product useful (utility). And the paintbrush symbol indicates the word “beauty”.
Another instance may be the alienation of many users towards the “Error 404” and a simple error 404 page can tremble their wits. So, rather than presenting them with a full-fledged explanation of the unavailability of the requested page, the user is welcomed with a humorous image of a running ninja who stole the page being requested. Metaphors can, therefore, also be used to illustrate a process.
2. Make contact
We like to figure things out. When we cannot recognize anything, our brain tries to understand what it sees. (Hence the Gestalt principles can be applied to our design work.
In the article, Brains Agree: The Case for Website Usability Guidelines, Todd Florence explains that we use templates to find out what to expect. Identifying mental patterns helps us to accept and understand the unknown.
The user interface of paper, a drawing app for the iPad, makes use of a sketchbook metaphor to create familiarity. You can draw sketches of your choice on paper with great ease, switch between myriad pens and colors, turn the pages and vaunt your art on social media as well. By implementing known features as a digital tool, interactions can be learned quite naturally.
3. Evoke emotions
You can use metaphors to evoke emotions. Emotions not only attract people to your design but also make it more effective, enjoyable, and memorable. As mentioned earlier, symbols help us to understand abstract concepts.
4. 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 usually used to draw attention to a website or specific aspects of a webpage. Just as we recognize familiar faces in a large group of strangers, the things we recognize attract our attention.
For example, we associate name tags with social gatherings such as events and conferences, and workshops. A nametag means that you are a registered member, a paying participant, or a person who does not have a nametag you are entitled to. So to make the plain web form more attractive the name tag metaphor is used.
5. Lead users to action
Another very good 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 compelling design for its navigation menu as users are allowed to brew their own content by adding different proportions of content categories.
Conclusion
Metaphors can thereby, be a potent tool to develop and polish user experience. They can:
- Explain abstract or complex concepts
- Create a sense of introduction
- Stimulate emotions
- Draw attention to your site or parts of it
- Motivate consumers to take action
Metaphors hold the power to unweave the threads of complexity which is why you must wisely put them to use and certify that they work properly before applying them to your design. This 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 events by forming associations with familiar objects and concepts.
