Nine rules for writing on the web

Journalist Nils G. Indahl, June 2005

Case: A visitor on your website has made a search in a search engine. He clicks on the first option, meets an opening page, follows a link and is met with a wall-to-wall text. He browses the text, his eyes catch individual words, browses to the next link on the page.

This is the way most people progress when they search information. And those are the conditions that you will have to pay attention to, when you publish on the web.

  • Rule 1: Provide navigation
  • Rule 2: Use the news triangle
  • Rule 3: Target group
  • Rule 4: Short sections
  • Rule 5: Short texts
  • Rule 6: Headings
  • Rule 7: Headings and highlight text
  • Rule 8: Links are gateways
  • Rule 9: Think text and layout together

Two eyetracking surveys from Poynter Institute, the research centre of American News publishers from 2000 and 2004 suggest that there is a difference between reading news and visiting a company website. This article distinguishes between the two types of information.

There are rules that may ease communication from sender to receiver and help the receiver quickly decide whether a given text contains relevant information. If you are visiting a genuine news site, classical rules of journalism might well be what trick the interest of the reader.

Two strategies – text prepared for print or text optimized for fast overview

The sender faces two problems. Should he make a design and layout his texts to invite print and thus loose the readers who just like to skim through the text? Or should he please the impatient people and plan his text so that a fast overview during the search process is possible? And through doing so disregard the level of information in the text?

The designer may select a combination of the two by offering the user a fast overview of text contents with a subsequent opportunity to go into details.

Rule 1: Provide navigation

The reader needs to know where he is

A search-oriented reader expects to find a search tool the second he enters your website – or at least a site map of the most important functions on the website.

It is a good idea to tell the reader where he is when he navigates up and down on the site. One way of doing this is displaying a path in the browser window. If the path is hidden (because of publishing tool, frames etc.) the path can be shown on the site for instance in the form of a so-called breadcrumb path.

Tell the reader where to click for easy access to the opening page of the website.

Rule 2: Use the news triangle

Write the most important messages first and then offer detail

When the reader skims the text rather than reads it, you might want to write in a journalistic style rather than in the academic way.

Research shows that web users prefer simple and informal writing. By removing a sentence in each paragraph, the readability of the text is improved remarkably.

Traditional texts open with a paragraph that illustrates the problem and reaches out towards a conclusion. On the web, however, you use the news triangle offering the reader the opportunity to obtain an overview of the text from the very beginning. In journalist writing the conclusion comes first after which background information is offered.

Several studies show that readers pause and focus when they come across a remarkable heading or an unusual sentence. A user on a news sites dwells less than one second on a headline. Thus headlines need to be short, concise and powerful.

A widely used technique in news-oriented sites is to use blurbs to invite the reader to click on the main article. The blurb technique is widely applied in web newspapers.

The Eye-track III survey reveals that the heading of the section should not be larger than the text of the link. It seems that they eyes of the reader are adjusted to a certain font size. Thus is it difficult to focus when the text of the heading is much larger than the rest of the text.

Rule 3: Target group

You have two types of readers; emotional ones and technical ones

Some readers prefer stories with a human touch – journalists know that.

Let us start with the article about Bess, 34 years old and homeless. A good, early quote in the opening section; “I have lived with my parents for half a year and I am getting desperate,” says Bess. Next follow the hard facts about housing conditions in London, the lack of apartments for rent etc.

However, you need to be aware that one in three or four visitors to your website prefers the academic approach to writing. They want the overview first; “Lack of housing in Copenhagen is now so critical that 7000 people do not have an adequate home, reveals new research from the Institute of ….” After these facts people and quotes that invite emotions are mentioned.

Another widely used method would then be to offer access to a database where the reader can example house prices in London and Edinburgh. Once you have caught the interest of the reader, he will be interested in person-oriented stories in the subject.

On the web you have the opportunity to cater for both types: both the emotional reader who is captured by the human story and the technical reader who prefers the overview to come first.

Rule 4: Short sections

Short sections with headings to give the eye something to dwell on

By offering short sections with headings that sum up the contents, the reader can make a fast skim of the text. You might also highlight words in the text to allow the reader to make a fast browse of the main messages of the text.

