Writing for the web

Martin Bazley

Manchester23 March 2009

Intro: Martin Bazley• Consultancy / websites / training /

user testing ICT4Learning.com• Chair of E-Learning Group for

Museums, Libraries and Archives link

Previously:

• E-Learning Officer, MLA South East (3yrs)

• Science Museum, London, Internet Projects

Why do I need to learn how to write for the web?

The web is different

People use the web differently…

… from the way they use books, object labels, magazines, newspapers,

information screens, etc

For most people the web is a

predominantly visual

medium

We are all different and some people like to

read all the text on a web page before

deciding what to do next, even though a lot of

it might be pretty redundant but most people – or at least most regular users of

the web – scan (as opposed to reading

through them in detail) the web pages they are using, or at least the

ones where they are still trying to work out

where to go next

• Implications of the F Pattern• The F pattern's implications for Web

design are clear and show the importance of following the guidelines for writing for the Web instead of repurposing print content:

• Users won't read your text thoroughly word-by-word. Exhaustive reading is rare, especially when browsing. Yes, some people will read more, but most won't.

• The first two paragraphs must state the most important information. There's some hope that users will actually read this material – though they'll probably read more of the first paragraph than the second.

• Start subheadings, paragraphs, and bullet points with information-carrying words that users will notice when scanning down the left side of your content in the final stem of their F-behaviour. They'll read the third word on a line much less often than the first two words.

If they have to work at it for example if they

cannot see what they are looking for, or if it doesn’t make sense

to them at first glance then most people – or at least many

people who do a lot of searching or browsing on the web just

decide that this particular site is not for them, and anyway they

have a long list of other search results or ideas to try and so they go elsewhere

Exercise: Make this web page Exercise: Make this web page betterbetter

http://www.ohs.org/education/oregonhistory/index.cfm

About website structure, About website structure, ways people use the web and ways people use the web and implications for writing for the implications for writing for the

webweb

Certain types of websites impose linear user journeys:

TheTrainline.comCinema ticket bookings

Self assessment tax return online

In most websites, although there are some linear elements …

http://www.spinningtheweb.org.uk/journey.php?Title=Quarry+Bank+Mill+learning+journey&step=4&theme=places

… people like to have other pathways available to them…

… and most journeys are very non-linear

Visual clues and context influence people’s responses

Also, most people reach your website via Google

Only 5% arrive at your website on the home page

Most of the other 95% may not have had your site in mind when searching

30% of them go to home page to ‘try and work out what this site is about’

So each page on the site must quickly: (a)engage users and (b)give sense of what site is about –

otherwise most will leave

‘Writing for the web’ is not just about text…

… but also choosing the right images… layouts

… graphical look and feel…website structure

etc etc

Key point of paragraph/

section

Image clearly related to text

Broken into short paras

Short video guides

• http://www.mediabistro.com/guidelines-for-writing-online-12-ondemandvideo.html (sample)

• http://www.youtube.com/watch?v=AoU2yANNxRs&eurl=http://inside.123-reg.co.uk/archives/video-writing-your-web-copy

• http://www.youtube.com/watch?v=2C3lDeY6uWc&feature=related (good advice but v slow)

• Writing web headlines http://www.youtube.com/watch?v=zBg7dJIfHM0

Short writing exercisesShort writing exercises

Decide where in the site this will be

Add a title Short, clear summary Write a few

sentences. Add subheading

Few more sentences

Banner

TitleAdd a summary?

Each ‘promo’ needs Title Image?One-line descn

Links to related points elsewhere in this site

Where in the site is this?

Some examples

– http://www.nhm.ac.uk/nature-online/british-natural-history/index.html

– http://www.manchestergalleries.org/the-collections/highlights-of-the-collection/narrativeobject.php?irn=876

– www.seayourhistory.org.uk/content/view/39/77/

– http://www.portsmouth.gov.uk/business/2781.html

Resources for use on whiteboards - examples

