Download How people read websites The main reason we need to write

How people read websites
The main reason we need to write differently for websites is very simple. People read
what is on the screen differently to reading on paper.






A computer screen has a much lower resolution than a printed document, so
the text and images are not as sharp.
On paper, the reader looks at solid ink on paper. On a screen, they look at
shining light. This makes screen documents much harder to read, particularly
for a long period of continuous reading.
Visitors to websites are impatient. They are likely to move on to a different site
if they can't immediately find what they want. They will not read the screen
from top to bottom but will rapidly scan the page, looking for something to
catch the eye. This is why clear design and language are even more
important than for a printed document.
The key difference between writing for the web and writing for print is that web
writing needs to be shorter. In general, try to write 50% less text than you
would for a paper document. Reading from computer screens is around 25%
slower than reading from paper.
Don't be tempted to put a paper document onto your website without adapting
it – the results are rarely satisfactory.
Remember that not everyone will come to your site through the Home page.
They could be following a link to a particular page from a search engine. So
you need to assume that every page could be the first on the website that the
reader sees.
It is always important to consider your audience when you are writing. You are likely
to have a wide range of readers on your website and you should make sure that the
language you use is not exclusive.
Even if your content is specialised or technical, you should take care to avoid jargon
and provide glossaries and explanations wherever possible.
Most importantly, you should be as concise as possible.





Cut the words down to a minimum – about half the number you would use in a
written document.
Break up text into short blocks, and use plenty of white space.
Put the most important information first. Visitors to websites will read your
pages much like they would a newspaper – skipping from paragraph to
paragraph, deciding whether the information is relevant to them.
Keep the heading style consistent throughout the website, particularly if you
use main and sub headings.
Use bulleted lists wherever possible.
Tips for clearer writing
Here are some suggestions, not rules. Use them flexibly.





Decide what you need to say
Make a brief note of the key points
Think about your audience and who you are writing for
Keep to the essentials
Think carefully how to present the information







Use everyday, conversational language
Use 'we' and 'you', rather than 'the company' and 'the customer'
Read your text out loud
Get to the point quickly
Keep to an average sentence length of 15 to 20 words
Only use jargon if you are sure your readers will understand it
Avoid legalistic or pompous words

Avoid abbreviations and Latin
Example: Use 'and so on' instead of 'etc'

Use direct commands when writing instructions
Example: 'Fit the washer to the tap' is more direct than 'The washer should be fitted
to the tap'

Use the active voice of the verb rather than the passive voice
Example: 'We cannot process your order' rather than 'Your order cannot be
processed'




Use verbs rather than nouns
Always proofread and revise everything you write
Whenever possible, test the document out on some of the intended readers
Use everyday English
You might find our A to Z list of alternative words useful when you are writing. It
contains a list of words which you should avoid, and gives you alternative words to
use.
Prefer the active voice of a verb to the passive voice, unless you have a good reason
to use the passive. Active verbs keep sentences short and make writing more
personal, lively and direct. Using too many passive verbs makes writing cold,
impersonal, bureaucratic, long-winded and confusing.
Example of an
active verb
The engineers
>>
wrote
>>
the safety rules.
>>
by the engineers
The agent, or 'doer', comes in front of the verb
Example of a
passive verb
The safety rules
>>
were written
The agent, if there is one, comes behind the verb and is introduced by the word 'by'.
Passive verbs nearly always have two parts:
Part of the verb 'to
be'
>>
and a past participle
Is, has been, was,
were
>>
made, consulted, decided
But passive verbs do have their uses:


When the agent has already been stated, is obvious, unimportant or unknown
When you want to shift attention onto the person or thing who is acted upon
For example in a headline: Star's damages are cut in half












