Structure and layout
In print, a document forms a whole and the user is focused on the entire set of information. On the Web, you need to split documents into multiple hyperlinked pages as users want to jump to the specific content they are interested in.
Use hypertext links to move less important – or more detailed - material from top-level pages to secondary pages, thus making the primary pages even shorter.
Readers are more likely to read the main pages of your site than the whole site, so that is where you should present the basic information.
Organise your text so the hierarchy is no deeper than 3 levels.
Users can enter a site at any page and move between pages as they choose, so make every page independent. Explain its topic without assumptions about what page(s) the user has already seen.
Websites have the flexibility to provide content in a variety of sizes and to let visitors choose the amount of information that will satisfy them: a bite, snack or meal.
Bite - a heading with a message, written attractively so as to entice readers to the fuller text (the meal).
Snack - a concise summary (2 or 3 sentences), underneath the heading – more information than a bite but not the full meal.
Meal - the detailed content. This can be presented either on the same page as the heading and summary or linked to on another page
Unlike printed pages, the success of a site greatly depends on visual presentation.
While graphic design (use of colours, images, etc.) is an important factor, how you write text content (layout, style) has a big impact. Screens filled with large blocks of dense text or using inaccessible, incorrect or clumsy language, especially in prominent positions (headings, etc.) create a very bad impression on the Web.
Uncluttered screens with plenty of white space are most restful to the eye and visually more attractive. And they are more likely to convey your key information effectively by not drowning it in a sea of detail – so make your content short and concise.
Also try to vary paragraph lengths, so readers can tell them apart and thus find their way as the page scrolls down.
Readers rarely see a whole page together and different browsers can display different proportions of it. It is not easy to control the visual appearance of a text. First test the technology, to see what it can deliver to the user, and then adjust the writing accordingly.
Give prominence to key information
Print documents build logically from premise to conclusions. Web pages, however, should start with the most important information for readers. The remaining information should follow in descending order of importance.
Top of the page
- Ensure that a page’s top headingand text is used to convey this key information – in words that are clear and meaningful (and if possible also attention-grabbing).
- Don’t waste this vital space with less‑important information (welcome messages, background details, etc.). Such content (if it needs to exist at all) should be put at the bottom or linked to on another page.
Around 50% of all web readers don’t bother to even scroll down once - you have to catch their attention and convey your message in the first words they read, at the top of the page.
More people are viewing web pages on small screens (e.g. mobile phones, other handheld devices). So there is even more need to squeeze in your key message as succinctly and early as possible.
Which parts of the page do readers look at most?
Studies have shown that readers’ eyes usually rest first in the upper left of the page, then move slowly to the right. Only after scanning the top of the page for some time do their eyes explore further down.
The graphic below shows the zones of importance. While each site is different, you might look at your own website and see what content you have in which zones.
Source: The best of Eyetrack III - what we saw when we looked through their eyes, by Steve Outing and Laura Ruel
How people read web pages
People do not read web pages word by word. Instead, they scan them, running their eyes down a screen to pick out individual words and sentences, looking for material relevant to their needs.
Search engines read text similarly, algorithmically scanning for those words that describe the page's subject better than others. So they give more weight to words that are differentiated from the main text, e.g. bolded or in bulleted lists.
Break up text as much as possible to help your readers (and search engines) scan:
- Write small paragraphs (containing just one idea).
- Use several information areas, e.g. insert text in shaded boxes within text or alongside it.
- Insert plenty of meaningful sub-headings (short and eye catching).
Bulleted lists or tables (instead of long descriptive lists in text form).
Bold the key word(s) of each bullet, then separate the following supporting information with a dash (more visible onscreen than a colon).
- Highlight key words (link text, bold/italic or different colours).
- Add meaningful picture captions.
How to highlight
- Highlight only key information-carrying words (or actual keyword phrases).
- Highlight about three times as many words as you would when writing for print.
- Highlight words that differentiate your page from other pages and words indicating what a given paragraph is about.
Using tables (more visual and much less text)
Text version(84 words)
On 1 January 2006, three contribution classes were introduced for statutory accident and sickness insurance with different contribution levels for employers. Employers in the first contribution class for statutory accident and sickness insurance have to pay a contribution of 31.7%. Employers in the second contribution class have to pay a contribution of 31.11%. Employers who do not fall within the first or second contribution class belong to the third class for accident and sickness insurance and are required to pay a contribution of 30.98%.
Table version(30 words)
On 1 January 2006, three contribution classes were introduced for statutory accident and sickness insurance, with different contribution levels for employers.
Typographic practices to avoid
- Italic typefaces - for long passages of text (they are slower to read online).
- Underlining - if the term is not a link.
- Different character fonts on the same page.
Keep it consistent
Create a consistent look and feel, integrating images and text (see Design chapter).