writing for the web 1 spotless interactive writing for the web tim fidgeon april 2012

Writing for the Web 1

Spotless InteractiveWriting for the Web

Tim Fidgeon

April 2012


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


Scanning

‘F’ pattern - Left-right - Top-bottom

http://www.useit.com/alertbox/reading_pattern.html


Scanning

http://poynterextra.org/eyetrack2004/main.htm

75% of users (http://www.sun.com/980713/webwriting)


Why do people scan?

Speed & effort - 25% slower - Resolution - Glare - Eye strain

Impatience & cost-of-moving - ‘Lean forward’-mode - Google-usage


Scanning – Ad Blindness

http://www.useit.com/alertbox/banner-blindness.html


Scanning – Ad Blindness

http://www.etre.com/blog/2006/04/virgin_on_successful/


Scanning – Aesthetics

‘What is the US population?’


Scanning – Aesthetics

Only 14% used data on Homepage


How do people behave online?

Impatient

Impulsive

Don’t pay attention


Agenda



- Bold & lists- Links- Vocabulary, sentences &

paragraphs - Concision & active voice- Providing the correct information- Page summary- Information scent


engines-


4. Managing a team


Focus of online copywriting

Audience

Goals

Context of use

Online copywriting techniques}


Audiences

Novice vs. expert- Device- Domain- Site

Lower-literacy & elderly- Slower pace - ‘Plowing’ (reading every word)


Goals

‘Is this the one?’- Image- Name & number

‘Tell me more…’- Research-focused


Context of use

EnvironmentSpace, time, temperature, noise

OrganisationManagement pressures, work processes

TechnicalConnection speed, system configuration

DeviceDesktop; Laptop; Tablet; Phone


Exercise


Agenda




paragraphs - Concision & active voice- Providing the correct information- Page summary- Information scent


engines-


4. Managing a team


Factors

Font

Size

Contrast

Capitalisation

Underlining

Italics

Leading

Alignment

Line length

Visual interest


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.



Font

Guideline Arial or Verdana (sans-serif) For children: Comic Sans MS


Size

11 point minimum

Allow users to modify text size - Preferably through on-screen control

http://www.drc.org.ukhttp://www.walgreensoutreach.com


Contrast




Contrast

Black text/light background - Websites

Avoid white background- Interactive television displays

Avoid text on patterned backgrounds


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


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


110 characters

80 characters


Visual interest

Quote boxes Images White space


Agenda





engines-


4. Managing a team


Headings

Group related info

Provide group’s - Name - Start - Finish


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


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


Signpost Use phrase to summarise topic – then use search/branding terms


Exercise

Oxfam Create headings to help users scanning the page


Exercise

Diesel Create headings to help users scanning the page


Agenda





engines-


4. Managing a team


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


Lists ‘Signpost’ phrase can appear in bold


Exercise

Tablet PCs Find phrases to make bold that summarise the piece’s key messages


Exercise

Children and Tablet PCs Create better phrases to summarise the key messages


Exercise Children and Tablet PCs Create better phrases to summarise the key messages


Original

Improved


Lists

Group related info

Provide group’s Start Finish


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


Lists ‘Signpost’ phrase can appear in bold


Exercise

Oxfam Create lists to help users scan


Agenda





engines-


4. Managing a team


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


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)


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


Exercise Diesel Create links for more information on each carline


Exercise REM sleep & dreams Inserts links to the 2 studies mentioned in the passage


Unhelpful

Most useful


What do people see when they scan?


Make sure all important information is in:

HeadingBulletLink


Agenda





engines-


4. Managing a team


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


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


Sentences

1 subject/issue

15-20 words

No more than 1 comma, hyphen or bracketed-statement


Paragraphs

1 topic/subject

4 sentences

6 lines

Topic-sentence 1st sentence identifies topic


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)


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


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’



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


Agenda





engines-


4. Managing a team


Concise

Identify the ‘core’ messages & be as concise as possible Appropriate to the audience

Aim = 60% of offline word count


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’



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)


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)


Active voice

Gives shorter & simpler sentences

ActiveTim wrote this course (subject – verb – object)

PassiveThis course was written by Tim (object – verb – subject)


Exercise Health insurance email Critique the content of this email


Templates can be difficult


Agenda




paragraphs - Concision & active voice- Providing the correct

information- Page summary- Information scent


engines-


4. Managing a team


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


Agenda





engines-


4. Managing a team


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


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


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


Exercise

Diesel Write a summary for this page


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)


Agenda





engines-


4. Managing a team


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


BBC – link to example content

(Old design for bbc.co.uk)


Home Office - descriptions

http://homeoffice.gov.uk/crime/


John Lewis – rollover menu


Agenda





engines-


4. Managing a team


Email

‘From’ - 20 character max - Organisation name

‘Subject’ - 45 character max- Meaningful & informative

Test alternatives


Clickthrough rate

‘From’

PriceMinister Advice Baseline

Sophie at PriceMinister PriceMinister Info

Source: Econsultancy ‘Email Marketing’ course


Clickthrough rate

‘From’

PriceMinister Advice Baseline

Sophie at PriceMinister 56% PriceMinister Info 21%



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’



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’



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


Agenda





engines-


4. Managing a team


• PPC

• Pay per click

• Paid search

• Organic search

• Natural search

• Search engine optimisation


On-page optimisation (organic)

Page title

Headings

Content 4% density

Links


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)


PPC - Character limits

25353535

Google & Bing


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


Test alternate adverts


Agenda





engines-


4. Managing a team


Accessibility guidelines

Meaningful headings & link text

ALT Text Describe image’s information-content

Transcript Graphs, videos, audio


Agenda





engines-


4. Managing a team

[email protected]


Social

Deliver benefit

Audience focus

Timing

Copywriting


Deliver benefit

Social is mainly for friends & family

Companies must provide reasons for people to engage: - Special offers; News & updates; Entertainment; Tools


Audience - factors

Country & Language - Intelligibility - Message relevance

Product/Service - Generally more relevant than ‘umbrella’ organisation

Stakeholder- Customers, Suppliers, Investors and

Press


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


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’


Agenda





engines-


4. Managing a team


Managing a team

We need to achieve consistent:- Best practice - Language & tone of voice

Relevant steps:- Define & document- Training- Ongoing support


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)


Training Support documentation - Printout of slides Include exercises

–Goldilocks (too hot, too cold, just right)

Ongoing support

- Feedback - Refresh training - Regular updates of policy


Agenda





engines-


4. Managing a team


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.


Websites

www.usability.gov/pdfs/guidelines.html

http://www.useit.com/papers/webwriting/writing.html

http://www.sun.com/980713/webwriting/

writing for the web 1 spotless interactive writing for the web tim fidgeon april 2012

Documents

attention writing

exercise writing

bold lists links

scanning ad blindnesshttp

context of useenvironmentspace

scanning aestheticswhat

scanning aestheticsonly

ut wisi enim ad minim