When you want to spread responsibility or avoid blaming someone
When the active voice might sound hostile
Example: 'The policy will be cancelled unless …' is less hostile than 'We will
cancel the policy unless …'
Sentences
Think of a sentence as a group of words that can stand alone as a statement,
question or command. Normally a sentence has at least one verb (or 'doing'
word).
Reduce sentences to the essentials. Using big words and long sentences
does not necessarily add credibility to what you are saying. In fact, recent
surveys show that readers are more likely to trust your content if it is written
concisely and clearly.
Avoid peppering your sentences with 'at the present time' and 'due to the fact
that', instead of using 'now' and 'because'.
You might find our A to Z of alternative words guide useful (to the right of your
screen).
Aim to keep to one point in each sentence. Long, complicated sentences
often are ambiguous and confuse the reader. Short, well-constructed
sentences are easy to understand.
Paragraphs
'Front load' your paragraphs by putting the most important information first.
Typically your site visitors will 'skip read' your pages, choosing the information
that interests them the most. This technique will also help attract visitors from
search engines, which usually display the first line or two of a paragraph in a
list of relevant results.
If these lines do not contain key information, you may lose a visitor. People
using screen readers also need to know quickly whether a particular
paragraph is relevant. Good websites use space to break up the main text into
manageable chunks.
Although in a printed document you would avoid one-sentence paragraphs,
they are acceptable on websites.
Using lists
Using a list, or bullet points, is one of the best ways to break down complex
information into manageable chunks. There are different ways to punctuate a list.
A list in which each point is a complete sentence.




The speaker made three points.
The rain forests are being destroyed at a tremendous speed.
Hundreds of species are disappearing for ever.
The greed of developers and the pressure for land may deal mankind a fatal
blow.
A list which is a continuous sentence.
If you are the last person to leave the office, please make sure that you:



turn out all the lights;
lock the outside door; and
hand the key in at the security lodge.
This applies even if the list is made up of very short points.
When you come to sit the examination please bring with you:




a pen;
a pencil;
a ruler; and
an A4 writing pad.
Some people would prefer not to punctuate these two examples. This is not strictly
correct, but is becoming more common – especially on websites. However you
decide to punctuate these kinds of list, the most important thing is to be consistent.
Punctuation
The use of punctuation on web pages is a matter for debate. There are two points of
view.
1. Some people argue that you should use as little punctuation as possible,
while still making sure your writing is grammatically sound.
This is because
o too much punctuation looks fussy; and
o the reduced legibility of writing on a screen makes it much harder to
distinguish between marks such as commas and full stops, and
semicolons and colons.
2. Other people have pointed out that some punctuation is helpful to screen
readers. The punctuation tells the software where to pause in a sentence and
helps it give appropriate emphasis to the various parts of a sentence.
So you need to strike a balance. Our advice is to use the minimum punctuation
possible, without sacrificing clarity. If you are writing a lot of lengthy sentences that
need many commas, semicolons and colons, split them into shorter sentences that
will need less punctuation.
Design and layout
We are not going to go into a lot of detail on designing websites. We expect that
most people on this course will work in organisations that have somebody else
taking care of the technical side of the site. But the following points may be worth
checking on your site and raising with your web design team if necessary. All these
points help remove barriers between your writing and the reader.








The site should be organised in a logical way so that it makes sense to the
visitor. Some organisations make the mistake of dividing their site to reflect
their company’s internal structure – but this might not be familiar to a visitor.
You should provide visitors with several tools to find information other than
through the site navigation menus, such as a ‘ site map’ an A-Z index of
topics, or a search engine.
A clear site should be usable on all screen sizes and settings. If not, readers
may have to scroll horizontally as they read down the page, which is
something that most users will not be prepared to do.
A textured background on your site may appear attractive, but it makes
reading a lot harder, so a plain background is better. Black text on a white
background is usually the clearest combination, but some people think that a
very pale coloured background (such as yellow) helps to reduce the glare on
the screen.
Colour can make pages more attractive, but some designers overdo things.
You can achieve a very effective design with just black, white and one or two
other colours. Use a consistent colour scheme throughout the site for a
professional look.
Don't rely on colour for navigation. Colours don’t always appear as you
intended on every computer.
Be consistent throughout all pages, so that recurring features such as
navigation bars (menus), the main content of a page and any advertising
appear in the same position on each page.
Whether to use ‘ bells and whistles’ such as elaborate animations and
sound effects depends on the site content. For example, a graphic design
studios site is far more suitable for animation than a financial news site.
Visitors should always be able to skip past any animation and get to the
information they need.
Text
Text is the most important element of a website to get right. Yet many sites have a
problem with legibility. No matter how good your site looks, if people cannot read and
understand the content, it will be a failure.











