Illustration by Curt Rice

Making up metaphors

How metaphors can make or break your designs

John Saito
9 min readOct 31, 2017

--

If you’ve ever taken a writing class, you’ve probably played around with metaphors. A metaphor is when you talk about one thing in terms of another:

  • Time is money
  • Consumed by love
  • The sweet smell of success

A lot of people think of metaphors as a fancy writing tactic—a way to spice things up or sound more poetic.

Well, knock that idea out of your head, because metaphors aren’t just for poets. Metaphors are for everyone. They’re baked into our language, and we can’t communicate without them.

In the design world, we depend on metaphors all the time. From the icons we use, to the terms we choose, metaphors show up everywhere in design.

That ⚙️ icon that shows up in a lot of apps? That’s a metaphor for settings. “Add to cart”? That’s a metaphor for an order.

The difference between an intuitive design and a confusing one often comes down to whether you’re using the right metaphors. Let’s dig into this idea a bit more, so you can see how metaphors play a big part in the language of design.

Metaphors we live by

George Lakoff is an expert in metaphors and wrote several books on the topic. I was lucky enough to take one of his classes in college, and he opened my eyes to the fascinating life of metaphors.

In his book Metaphors We Live By, George Lakoff and co-author Mark Johnson show how everyday language is packed with metaphors. Whether we realize it or not, metaphors shape how we view and understand the world around us.

To see this in action, let’s take a closer look at one conceptual metaphor: Unknown is up. Known is down. In English, we have a bunch of phrases built on this idea.

If you take a second to think about it, these phrases aren’t really poetic. They’re used by everyday people in everyday chit-chat. They make sense to us because they’re based on the real world: Things in the air are more unpredictable than things on the ground.

Our language is full of metaphors like this. Did you notice how I slipped metaphors into every paragraph above? If not, it’s okay. Most people don’t think twice about metaphors because they’re so natural to us.

Metaphors we design with

When we talk or write, we often use metaphors without realizing it. The same is true when we design products.

For example, many of the icons we see everyday are metaphors:

  • Settings = ⚙️
  • Edit = ✏️
  • Attach = 📎
  • Delete = 🗑
  • Account = 👤
  • Notifications = 🔔
  • Search = 🔍
  • Comment = 💬
  • More = ⋯

These icons represent one thing in terms of another. When we click the ✏️ button to edit, we aren’t using an actual pencil. When we click the 🔍 button to search, there’s no magnifying glass involved.

But after seeing these icons over and over, we learned and memorized these metaphors. Now they’re part of our everyday vocabulary.

Even if these icons appear without labels, many of us can now figure out their metaphorical meaning—just based on the context.

Aren’t metaphors amazing?

Words of wonder

In product design, metaphors aren’t just used for icons. A lot of the words in a product are based on metaphors, too.

Remember when Medium switched to their new 👏 button? The thing I found most interesting about this change wasn’t the button. To me, the most interesting thing was the terminology.

When Medium rolled out this change, they had basically invented a new metaphor: A Medium article is a performance.

To support this idea, they introduced new terms throughout their product—terms like applause, claps, fans, and audience. These are things you’d say about a performance, but they’re using these words to talk about Medium articles.

Going forward, you can imagine Medium taking this metaphor even further. Someday, maybe we’ll see new features like spotlight, backstage, or encore showing up on the scene.

And that’s just scratching the surface. If you look closely enough, you’ll find metaphors being used in digital products all around you:

As the last two examples show, some concepts have multiple metaphors, and that’s common, too. After all, we have at least 99 metaphors for love.

Why metaphors matter

Metaphors affect how intuitive a design is. If a design is based on something real and relatable, it’s easier for people to figure it out. If a design is based on something too abstract, there’s a good chance it’ll leave people scratching their heads.

To illustrate this, let me tell you about this new baby monitor I got recently. It’s got some nice features, but the on/off switch drives me nuts.

Is this on or off?

On the left side, there’s a vertical line. On the right side, there’s a circle. Seems simple enough, right?

Well, it’s not. My wife and I can never tell if this thing is on or off because we don’t understand this metaphor.

What could these symbols mean? Is it a line and a circle? The numbers 1 and 0? The letters I and O? Or is it the body and head of a stick figure? 🤔

Well, it turns out the line means “on” and the circle means “off.” But we can’t get this straight because it isn’t based on a real-life metaphor.

Just for fun, I thought it might be interesting to explore other ideas for this design, like Sun is on, Current is on, or Minus is off.

