While the tech world long ago acknowledged that content is king, many companies seem a little slower to admit they need content specialists like copywriters, editors, and proofers.
So, in companies ranging from scrappy startups to globetrotting enterprises, many of you UX, UI, and visual designers end up writing a lot of copy. But knowing how to craft a crystal-clear affordance or set up a well-structured PSD may not have armed you for the art of writing clear, compelling product copy.
And while I’d always recommend you seek an expert’s assistance, there’s no harm in taking a first pass. (In fact, as a UX copywriter, I love it when designers create filler copy that helps guide me through the experience, rather than opting for lorem ipsum.) And in a world where designers outnumber UX writers, well—it pays to be ready for your copy to go primetime.
Let’s start with some general writing tips, then dig into some copy challenges designers face daily.
General in-product copywriting tips
These pointers will help you nail your product copy—and maybe that awkward email too.
Keep it clear
Product copy must be crystal clear, because misinterpretations can lead to mistakes that are embarrassing for them—and potentially damaging for your brand. Write it and rewrite it till the ambiguity has vanished entirely (but stop short of committing legalese). Then reread it with an eye toward possible misinterpretations.
Not sure if you’re being clear? Have someone else—preferably someone who isn’t familiar with your product—read it and see if they can explain it to you.
Of course, the greatest pitfall of crystal clarity is that it can get wordy. Lengthy copy works against itself by discouraging readers. Worse, it’s often only lengthy due to a lack of editing. Which brings us to our next tip.
This is by far the best bit of user interface design I have ever seen. Ever. EVER. pic.twitter.com/zrRs4bDRH3
— Ryan Block (@ryan) March 18, 2013
A beautiful example of what not to do.
Keep it brief
“I have made this longer than usual because I have not had time to make it shorter.” —Blaise Pascal
People use your product because it helps them get something done. Hopefully quickly. So don’t bog them down with paragraph after paragraph of explanation—get to your point, so your users can get the job done.
The best way to keep it brief is by editing. Here’s a few shortening-specific editing tips:
- Use contractions. They’re not only conversational, but they also cut down on characters.
- Cut adjectives and adverbs. While they’re nice for color, verbs and nouns do a lot more work for you. Use Hemingway Editor to help you spot and delete them.
- Use bulleted and numbered lists. While they do take up a bit of vertical space, they also help relieve the visual density of text and help people find the content they’re looking for.
- Watch out for wordiness. For example, replace “At the present moment” with “now.” You’ll be amazed at how often you use 4 words where 1 will do.
- Keep your thesaurus handy. So handy it’s in your bookmarks bar. I recommend Merriam-Webster’s.
Anticipate objections
All too often, users won’t do what you want them to because they’re afraid of the consequences. So defuse those concerns right off the bat by letting them know exactly what will happen if they act, and that they’ll have control over what happens.
Here are a few common situations, along with simple ways to assuage their concerns:
Free trial offer
- Objection: “Once my trial’s over, they’ll charge me automatically without telling me.”
- Solutions: Assure users that they can cancel anytime, and that you’ll let them know when their trial is about to expire. Even better, don’t ask for their credit card up front—and make sure they know that beforehand.
Newsletter signup
- Objection: “Newsletters mean spam. Horrible, awful, no-good spam. Daily.”
- Solution: Set expectations about the type of content they’ll get and how often they’ll get it. Include an unsubscribe link in every email, and make the language clear. Best bet: “Unsubscribe”—no more, no less.
Contact import
- Objection: “If I give this app access to my contacts, they’ll spam them all, and every email will have my name on it.”
- Solution: Be clear about why you need the information you’re asking for and what you’ll do with it. And if that includes emailing their contacts, be honest about it.
Make sound word choices
Choose words your users will almost certainly understand. If you’re writing for a general audience—say, you work at Yahoo! News—choose words that won’t stump a 5th grader. But if you’re designing for The New Yorker, you’ll probably want to elevate your diction a bit.
Either way, choose words that make sense for their context. If you’re sending an email someone might open on their phone, for instance, don’t tell people to “click” a link.
Read it out loud
“Conversational” copy is the writing world’s “flat” design. If your brand voice guide uses words like “human,” “friendly,” etc., read your copy out loud to make sure you don’t sound like a robot.
Actually—no matter what your brand voice is supposed to be, read it out loud. It’s a great way to catch odd constructions and mechanical phrasings.
The power of you
“You” may be the most powerful word in the English language. Not only does it catch your attention—it pulls you into the story, making you a character in whatever drama is unfolding within a product.
Not convinced? Here’s the “Read it out loud” section above, now without “you”:
“Conversational” copy is the writing world’s “flat” design. If the brand voice guide uses words like “human,” “friendly,” etc., read the copy out loud to make sure it don’t sound like a robot.
See? Without someone for it to happen to, there’s no drama.
Common copy patterns
The above tips are great general principles—but what about the nitty-gritty details of design? Here’s a few rules of thumb you can stick to for each of the most common types of copy you’ll need.
Headlines and subheads
With headlines, it can be super tempting to aim for something really witty, funny, or even aspirational. And sometimes, any of those can work—so long as they’re clear about the point of the page. If the reader can’t tell what the page is about just from reading the headline, no amount of wit will keep them from bouncing.
It’s often best to think of headlines as labels. Since you can’t rely on most people to read all the copy on a page, use your headlines and subheads to tell people what the page (or section of a page) is about, and to highlight the most important information.
Eye-tracking studies show that people read in an F-shaped pattern, sticking mostly to the left margin of a page of text, then following along the headers that grab their attention. That’s why it’s best to place important terms as close to the beginning of your header as possible, upping their chance of catching reader attention.
Subheads can also help relieve the visual density of copy-heavy areas and help guide scanners (i.e., most people on the web) to the areas of a page that interest them most.
These eye-tracking heatmaps show where users look most on content-rich pages (like blog posts), product pages, and search engine results pages (SERPs). Note the emphasis on the left margin, images, and headlines.
Body copy
Of course, you can encourage people to read your body copy by keeping it light. Write short sentences with simple subject-verb-object structures. You’ll also want to use simple, familiar words so you don’t alienate readers.
Lists
Another great way to encourage reading of your content is to use bulleted (unordered) and numbered lists. Why?
Because lists help:
- Simplify the lengthy sentences that result from listing multiple items
- Break up the visual density of paragraphs
- And, in the case of numbered lists, clarify order and hierarchy
See what I did there? If you’re not convinced, check out the screenshot on the left of the image above—the bulleted areas get more attention than you might expect.
Links and calls to action (CTAs)
In many user interfaces (UIs), people are simply looking for their next step—what they need to do next to get the job done. Thankfully, you can use that to your advantage by making the copy in your links and buttons very clear about what will happen next.
To achieve maximum clarity, start link text with a verb and include the object. Google Drive’s “insert image” dialog does a fantastic job of this, starting with a verb (choose), clarifying the object (what I’ll choose, in this case an image), and even what the effect of that action will be (uploading the graphic to Drive).
Even if I switched to another tab and forgot what I was doing in my doc, I’d only need to read the button to be reminded.
Success, error, and informational messages
These are those little messages you get that let you know what’s going on in a UI after you’ve interacted with it.
Because people have come to assume that the web will work as they want it to, success messages can be short and sweet—but you still want them to be there to confirm completion of an action. You can even give them a little personality since they’re so positive.
Error messages, on the other hand, aren’t such joyous occasions, so you’ll want to keep your tone a little more sober. You might even say, “Sorry.” Whatever your tone, be sure to provide information on what went wrong, and, when possible, what can be done to fix the issue.
There’s been a bit of a vogue around the web for saying “Oops!” when something’s gone wrong, but be careful with that word. In some situations, it could easily come across as flippant—like you don’t care about the user’s troubles.
I'm the Director of Content Strategy here at Webflow. Nice to meet you.