![[University of Cambridge]](/slidy/ucamb.gif)
Writing for the web
University of Cambridge, February 2012
Hit the space bar for next slide, or use arrow keys to go back and forth between slides
Introduction
When producing or maintaining a website you need to know that producing web pages to encourage people to read them (often as a means to finding what they want) is a different skill to writing for paper. The difference is in:
- the design of the page
- the organization of information
- the words
This short presentation aims to help you with these three aspects.
Evidence about web page use
How people read web pages
While reading from a book is essentially a linear journey, reading a web page bears more relation to scanning through a magazine. Researchers have studied eye movements of people reading web pages and have concluded that the following pattern (known as the F or E pattern) is very common http://www.surl.org/usabilitynews/111/eyetracking.asp
From this and other related evidence several things become apparent:
- Readers scan the content rather than read it word-for-word.
- You must put important information at the top of the page and make it noticeable, as readers pay more attention to the top
- You should put the important words near the left hand end of the line and make them noticeable
- If you make something noticeable on any part of the page, people might look at it but won’t necessarily read it.
Evidence about web page use
Where people expect to find things on web pages
In another study (http://www.surl.org/usabilitynews/81/webobjects.asp), which was first undertaken in 2001 and repeated in 2006, researchers looked where on the page people expected to find common elements. The study confirmed that people expect:
- to find a link for ‘home' in the top left
- to find internal links or navigation on the left side, with some expectation of finding it at the top of the page
- to find ‘search' at the top, most likely on the right
- to find ‘about us' at the bottom in the centre
Design and look of the page
Producing a template - how it should look
Think of your home page differently from all your other pages as it doesn't have to fulfill the same functions.
For other pages:
- The top of a page needs to be branded but don't waste space
- The content needs to be introduced as near to the top as possible
- Don't overcrowd the page - add space after paragraphs and before headings
- Your text should read from a straight left margin, have regular spaces between words and some space between lines. Don't centre text or headings or justify text.
- Don't use capital, italics or underlines (except for links) and don't use coloured text (except for links).
Design and look of the page
Producing a template - how it should be structured
Most visitors will join your site at pages other than the home page. Design the page so there is clear and consistent navigation both within the current section and to access the home page and other sections between the current location and the home page. There are a number of tried and tested methods to provide this:
- global navigation to home, search and help information to appear on every page
- bread crumb navigation on every page to step you up the tree of information towards the home page
- tabbed navigation if your site or section is clearly separated into sub-sections, with visual cue to show which section you are in
- left hand navigation to work through the parts of the current information, with visual cue to show which section you are in. Child navigation (a sub list) will work well, but more than one level of sub-lists in the left hand navigation gets to be confusing. Don't put same-page links into the left hand navigation.
- table of contents list at the top of a page (same-page links) to navigate through a long page (may have ‘back to top' links within the text
Design and look of the page
Type size and typeface
In your web design, you should specify a selection of similar typefaces that are easy to read – headings can be in a different typeface from the text to make one more compact and one easier to read. (The reason you need to specify a selection is that if a computer doesn't have the first, it will select the next, until one is found. If you don't specify any, the browser will use its default.) On any page, do not use any more than two closely related typefaces or your pages will look messy.
In the University screen and print templates the headings are specified as {font-family: Arial, Helvetica, sans-serif;} and the text as {font-family: Verdana, Arial, Helvetica, sans-serif;}. Verdana is a screen version of Arial - it is wider and bulkier and some of the potentially confusing letters (like capital I) have been tweaked, as shown by comparing them at http://www.typetester.org/
Type faces are either serif or sans serif, which amount to them being decorated and made of strokes of varying thicknesses, or not. Sans serif typefaces are easier to read on screen but may not be so easy on paper – Trebuchet is a very good print typeface (known as sans serif humanist) as it has some adornment to help the eye follow words. There are other humanist typefaces, such as Gill sans and Myriad, which tread the line between the traditional classifications.
Organising information
Organising the site
The most straightforward way of organising a set of pages into a structure is to start with a flow diagram, outline on a flow chart or a mindmap. Use the opportunities for navigation to subdivide your information, for instance, if the content falls into four or five clear sections, use these for a tabbed navigation. After this you can use the left hand navigation for subdividing information within each section – see the Undergraduate Prospectus for an example and the O2 shop for another.
Organising information
Organising pages
On your individual web pages the content you write sits within a nest of headings that give it a context – the reader of the page could arrive there from a search engine rather than through your website front door, so needs to know how the page is related to other content. When starting a new page or set of pages, create an outline of the information with the headings, and try to make headings action phrases if possible.
The finished page must have some of the following (marked as *) and may have all of them:
- a title* (in html terms – the words that sit in the top of the window in the web page)
- a section heading
- h1 heading for the content*, reflected in the left hand navigation if these is some
- a summary of what the section or page contains or maybe a table of contents list to give a synopsis for a long page etc.
- h2, h3 headings as part of the content*, if needed
Organising information
Using paragraphs, lists and tables
Always chunk your information by using paragraphs (with one point per paragraph) and lists. Make your point and then explain it. If you have a paragraph with more than one point, make it into a list. In this way you will make it easy for readers to grasp the salient points you are making.
- Use bulleted lists for general information.
- Consider using a styled bullet if your page design would benefit.
- Use numbered list for steps in a procedure and not otherwise (except for a cross-referenced document)
- Keep entries short and consider using strong/bold type to highlight key words.
- If entries are longer, adjust the spacing between list items to ensure they read well.
Tables
- If you need to present information in tables, keep them a straightforward as possible.
- Don't centre text or add lots of rules unless it is a data table.
- Consider putting a tint background between alternating lines as it help people to track along lines when reading.
Choosing words
As the evidence suggests, people reading web pages do not thoroughly read them. When they scan a page, they pay attention only to information at the top and to words that catch their eye, so the words you use need to work hard for their places.
- Write with an active voice as much as you can and be consistent in the voice you use.
- Use plain language whenever possible and keep sentences short.
- Put important information first
- Use strong/bold for key words that you want to stand out.
- Ensure your link text is effective – don't use ‘click here' as it gives no clues where the reader is going
- To ensure people read the text properly, group external links in a separate section, at the bottom or the side rather than spread them through the text
- At the entry points to your web pages aim for easy communication to a range of audiences but choose words carefully
- Check your pages for spelling and grammar
- If you are writing specialist text for a generalist audience, include a glossary for specialized vocabulary, e.g., medical or legal terminology, and provide definitions in simpler language
- Add a date to your pages
Choosing words
Pages for specialist audiences
- Within structured information for specific audiences more complex language is fine but avoid over complexity
- Provide an abstract or executive summary if a page is long or complex (or both)
- Avoid unnecessary jargon and slang, which can increase the user's cognitive load
- Provide long or complex articles as pdfs so people can download and print them. You might want to do this as well as offer an html version that has been broken into sections. Always indicate when a link is to a pdf.
Choosing words
Read it from a users point of view
When you have a first draft of your page or set of pages, test it out. It's preferable to find someone who will look at it for you, or put yourself in a reader's shoes, then go through the following questions:
- Who's providing this page?
- What's the page about and why would I want to use it?
- Does it provide what I need?
- Where do I find out more?
Helping your page be found
When a search engine spider looks at a web page it classifies some of the words as being more important than others. The most important words are:
- in the title (keep succinct – 60-70 characters at most)
- in a metadata description or keywords These can appear in the ‘head' part of a web page, as shown below:
<meta name="description" content="Official site with links to, and information about, the departments, faculties, colleges, people, and organizations that make up the University of Cambridge." />
<meta name="keywords" content="Cambridge, Cam, Cantab" />
- in the h1 heading
- in the url
- in "alt" tags
Words that occur in these places are weighted (given more importance) by up to 10 times, compared with a word in the text of the page. In addition to this, the title is what will by default appear when people make a bookmark to the page, and the description is what will appear in the search engine results page. When you are writing titles and headings, spend a little more time getting them right.
Website examples
Looking at computing for education
These example websites offer slightly different approaches to presenting information.
Official information sites
Reading
Books
- Letting Go of the Words: Writing web content that works. Janice (Ginny) Redish. Morgan Kaufman. ISBN-13: 978-0-12-369486-7
- Chambers desktop guides; Writing for the web. Susannah Ross. Chambers. ISBN: 978-0-550-10324-6
- Don't make me think. Steve Krug. New Riders Publishing. ISBN: 9780321344755 (Companion website at http://www.sensible.com/)
Websites
Writing for the web