Use a clean, commonly available font such as Verdana.
Use relative sizing percentages, rather than point size.
Make sure text can be resized by the user.
Use black text on a white background wherever possible.
Don't let fussy design overshadow the main text.
Avoid using images as text.
Don't use block capitals or italics, and do not underline text except for links.
If you have to use coloured text, make sure there is sufficient contrast with
any background elements.
Use consistent styling for different text elements (headings and so on).
Don't use blinking or moving text.
Use emphasis sparingly.
'Alt' tags and images






Whenever you include a picture on a website, you should remember to
include an alt tag with the picture. This is a piece of text that describes the
contents of the picture. It appears as a strap line when you hover your mouse
pointer over a picture, or it appears in place of the picture if the computer (or
other browsing device) is set to not download graphics. ‘ Alt’ is short for
alternative.
Alt tags are invaluable to people using screen readers. They allow visually
impaired people to find out what the picture shows because the screen reader
can be set to read out the tag.
The alt tag should provide a brief and concise description of the picture. It
should also give any information that is in the picture, but is not in the
accompanying text.
Current W3C guidelines say that it is preferable to use a ‘blank’ alt tag for
decorative images (alt="") as a screen reader will ignore them. Someone
using a screen reader will only want to hear alt tags that are informative.
The right wording to use will often depend on the accompanying text as well
as on the picture itself. Keep the tag to less than 100 characters, including
spaces. If the tag is too long, it will be unwieldy to read and may not be
displayed in full on the screen.
Some images, such as pie charts or bar charts, contain so much information
that you can't always convey it all in the short space of an alt tag. If this is the
case, simply provide an alt tag that is a brief explanation of what the image is
(such as ‘ "A pie chart showing the market share of our company’ "). Then,
next to the image, include a link to a full text-only description (such as a list of
each company's market share figures). This sort of link is called a longdesc’
link, which is short for long description.
The World Wide Web Consortium (W3C) offers the following guidance about links.
When calling the user to action, use brief but meaningful link text that:




provides some information when read out of context;
explains what the link offers;
doesn't talk about the mechanics of the site; and
is not a verb phrase.
For instance:
Tell me more about Plain English Campaign
not
Tell me more about Plain English Campaign
Links and navigation (continued)
Always avoid using 'click here'. Visitors using screen readers to use your site will
sometimes merely 'read' link information. 'Click here' is not self-explanatory and is
therefore difficult to use. Using the word 'click' suggest that the user will have a
pointing device which is not necessarily the case.
Some web professionals argue that there are occasions where you will prefer to use
a verb phrase (for example, Contact Us) to improve fluency. The important thing is
that your link text explains what the visitor can do if they follow the link.
Here are some other things to remember about links.







Check that a page doesn't have two links with the same wording unless they
point to the same locations. Otherwise anyone who gets a list of links through
a screen reader will get very confused.
You can use links to increase the interaction a user has with a website. For
example, internal links (links within the text that relate to other areas of the
site) allow visitors to jump across to the content they want without having to
look through the menus. It can also be useful to have page navigation links
(such as Back to top or Skip Navigation) to help visitors get around the
website more effectively.
Try to keep the text used for a link as short as possible while still giving an
accurate description of where it is leading. This avoids having long stretches
of underlining, which can make reading much harder.
Don't be afraid to rewrite a sentence if you need to make the link more
effective. But make sure the sentence still flows naturally.
Try to avoid having more than a couple of links in the same paragraph as this
can be very distracting.
Make sure the formatting of your links is consistent throughout the site so that
visitors can easily see them. Whether you use colour or underlining to define
your links, make sure that they look different to your normal text. Try not to
use several different link styles on one page.
In general, links should open in the same browser window as the link text. It is
quite common to use a new window for links to external sites, but it is better
not to do so for the following reasons.
Visitors expect the link to open in the same window, so will be
confused when it doesn't.
o The Back button is reset, so users have to switch over to the original
window containing your site.
o Visitors can choose whether to open links in a new window, so do not
force them to do so.
o If the content and presentation of your site is effective, visitors will
return to your site once they have visited the external site.
External links
Increasingly, web users are using 'tabbed browsers' – internet browsers such
as Firefox and Camino which allow the user to choose to have several
different websites open in the same browser window by using tabs to jump
between them. However, until use of these browsers is more widespread, we
suggest you avoid using new windows for links.
If for some reason you feel you have to use a new window for an external link,
always make it clear to the user.
For example:
Cambridgeshire County Council homepage (Opens in new window)
Clearly label links that go to anything other than a standard web page (such
as a Microsoft Word or Adobe Acrobat document), as these will take longer to
open than an ordinary link to a web page. If the link points to a file, indicate
how big the file will be to give users an idea of how long it will take to
download.
For example:
o









Manager's Report (Acrobat PDF 886kb)
Use links for basic navigation tasks ('Back', 'Back to top of page' and so on).
They help visitors look around your site more easily as they don't have to
scroll or press the back button as often.
Forms
There are two ways you can ask readers to fill in forms on a website. One is to get
them to print off the form, fill it in and post it back to you. For this, the following
general principles of good form design are generally sufficient.









Leave enough space for the answers. Don't forget that some people will have
longer names than yours.
Put the questions in a logical order. For example, people expect to be asked
for all their contact details (name, address, phone number) in the same place.
When people are asked for their address, they automatically include the
postcode. So have one space for 'Address and postcode' rather than a
separate one for 'Postcode'.
Follow a consistent pattern. Where possible, try to arrange each page so that
questions, guidance notes and space for answers always appear in the same
position.
Make your numbering system as straightforward and logical as possible, and
avoid Roman numerals.
Put the question as close as possible to the space for the answer, so it’s
obvious where the answer goes. A good technique is to use a lightly-tinted
background for the page, with reversed-out (white) boxes that contain both
the question and the space for the answer.
With questions that have a 'yes' or 'no' answer, use tick boxes rather than
'yes/no – circle the right answer'.
Test your form as much as possible. Ask a group of people to try filling in a
draft of your form, noting where they struggle.
Don't forget that if you are expecting people to print out a form, not everyone
will have a colour printer, so the form must work with black ink on white paper.
If you are designing a form so that it can be filled in online, you need to bear in mind
these additional points.





Try to keep the number of fields (the spaces where the information goes) to a
minimum. Moving between fields needs constant use of the mouse to
reposition the cursor, which some people find difficult. So, one field for 'Full
name' is better than two, one for 'First name' and one for 'Last name'.
The other way you can make life easier for people is to set what is known as
the 'tab order' for the fields. This means that using the tab key automatically
shifts the cursor to the next form field, so eliminating the need for multiple
mouse movements.
If there are any guidance notes on filling in the form, build in links throughout
the form that will bring up the relevant guidance. Don't put all the guidance
notes at the end of the form.
Can the form be partly filled in and then returned to later? People may not
have all the information to hand that they need to fill in the form, and it's very
frustrating to have to come back later and start from the beginning.
Any information you collect through an online form will probably be considered
'personal data' so don't forget to include details of your privacy policy (or a link
to those details). You are now required by law to provide 'opt-out' boxes if you







