Presentation is loading. Please wait.

Presentation is loading. Please wait.

Writing for the Web 1 Spotless Interactive Writing for the Web Tim Fidgeon April 2012.

Similar presentations


Presentation on theme: "Writing for the Web 1 Spotless Interactive Writing for the Web Tim Fidgeon April 2012."— Presentation transcript:

1 Writing for the Web 1 Spotless Interactive Writing for the Web Tim Fidgeon April 2012

2 Writing for the Web 2 Agenda 1.Basics - Online behaviours - Audience, goals & context - Graphic design 2.Best practice - Headings - Bold & lists - Links - Vocabulary, sentences & paragraphs - Concision & active voice - Providing the correct information - Page summary - Information scent 3.Writing for… - Email - Search engines - Accessibility - Social 4.Managing a team

3 Writing for the Web 3 Scanning ‘F’ pattern - Left-right - Top-bottom http://www.useit.com/alertbox/reading_pattern.html

4 Writing for the Web 4 Scanning http://poynterextra.org/eyetrack2004/main.htm 75% of users (http://www.sun.com/98 0713/webwriting)

5 Writing for the Web 5 Why do people scan? Speed & effort - 25% slower - Resolution - Glare - Eye strain Impatience & cost-of-moving - ‘Lean forward’-mode - Google-usage

6 Writing for the Web 6 Scanning – Ad Blindness http://www.useit.com/alertbox/banner-blindness.html

7 Writing for the Web 7 Scanning – Ad Blindness http://www.etre.com/blog/2006/04/virgin_on_successful/

8 Writing for the Web 8 Scanning – Aesthetics ‘What is the US population?’

9 Writing for the Web 9 Scanning – Aesthetics Only 14% used data on Homepage

10 Writing for the Web 10 How do people behave online? Impatient Impulsive Don’t pay attention

11 Writing for the Web 11 Agenda 1.Basics - Online behaviours - Audience, goals & context - Graphic design 2.Best practice - Headings - Bold & lists - Links - Vocabulary, sentences & paragraphs - Concision & active voice - Providing the correct information - Page summary - Information scent 3.Writing for… - Email - Search engines - Accessibility - Social 4.Managing a team

12 Writing for the Web 12 Focus of online copywriting Audience Goals Context of use Online copywriting techniques }

13 Writing for the Web 13 Audiences Novice vs. expert - Device - Domain - Site Lower-literacy & elderly - Slower pace - ‘Plowing’ (reading every word)

14 Writing for the Web 14 Goals ‘Is this the one?’ - Image - Name & number ‘Tell me more…’ - Research-focused

15 Writing for the Web 15 Context of use Environment Space, time, temperature, noise Organisation Management pressures, work processes Technical Connection speed, system configuration Device Desktop; Laptop; Tablet; Phone

16 Writing for the Web 16 Exercise

17 Writing for the Web 17 Agenda 1.Basics - Online behaviours - Audience, goals & context - Graphic design 2.Best practice - Headings - Bold & lists - Links - Vocabulary, sentences & paragraphs - Concision & active voice - Providing the correct information - Page summary - Information scent 3.Writing for… - Email - Search engines - Accessibility - Social 4.Managing a team

18 Writing for the Web 18 Factors Font Size Contrast Capitalisation Underlining Italics Leading Alignment Line length Visual interest

19 Writing for the Web 19 Font Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

20 Writing for the Web 20 Font Guideline Arial or Verdana (sans-serif) For children: Comic Sans MS

21 Writing for the Web 21 Size 11 point minimum Allow users to modify text size - Preferably through on-screen control http://www.drc.org.uk http://www.walgreensoutreach.com

22 Writing for the Web 22 Contrast Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

23 Writing for the Web 23 Contrast Black text/light background - Websites Avoid white background - Interactive television displays Avoid text on patterned backgrounds

24 Writing for the Web 24 Capitalisation, underlining, italics Non-standard text = harder to read LOREM IPSUM DOLOR SIT AMET ‘Shouty’ Lorem ipsum dolor sit amet Confused with links Lorem ipsum dolor sit amet Only for bibliographic info

25 Writing for the Web 25 Leading, alignment, line length Leading Maintain 120% default Possibly allow vulnerable groups to increase it Alignment Left-align & non-justify (i.e. ragged-right) Line length 75 – 85 characters

26 Writing for the Web 26 110 characters 80 characters

27 Writing for the Web 27 Visual interest Quote boxes Images White space

