How to learn UX copywriting? Understand iconography.

by Tobias van Schneider
Published Oct 1, 2020

This is an excerpt from our upcoming UX Writing book, exploring how we (as designers and copywriters) can write copy that helps people use and love our products. Sign up for book updates here.

Understanding where and when copy is necessary is just as important as knowing how to write it.

Sometimes, a message can be relayed through the design without content. Other times, a simple icon is more effective than a line of text. And in other cases, an icon should be used WITH copy to convey the message.

If you’re just now joining this series, this is as good a time as any to talk about cognitive load. Humans, like computers, only have a certain amount of processing power and memory in our brains. When we interact with a product, we are using those resources to make sense of the system. The less cognitive load (ie. mental effort) your product requires from the people using it, the better. The higher the cognitive load, the more work your user has to put in to complete a task.

The goal, obviously, is to make things as easy as possible for our user. That means helping them complete their task correctly, as quickly as possible, with as little strain on their brain as possible. Which leaves us with questions: What do people recognize and understand faster? Icons or copy? What if it’s both? What if it’s neither?

While much of it depends on the context – where a person currently is in your experience, what they already know, what they don’t know, what device they’re using and so forth – we can establish a few general rules around that help us know when to use what. Let’s start with icons.

When to use icons

An icon is most often used for repetitive actions: Visiting your profile, searching, favoriting an item. If we’re going to interact with a UI element within your product – for example, adjusting the volume – we’ll likely see an icon next to it that identifies the element.

Icons are meant to simplify a message or idea, making it easy to understand at a glance. They allow us to scan and intuitively navigate through a product through symbols we recognize. They save space for designers and copywriters, especially on mobile.

And, importantly, icons can transcend language. It’s one of the main reasons you’ll use one. While copy requires carefully choosing your verbiage and dealing with the complexities of multi-language support, an icon requires no translation.

But very few icons can achieve these goals on their own.

An icon should be understood without thinking. And we can’t assume people across cultures, languages, age and capabilities will understand the same symbols we do. If your icon makes them pause for even a couple seconds, it’s not doing its job.

As Nielsen Norman Group puts it, “Icons are, by definition, a visual representation of an object, action, or idea. If that object, action, or idea is not immediately clear to users, the icon is reduced to mere eye candy — confusing, frustrating, eye candy — and to visual noise that hinders people from completing a task.”

While we could get into UX design 101 here, we’re more focused on icons in relation to copy. So here’s an easy rule:

Use a label with your icons.

Perhaps a few exceptions exist, like a hamburger icon or a magnifying glass, but even these can be misconstrued depending on the context. A magnifying glass could mean “search” or “zoom.” A hamburger menu may be standard to you, but not necessarily to your grandmother. A clock, which seems like a pretty obvious symbol, could mean “current time” or “browsing history.”

More technical people than me would call icons paired with labels a “cognitive affordance.” The label helps us understand how the icon should be used.

All icons and no copy, and your product is as frightening to use as an Ikea manual. There are entire websites dedicated to translating Ikea manuals, which notoriously lack instructional copy and require you to decipher complicated visuals.

Pull a screen from any of your favorite apps and remove all the copy. You’ll likely be left with something akin to hieroglyphics, at best.

Take the Spotify app, for example. Here we’ve removed the labels they include with their icons in the dock.

Most of us understand the first two icons at a glance. The icon on the far right, however, is open to interpretation. We’d have to stop for a beat and think, or even click to confirm what it is: A Library icon. While this is the main “problem” icon, Spotify chooses to label all of them.

The other icons on this screen are intuitive because of the context. A play button is one of those few universal symbols that can afford to stand on its own, especially given the fact that this is a music app. Placed within a search bar and next to the help text that reads “Artists, songs, or podcasts,” we know the magnifying glass means “Search.” The microphone icon is debatable – Spotify assumes we understand voice functions based on our previous habits. Some of us may still need to click the icon to find out.

Labeling your icons also primes your user, teaching them the language of your product. If Spotify first introduces the Library icon with a label, they could potentially use that icon without a label later to save space – only because they taught us earlier what it means.

This goes both ways. If you’re using an icon with copy in one place, but we’re never going to see that icon again past this first screen, why use an icon with a label? Just use the copy on its own without the icon and save the space. Which brings us here:

When to use copy

Knowing when to use copy over icons depends on the context and the complexity of the message. If you’re struggling for even a few seconds about how to represent a concept, action or message with an icon, don’t use an icon. If you had to stretch to represent it visually, the chances are high we won’t understand your visual.

However, that doesn’t mean you need to write paragraphs of text. The more concise your UX copy, the better. Progressive disclosure makes that possible – tell us only what we need to know now, and explain the rest later when it becomes relevant. This is what allows us to intuitively use your product: progressive disclosure, priming and building on learned behaviors.

When words are paired with design, they almost achieve icon status. (Words are visual symbols just like icons, aren’t they? They’re just shaped differently.)

You won’t even read the “Next” button during an onboarding experience because it’s within a button, possibly even paired with an arrow icon, within the contained onboarding experience. Plus, you’ve clicked through these things hundreds of times. You’ve got the muscle memory.

If you’ve decided you want to purchase a dress online, you’re not reading the text that says “Add to bag.” Because of its placement below or next to the product image, along with the size and prominence of that text, you click the link without thinking.

When it comes to UX, copy is the silent hero. Yes, UX copy should still be creative. You should still take every opportunity to infuse your brand voice into your UX. If your UX copy makes people laugh, it can transform your entire product. But speaking strictly about the user experience: You know your copy is successful when we don’t think too much about it at all.

Deciding between icons and copy: A non-comprehensive checklist

Summing up what we’ve reviewed here, this checklist by no means covers all scenarios. But it may help as you form mental models around writing UX copy.