SEARCH
  Basics Design Principles Writing for the web

Writing for the web

When creating, editing and designing content for the web, get the message across as quickly as possible.

To do that, say as little as possible, and put the most useful and relevant content first.

Speak plainly and openly and use a tone of voice that's appropriate to the audience.

Guidelines for better web copy:

Say LESS

This is the most important thing about writing for the web.

Because web users are generally scanning, not reading, the more concise the content, the easier it is to scan.

A good approach is to write concisely, then cut, edit, boil down, paraphrase and finally trim.

The Inverted Pyramid

Pyramid-style may be good for academic writing...

The classic academic writing format is like a pyramid. It starts by laying the foundations - lots of supporting information from other research, and other data. It sorts and summarises the supporting info into smaller summaries. Finally, it caps the work off with a brief conclusion. The pyramid style educates the reader by making them do lots of work along their way up from ground level to the pinnacle.

This style is totally inappropriate for the vast majority of web content. The right way to write for the web is to use the inverted pyramid style, which comes from journalism.

image 1

Use inverted pyramid for web content

The Inverted Pyramid reverses the workflow, by putting the essential information first, which it follows with further detail. The quick overview helps the reader get the point and purpose of a page instantly, letting the user make a quick judgement whether to read on for a bit more detail. (Note on the intro block at the top of each page on WDFS.)

Writing for the web

Put more important content first (front-loading)

When a page is longer than its window, putting important content first gets it above 'the fold'.

Aids scanning - when scanning, you take in titles, the beginnings of paragraphs and first words of sentences.

Helps the user decide quickly whether they're in the right place.

Short and succinct

Remove any paragraphs, sentences and words that don't directly help get your point across.

Can you find ways to say something in fewer words?

Front-load everything

Front-loading also applies to paragraphs and sentences. Start paragraphs with the most relevant words, to work like a header to the paragraph.

Use headlines and headings

A strong, attractive headline at the top of a page can make the difference between the page being read or ignored. Headlines and lower-order headings benefit from being large and high-contrast, so they attract the eye. Once you've attracted the eye, a headline needs hooks to catch your reader's attention.

8 Examples of compelling headlines from Sitepoint.com.

Use headings within a document to make it easy to scan the document's meaning. Good journalistic headings read like a bullet-point summary of the document's contents, so a reader can scan down the page, get a quick idea of what's on the page, and decide whether to read in more detail.

Consider the user's goals

When describing something they can do, describe it in those terms. The imperative voice (commanding) is attention-grabbing and helpful, so it should go at the front of a phrase. "Get blah here" "Subscribe to blah" "Place order" "Quit" (Remember, the user should be in control, and likes to feel in control)

Be factual, not cryptic

Your tone of voice should be immediately appropriate to the audience, and their relationship with the site.

Don't be cryptic. Don't assume you have your audience's undivided attention. You probably don't. You really have to work to grab someone's attention online.

Being factual means avoiding starting with questions (e.g. "Have you ever found blah blah? Well, this is the thing for you!"). Start in the tone of voice you mean to use. You don't have the time to expect your users to work out what you mean - TELL THEM QUICK, before they GO.

e.g.

I just reviewed a site that opened with quotes from advertisements. In fact, the purpose of the site was actually to counter the claims of certain internet get-money-quick schemes. By using the tactic of heading up its home page with precisely the tone-of-voice of its opposition, it risked coming across complete wrong at the first scan.

Establish trust

Remember you're operating in an environment of low trust, and you only have a short opportunity to get your message across. Imagine you're stopping people on the street. Don't oversell, set out the facts plainly and clearly. Be enthusiastic, but not pushy.

Real example

The following text came off a 'Contact me' page.

"Hello, and welcome to the contact page. It is on this page that you can email me via the form on the left, or you can use the means of contact below"

You could replace all that with:

a) A title somewhere saying "contact me"
b) A title next to the email box saying "email me"

Use Active voice

English grammar uses two 'voices': active and passive.

Active voice is when something does something (actively). Passive voice is when something is done to something. e.g. "The user clicks the 'About Us' link" is Active, whereas "The 'About Us' link is clicked by the user" is Passive.

Active good, Passive bad. This is because passive voice uses slightly more words than Active, and takes slightly more decoding.

e.g.

"Upload new contact information on the contact us page" is better than "New contact information can be uploaded on the contact us page"

Because:

  • It takes less mental decoding: it's more linear, it feels simpler
  • It's front-loading: "This is telling me about something I can do"
  • It's more specific: "It's telling me *I* can do something"
  • It keeps the verb/object order "upload new contact information" (like a good hyperlink!)
  • It's slightly shorter, and big isn't clever

ABOUT THE AUTHOR

Ben Hunt is a very successful professional web consultant who has designed internet and software solutions for all kinds of clients in Europe and the USA, including: the BBC, Freeserve, HM Customs & Excise, ProQuest, Morrisons, Which? Online, Sky, Reebok, Bechtel, France Telecom, J P Morgan, and Breathe.com.

subscribe to newsletter