28 Writing for the Web 28 Agenda 1.Basics - Online behaviours - Audience, goals & context - Graphic design 2.Best practice - Headings - Bold & lists - Links - Vocabulary, sentences & paragraphs - Concision & active voice - Providing the correct information - Page summary - Information scent 3.Writing for… - Email - Search engines - Accessibility - Social 4.Managing a team

29 Writing for the Web 29 Headings Group related info Provide group’s - Name - Start - Finish

30 Writing for the Web 30 Headings Informative - Summarise topic; make sense out of context Front-load - Begin with informative words “Use the right words in the right order” – Philip Larkin “Go on the ‘B’ of Bang” – Linford Christie

31 Writing for the Web 31 Headings Signpost - Use phrase to summarise topic – then use search/branding terms Concise - Signpost = less than ½ line Avoid repetitive wording/phrasing - Especially at beginning of heading Reflect hierarchy - Font size differs between levels

32 Writing for the Web 32 Signpost Use phrase to summarise topic – then use search/branding terms

33 Writing for the Web 33 Exercise Oxfam Create headings to help users scanning the page

34 Writing for the Web 34

35 Writing for the Web 35

36 Writing for the Web 36

37 Writing for the Web 37 Exercise Diesel Create headings to help users scanning the page

38 Writing for the Web 38

39 Writing for the Web 39

40 Writing for the Web 40 Agenda 1.Basics - Online behaviours - Audience, goals & context - Graphic design 2.Best practice - Headings - Bold & lists - Links - Vocabulary, sentences & paragraphs - Concision & active voice - Providing the correct information - Page summary - Information scent 3.Writing for… - Email - Search engines - Accessibility - Social 4.Managing a team

41 Writing for the Web 41 Bold Used for: Key message Signpost (instead of sub-heading) Informative - Summarise topic; make sense out of context Front-load - Begin with informative words 1 phrase per paragraph Max = 10 words (if possible) Avoid Proximity to links (e.g. within 1 line ); Line-breaks

42 Writing for the Web 42 Lists ‘Signpost’ phrase can appear in bold

43 Writing for the Web 43 Exercise Tablet PCs Find phrases to make bold that summarise the piece’s key messages

44 Writing for the Web 44

45 Writing for the Web 45 Exercise Children and Tablet PCs Create better phrases to summarise the key messages

46 Writing for the Web 46 Exercise Children and Tablet PCs Create better phrases to summarise the key messages

47 Writing for the Web 47 Original Improved

48 Writing for the Web 48 Lists Group related info Provide group’s Start Finish

49 Writing for the Web 49 Lists Under ½ line / 40 characters Front load Begin with informative words Signpost Use phrase to summarise topic – then provide more details 3 items = minimum; 5 items = maximum Avoid - Re-punctuating sentences - Repeated words - Numbering Unless list-items are ‘steps’ in a sequence

50 Writing for the Web 50 Lists ‘Signpost’ phrase can appear in bold

51 Writing for the Web 51 Exercise Oxfam Create lists to help users scan

52 Writing for the Web 52

53 Writing for the Web 53

54 Writing for the Web 54 Agenda 1.Basics - Online behaviours - Audience, goals & context - Graphic design 2.Best practice - Headings - Bold & lists - Links - Vocabulary, sentences & paragraphs - Concision & active voice - Providing the correct information - Page summary - Information scent 3.Writing for… - Email - Search engines - Accessibility - Social 4.Managing a team

55 Writing for the Web 55 Links Popular for site navigation Typical usage: - Content links = 40% - Back Button = 31% - Navigation = 22% - Breadcrumb = 6% http://psychology.wichita.edu/surl/usabilitynews/52/breadcrumb.htm

56 Writing for the Web 56 Links Appearance - Distinguish from text Any 2 of: colour, underline & bold - ‘Unvisited’ and ‘Visited’ state Notify users if link results in: - New window - External site - Download (size & format)

57 Writing for the Web 57 Links Short 2 or 3 words Informative Sum up destination page & make sense out of context Front-load ‘Action words’ Buy, Find, Register, Contact, etc Avoid - Split over 2 lines - Multiple links in same paragraph Use a list

58 Writing for the Web 58 Exercise Diesel Create links for more information on each carline

59 Writing for the Web 59

60 Writing for the Web 60 Exercise REM sleep & dreams Inserts links to the 2 studies mentioned in the passage

61 Writing for the Web 61 Unhelpful Most useful

62 Writing for the Web 62 What do people see when they scan?

63 Writing for the Web 63 Make sure all important information is in: Heading Bullet Link

