Lead Photo: Ben Hersh; all other photos and screenshots, unless otherwise noted: also Ben Hersh
Lead Photo: Ben Hersh; all other photos and screenshots, unless otherwise noted: also Ben Hersh
The fortune cookie is no ordinary cookie. It eschews the gooey chunks, decorative frosting, and other cheap thrills typical of the confectionary genre. It carries a certain dignity and grace. A gentle arch and intimate fold tell you how to hold it and how to snap it in two. It has a story to tell. It would not be an exaggeration to call it a designed experience. In fact, fortune cookies were invented by a designer — Makoto Hagiwara, the landscape architect and patron behind San Francisco’s iconic Japanese Tea Garden.
Bland as the cookies may be, something special happens when you eat them among friends. You can’t help but share your fortunes. Just a few words are enough to transform the cookies into a shared experience, a ritual that gives closure to a communal meal and tells you something about yourself. Fortune cookies also have something to teach us about design: Words matter.
Words matter because words are how we think. Words are how we make sense of the world and relate to each other; they’re a uniquely useful design element. Believe it or not, writing itself was invented by designers.
Above, you can see a clay envelope used by our distant ancestors in the Middle East. It’s something like a piggy bank. It holds tokens, and you’d need to smash it open to see what’s inside. Once upon a time, someone put markings on the outside so you can know what’s in there without breaking it.
Six thousand years later, Google is the most popular website in the world. The results page is built on the same interaction pattern as the clay vessel. A piece of writing tells you what’s on the other side.
I’m a product designer at Medium, where I get to work with some of the best writers and editors in the business. These collaborations opened my eyes to something obvious I had somehow overlooked: Every product has a voice.
You may think this sounds like a metaphor, but it’s far from it. Apps and websites are littered with text, and when most of us read, we hear the words as if spoken. This voice exists in our minds, but it’s as real as our perception of colors or movement on a screen. It’s all an illusion, and it’s there for you to design.
Designers spend a lot of time working with words but often without the same conviction that we have for other elements of design. I think one reason for this is that when it comes to traditional product design, we have core values and the vocabulary to talk about them.
You’re probably familiar with Dieter Rams’ 10 principles of good design. So much of what we do boils down to personal taste and chasing trends that it’s important to feel connected to something more grounded and timeless. We get principles like “good design is honest,” and it reminds us to design with integrity. “Good design is innovative” gives us a license to try new things. These principles are powerful because we internalize them and let them guide what we do.
When it comes to writing, most of what you’ll find are style guides that tell you how to compose an error message or when to say “okay” instead of “got it.” We have plenty of rules and best practices, but I don’t think we have meaningful guiding principles.
At Medium I began to wonder… why not? I wanted to anchor my own functional writing to something deeper than personal taste. I went back to my roots and looked for inspiration in psychology and neuroscience, and — consider yourself warned — this is going to get nerdy.
I’ll share three guiding principles that I found helpful in my own work, and some of the inspiration behind them. First, be clear. Second, be a friend. And third, be expressive. You may find some of this obvious; sometimes obvious things have the most to teach us. There is always nuance, and it’s amazing how often we forget the simple things.
I found it helpful to visualize a hierarchy of needs. This helps us see how these ideas relate to one another. Each layer supports the one above it. A friendly conversation without clarity is confusing. And a strong personality without social grace is irritating. Each layer also amplifies the one below it. Striking the right tone makes a reader more receptive to your message. And if you do it with the right personality, they might remember it.
This is more complicated than it sounds.
Let’s play a game. I’ll share two quotes representing opposing political figures in a recent election. See if you can guess who won based only on the language they used:
A: I stand for a bold, progressive internationalism that stands in stark contrast to the too often belligerent and myopic unilateralism of the current administration.
B: Let’s go it alone.
These quotes are both “clear” but reflect two different aspects of clarity. First, there’s precision. Person A paints a vivid picture and elaborates on the details. Second, there’s ease. Person B distills the message into a few simple words. You don’t have to work very hard to grasp the general meaning.
Person A was John Kerry in 2004, and Person B was George Bush.
Bush also mastered the specific kind of clarity that matters most for design. He makes things easy for us; he knew that if we need to get a dictionary, realistically we won’t.
Here’s the core concept for functional clarity:Reading takes effort.
This is something we already know intuitively. You probably have Instagram on your phone. Have you ever read the terms of service? The answer is almost certainly “no.” It’s not because the terms aren’t important but because it takes 86 minutes to read them, not including trips to the dictionary.
That’s obviously an extreme case. Most apps don’t ask you to spend an hour and a half reading to get started. But sometimes, you do see things like this:
This app is trying to convey convenience, and that simple message is lost. They tell you how convenient it is right in the second paragraph, but it’s a lot of work to get there.
If you make your writing difficult to get through, there’s a good chance people will disengage and skip reading it completely.
Most UI design gets by with single words and short phrases, so you don’t need to worry too much about length. Your choice of words is what matters. Say this out loud, as quickly as you can: “I slit a sheet. A sheet I slit. And on that slitted sheet I sit.”
It’s a tongue twister. Each word is easy to say by itself, but when you put them together, it gets hard. You need to get your mouth into the right shape quickly, or you might end up saying “shit” by accident. You’d think that tongue twisters would be easy to read if you weren’t speaking out loud.
And yet, we still struggle. Human factors research shows that tongue twisters take longer to read silently than other complicated sentences. One study by researchers at the University of Illinois and the University of California San Diego found that when we read tongue twisters silently, we still make some of the same mistakes as when we speak out loud. We still make lexical errors, like accidentally saying “shit” instead of “sit.” This is because silent reading is rooted in speech. When we read or even think, we often speak to ourselves under our breath. This is called subvocalization.
At the University of California San Francisco, one neuroscience lab put electrodes on people’s brains and had them read silently. They found that even silent reading involves a lot of action in your sensory-motor regions. Your brain is still thinking about how the muscles in your mouth need to move; you’re basically speaking but keeping it to yourself. Tongue twisters are hard because the instructions for how to move your tongue get mixed up, even if you’re not moving it.
The lesson here is that reading isn’t passive. The brain is at work in ways we don’t usually notice. We can use this knowledge to design better: Make your writing easy to read by making it easy to say.
For one thing, it’s good to use common words that your audience is familiar with. You can also look for words with a distinctive shape. In the right context, “print” and “cancel” are easy to recognize from their shape alone.
On the other hand, avoid words that are hard to say. What’s hard to say is hard to read. Say these words out loud: “Anemone.” That is no good. “Deteriorate.” Awful. “Cryptocurrency.” What a tragedy. It’s not just two-dollar words; even some common ones like “congratulations” can take a moment.
This advice works for simple strings, like you might see on buttons or navigation, but sometimes you need to say more. Sometimes you need to explain ideas, and ideas can be complicated. You need room to express them.
There is a special kind of clarity you can learn from fairy tales. Take a second to imagine your favorite childhood story. How much of the basic plot do you remember? What about the moral? Stories are how we pass knowledge from one generation to the next. They need to contain a piece of wisdom and still be so simple a child can understand them. They’re in the business of being clear. A big part of their effectiveness comes from their sense of pacing and rhythm.
This is easier to show than explain. Here’s one of my favorites, by Italo Calvino:
Late in life, the emperor Charlemagne fell in love with a German girl. The barons at his court were extremely worried when they saw that the sovereign, wholly taken up with his amorous passion and unmindful of his regal dignity, was neglecting the affairs of state. When the girl suddenly died, the courtiers were greatly relieved — but not for long because Charlemagne’s love did not die with her. The emperor had the embalmed body carried to his bedchamber, where he refused to be parted from it. The Archbishop Turpin, alarmed by this macabre passion, suspected an enchantment and insisted on examining the corpse. Hidden under the dead girl’s tongue, he found a ring with a precious stone set in it. As soon as the ring was in Turpin’s hands, Charlemagne fell passionately in love with the archbishop and hurriedly had the girl buried. In order to escape the embarrassing situation, Turpin flung the ring into Lake Constance. Charlemagne thereupon fell in love with the lake and would not leave its shores.
This is a fair bit of text. There are some very big words in there and very big themes too. It explores some really dark and complicated ideas about love, power, and obsession. And yet, it’s easy to follow. There’s a tight logic through the lines, and each phrase carries you into the next. It’s got rhythm.
Fairy tales have rhythm because they’re part of a spoken tradition. In ancient Greece, people often valued rhythm as much as the words themselves. When people handled text, they might repeat it out loud a dozen times before they were done with it. I tried this with the fairy tale above and marked the beats that felt natural to me. The results look something like song lyrics.
Aaron Sorkin, the legendary screenwriter behind The West Wing and The Social Network, writes his dialog to music to give it an implicit rhythm. He wrote an entire movie about engineers and lawyers negotiating over startup equity, and it worked on the power of the writing. Any given episode of The West Wing dives deep into policy debates, and it’s always lucid.
What does this look like when we get back into design? Here’s a modal from a popular website. You can tell it’s for something important because it has a bold red border and not one, but two news crews. It also has a lot of text to read for something that looks urgent.
I looked for its rhythm. As I read it, it looks like the chart above. Compared with the fairy tale, you can see that whoever wrote it wasn’t paying attention to the sound of the writing (or maybe it just didn’t land with me). To my ear, it’s goopy and shapeless.
And then there’s this totally frivolous bit of Warby Parker packaging that I couldn’t put down. When you unfold your cleaning kit, they tell you the history of the company with a quick and delightful fairy tale. Now I know more about Warby Parker than my own family history.
Here’s another example from the game Alto’s Odyssey. It’s a mouthful, but it works.
To summarize: Be clear.
There’s no magic to it. Remember that your reader is busy trying to accomplish their own goals. When you make your copy easy for them to read, you make your product easier for them to use.
Be a Friend
The next principle is to be a friend to your reader.
When a piece of technology engages you socially, you can’t help but respond in turn. That’s because at our core, we are social animals.
It’s likely that we acquire inner voices by internalizing our conversations with other people. In childhood development, it comes after the stage where we become aware that other people have their own thoughts and feelings.
A neuroscience lab at Durham University found that when we listen to inner voices, our brains actually appear to simulate other people speaking. It’s almost like we’re talking to an imaginary friend.
This has lessons for product design. Being a friend takes more than striking a friendly tone: It also means playing an active supporting role. You’re an angel on your reader’s shoulder, there to help them accomplish their goals.
Researchers at the University of Michigan put people in stressful situations like public speaking. They told one group to coach themselves normally, which usually means saying “you.” Think of phrases like “you’ve got this” or “you need to be faster next time.” The second group was told to address themselves in the first person, as in “I’ve got this” and “I need to be faster next time.” People who used the first person felt worse and spent more time dwelling on their mistakes. As a rule of thumb, address your reader like you’re sitting across from them. It’s always “you.”
If you’re not sure how to start a conversation with your reader, a simple “hello” will do.
Try a pun if you’re feeling brave.
You can always tell them to have a good day.
Celebrate your user’s accomplishments. Share their joy.
You can let down your guard and occasionally raise your voice. Imagine that you just found out you’re a top writer on Medium. Medium is a reading service, so it usually uses its library voice, but this is a genuinely tweetable moment, so we break out an exclamation mark. You deserve it!
On the other hand, don’t be rude. Never say something you wouldn’t say in person. Imagine how you’d feel if you tried to access a file and saw this message:
Imagine trying to access your insurance account and fumbling your password. How would you feel if the app lectured you about every mistake you’ve made since third grade? It’s not a good feeling.
Try to be polite, and write in good faith. If there’s an interruption on Medium, for example, the first words are usually “Pardon the interruption.” This is a simple gesture, but it’s one that many readers appreciate.
Act like the human being that you are. Write from a place of wanting to help your readers, and be respectful. We all know how to be polite, but it’s easy to forget when designing at scale. Don’t.
To recap: Be clear. Be a friend. And…
I’ve been rattling on about science, but this section takes us closer to art. What makes a product relatable and memorable often comes down to its personality.
You don’t always need to be “on.” Let it happen naturally when it makes sense. More broadly, attend to what your words implicitly convey. There should be a general way that your product speaks, in the same way that you might use a consistent color palette across surfaces. It often helps to keep an actual person as a reference point.
The user doesn’t need to know who you’re channeling. It’s better if they don’t. But the words you choose will evoke a sense of personality whether you want them to or not. Regardless of intent, you can’t use the phrase “The name’s X” without evoking a very specific person.
Think of how distinct it feels to listen to different people speaking. Take just a moment, and imagine the text below being read by Scarlett Johansson, with her signature deep and raspy voice:
Why, hello there!
Next, imagine it being read by Samuel L. Jackson:
Why, hello there!
It’s a qualitatively different experience. Researchers at Emory University found that your belief about who’s speaking actually changes how you read. If you imagine a fast talker, for example, you actually read faster.
Writing copy on Medium, I’ve sometimes used Malcolm Gladwell as a reference point. He’s written popular books like Outliers and The Tipping Point, and I admire the way he communicates big insights through simple observations. He can be mischievous, which inspires details like this paywall:
It also gives us license to indulge in playful asides, like these little features that we put at the end of daily emails.
There is no one right answer, but there are lots of wrong ones — and people will notice. Can you tell me who said these immortal words?
“Follow the recommended mission in order to progress and get more rewards!”
One mobile game would have us believe it was Abraham Lincoln, the 16th president of the United States and silver-tongued protector of the Union.
That’s what it looks like when voice and the product don’t match. Compare that with this from a game that gets it right.
Spotify is great, and its designers can be very subtle. Instead of saying “based on your listening” like most apps, Spotify uses “inspired.” Playlists often come with witty headers that reflect where you are in your day. They convey the personality of someone who is genuinely passionate about music.
Compare this with ones from other similar services below. They are generally well designed and functionally equivalent to Spotify, but they convey the personality of robots that aren’t 100% sure what music is.
Of course, there are other ways to make your words expressive.
Pay attention to typography because it’s literally how we see words. Font size, weight, and opacity are easy ways to make any given typeface speak loudly or softly. This feels really loud:
And this feels soft-spoken.
Consider the unique qualities of each typeface and what it says about the voice. Is it round and playful?
Or is it calligraphic and elegant?
Think about the contrast of their strokes, the shape of their spurs, the angle of their crossbars, and how it looks when you squint. Typography can get technical, but what matters is how it hits you in the moment. It tells you how to imagine the timbre of the voice.
And don’t forget the baggage that any particular typeface might carry. Designers love Helvetica, but it’s also the official typeface of the IRS. Depending on who you’re designing for, you may accidentally evoke the wrong voice entirely.
Some products balance many voices, and typography can help keep them distinct for your readers. For example, Medium draws a sharp distinction between the voice of the platform and the voices of the writers who share their stories.
The reason for this goes deeper than brand awareness. We also need to protect the integrity of the writers. Consider the (rejected) design below. The background text is a story from the community, and the foreground is a call to action from the product team. Both use the font Charter in different weights. There’s a clear button that you’re obviously supposed to click, and while that usually passes for good design in San Francisco, it speaks from an ambiguous voice. It reads like the writer is trying to sell you something.
This is a fundamental problem for a platform built on writers’ voices. We went on to adopt the font Noe and use it to represent the voice of Medium in cases like these. Noe is a pointy, opinionated typeface that is very distinct from the text set in Charter.
We often use Noe on a higher z-index to make it clear that it’s a different voice speaking. Noe can feel aloof when left to its own devices, so we write in a light tone and pair it with playful illustrations.
When you approach writing (and its presentation) with an ear for the speaker’s voice, you’ll find new ways of looking at text. You’ll find layers of texture and attitudes to explore through design, and this translates to a richer experience for the reader. A well-designed product conveys its personality effortlessly and gives you a reason to remember it.
I want to leave you with a few words about why all of this matters. The smallest details of technology can have big implications.
We recently learned that millions of people had intimate personal data exposed to a third party, and every one of them “agreed” to let it happen. There are many factors at play in an event like this, but one that’s easy to overlook is the role of language and design. Someone designed the interaction where data permissions were granted and did not prioritize clarity or the user’s personal interests.
It’s not hard to find other examples like this. Many of the media platforms that spread fake news rely on distinctively journalistic typography, which implies that stories are fact-checked and reliable even when that is not the case. Per a recent Pew poll, only 39% of Americans feel very confident that they can tell what’s real from what’s fake.
Having principles is important. When technology moves faster than we can keep up, our principles help us see how things should be instead of how they are. They make it possible for us to design a better world.
Be clear. Use your words to help your reader understand the world.
Be a friend. Use your words to help your reader accomplish their goals.
Be expressive. Use your words to give your reader a truthful experience.
At the end of the day, this is about the value of design and our responsibilities to the people who use our products.
Technology is changing the world in ways we may not understand in our own lifetimes. This comes with both good and bad. As designers, we have a role to play in this. It’s our job to help people navigate digital life.
Words are the most powerful tool we have. Use them well.