Why Metaphors Matter for App Designers
How Designing with Metaphors will make your app more Functional, Intuitive and Distinctly Unique
If you design and build apps of any sort — web, iOS, Android, desktop — you need to start thinking consciously about the metaphors you use.
Metaphors? Aren’t those just a fun language technique for poets?
Absolutely not!
Metaphors define everything we think about in the world.
Especially the digital world.
For example:
You’re reading this on a page in an open window floating above a desktop.
But it’s not a real piece of paper, hung inside an open window, above a wooden desk in your office. We borrow these tangible concepts to make sense of an otherwise shapeless canvas of pixels.
Referencing familiar elements of the physical world helps us understand the function, purpose and spatial relationships of our digital tools.
What does this all have to do with app design though?
Apps almost always present users with new and unfamiliar ideas, new tools, new ways to do things. Wrapping your app in a familiar metaphor will ease that pain.
Which is why Apple’s design guidelines explicitly encourage metaphors:
For many of you, this is old news. Metaphors in user interface design are well established. Cards, feeds and files are staples of the practice.
But so often we never consciously think about the ones we use. Or push ourselves to find new and better ones. Our current metaphors are usually surface level and obvious. Few are deeply conceptual and creative.
Let’s be clear : Metaphors ≠ Skeuomorphism
Before you all lash me for suggesting we need tacky leather textures and fake stitching in apps to understand them… know that’s not what I’m talking about.
Skeuomorphism was a brief period of designing overly detailed UI elements that tried to make digital tools look exactly like their real-world counterparts.
Clive Williams accurately critiqued the style as “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
Yes, they used metaphors. But in a very literal and surface level way. One that was frankly a kitschy waste of precious screen space.
But let’s not throw the baby out with the bathwater.
There are plenty of subtle, tasteful ways to suggest metaphorical comparisons in your app without the heavy hand of 2009’s design sensibilities.
Thoughtful conceptual metaphors improve the usability of your app and distinguish it from the pack.
Let’s look at some examples of conceptual metaphors in apps that are subtle, seamlessly functional and effective.
- Hive (Nature/Animal Metaphor) — Your bitcoin wallet is a protected beehive. Bitcoins are valuable honey stored inside.
- Robinhood (Cultural Story/Myth Metaphor) — You trade on the stock market using the “steal from the rich, give to the poor” mentality of Robin Hood.
- Dropbox (Physical Object Metaphor) — You “drop” your digital belongings into a cardboard box for safekeeping.
- Instagram (Nostalgic Object Metaphor) — Your phone is a retro
camera complete with the imperfection of light leaks and faded colors. - Tweetbot (Future Object Metaphor) — Your Twitter feed is managed
by an intelligent robot with a loudspeaker.
These metaphorical concepts are critical to how these apps work.
These apps reflect our world back to us. Which is what makes them functional, memorable and distinctive.
An In-Depth look: UP Coffee by Jawbone
Jawbone’s UP Coffee caffeine tracker is an exceptional example of designing with metaphors — the app’s UI works on a number of conceptual levels.
- Body as Container Metaphor
Frames our body as a container that can be ‘empty’ or ‘full’ of caffeine. - Color Saturation as Strength Metaphor
We describe more saturated and darker colors as “stronger.” Dots with a deeper shade of brown appear as you log more coffee and tea, making the caffeine content in your body “stronger.” You also equate the brown colored dots with the brown of most caffeinated drinks. - App as Science Laboratory Metaphor
The whole design reads as a clean and clinical science or medical laboratory environment. We have icons of levers, clipboards and test tubes. The main container is a beaker. Plenty of graphs, charts, numbers and mechanical measurements track your progress over time. - Body as Science Experiment Metaphor
Since we’re in a laboratory, we need to be experimenting on something — ourselves. Specifically, our biological bodies and their reactions to caffeine. We all love the idea of quantified self-improvement. It appeals to our sense of understanding ourselves and being “in control” of our world using data. - Vertical Movement as Energy Metaphor
The very name “UP Coffee” relies on the spatial metaphor that upwards movement is a sign of being full of energy.
If a brand is already defined by a particular symbol or concept — dive into what metaphors it’s built upon and expand on them.
Next time you begin an app design, think through what high-level metaphors will help users intuitively understand what the app does.
Far too few apps take advantage of metaphors to explain themselves. Future app users and I would love to see designers explore them more.
References & Further Reading
- Solid & clear introduction to metaphor theory:
Sapir-Whorf, Lakoff, Metaphor and Thought by Venkat Rao - Slightly more dense:
The Contemporary Theory of Metaphor by George Lakoff - The classic text on metaphors:
Metaphors We Live By by Lakoff & Johnson
Maggie Appleton is a visual designer and illustrator at STRV, where she helps design branding and unique visual identities for apps and startup companies. You can check out her work and follow her on Twitter.