plan to contact visitors about your other products, or related products from
other organisations.
Try to make sure the person filling in the form gets clear confirmation that they
have successfully sent the information to you. Make it clear whether they will
get a response to the form and, if so, when.
Make it clear which format you are using for any dates in the form. Give an
example if needed.
Make it clear if your system needs numbers such as phone numbers or credit
card numbers to be broken down in a particular way (such as one continuous
string of numbers or blocks of four numbers with spaces in between).
Accessibility
The chances are that you are taking this course because you are responsible
for writing copy for your organisation’s website or intranet. You will probably
have no involvement with the programming and build of your site. However, it
is useful to be aware of the basic problems surrounding website accessibility.
What is an accessible website?
A website that is accessible will provide the same level of experience to
everyone who visits it, regardless of their level of computing ability, or what
type of browser they use. Users with a disability may be using a particular
type of computer to access your site, but they should have access to the
same content as other users. A 2003 survey for the Office of the e-Envoy ( a
UK government body) found that 78% of sites needed to be redesigned to
make them fully accessible.
Why should our site be accessible?

The Equality Act 2010 (replaces The Disability Discrimination Act 1995).
This Act requires website managers to consider whether their website content
is available (accessible) to all users and to anticipate their users needs.
Your website should conform to the following standards:
British Standards Institute - BS 8878: 2010 Web accessibility code of practice
These standards are mainly concerned with the process that needs to be
followed to ensure that the website is accessible. It is designed to introduce
non-technical professionals to the issues involved.