• Britons at War• Wartime in Bedford • http://www.movinghere.org.uk/

schools/default.htm • www.mylearning.org/overview.asp?

journeyid=409 • www.mylearning.org/overview.asp?

journeyid=441

Examples

• http://collections.lancsmuseums.gov.uk/narratives/

• Peoples Hist http://82.71.77.169/introcollections.htm

• http://www.tameside.gov.uk/archives • http://www.sthelens.gov.uk/category.do?

parent=100009&itemid=200070 • http://www.lapworth.bham.ac.uk/

visiting.htm

Using whiteboards

• http://www.teachers.tv/ict/whiteboardtips

• http://smarttech.com/trainingcenter/tutorials.asp#

• http://www.prometheanplanet.com

Resources for use on whiteboards - examples

• Ford Madox Brown MAG• Tate Tools• Museum Network Artworks• Museum Network Myths• National Portrait Gallery Mary

Seacole• National Gallery• Museum of London Fire of London

Website users• Who uses your website?

• Why would they want to use it?

• How would they find it?

• What do they get out of it?

• What do they dislike about it?

Website users• ‘User A’ may like the depth of material

available in their preferred section…• …but dislike the time it takes to

download the two high quality images in it

• ‘User B’ may find the amount of text off-putting…

• …but be drawn in nevertheless by the impact of the two images

• How do you get it right for everyone?

Website users• ‘User X’ is only on this site because

she saw the story about Amy Winehouse…

• …and is messaging her friends about it while trying to find out more

• ‘User Y’ is drafting a letter of complaint about the website to his M.P. at this very moment…

• How do you get it right for everyone?

How do you get it right for everyone?

• Answer:• You can’t get it right for everyone.

• You have to make choices, and stick to them:

• Who is it for? • What..• How…

Who for what for ...• Who for? (audience)

Need to be clear from start• mum + 2 children looking for something to do

this weekend• teachers of yr5/6 in local area with whiteboards• men interested in gadgets

Who for what for ...• What ‘real-world’ outcomes?

What will they do as a result of using the site?

• make a donation• plan a visit to a museum• buy a train ticket• think differently about learning disability

Who for what for ...• How will they use it? (user experience)

What do they actually do on the site? • browse and read articles

• working alone or in pairs? (learning resources)• lean forward or sit back?• Browsing, following, searching…

• Also Where, When and Why?

Who for what for ...• Website appraisal

– For each example note first impressions

•Who is it for?•What does it offer them?•How will they use it?

Websites for different audiences

The following tips are based on • numerous evaluation sessions• numerous user testing sessions• talking to other people who use

websites• talking to other people who make

websites

‘General users’There is no such thing as a general

user

Are you a general user?

Adults/families with general interest

• What does the site tell me at a glance?

• genuine enthusiasts = interested whatever the website looks like, and will spend some time looking around it or phone up for more information if required.

Adults/families with general interest

• But most will not bother unless something engages them within a few seconds

• The questions people might like answered within a few seconds of arriving on a museum site probably include:

Adults/families with general interest

• Where is it? Further down the home page it says ‘alongside Middle Wallop airfield’ but I have no idea where that is.

• a schematic map on every page, or at least on the home page and visit info, would really help in attracting visitors who don’t know the area

Adults/families with general interest

• What’s the rough cost and roughly how long might I/we want to spend there?This would give me an idea of whether to view it as a place to pop into on the way somewhere or combine it with another attraction; or whether it requires more serious investment of time or money

Adults/families with general interest

• What kind of experience will I get?I know there will be ‘displays’ – it is a museum!

• but will there be people around to help bring the place alive for me, my spouse, my children or friends?

• – or are there events, or things to do like dressing up in a pilot’s uniform, or games to play, etc?

Websites for schools‘Serve the National Curriculum’ or ‘extend or

enhance’?‘enhance’ sounds good but most teachers want:

1.curriculum specific – by all means cross-curricular but with one scheme of work or topic as ‘headline’ (think ‘product byline’)