Other ideas for on and off

Whatever you’re designing, framing it as a metaphor can help you explore new solutions. And if you can connect that concept with the real world, it makes it easier for people to “get it” from the get-go.

When metaphors get messy

Like a good pair of jeans, metaphors go well with a lot of things, but they aren’t appropriate for every situation.

Sometimes it’s better to avoid metaphors altogether. For example, on your phone’s home screen, you probably have a camera icon somewhere. When you tap it, your camera opens. No surprise there.

Now imagine replacing that camera icon with a metaphor, like an eye—because cameras help us view the world.

A literal icon vs. a metaphorical icon

As you can probably guess, using a metaphor here would be a bad idea. No need to use a metaphorical icon when a literal one will do.

In general, metaphors are great if they actually help people understand a concept. But when metaphors get too abstract, they can muddy the waters and make things confusing.

Loaded metaphors

One of the hardest things to do as a writer is to name things. Headlines, headings, buttons, babies, you name it.

Every now and then, I have to name a button that leads to multiple actions. For example, maybe it’s a button that opens a menu with five different actions in it. That’s what I call a “loaded metaphor,” because whatever word I come up with has to carry a lot of meaning.

Below is an example of a loaded visual metaphor in iOS. See that “up” icon in the left screenshot? Tapping it opens the modal on the right.

The “up” icon carries a ton of meaning here. After you tap the icon, you can share something via AirDrop, add it to Favorites, save it to iBooks, copy it, or even open it in your News app.

So what do you call that icon? Share? Add? Save? Copy? Open? That one icon carries so much meaning that it’s tough to name it.

Loaded metaphors often make things hard to understand because they tend to be really abstract.

If you find yourself using a loaded metaphor, it might mean you’re packing too much meaning into one concept. For a more intuitive experience, you might want to see if you can split things up or group things in a different way.

Mastering the metaphor

By now, hopefully you see the huge role metaphors play in the world of design. With the help of metaphors, you can communicate almost any concept by connecting it back to something in the real world.

If you’re a designer, illustrator, or writer, sometimes it’s tough to come up with the right metaphor though—especially if it’s a complicated concept. The good news is that there are a lot of tools out there to help you brainstorm metaphors.

Here are a few brainstorming tools that I think are pretty nifty:

1. Noun Project (thenounproject.com)

The Noun Project is a giant database of icons for just about anything. Type in a word, like start, and then browse icons related to that concept (start is a home, start is a launchpad, and so on). It’s a goldmine for inspiration, whether you’re a designer, illustrator, or writer.

2. Google Images (images.google.com)

If the Noun Project is coming up empty, try searching Google Images. The results can be noisy, but you can strike gold sometimes. Search for creativity, and you’ll dig up interesting metaphors like creativity is color, creativity is a lightbulb, and creativity is art.

3. Thesaurus.com (thesaurus.com)

Meg Robichaud is one of the incredible illustrators at Shopify. In one of Meg’s stories, she explains how a thesaurus is one of the most frequently used tools for an illustrator. Why? Because it helps you see things through different angles. Search for improve, and you’ll find ideas like raise, polish, and make strides—all very different metaphors.

4. Idiom dictionary (idioms.thefreedictionary.com)

An idiom dictionary is a copywriter’s secret weapon. It’s not a silver bullet for everything, but it’s great when you’re hunting for clever or creative metaphors. Many idioms are based on the physical world, so idioms can be especially helpful when you want to draw a mental picture for people.

5. Wordnik (wordnik.com)

Wordnik is the world’s largest online English dictionary. One of the coolest things about Wordnik is their “Relate” section. In addition to synonyms, it also gives you words found in a similar context and other related words. The results might seem random at times, but Wordnik can be a lifesaver when you need a lot of ideas quickly.

Metaphors make sense

Metaphors give meaning to the world around us. They help us make sense of even the most complex ideas.

Our world can get pretty kooky at times, but thankfully, metaphors give us a way to talk about it.

Metaphors can turn the internet into a cloud, love into a battlefield, and time into money. Aren’t metaphors magical?

And since we all use metaphors on a regular basis, then I guess you could say we’re all magicians ✨ 🎩✨

Metaphorically speaking, of course.

Thanks for reading my ramblings and an extra huge thanks to Curt Rice for the opening illustration. You can see more of Curt’s magic at dribbble.com/curt_rice.

Hungry for more metaphors? Here’s some food for thought:

--

--