1. Writing for the Web AGCAS Training Warwick September 2012 Chris Phillips Publishing Director GTI Media

2. Today’s programme 09.30 Welcome and Introduction 09.45 Writing for the web. Basic principles 11.00 Refreshments 11.15 Writing for the web (continued) 12.20 Student Panel 13.00 Lunch 13.45 Principles of good web design 14.15 Theory into practice 15.00 Refreshments 15.15 Theory into practice (continued) 15.45 Summary and questions

3. Writing for the Web 1. Basic principles

5. Some words of wisdom from the guru Mr Nielsen Nielsen's description of the online reader: “Users are selfish, lazy, and ruthless." You, my dear user, pluck the low- hanging fruit. When you arrive on a page, you don't actually deign to read it. You scan. If you don't see what you need, you're gone. And it's not you who has to change. It's me, the writer.

6. The ‘Bar’ Transaction85% Key pages “I want to find specific stuff” Strict rules about readability _________________________________ Investigation15% Deep content “I actually want to access detailed information now” Less strict rules but still not like a book!

9. The problem with careers people You know far far too much You want to tell students everything You think that students are as turned on by careers as you are

10. Writing for the Web 1.Why and how students read web pages 2.Why and how you write web pages 3.Good writing – some ground rules 4.Some examples

11. How they read Books Newspapers Websites

12. The psychology of books Why do people read books? –For enjoyment –For escape –For relaxation –To while away time on the bus

13. The psychology of newspapers Why do people read newspapers? –To be informed and entertained –To be provoked –To delight in familiar columnists –For political comradeship –Something to do on the bus to work

14. The psychology of websites Why do people read websites? –You answer this one…

15. Web Web content must get to the point quickly, because users are likely to be on a specific mission. Web users want actionable content.

16. Paper v web Print publications contain linear content that's often consumed in a more relaxed setting than the solution-hunting behaviour that characterises most Web use. In print, you can spice up linear narrative with anecdotes/stories that support a storytelling approach to exposition. On the Web, such content often feels like waffle; it slows down users and stands in the way of them getting to the point. It turns them off…. Ditch the welcome mat, cut to the chase

17. Web Instead of a linear narrative, websites support the user's personal story by condensing and combining vast stores of information into something that specifically meets the user's immediate needs. Not author-driven but user- driven. Print calls for well-crafted, complete sentences and paragraphs. Online, less so.

18. Paper v Web summary Linear v non-linear Author-driven v reader-driven Storytelling v Actionable content Anecdotes v data Sentences v fragments

19. Why do people read websites? To find things out quickly and with minimum effort Because they want to take action Because they want a solution to a problem Because they’re browsing

20. But who actually reads your pages?? True answer is you don’t have a clue so don’t make assumptions Except to say that you know more than them And they could have come from Mars Make assumptions and you’ll end up as an example on a training course

22. HOT TIP Task students with finding information on your site and watch what they do.

23. How they read web pages People don’t read, they scan 80% scan the page before reading it On average, people will read about 25% of a page This figure increases if there are fewer words on the page And they don’t read from beginning to end. They dip in and browse…

24. Therefore, you must write scannable copy Use the inverted pyramid – main points first, summarise the content up front Meaningful sub-heads Bulleted lists Highlighted keywords One idea per paragraph Cut words savagely and carry on cutting Use links – internal and external

25. A word about web credibility No-one knows who really owns the site (unlike a newspaper) Credibility is increased by outgoing links And a lack of bullshit marketing language And simple authoritative writing

26. The research on scannability Don’t underestimate the overwhelming importance of getting the first 2/3 words right, since that's often all users see when they scan Web pages. Selecting the first 2/3 words for your page titles/bullets/sub-heads is probably the highest-impact ROI- boosting design decision you’ll make. Avoid oblique/clever titles

27. Scannability – the fuzzy F Studies show that when users read web pages their eyes move…. – First, along the top of the page, left to right, where the main navigation often is, then –Down the left-hand margin, where you’ll often find secondary navigation, then –Half-way across the page, looking at sub-heads and the beginnings of sentences, then –Information further down the page is even more likely to be skimmed Hence the eyes move down the page in a fuzzy ‘F’.

28. HOT TIP Map a fuzzy F on your pages and see what it shows you.

29. Why you write web pages To promote your products and services To inform students/graduates To galvanise them into action To keep them on the site and keep them coming back because they don’t have to…

30. HOT TIP Write for a busy person with a short attention span

31. How you write web pages On the Web, readers are engaged and want to find things out and get things done. The Web is an active medium. They lean forward. While reading print, readers want to be entertained. They are in relaxation mode and don't want to make choices. Print is a passive medium. They lean back.

32. How to write Because readers fixate on certain parts of the page when they scan - headlines, subheads, summaries, captions, hypertext links, and bulleted lists – you should engage in the following four-step process

33. The patented four-step process 1.Decide on the main elements and messages on the page – and then halve them. 2.Write the body copy in an accessible way – and then halve the number of words. Eliminate waffle and welcome mat copy. 3.Write the scannable bits – remember the F. 4.Write the intro/main header.

