Interface designers like to talk shop about visual styling: colors, icons, type, gradients, shadows, spacing. If it can be tweaked in Photoshop, there’s probably a lengthy Twitter debate about it.
Aesthetics are debatable, but writing is essential. Peel away the layers of styling and you’ll be left with words. Writing is the meat of a design, and it’s one of the hardest things to get right.
So why don’t designers talk about writing more often? I think there are three reasons:
- It’s not sexy. 15 edits of a single sentence don’t make for a flashy portfolio piece (although I’d love to see more portfolios like that.)
- We’re all pretty bad at it. Writing is difficult, and most of us probably weren’t trained to do it well.
- We think people don’t read. Jakob Nielsen’s research showed that people don’t read on the web, and on average, they’ll read only 20% of the words on a page.
As a result, designers undervalue text. We cut copywriting back to the bare minimum. Sometimes we exclude important details to keep things short. We overload interfaces with obscure icons, invisible gestures, and no explanatory text at all. Instead of “writing” or “copy” we even call it something generic: “content.” The measly text we have left is often a low quality afterthought.
Who cares, right? People don’t read anyway. Well, maybe they don’t read because they know what they want, and this junky writing is a waste of their time. How can we improve?
Write better words, not less words.
Writing for interfaces isn’t just about brevity. Brevity is a luxury that you can occasionally get away with. It may take quite a few words to explain what’s happening, and 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 happens more than once. When you edit a recurring event, Basecamp asks what you intended to do. Did you want to change just that one event? Or subsequent events too? Maybe you didn’t know this event repeated, so you might be surprised at the question.
At first, I wrote a concise, robotic version of this dialog:
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 any of this mean? Exactly what’s going to change? There’s no way to know. This text makes too many assumptions.
After a round of 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 this copy still feels repetitive and mechanical. 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 the choices are clear, and the tone of this text feels more natural and friendly.
Write for your friend.
Most of us learned to write in the Official Style, in which your message is mostly obfuscated by nouns, buzzwords, and other garbage. It’s the writing you’d use to meet the 1,000-words length requirement on a term paper.
That’s the opposite of how you should write copy for your website or app (or anything, really.) Instead, write like you’re talking to a friend who needs help. Be casual, positive, and encouraging. If you wouldn’t naturally say it out loud, it’s not right. Keep working until it feels natural.
Edit relentlessly.
Good writing is good editing. Remember that people will only read your words when they’re motivated, so make it worth their while. Say everything that needs to be said, but no more. Set a high standard for yourself — would you want to take the time to read this? Edit, edit, and edit again until you nail it.
We call this “wordsmithing,” and we do it a lot. Just look at some of Basecamp’s commits:
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’ confusion, and your customer support burden to boot.
Forget about Jakob’s 20% rule. Make your writing 100% worth reading, and people will read it.
Joe
on 24 Sep 13Let’s see how many pedants turn up here to write “fewer” words, not “less”. (Er, starting here)
Pascal S.
on 24 Sep 13Handling repeating events (or tasks) is a common problem, which very few applications solve well. I think that the problem should be solved at its root : before modifying a repeating item, the user should explicitly select whether he wants to edit the “current” item or the item template. Then, there is no ambiguity when committing the change :
- If the user selected the “current” item, then of course only this one will be modified.
- If the user selected the item template, then of course only the future ones will be modified (the past being left untouched).
Millard
on 24 Sep 13Nicely said and oh so true. We may need a t-shirt with “Good Writing is Good Editing” on it. I think the Nielsen stuff refers more to general web pages, though, not specific interactions with the user (as in your example). As you describe well, when you are about to take some action on the user’s behalf, it’s important that the results be crystal clear. I’ve aborted many a dialog because I just wasn’t sure what would happen next.
Some designs lean way to heavily on visual elements. “A picture is worth a thousand words” does not scale to a 16×16 icon that differs only slightly from a similar one that means something completely different. These pictures need their explanatory hover text (which hopefully really explains).
Pardon my ignorance of 37signals larger market: Do you translate to other languages? If so, what sort of feedback have your translators provided about the more explanatory style (or additional cost for more words)? I’ve gotten feedback from editors before that an otherwise decent English sentence would be difficult to translate into Lower Slobbovian.
Pb
on 24 Sep 13Please tell me “versions” did not make it into production?
Also, yeah, it should be “fewer”.
Amrita
on 24 Sep 13Great post. I think designers don’t talk about writing much because it’s usually left to another person/team, and plunked in later. It’s rare to find designers who also do the writing on a project.
Simon
on 24 Sep 13I can’t agree on this example.
Of course it is better if the user can grasp the interaction instantly, rather than having to parse 5 full sentences.
For example :
Also move the repetitions of this event ? Yes No
That’s less personal, but more usable from my point of view.
Andy T
on 24 Sep 13I don’t even have enough attention span to read the entire post.
Hardy
on 24 Sep 13Good article – and I fully agree on your opinion that “instructional interface text” has to become more useful and that this task is not an easy one. But please keep you facts in context. Nielsens evaluations are based upon “text on web pages” – which means promotional or informational text, e.g. Product descriptions and not the kind of text you are mainly referring to : instructional text. I think these kind of texts that are “process related information” are different than your normal text. Like you mentioned, you will have to make sure that the mental model is the right, the context is clear to the user and that all consequences are made unambiguous. Probably because of the famous MS interface dialogue “are you sure?” Users tend to just “switch off” and not even try to understand the dialogue anymore. I guess it’s one step in the right direction to build more comprehensible instructional texts but I guess it will be just no enough yet. What are your thoughts on “additional” or alternative methods?
Peter
on 24 Sep 13Versions? I’m an IT guy but wouldn’t understand what that means in that context.
Tom
on 24 Sep 13Love this article! Although the Nielsen references are really tired – he was never a web app guy. That said, the most important four words to me are ‘write like you’re talking’. I learned this when I started writing UX deliverables. Before I sent a report to a client, I would actually close the door and read the entire thing aloud! I had a great mentor who suggested this – she would say ‘there’s a big difference between speaking Tom and writing Tom.’ I’ll never forget that.
MJ
on 25 Sep 13“Versions” of an event? Wouldn’t that be far more clear as “Occurrences” of an event?
Devan
on 25 Sep 13+1 on what MJ said – “Occurrences” would be a better word.
Now it is time for me to go and elaborate all my dialog boxes from my standard ‘Yes’, ‘No’ and ‘Maybe’ buttons…
Victoria
on 25 Sep 13I agree with the overall sentiment. Instructional text should be understood clearly, regardless of few or more words. It should be engaging and it should add to overall experience. Though interaction designers are generally not the ones responsible for instructional text, it is part of learning experience and falls within the overall umbrella of UX, as it contributes to the ‘total experience’ of the product
@atotalx www.atotalx.com
DA
on 25 Sep 13This article kills it. Thank you.
I often hear people suggesting that in lieu of so many words, we really need more “graphics.” You see a lot of graphics in the world of digital and other interfaces and they can be quite helpful—everyone knows that the crosswalk man means that you should proceed to cross the street. But if things lent themselves so easily to pictograms, I might be typing on a hieroglyphic keyboard. Even languages that do use logogrammic writing systems, such as Chinese, have reputations for being pretty difficult to learn. And so: alphabets. Yet, graphic designers can be pretty resistant to using letters and words, preferring new, universal graphics, and attempting to succeed where esperanto failed. Thus, we’re often left with confusing and irritating symbols, such as that weird shadow person next to that other weird shadow person on Facebook. There’s also an Earth symbol up there which, I just learned via “words,” actually represents notifications.
Apple anticipated this rant in their new iOS 7 by replacing a bunch of silly pictograms with words. For instance, on the previous OS, the music player used this odd crossing arrows thing to indicate shuffle; in the new version, the word “shuffle” indicates shuffle. In the old version, to repeat a song, you hit this loop thing twice, the second time generating a loop with the number one superimposed on top. New version? The word “repeat.” And so on, really throughout the new design.
So yeah, graphics can be useful, but words are like super graphics—often even more useful.
37signals has been on this beat for sometime now, so kudos to y’all.
Also, highlighting the less-fewer distinction was invented to out jerks (not charming grammar snobs, but jerks, because no one in the history of language has ever actually been confused when told that, for instance, “we need less apples.” Everyone knows we don’t need as many m*fucking apples.). Ok, kidding, but seriously.
Trevor
on 25 Sep 13I’m discouraged by the inconsistent tenses in your team’s commit messages. http://tbaggery.com/2008/04/19/a-note-about-git-commit-messages.html
I liked the post.
AS
on 25 Sep 13One cannot “keep the others where they were”. This basic misunderstanding of verb tense really undermines the whole article.
Brendan
on 25 Sep 13Excellent stuff. One nitpick:
“No, just move this one and keep the others where they were.”
I do believe are would be the better verb tense to use there. You can’t keep things where they were—sounds like you’ve already moved them from where you’re trying to keep them…
Bob Monsour
on 25 Sep 13A very good piece, full of important ideas.
Here are some thoughts on your final “version.”
1. I too didn’t like the word “version.” As another stated, perhaps “occurrences” is a better choice.
2. I would ”...keep the others where they are.” (not “where they were“)
3. I’m also assuming that your edit dialog is specifically for “moving” an event to a different date/time. Is there a different dialog for simply editing the info of the event? Perhaps you could collapse them all into “changing” as they seem to be making a conscious change to the event. And the word “change” would appear to work well in place of “move.”
Thanks again for the good writing.
Jonas
on 25 Sep 13Thanks to everyone for the comments. Just a note on the grammar/word choice nitpicks…
Like design, writing is almost always imperfect and subjective. Stylistic perfection is a nice goal, but it can also be paralyzing.
I’d rather get the ideas out there and learn from the imperfections. That’s the only way to get better — which is what this whole article is about.
Gianluca
on 26 Sep 13I think that writing on the web should be very similar to how we talk: short paragraphs, good punctuation. This TED talk is about texting, but it can be translate also to web. John McWhorter: Txtng is killing language. JK!!! – http://youtu.be/UmvOgW6iV2s
David Docetad
on 26 Sep 132. I would ”…keep the others where they are.” (not “where they were“)
This is not a “nitpick”. You ought to thank Bob for correcting your grammar, and make the change.
David Docetad
on 26 Sep 13On second thought, maybe not. “You’re moving” suggests you have already moved them from their original location, but have not placed them in their final location. Maybe “were” is correct!
Abhishek
on 28 Sep 13Hi Jonas, Great job explaining “What is Design?” to people :)
I think the copy can be slightly improved…
You’re moving a repeating event. Do you want to move all future versions of this event too?
Yes, move this one and all future versions. No, just move this one and keep the others where they were. Never mind, don’t move anything.Just my 2 cents!
camisetas frikis bebe
on 28 Sep 13I feel he laid out an elaborate technique of scheming and discussed the distress that awaited us camisetas frikis bebe http://camisetas-frikis-baratas.youaresomebody.org
mike
on 28 Sep 13AWESOME article. Thank you for writing this!
You’ve actually inspired me to come up with a style guide for writing copy for interfaces, going through everything from sentence structure to syntax to diction. The great thing about design is you can also apply style to text..
and do it strategically.
1acukHuURK70Ms
on 29 Sep 131acuOotxPtGAQe
James Abbott
on 29 Sep 13You’re moving a re-occurring event. Do you want to move all future events of this kind, too?
Yes, move all future versions. Move only this one. Never mind (don’t move anything).PS. Yes, I’m nitpicking.
St bede
on 30 Sep 13Uh sorry, saying “versions” of an event is not nitpicking… it’s pointing out some terrible writing. For a group that touts themselves to be great writers, I expect better.
This discussion is closed.