I often tweet about a favorite article of mine explaining how people read on the web. More and more I see this as a common problem all over the world.
It opens simply enough:
How Users Read on the Web
They don’t.
Instead of just tweeting the article (which is ironically so long that people don’t read it) I’d like to instead study some examples from our site and show how it could improve our own site content.
Often, I find that some of our site content is:
- Difficult to scan
- Verbose
- Passive
- Unclear
- Likely to be ignored — users won’t read it
So what should we do about it? Well, we should tackle it from different directions:
- We should educate ourselves and become familiar with best practices
- Those who do understand the basics should do their best to teach others
- We could also conduct user research, eye tracking studies or run a/b tests to verify theories
Either way, I’ll save you some time: simple is better.
So let’s go to some examples. Here’s what we’ll cover:
- Bulleted lists
- Highlight key points
- Reduce unnecessary or redundant words (of, the, a, at, to, that, with the, and)
- Remove passive speech and replace it with active speech
Bulleted lists
Your goal should be to identify common threads or trains of thought. Tie them together with a lead-in. Augment the leading thought with key phrases. Our example has a common entity: Mozilla. So how can we apply a list to this paragraph?
Before
Mozilla is a non-profit. We don’t have shareholders. We’re not trying to get acquired. Our bottom line is to promote openness, innovation and opportunity on the web.
After
Mozilla is:
- a non-profit company
- loyal to you, not shareholders
- promoting openness, innovation and opportunity on the web
Highlight Key Points
Highlighting helps users quickly scan key points. They don’t have to read word-for-word but can pick up the general concept of a block of text without reading the whole thing. This is typically how users read on the web, and studies show how important writing scannable text is.
In our case, let’s take the first sentence and see what we end up with.
Before:
Mozilla is:
- a non-profit company
- loyal to you, not shareholders
- promoting openness, innovation and opportunity on the web
After:
Mozilla is:
- a non-profit company
- loyal to you, not shareholders
- promoting openness, innovation and opportunity on the web
The addition of bulleted lists gets us farther, but highlighting keywords dramatically improves the visibility and likelihood that those concepts will be communicated to a web reader.
Reduce Words
The single most common problem is that people write too much. In technical writing and web writing, the goal should be content over style. Simple, clear, concise text wins; then users can focus on the content, not on deciphering what you’re actually trying to say.
Words that don’t add anything to the message are a huge problem. We can break up or eliminate some sentences in our example:
- Mozilla is an
extensiveopen-source softwaredevelopmentprojectpowered by a small (but growing) staff and a worldwide communityof dedicated volunteers. (before: 23 words after: 10 words) Becauseour products are used formany ofthe web’s most innovative projects., a job at Mozilla allowsyoutowill develop cool, useful technology that impacts millions of lives. (before: 29 words after: 20 words)
You can say the same things using less effort while benefiting users. All kinds of win.
Fix Passive Speech
Speaking passively increases the length of your sentences while reducing clarity. Here are two examples:
Before:
Because our products are used for many of the web’s most innovative projects, a job at Mozilla allows you to develop cool, useful technology that impacts millions of lives.
After:
You could impact millions of lives developing innovative products at Mozilla.
Here by focusing on “you”, you eliminate a ton of words but deliver essentially the same message.
Before:
At Mozilla, we encourage creativity and ambition with the goal of revolutionizing how people access the web.
After:
Mozilla’s goal is to revolutionize how people access the web by encouraging creativity and ambition.
By changing our sentence structure to focus on Mozilla, we eliminate the need for words like “at, we, with, the”.
That’s it. Go forth and write great content. Visit the Writing for the Web main page to learn more.
I’ve read those advices at least a dozen times but I never saw them applied. And just on this blog post, the difference is striking.
Excellent crisp illustration.
Awesome job.
It’s nice to be able to walk away with something useful.
Although, I’m not a fan of the highlighting key points practice at all. I find it to be distracting. It interrupts the smooth flow of scanning. It’s kind of like having speed bumps on a highway.
@ken – The eye-tracking study is certainly irrelevant in other contexts. If I remember correctly, screen readers change emphasis or tone when text is bold. I’d prefer to use clear headers and minimal text to improve the scannability of a page, but sometimes designs don’t necessarily allow for that when the rest of the page is not a document and more of a portal. In those situations the contrast between bold and normal text helps to offset other more distracting elements in the page above the fold. Of course, if the text is really that important, it shouldn’t be buried or need bold font-weight. But I’m trying to fight one battle at a time here!
Ok, that makes perfect sense.
I’m definitely going to start putting some of these practices into practice myself.
Thanks to Matt (http://openmatt.wordpress.com/2011/01/19/what-the-frak-is-drumbeat/) for the link here. And thank you for the intro into ways to write pages that suck less. 🙂
Alertbox is awesome.