Download presentation
Presentation is loading. Please wait.
Published byLeonard Horton Modified over 9 years ago
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/
Similar presentations
© 2025 SlidePlayer.com Inc.
All rights reserved.