For those who haven’t given metaphors a second thought since graduation, in the simplest terms a metaphor is a figure of speech in which a word or phrase is used to describe or in place of something else. It’s using a thing as a symbol or representation of something else; for example, describing a beautiful woman as a rose or a pleasant spring day. Metaphors are all around us, and most of us use them in some way or another every day, usually without realizing them.
In fact, one place where pretty much everyone encounters metaphors is on their mobile device. No, we aren’t talking about your obnoxious cousin who tries to turn every Facebook post into a work of literature. Metaphors are actually very common in app design; in fact, they are arguably one of the foundations of great app design.
Metaphors in ApplicationsTake a quick glance at your phone’s home screen, and the apps that you have installed. See how is each app represented? If you have an iPhone, you have certain pre-installed apps: A camera, represented by an image of a camera, the weather represented by a sun and cloud drawing, iBooks represented by an open book. Even your non-Apple apps are represented with icons: Twitter uses the bird image, Amazon uses a shopping cart, Instagram a stylized version of a camera. Each of these representations is a metaphor: An image or symbol that represents the primary purpose of the app.
The concept of metaphors in app design isn’t limited to just the home screen, though. As you navigate throughout your favorite apps, notice how designers incorporate metaphors throughout to help guide you. For example, the use of a house icon to indicate home is a common metaphor in design.
HOW CAN WE HELP YOU DESIGN A GREAT APP?
LEARN MORE ABOUT OUR DESIGN SERVICES HERE.
These elements aren’t included simply to be cute or to save space. They actually serve a vital design purpose, as outlined by Apple’s iOS human interface guidelines: “People learn more quickly when an app’s virtual objects and actions are metaphors for familiar experiences — whether rooted in the real or digital world.” The guidelines go on to say that metaphors work because they encourage users to interact with the screen, while mimicking the experiences you have elsewhere.
Metaphors are effective at driving interaction and creating a great user experience in several different ways.
Metaphors make the complex understandable. What happens when a user clicks on something and it doesn’t work right? Do they receive an error message, like a 404 error? Does your average user know what a 404 error is? Probably not. Instead, using a metaphor can make the error a little more understandable. Disney does this on their website to great effect: instead of a 404, when a page doesn’t load or there is some other problem, users are given a message that the character Stitch “ate the page.” Clearly, that didn’t happen, but it’s more understandable than a complex technical explanation.
Metaphors draw attention. Metaphors can get users’ attention and help drive them to do certain things — or simply make the app more attractive.
Metaphors provide instruction. By turning concepts into metaphors that mimic everyday actions, users will intuitively know what to do in your app. Since making an app easy to use is a key aspect of user experience, metaphors can play a major role in that pursuit.
Metaphors trigger emotion, and response. For example, using a coffee cup to represent your contact us page, you are sending a message of approachability that is more likely to get your users to reach out.
Using Metaphors EffectivelyFor all of the benefits that metaphors can bring to the user experience of your app, they do rely on proper usage. One common problem is that designers may confuse metaphors with skeuomorphism, which is designing elements to look exactly like their real-world counterparts. This can have the effect of creating a design that is too complex or hard to use, and can come across as kitschy or unprofessional.
Ideally, metaphors should be subtle — think of Dropbox’s cardboard box icon, for instance, which expresses the idea of storing files — and provide enough context for users to know what a function does and how they can do it. Metaphors should also be clear; avoid using well-known icons for anything other than what users expect to avoid confusion.
Metaphors are a powerful tool for improving the user experience of your app, and for helping the app reach its goals. Use them well, and your former English teachers will be proud.