John Zeratsky gives pointers on the importance of crafting those little bits of text in the UI design of software products.

For many technology companies, design is mysterious. So when I work with startups, I try to demystify design by talking about processes and skills. The idea is: Design is not a magical creative thing that designers are blessed to do. It’s rational and objective, and the components are pretty easy to understand.

advertisement

advertisement

People are often surprised when I tell them writing is a design skill. I used to work with an excellent visual designer who hated being called a visual designer. His defense was, “Isn’t all design visual?” Well, no. Most of our design work is expressed visually, but we use design to figure out all sorts of things: What a product does, how it works, and what it says. The last one–what our products say to the people who use them–continues to surprise me as one of the most important things we need to decide as designers.

At Google Ventures, my partners and I get to try different approaches to design all the time–we work with different startups every week. As a writer and designer, my approach is to focus on writing great copy and use basic visual design to highlight the most important parts. Daniel Burka recently wrote about how my visually unsophisticated (it’s okay, you can say “ugly”) prototypes often perform well in user research–regularly beating out beautiful, polished, sexy prototypes.

We think this is pretty amazing–and no one is more amazed than me! Curious, I started collecting tips and guidelines that help me design solutions that are clear and easy to understand. Here are five of my principles for great interface copywriting.

Some say short is best. Some say longer is better. Some point out that people scan text on the web (they don’t read), so it doesn’t matter as long as the keywords are in place.

My principle: Clarity is king. We should always strive to clearly, succinctly, and elegantly say what we need to say. So how do you do that?

• Be specific. Don’t say “search” when you mean “filter.” “Save” is not the same as “submit.”

• Watch for jargon and abbreviations. It’s easy to let these words creep in when we’re not paying attention. “Website” is better than “site.” “Invitation” is preferable to “invite.” “Repository” is clearer than “repo.”

• Front-load your labels (i.e., put the important words up front). Form fields should say “first name,” not “name (first).” Buttons should say “Continue,” not “Click to continue.”

• Don’t be lazy. Instead of defaults like “okay” and “cancel,” say exactly what those buttons do.

advertisement

These are small things, for sure. But when done right, our interfaces are easy to understand and lend our products a sense of quality.

Everyone wants to stand out. Many startups try to develop a brand with personality–they want to be the young upstart against the establishment. Writing plays a big role in branding, and it’s important, but it’s a minor concern relative to clarity. And a little goes a long way.

When we’re obsessed with personality, we might write headlines like “Okay, let’s get started!” and buttons like “Sounds good!” Headlines and buttons are the pillars of our products and need to be 100% focused on communicating clearly. I always aim for descriptive and helpful. For example, “Tell us about your business” and “Save and continue.”

After we’ve nailed the basics, we can use subheads and supporting text to interject personality. But don’t try too hard–your personality (and the personality of your company) will come through naturally.

The best approach to interface copywriting is usually to just tell your users what you want them to know. I’ve seen too many marketing websites with headlines promising “a better way,” “the best way,” or “a new way” to do something, without actually describing what it is.

In many interfaces, a simple label can really aid understanding. I was working with a company recently whose product features a list of updates from companies you’re following. But the list was not labeled, and it wasn’t clear what it was. Adding a headline–“Updates from companies you follow”–made it instantly clear.

This principle can be very helpful in multipage wizards (where users have to enter some information and click from page to page). Instead of a simple “Next” button, try telling the user what will happen: “[Save and continue “] Next, we’ll ask for some personal information.”

In the past 10 years, I’ve seen hundreds of people use various apps and websites in user studies. One pattern is clear: People do read text (short and long) in software products.

Headlines are often the most prominent, so people are very likely to read them. And interactive elements like buttons, links, and form labels get read, too. These are the most important words on the screen, and they deserve the most attention. Smaller screens (on phones and tablets) have room for fewer words, so the stakes are even higher–people will read the copy in your products, so take the time to get it right.

The mere existence of text can have surprising effects on credibility and trust. My partners Jake Knapp and Daniel Burka shared an example from Blue Bottle Coffee: Including the founding story on the homepage made the company seem more serious and legitimate. We’ve seen examples in financial products, too, where describing security and privacy features helps users trust the product.

Don’t be afraid to include copy in your products, as long as it’s clear and to the point.

How do interface copywriting and design fit together? I’ve learned that writing is a core part of the design process–as essential as interaction design, visual design, prototyping, and user research.

Writing, like the other core design skills, is not a step in a waterfall process. It doesn’t belong at the beginning, middle, or end, because it’s something we need to do throughout the design process.

Just say no to lorem ipsum.

Some of the first websites I designed started with a huge stack of text from the client. My job was to edit, organize, and present that text–but the text itself was largely a constraint, or requirement, of the website. It was the first step in the process. Later on, I made the opposite mistake: designing products with “lorem ipsum” all over the place, then trying to add copy at the end. (Just say no to lorem ipsum.)

When we’re working on a design project, our early prototypes will be unsophisticated in all dimensions: The interactions a bit clumsy, the visuals a bit crude, and the copy a bit murky. When we test that prototype, we’ll learn what’s working and what needs work–and we’ll make improvements across the board. If writing is not a part of that process, we’re leaving out a huge component of the user experience, and our products suffer.

advertisement

Even early sketches should contain a lot of real text. When you leave copywriting until the end of a project, you miss valuable chances to evaluate and improve the words on the page.

These principles have served me well, but they’re not written in stone (as far as I know). Give them a try on your next design project–test the results (in a user study or A/B test) and see if they help. Let me know how it goes, and please share your guidelines for great copywriting! You can reach me on Twitter: @jazer.

advertisement

advertisement

advertisement

About the author

John Zeratsky is a design partner at Google Ventures, where he helps startups use design to reach business goals.