34. Research study of what makes effective copy on the web One topic was written in five different ways and published online. Each piece of copy was put to a focus group and tested for its usability.

35. The ‘Control’ – promotional copy Nebraska is filled with internationally recognized attractions that draw large crowds of people every year, without fail. In 1996, some of the most popular places were Fort Robinson State Park (355,000 visitors), Scotts Bluff National Monument (132,166), Arbor Lodge State Historical Park & Museum (100,000), Carhenge (86,598), Stuhr Museum of the Prairie Pioneer (60,002), and Buffalo Bill Ranch State Historical Park (28,446).

36. Concise text (58% more usable than control example) In 1996, six of the best-attended attractions in Nebraska were Fort Robinson State Park, Scotts Bluff National Monument, Arbor Lodge State Historical Park & Museum, Carhenge, Stuhr Museum of the Prairie Pioneer, and Buffalo Bill Ranch State Historical Park.

37. Scannable layout (47% more) Nebraska is filled with internationally recognized attractions that draw large crowds of people every year, without fail. In 1996, some of the most popular places were: Fort Robinson State Park (355,000 visitors) Scotts Bluff National Monument (132,166) Arbor Lodge State Historical Park & Museum (100,000) Carhenge (86,598) Stuhr Museum of the Prairie Pioneer (60,002) Buffalo Bill Ranch State Historical Park (28,446).

38. Objective language (27% more) Nebraska has several attractions. In 1996, some of the most-visited places were Fort Robinson State Park (355,000 visitors), Scotts Bluff National Monument (132,166), Arbor Lodge State Historical Park & Museum (100,000), Carhenge (86,598), Stuhr Museum of the Prairie Pioneer (60,002), and Buffalo Bill Ranch State Historical Park (28,446).

39. Combined version (124% more) In 1996, six of the most-visited places in Nebraska were: Fort Robinson State Park Scotts Bluff National Monument Arbor Lodge State Historical Park & Museum Carhenge Stuhr Museum of the Prairie Pioneer Buffalo Bill Ranch State Historical Park The combined version uses all three improvements in writing style together: concise, scannable, and objective.

40. Why objective is better Promotional language imposes a cognitive burden on users who have to spend resources on filtering out the hype to get at the facts. When people read a paragraph that starts "Nebraska is filled with internationally recognized attractions," their first reaction is no, it's not, and this thought slows them down and distracts them from using the site. Students are attuned to bullshit.

41. HOT TIP Concise, Objective and Scannable Remember ‘COS’

42. Good writing – things your grandma should have told you I’ve gone on and on about the differences between print and web writing but, as your Grandma would tell you, good writing is good writing.

43. The eternal truth You are careers writers. You are web careers writers. With respect, it is not your task to delight with clever phrases, to charm with the mellifluous flow of language or to transport from the real world to an imaginary one. Whatever other values your writing may have, it is bad writing if it is not immediately clear.

44. The compassionate precis Cutting text always results in a more readable web page. Cutting text makes pages more attractive (and more likely to be read). Think about the CV advice you give to students…

45. How to chop your words down Be economical with words Your best friends are present tense verbs Kill the clause Treat adjectives and adverbs with suspicion – and ration them Avoid jargon and hype like the plague

46. For example… Having made the initial commitment to their innovative graduate programmes, Bucknall Austin remain totally convinced of the real benefits to both students and employers alike. 25w

47. For example… Whilst nearly every trainee solicitor in the UK wants as much contact with clients as humanly possible, the ultimate client exposure is undoubtedly a secondment in a client’s office. 29w

48. Cut out the padding Behind schedule Is of the opinion that During the course of In the direction of Owing to the fact that At the present time The whole of Give consideration to

49. The ten commandments To be or not to be, that is the question –There’s a lot to be done –There’s a lot to do Must have, have to-itis –There are many things you have to do in this job –In this job, there’s a lot to do –A good leader must inspire confidence –A good leader inspires confidence

50. The ten commandments A good verb is worth a thousand adjectives –In this day and age, a meandering policy towards… –Today, a company that meanders between.. Make the verb active –The careers service launches a new programme NOT –A new programme has been launched by the careers service Place the verb near the beginning of the sentence

51. The ten commandments Don’t start sentences with subordinate clauses –Judging by the number of cards on his desk, Mr Smith was a popular man The best sentences are short ‘You’ is almost always best Speak the words out loud Communicate directly and simply BUT do not patronise by adopting the reader’s voice or by over use of empathy Choose familiar words

52. HOT TIP The easiest way to come up with a new idea is to steal someone else’s But adapt, localise content Be informed by students’ views Update copy to keep freshness and relevance

53. Some random examples

57. Summary Consider the factors that make a site successful and consider the way people use the web Web writing is different from print writing and needs more treatment, calculation and planning Make it scannable, concise and objective Get feedback from students in real-time tests Design serves your purpose and helps users to find stuff quickly

