How to write copy for website interfaces

UI design is an incredible challenge. To do it right, you need a unique blend of many different skills. You need to be a good visual designer, with a strong eye for hierarchy; to know programming, so you can implement your work; to understand a problem's complexity at a macro level, and then zoom in on the details of each step in a flow; to be a creative, to imagine new approaches and ideas; to communicate your rationale to others, and remain open-minded to critical feedback; and to be a good writer.

Good writing is the secret sauce. It's the best way to reduce confusion in an interface, but the hardest thing to get right.

People don't read (much)

Jakob Nielsen's research in 2008 showed that people don't read much on the web. On average, they'll read only 20 per cent of the words on a page. With this in mind, designers started to undervalue text.

Now, we cut copywriting back to the bare minimum. We stuff our pages and posts full of big images and interfaces with obscure icons. The measly text we have left is often a low-quality afterthought.

Who cares, right? People don't read much anyway. Well, perhaps they don't read because they already know what they're trying to do, and this junky writing is simply a waste of their time?

Making it clear

Writing for interfaces isn't a matter of brevity. Brevity is a luxury that you can occasionally get away with. Most of the time, it takes quite a few words to explain what's happening. That's fine; a paragraph of clear instructions is better than a vague sentence. Though a clear sentence is better than both of those.

Here's an example. I worked on the recurring events feature for the Basecamp calendar, so you can schedule an event that repeats more than once. When you edit a recurring event, we have to pop up a dialog and ask what you intended. Did you want to change just that day's event? Or subsequent events, too? Maybe you didn't even know this event repeated, so you may be surprised at the question.

Basecamp examples

At first, I wrote: "You're moving a repeating event. Which events to do you want to update?"

  • Only this event
  • All events in the series
  • Never mind

Good enough? Nope. What's a 'series'? What does this mean? What's going to change? There's no way to know. This text makes too many assumptions.

After some feedback, I tried a second version: "You're moving an event that repeats. Do you want to move all future versions?"

  • Move all future versions
  • Move this one only
  • Never mind, don't move anything

This is a little better. Now we know that we're only concerned with future versions. But the copy still feels repetitive. After a bit more feedback, we ended here: "You're moving a repeating event. Do you want to move all future versions of this event too?"

  • Yes, move all future versions
  • No, just move this one and keep the others where they were
  • Never mind, don't move anything

We added a lot of words! But now it's abundantly clear that moving one thing won't mess up the other things. Plus, it's more natural and friendlier to answer a yes-or-no question. It all boils down to editing. Say everything that needs to be said, but nothing more. Edit, edit and edit again until you get it right.

Quality writing is hard work that takes time, but it's worth it. Accumulated across your entire website or app, consistently good writing will help reduce your users' frustration, and your customer support burden to boot. Forget about the 20 per cent rule. Make your writing 100 per cent worth reading.

Words: Jonas Downey

Jonas Downey is a designer at 37signals in Chicago

This article originally appeared in net magazine issue 245

Liked this? Read these!

What are your tips for great interface design? Come and comment!

Thank you for reading 5 articles this month* Join now for unlimited access

Enjoy your first month for just £1 / $1 / €1

*Read 5 free articles per month without a subscription

Join now for unlimited access

Try first month for just £1 / $1 / €1

The Creative Bloq team is made up of a group of design fans, and has changed and evolved since Creative Bloq began back in 2012. The current website team consists of eight full-time members of staff: Editor Georgia Coggan, Deputy Editor Rosie Hilder, Ecommerce Editor Beren Neale, Senior News Editor Daniel Piper, Editor, Digital Art and 3D Ian Dean, Tech Reviews Editor Erlingur Einarsson and Ecommerce Writer Beth Nicholls and Staff Writer Natalie Fear, as well as a roster of freelancers from around the world. The 3D World and ImagineFX magazine teams also pitch in, ensuring that content from 3D World and ImagineFX is represented on Creative Bloq.