64 Writing for the Web 64 Agenda 1.Basics - Online behaviours - Audience, goals & context - Graphic design 2.Best practice - Headings - Bold & lists - Links - Vocabulary, sentences & paragraphs - Concision & active voice - Providing the correct information - Page summary - Information scent 3.Writing for… - Email - Search engines - Accessibility - Social 4.Managing a team

65 Writing for the Web 65 Principles Poor literacy (English adults) 40 % have literacy level of GCSE grade D or lower [1] Target = international audience - Simple, basic English (helps native and non-native speakers) [1] Skills for Life national needs and impact survey, DfES, 2003

66 Writing for the Web 66 Vocabulary Simplify - Appropriate for audience Professional and ‘geek’ audiences like jargon Avoid potential double-meanings - Right / correct - Close / near Abbreviations & acronyms - Explain (or link to ‘glossary’) - Avoid ‘i.e.’, ‘e.g.’ and ‘etc’ Controlled vocabulary & phrases - For talking about ourselves, our products and our customers

67 Writing for the Web 67 Sentences 1 subject/issue 15-20 words No more than 1 comma, hyphen or bracketed- statement

68 Writing for the Web 68 Paragraphs 1 topic/subject 4 sentences 6 lines Topic-sentence 1st sentence identifies topic

69 Writing for the Web 69 Example REM sleep & dreams Use a ‘content map’ to support a rewrite - Make notes on core messages - Re-order if necessary - Rewrite around the ‘content map’ (use source material as reference)

70 Writing for the Web 70 REM sleep’s role in dreams is not yet fully understood No agreed definition of REM sleep REM and dreaming = linked REM = not required for dreams

71 Writing for the Web 71 Exercise Insurance training Use a ‘content map’ to support a rewrite - Make notes on core messages - Re-order if necessary - Rewrite around the ‘content map’ (use source material as reference)

72 Writing for the Web 72 We help train people to make the correct decisions Training is vital – an incorrect decision can be disastrous. AGILE = learning platform for insurance industry; uses real-world scenarios AGILE uses real-world scenarios, which are more effective for learning AGILE = flexible and can offer scenarios for any insurance market

73 Writing for the Web 73

74 Writing for the Web 74 Agenda 1.Basics - Online behaviours - Audience, goals & context - Graphic design 2.Best practice - Headings - Bold & lists - Links - Vocabulary, sentences & paragraphs - Concision & active voice - Providing the correct information - Page summary - Information scent 3.Writing for… - Email - Search engines - Accessibility - Social 4.Managing a team

75 Writing for the Web 75 Concise Identify the ‘core’ messages & be as concise as possible Appropriate to the audience Aim = 60% of offline word count

76 Writing for the Web 76 Exercise Traveller’s cheques & cosmetics Target word count Use a ‘content map’ to support a rewrite - Make notes on core messages - Re-order if necessary - Rewrite around the ‘content map’ (use source material as reference)