58. As George Orwell said… Never use a metaphor, simile, or other figure of speech that you are used to seeing in print. Never use a long word where a short one will do. If it is possible to cut a word out, always cut it out. Never use the passive voice when you can use the active Never use a foreign phrase, a scientific word, or a jargon word if you can think of an everyday equivalent. Break any of these rules sooner than say anything barbarous! (not sure about this one George)

59. Resources http://www.useit.com/papers/webwriting/ - Jacob Neilson’s site, also has bibliographyhttp://www.useit.com/papers/webwriting/ http://www.useit.com/alertbox/9703b.html - more from himhttp://www.useit.com/alertbox/9703b.html http://econsultancy.com/uk/blog/6771-how-to-write- for-the-web-23-useful-rules - no nonsense advicehttp://econsultancy.com/uk/blog/6771-how-to-write- for-the-web-23-useful-rules http://usability.coi.gov.uk/theme/writing- content/writing-for-web.aspx - advice from COIhttp://usability.coi.gov.uk/theme/writing- content/writing-for-web.aspx http://webdesign.about.com/od/writing/a/aa031405.ht mhttp://webdesign.about.com/od/writing/a/aa031405.ht m http://www.fatdux.com/blog/2009/08/07/20-tips-for- writing-for-the-web/http://www.fatdux.com/blog/2009/08/07/20-tips-for- writing-for-the-web/ Don’t make me think. Steve Krug. 2005. New Riders

60. Writing for the Web 2. Student panel

61. Writing for the Web 3. Principles of web design

62. Design doesn’t mean artistic Simplicity is better than complexity Logic is better than the wow factor Usability is better than beautiful Careful colour is better than in- your-face colour If it doesn’t enable the user to find things quickly, it’s bad design.

65. Online is different from print Information should be arranged more simply, as reading patterns tend to be more linear. Use bullet points, subheadings etc to break up long text. (Useful article: “How we read online” – http://www.slate.com/id/2193552/) http://www.slate.com/id/2193552/

66. Don’t obsess over the fold  ‘The fold’ is not a thing to be worried about – although obviously your most important information (eg logo, website name, heading) should be placed first on the page. Useful article: “Myth #3: People don’t scroll” – http://uxmyths.com/post/654047943/ myth-people-dont-scroll http://uxmyths.com/post/654047943/ myth-people-dont-scroll

68. Context is all Context is not always as clear online as it can be in print. For example, reading an article in a print magazine, you will be aware of the magazine itself and therefore the overall subject that it covers. Online, a user can find themselves in a deep content page of a website with no idea what the website is or what it contains. Make sure to help your users understand context using breadcrumbs, clear and consistent navigation, and so on.

69. Feedback and redesigns Your design can evolve based on constant, live user feedback. Use what’s available – Google Analytics, user testing, on-site feedback, etc – but make sure you’re prepared to act on what feedback tells you. Useful article: “Ten ways to gather feedback from users” – http://idratherbewriting.com/2008/10/17/10- ways-to-gather-feedback-from-users/http://idratherbewriting.com/2008/10/17/10- ways-to-gather-feedback-from-users/ There is no need for a cycle of redesigns – it can be better to incrementally evolve. An overall redesign should only be necessary in the case of a branding change or substantial change of intent for a website.

70. Make it easy for your users Don’t put long streams of text over background images or patterns. Don’t use colour combinations that make text difficult to read. Useful website for both of the above points: “The world’s worst website” – http://www.angelfire.com/super/badwebs/ http://www.angelfire.com/super/badwebs/ Remember that your design can be viewed with an almost infinite number of devices and browser windows. Don’t assume that everybody is viewing the website under the same conditions that you are. Design with that in mind – different browser windows, different screen resolutions, different devices and so on

71. Consistency and usability Consistency is key – across all aspects of a website including stylesheets, navigation, image sizing, link colouring, etc. Usability and accessibility are hot topics in online design Useful websites: Jakob Nielsen on usable information technology – http://www.useit.com/, W3C policies relating to web accessibility – http://www.w3.org/WAI/Policy/ http://www.useit.com/ http://www.w3.org/WAI/Policy/

72. Good working practices Plan everything in advance – web design is, basically, software engineering, and will benefit from a structured process. Useful article: “Successful web development methodologies” – http://www.sitepoint.com/successful- development/http://www.sitepoint.com/successful- development/ Define your web team. It’s likely that at least several distinct groups will contribute to a website and so they should all work within agreed limits and liaise with each other to ensure that no single change to a website causes unexpected knock-on problems. Document everything and never make assumptions!

73. Content management systems There are hundreds of systems, or you could build your own – analyse your requirements very carefully and if possible choose the best system for you Useful article: “How to choose the right CMS” – http://www.webdesignerdepot.com/200 9/01/how-to-choose-the-right-cms/ http://www.webdesignerdepot.com/200 9/01/how-to-choose-the-right-cms/

74. Writing for the Web 4. Theory into practice