If there is too much information, the reader is overwhelmed by the large, black text blocks.

Rule 5: Short texts

Even if you provide contents overview, see the visual expression of the length of the text in the scrollbar, it is still much more relevant to read a long text in a printed version than on the screen.

Surveys of observations of children and young people done by Rosemary Luckin, UniversityofSussex show that users do not like scrollbars, but prefer pages that take up only one screen.

One way is to combine a short summary of the text with a PDF-file of the entire text for download and print. However, to use this format the reader needs an Adobe plug-in. If the reader is unfamiliar with Acrobat, the reader may not appreciate this time-consuming functionality. If your readers are familiar users of the web, however, the PDF-format can be a big help towards ensuring typographically correct representation of a document.

When it comes to experienced news readers, research from the Poynter Institute suggests that these can easily accept to scroll when their attention has been caught in the lead text. News readers skim a lot of headings and lead texts but select to read only one in every three articles.

Rule 6: Headings

When a new page begins, the user will glance towards the middle of the screen and read the main body of text before headlines and navigation elements are studied.

Thus a text structured in short sections with many descriptive headings is much easier to read and offers a fast overview.

One-columns texts are better than more columns. By making the lead text bold, readability is increased remarkably.

Rule 7: Use many headings and highlight text

Use many headings and highlight text to give the teacher overview of the contents

Text should be “skimable”, and you can use headings, bold, highlighted texts, bullet points, large fonts and content lists to provide overview.

Headings should contain important extracts of the text and can be used to attract the reader’s attention. Simultaneously the reader has the opportunity to get an overview of the entire contents of the text by reading only headings and highlighted texts.

Of course you should not use all elements in one text but select relevant ones to use. The usability expert Jakob Nielsen has conducted a test in which he has rewritten information into bullet form and concludes that it enhances readability by 47%.

Rule 8: Links are gateways

Think of links as gateways out of your text and into the new tone.

Links can enrich the credibility of a text

A link out of a text needs to be connected with the text or document that it leads to so that the readers can immediately understand the connection between the side they came from and the side they arrive at.

A text about lions can contain a link to lion cubs. If the link points to a site of zoo, the user will expect that there are lion cubs in the garden. If this is not the case, confusion about the connection between the two sites arises.

There are two kinds of links.

  • Hyperlinks that refer to another spot in a document, to another page within your own site but stays within the same website and
  • Hyperlinks that point to other websites.

Both lead the user away from what he was doing, namely reading a text. And it puts the user in a dilemma – stay or follow the link?

At the same time links are central to the structure of the Internet. If there were no links, there would be no web.

A hypertext structure can offer a deeper understanding of the subject, but the use of hyperlinks may also confuse the user who is constantly faced with the choice of continue reading the present text or followinga link. Hyperlinks can offer more details to the subject and provide more information while graphical elements draw attention to themselves. Many users feek that links make the subject seem more thoroughly researched, which adds to the credibility of the text.

One way of handling hyperlinks and minimizing the confusion that the readers experience is to open each link in a new browser window. This helps the reader to keep attention to the primary text while at the same time offering the opportunity to surf to other websites.

A hyperlinked text gives us the opportunity to find bonus information about the subject as we read. Do many links affect readability? Or do they just enhance the reading experience? This is something that the author must pay attention to when creating a text with many hyperlinks in it.

Rule 9: Think text and layout together

Column width and the use of illustrations need to be designed together, and it is important to find illustrations that can mirror and illustrate the contents.

What is the relation between text and illustrations? Are target users primarily text readers, or is the layout the most important part? The internet is a visual media but at the same time you should not under-prioritize layout? How do pictures and graphics interrelate with the text?

Poynter Institute’s Eyetracking Survey from 2004 shows that picture captions are not read at all and that pictures in thumb nail size are ignored.

Surveys

  • Observations of children and young people by Rosemary Luckin, University of Sussex shows that users do not like scrollbars but prefer pages that fit exactly one screen.
  • The Eyetrack III Survey:
  • The previous Eyetrack Survey (from 2000):
  • Usability expert Jakob Nielsens’ test where he mentions information in bullet form: