writing for the web 1 spotless interactive writing for the web tim fidgeon april 2012
Post on 28-Dec-2015
220 Views
Preview:
TRANSCRIPT
Writing for the Web 1
Spotless InteractiveWriting for the Web
Tim Fidgeon
April 2012
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
Writing for the Web 3
Scanning
‘F’ pattern - Left-right - Top-bottom
http://www.useit.com/alertbox/reading_pattern.html
Writing for the Web 4
Scanning
http://poynterextra.org/eyetrack2004/main.htm
75% of users (http://www.sun.com/980713/webwriting)
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
Writing for the Web 6
Scanning – Ad Blindness
http://www.useit.com/alertbox/banner-blindness.html
Writing for the Web 7
Scanning – Ad Blindness
http://www.etre.com/blog/2006/04/virgin_on_successful/
Writing for the Web 8
Scanning – Aesthetics
‘What is the US population?’
Writing for the Web 9
Scanning – Aesthetics
Only 14% used data on Homepage
Writing for the Web 10
How do people behave online?
Impatient
Impulsive
Don’t pay attention
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
Writing for the Web 12
Focus of online copywriting
Audience
Goals
Context of use
Online copywriting techniques}
Writing for the Web 13
Audiences
Novice vs. expert- Device- Domain- Site
Lower-literacy & elderly- Slower pace - ‘Plowing’ (reading every word)
Writing for the Web 14
Goals
‘Is this the one?’- Image- Name & number
‘Tell me more…’- Research-focused
Writing for the Web 15
Context of use
EnvironmentSpace, time, temperature, noise
OrganisationManagement pressures, work processes
TechnicalConnection speed, system configuration
DeviceDesktop; Laptop; Tablet; Phone
Writing for the Web 16
Exercise
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
Writing for the Web 18
Factors
Font
Size
Contrast
Capitalisation
Underlining
Italics
Leading
Alignment
Line length
Visual interest
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.
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.
Writing for the Web 20
Font
Guideline Arial or Verdana (sans-serif) For children: Comic Sans MS
Writing for the Web 21
Size
11 point minimum
Allow users to modify text size - Preferably through on-screen control
http://www.drc.org.ukhttp://www.walgreensoutreach.com
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.
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.
Writing for the Web 23
Contrast
Black text/light background - Websites
Avoid white background- Interactive television displays
Avoid text on patterned backgrounds
Writing for the Web 24
Capitalisation, underlining, italics
Non-standard text = harder to read
LOREM IPSUM DOLOR SIT AMET‘Shouty’
Lorem ipsum dolor sit ametConfused with links
Lorem ipsum dolor sit ametOnly for bibliographic info
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
Writing for the Web 26
110 characters
80 characters
Writing for the Web 27
Visual interest
Quote boxes Images White space
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
Writing for the Web 29
Headings
Group related info
Provide group’s - Name - Start - Finish
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
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
Writing for the Web 32
Signpost Use phrase to summarise topic – then use search/branding terms
Writing for the Web 33
Exercise
Oxfam Create headings to help users scanning the page
Writing for the Web 34
Writing for the Web 35
Writing for the Web 36
Writing for the Web 37
Exercise
Diesel Create headings to help users scanning the page
Writing for the Web 38
Writing for the Web 39
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
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
Writing for the Web 42
Lists ‘Signpost’ phrase can appear in bold
Writing for the Web 43
Exercise
Tablet PCs Find phrases to make bold that summarise the piece’s key messages
Writing for the Web 44
Writing for the Web 45
Exercise
Children and Tablet PCs Create better phrases to summarise the key messages
Writing for the Web 46
Exercise Children and Tablet PCs Create better phrases to summarise the key messages
Writing for the Web 47
Original
Improved
Writing for the Web 48
Lists
Group related info
Provide group’s Start Finish
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
Writing for the Web 50
Lists ‘Signpost’ phrase can appear in bold
Writing for the Web 51
Exercise
Oxfam Create lists to help users scan
Writing for the Web 52
Writing for the Web 53
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
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
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)
Writing for the Web 57
Links Short 2 or 3 words
InformativeSum 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
Writing for the Web 58
Exercise Diesel Create links for more information on each carline
Writing for the Web 59
Writing for the Web 60
Exercise REM sleep & dreams Inserts links to the 2 studies mentioned in the passage
Writing for the Web 61
Unhelpful
Most useful
Writing for the Web 62
What do people see when they scan?
Writing for the Web 63
Make sure all important information is in:
HeadingBulletLink
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
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
Writing for the Web 66
VocabularySimplify - 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
Writing for the Web 67
Sentences
1 subject/issue
15-20 words
No more than 1 comma, hyphen or bracketed-statement
Writing for the Web 68
Paragraphs
1 topic/subject
4 sentences
6 lines
Topic-sentence 1st sentence identifies topic
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)
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
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)
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
Writing for the Web 73
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
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
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)
Writing for the Web 77
Our recommendationsTake 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)
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)
Writing for the Web 79
Active voice
Gives shorter & simpler sentences
ActiveTim wrote this course (subject – verb – object)
PassiveThis course was written by Tim (object – verb – subject)
Writing for the Web 80
Exercise Health insurance email Critique the content of this email
Writing for the Web 81
Writing for the Web 82
Writing for the Web 83
Templates can be difficult
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
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
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
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
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
International usability testing – hints & tips Helpful
Unhelpful
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
Writing for the Web 90
Exercise
Diesel Write a summary for this page
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)
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
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
Writing for the Web 94
BBC – link to example content
(Old design for bbc.co.uk)
Writing for the Web 95
Home Office - descriptions
http://homeoffice.gov.uk/crime/
Writing for the Web 96
John Lewis – rollover menu
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
Writing for the Web 98
‘From’ - 20 character max - Organisation name
‘Subject’ - 45 character max- Meaningful & informative
Test alternatives
Writing for the Web 99
Writing for the Web 100
Clickthrough rate
‘From’
PriceMinister Advice Baseline
Sophie at PriceMinister PriceMinister Info
Source: Econsultancy ‘Email Marketing’ course
Writing for the Web 101
Clickthrough rate
‘From’
PriceMinister Advice Baseline
Sophie at PriceMinister 56% PriceMinister Info 21%
Source: Econsultancy ‘Email Marketing’ course
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
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
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 emailLink to online version
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
Writing for the Web 106
Writing for the Web 107
• PPC
• Pay per click
• Paid search
• Organic search
• Natural search
• Search engine optimisation
Writing for the Web 108
On-page optimisation (organic)
Page title
Headings
Content 4% density
Links
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)
Writing for the Web 110
PPC - Character limits
25353535
Google & Bing
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
Writing for the Web 112
Test alternate adverts
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
Writing for the Web 114
Accessibility guidelines
Meaningful headings & link text
ALT Text Describe image’s information-content
Transcript Graphs, videos, audio
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
Writing for the Web 116
Social
Deliver benefit
Audience focus
Timing
Copywriting
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
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
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
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’
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
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
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)
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
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
Writing for the Web 126
Thank you for your time
Ben Logano Directoro ben.logan@spotlessinteractive.com
Spotless Interactive © 2010126
Writing for the Web 127
Books
Content Critical: Gaining Competitive Advantage Through High-Quality Web ContentGerry McGovern (Financial Times Prentice Hall - 2001)ISBN: 027365604X
Writing for the Web Crawford Killian (Roundhouse Publishing - 1999)ISBN: 1551802074Newsletters
www.useit.com ‘Alertbox’ newsletter (fortnightly) covers a variety of user experience issues, including writing for the web.
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/
top related