Simple is Better: How to Write for the Web

Standard

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 extensive open-source software development project powered by a small (but growing) staff and a worldwide community of dedicated volunteers. (before: 23 words after: 10 words)
  • Because our products are used for many of the web’s most innovative projects., a job at Mozilla allows you towill 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.

6 thoughts on “Simple is Better: How to Write for the Web

  1. 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.

  2. @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!

Comments are closed.