Financial
If your website has a commercial element, then any barriers to access may
lose you customers. Estimates vary, but about 10% of web users have a
disability that affects how they access web sites. Helping more customers
access your site helps you to access more customers.

Practical
Most of the measures you can take to make your site accessible will help all
visitors, not just those with disabilities. And the measures that are only
relevant to people with disabilities will usually not be noticeable to other
visitors. A site designed and produced with accessibility in mind will often
have less needless complexity, making it easier to maintain and update. An
accessible site may even get a better ranking on some of the major search
engines.
What are the main barriers to accessibility?
Accessibility isn’t simply about visual impairment. It is also to do with any physical
disability that may cause a user difficulty in accessing a website. This could include
hearing impairment, dyslexia, physical immobility and problems with manual
dexterity leading to difficulties typing and using a mouse.
There are many things that cause accessibility problems. Surveys have shown that
the most common are:








a lack of adequate text descriptions for graphics
pages that rely on JavaScript and other scripting languages to work properly
cluttered pages
not using plain English
poor navigation
using pop-up windows
animations that can’t be turned off
poor colour contrast between background and text
Make sure you are aware of these problem areas when preparing content for your
website. Remember to use the various techniques (plain English, alt tags, selfexplanatory text links, front loading paragraphs and so on) that this course has
covered.
You can get more information about accessibility from the World Wide Web
Consortium (W3C) website.
Useful websites
We hope you have found this course useful. Below is a list of links to websites which
we recommend you take a look at.

The site of the World Wide Web Consortium, the closest thing to a governing
body for the web. It publishes guidelines on all aspects of website design,
including accessibility.
http://www.w3c.org

A site to show how your site will appear in a text-only browser.
http://www.delorie.com/web/lynxview.html

A site to show how your site will appear to people with different types of
colour-blindness.
http://www.vischeck.com

The site of Jakob Nielsen, a leading expert on making websites easier to use.
http://www.useit.com

The site of Vincent Flanders, who highlights and criticises poorly-designed
websites, the addresses of which are often sent in to him by readers.
http://www.webpagesthatsuck.com

A site for testing how your text will look on screen, using different fonts, sizes
and colours.
http://typetester.maratz.com

This useful tool allows you to check how your pages will look at different
screen sizes, colour resolutions, and in different browsers. It can also check
your pages for accessibility. Works with Internet Explorer.
http://en.wikipedia.org/wiki/IE_Developer_Toolbar

A tool that allows you to edit and update websites directly in your browser.
http://www.winutility.com/?from=prog_qeb

The RNIB website offering useful links and resources about accessibility and
other guidelines for websites.
RNIB guide to designing and building accessible websites

Plain English Campaigns accreditation scheme for clearly written and
designed websites.
http://www.plainenglish.co.uk/crystal-mark/internet-crystal-mark.html