77 Writing for the Web 77 Our recommendations Take majority of holiday money as Traveller’s Cheques (more secure than cash and credit cards) Take some local currency (not all shops accept Traveller's Cheques)

78 Writing for the Web 78 We recommend taking the majority of your holiday money in Traveller’s Cheques (they are more secure than cash and credit cards). But also take some local currency because Traveller’s Cheques are not accepted everywhere. (34 words)

79 Writing for the Web 79 Active voice Gives shorter & simpler sentences Active Tim wrote this course (subject – verb – object) Passive This course was written by Tim (object – verb – subject)

80 Writing for the Web 80 Exercise Health insurance email Critique the content of this email

81 Writing for the Web 81

82 Writing for the Web 82

83 Writing for the Web 83 Templates can be difficult

84 Writing for the Web 84 Agenda 1.Basics - Online behaviours - Audience, goals & context - Graphic design 2.Best practice - Headings - Bold & lists - Links - Vocabulary, sentences & paragraphs - Concision & active voice - Providing the correct information - Page summary - Information scent 3.Writing for… - Email - Search engines - Accessibility - Social 4.Managing a team

85 Writing for the Web 85 What information is needed? Explanation - Support basic understanding Detail - Answer follow-up questions Decision = based on users’ knowledge and goals - Useful sources: market research, customer services, sales people

86 Writing for the Web 86 Agenda 1.Basics - Online behaviours - Audience, goals & context - Graphic design 2.Best practice - Headings - Bold & lists - Links - Vocabulary, sentences & paragraphs - Concision & active voice - Providing the correct information - Page summary - Information scent 3.Writing for… - Email - Search engines - Accessibility - Social 4.Managing a team

87 Writing for the Web 87 Page summary 2 approaches (not mutually-exclusive): Synopsis - Summarise main findings/argument in 3 or 4 lines - Typically suits: article, case study Table of Contents - Use sub-headings - Typically suits: brochure-ware

88 Writing for the Web 88 Synopsis Summary: International usability testing can benefit from: high-level task definition that participants can interpret themselves; locally-informed participant recruitment and locally-delivered moderation & analysis (supported by a thorough Testing Plan). Summary: Usability testing is a very powerful tool in helping to improve a website’s design, but it can be very challenging to run these sessions in different countries. Find out more about how to design and run effective international usability testing. International usability testing – hints & tips Helpful Unhelpful

89 Writing for the Web 89 Table of contents Overview Formatting – the professional look Sharing documents Business processes support Content Management (SharePoint Sever) Poor sub-headings lead to a poor Table of Contents Better sub-headings and Table of Contents

90 Writing for the Web 90 Exercise Diesel Write a summary for this page

91 Writing for the Web 91 Summary: Diesel engines are cheaper and cleaner than petrol. Chevrolet now offers diesel engines for the Nubira/Lacetti (family car), Epica (saloon) and Captiva (SUV)

92 Writing for the Web 92 Agenda 1.Basics - Online behaviours - Audience, goals & context - Graphic design 2.Best practice - Headings - Bold & lists - Links - Vocabulary, sentences & paragraphs - Concision & active voice - Providing the correct information - Page summary - Information scent 3.Writing for… - Email - Search engines - Accessibility - Social 4.Managing a team

93 Writing for the Web 93 Information scent Give navigation-options strong & accurate ‘scent’ Support users’ confident & accurate decisions Use content-examples and/or descriptions Anticipate possible ‘mistakes’ Cross-link to ‘correct’ section/content

94 Writing for the Web 94 BBC – link to example content (Old design for bbc.co.uk)

95 Writing for the Web 95 Home Office - descriptions http://homeoffice.gov.uk/crime/

96 Writing for the Web 96 John Lewis – rollover menu

97 Writing for the Web 97 Agenda 1.Basics - Online behaviours - Audience, goals & context - Graphic design 2.Best practice - Headings - Bold & lists - Links - Vocabulary, sentences & paragraphs - Concision & active voice - Providing the correct information - Page summary - Information scent 3.Writing for… - Email - Search engines - Accessibility - Social 4.Managing a team

98 Writing for the Web 98 Email ‘From’ - 20 character max - Organisation name ‘Subject’ - 45 character max - Meaningful & informative Test alternatives

99 Writing for the Web 99

100 Writing for the Web 100 Clickthrough rate ‘From’ PriceMinister Advice Baseline Sophie at PriceMinister PriceMinister Info Source: Econsultancy ‘Email Marketing’ course

101 Writing for the Web 101 Clickthrough rate ‘From’ PriceMinister Advice Baseline Sophie at PriceMinister 56% PriceMinister Info 21% Source: Econsultancy ‘Email Marketing’ course

102 Writing for the Web 102 Entries Baseline Get a pampering treat of a lifetime worth GBP 10,000 A trip to Champney’s worth GBP 10,000 Get a pampered new you worth GBP 10,000 ‘Subject’ Source: Econsultancy ‘Email Marketing’ course

103 Writing for the Web 103 Entries Baseline + 64% + 59% Get a pampering treat of a lifetime worth GBP 10,000 A trip to Champney’s worth GBP 10,000 Get a pampered new you worth GBP 10,000 ‘Subject’ Source: Econsultancy ‘Email Marketing’ course

104 Writing for the Web 104 Email content guidelines Top of email - Summary; Table of content; calls-to-action - No big graphic masthead Text - Use for all important content (brand; headline; calls-to-action) Image - Small & decorative (often blocked) Top of email Link to online version

105 Writing for the Web 105 Agenda 1.Basics - Online behaviours - Audience, goals & context - Graphic design 2.Best practice - Headings - Bold & lists - Links - Vocabulary, sentences & paragraphs - Concision & active voice - Providing the correct information - Page summary - Information scent 3.Writing for… - Email - Search engines - Accessibility - Social 4.Managing a team

106 Writing for the Web 106

107 Writing for the Web 107 PPC Pay per click Paid search Organic search Natural search Search engine optimisation

108 Writing for the Web 108 On-page optimisation (organic) Page title Headings Content 4% density Links

109 Writing for the Web 109 Link-building (organic) A link into a page from another website = 1 vote for it Factors Number of links Site of origin Subject-matter Popularity Link text (http://www.google.com/technology)http://www.google.com/technology

110 Writing for the Web 110 PPC - Character limits 25 35 Google & Bing

111 Writing for the Web 111 PPC adverts Symbols ? - : & Spacing c h e a p l a p t o p Keywords (appear in bold) Heading, URL and text Numbers & prices Capitalisation Phone number Start strong & distinctive Look at other adverts Not just competitors’ Test alternate adverts

112 Writing for the Web 112 Test alternate adverts

113 Writing for the Web 113 Agenda 1.Basics - Online behaviours - Audience, goals & context - Graphic design 2.Best practice - Headings - Bold & lists - Links - Vocabulary, sentences & paragraphs - Concision & active voice - Providing the correct information - Page summary - Information scent 3.Writing for… - Email - Search engines - Accessibility - Social 4.Managing a team

114 Writing for the Web 114 Accessibility guidelines Meaningful headings & link text ALT Text Describe image’s information-content Transcript Graphs, videos, audio

115 Writing for the Web 115 Agenda 1.Basics - Online behaviours - Audience, goals & context - Graphic design 2.Best practice - Headings - Bold & lists - Links - Vocabulary, sentences & paragraphs - Concision & active voice - Providing the correct information - Page summary - Information scent 3.Writing for… - Email - Search engines - Accessibility - Social 4.Managing a team timfidgeon@hotmail.com

116 Writing for the Web 116 Social Deliver benefit Audience focus Timing Copywriting

117 Writing for the Web 117 Deliver benefit Social is mainly for friends & family Companies must provide reasons for people to engage: - Special offers; News & updates; Entertainment; Tools

118 Writing for the Web 118 Audience - factors Country & Language - Intelligibility - Message relevance Product/Service - Generally more relevant than ‘umbrella’ organisation Stakeholder - Customers, Suppliers, Investors and Press

119 Writing for the Web 119 Timing - factors Frequency - Only send valuable information - Max = 1 per week Regularity - Plan a regular timetable Scheduling - Before or after work hours; Weekends Responding - Within 24 hours

120 Writing for the Web 120 Social media copywriting Bespoke & concise - Single topic - Don’t ‘sign’ messages - Link to more details (shorten URLs – for example: bit.ly) Front-load - Start with information words & phrases Tone of Voice - Less formal, but be careful! Avoid abbreviations & ‘SMS/text speak’

121 Writing for the Web 121 Agenda 1.Basics - Online behaviours - Audience, goals & context - Graphic design 2.Best practice - Headings - Bold & lists - Links - Vocabulary, sentences & paragraphs - Concision & active voice - Providing the correct information - Page summary - Information scent 3.Writing for… - Email - Search engines - Accessibility - Social 4.Managing a team

122 Writing for the Web 122 Managing a team We need to achieve consistent: - Best practice - Language & tone of voice Relevant steps: - Define & document - Training - Ongoing support

123 Writing for the Web 123 Define & document Present and explain rationale: - Guidelines - Controlled vocabulary - Rules for common page elements & page types Use examples Goldilocks (too hot, too cold, just right)

124 Writing for the Web 124 Training Support documentation - Printout of slides Include exercises – Goldilocks (too hot, too cold, just right) Ongoing support - Feedback - Refresh training - Regular updates of policy

125 Writing for the Web 125 Agenda 1.Basics - Online behaviours - Audience, goals & context - Graphic design 2.Best practice - Headings - Bold & lists - Links - Vocabulary, sentences & paragraphs - Concision & active voice - Providing the correct information - Page summary - Information scent 3.Writing for… - Email - Search engines - Accessibility - Social 4.Managing a team

126 Writing for the Web 126 Thank you for your time Ben Logan o Director o ben.logan@spotlessinteractive.comben.logan@spotlessinteractive.com Spotless Interactive © 2010126

127 Writing for the Web 127 Books Content Critical: Gaining Competitive Advantage Through High-Quality Web Content Gerry McGovern (Financial Times Prentice Hall - 2001) ISBN: 027365604X Writing for the Web Crawford Killian (Roundhouse Publishing - 1999) ISBN: 1551802074 Newsletters www.useit.com ‘Alertbox’ newsletter (fortnightly) covers a variety of user experience issues, including writing for the web. www.useit.com

128 Writing for the Web 128 Websites www.usability.gov/pdfs/guidelines.html http://www.useit.com/papers/webwriting/writing.html http://www.sun.com/980713/webwriting/


Download ppt "Writing for the Web 1 Spotless Interactive Writing for the Web Tim Fidgeon April 2012."

Similar presentations


Ads by Google