2.ready-to-use – teachers may want to adapt to their own situation (esp second time round), but most will not have time – offer at least one ready to use version

3.minimal preparation and with time commitment (preparation time and class time) clearly specified

4.flexible/adaptable/extensible where possible

Foundation and KS1 (3-7yrs)

Production of materials for this age range is particularly tricky:

• aim at teachers not children, so…• good bank of images, videos or other

mainly visual assets • think of interactive whiteboards

Key Stage 2 (7 to 11 years old)

• keep no of words on each page to a minimum, say 50 in total

• illustrate key ideas visually as well as verbally and use audio if possible

• do not assume that the teacher can be over their shoulder at all points – so keep the instructions and processes simple

• try to use language, images, ideas, and settings that will appeal to the target audience

Key Stage 3 (11 to 14 years old)

• For KS2 a cross-curricular approach is OK (for example they may use the same site for Geography and Science) but:

• At KS3 cater for a single subject (and scheme of work)

• (Can offer suggestions for cross-curricular working, but remember generally each teacher teachers only one subject each.)

‘Lifelong learners’

• for (non-specialist) interest level think of 12 yr olds

• Identify a particular audience with specific interests/motivations for using your site

• then focus on constraints to allow successful design to proceed. (In a formal learning setting constraints often implicit in the course, physical set up etc.)

Specialist researchers

• Fact-oriented, less graphics and design, more text and specifically relevant images, with good search facility

• Examples of specialist researchers: – HE students and staff– experts or enthusiasts in this subject

area

Accessibility tipswww.w3.org/WAI/References/QuickTips/Overview.php • Images & animations: Use the alt attribute to describe

the function of each visual. • Image maps. Use the client-side map and

text for hotspots. • Multimedia. Provide captioning and transcripts of audio

, and descriptions of video. • Hypertext links. Use text that makes sense when read

out of context. For example, avoid "click here." • Frames. Use the noframes element and meaningful

titles. Etc, etc. Also:

http://diveintoaccessibility.org • Illustrates real life implications e.g. Javascript

AccessibilityAccessibility A website can achieve AAA level

accessibility (www.w3.org/WAI/ ) based on automated tests, and yet be almost unusable by many users

Improving general usability for a wide range of user types yields the best results.

City University audit (2005):

4 out of 8 technical checkpoints that cause the majority of web access problems for disabled users relate to writing and laying out textual content.

To improve accessibility:1. divide blocks of information into

more manageable units2. provide a text equivalent for every

non-text element3. clearly identify the target of each

link4. use the clearest and simplest

language appropriate for the site’s content

(from enableUK – accessibility specialist)

E-NewslettersE-Newsletters

Blogs can serve as marketing toolsBlogs can serve as marketing tools

http://technorati.com/tag/campaign+for+drawing

http://technorati.com/tag/The+Big+Draw

More info from:

Martin Bazley

www.ICT4Learning.com

Introduction to (we)b logging

• http://weblogs.about.com/od/bloggingtips/tp/TipsBeginnerBloggers.htm

• http://www.nirmaltv.com/

2007/08/10/7-blogging-tips-for-beginners/

• http://www.romancetracker.com/3-ways-your-blog-can-get-you-a-hot-date/

How do people find blogs?• http://

technorati.com/search/gardening?language=en

• www.google.com Google roses greenfly blog (inc

gardenbanter)

Getting images ready for blogsGetting images ready for blogs

Images: What do you need to do?

- reduce image size to max 600 pixels to fit layout

- reduce download time and reduce Bytes used

- avoid image distortion

If you crop the image, keep aspect ratio of the original image (3:2 or 4:3).

Blogging practiceBlogging practice

Write a short blog post• This is just practice, so don’t worry

too much about accuracy or relevance.

Focus on:- Title and context - Clear and concise- Style / voice- Engagement – hook and encourage

comments

More help and advice from:

Martin Bazley

www.MartinBazley.com