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

Writing for the Web 1 Spotless Interactive Writing 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/98 0713/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 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 Environment Space, time, temperature, noise Organisation Management pressures, work processes Technical Connection speed, system configuration Device Desktop; Laptop; Tablet; Phone

Writing for the Web 16 Exercise

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.

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.uk http://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.

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 amet Confused with links Lorem ipsum dolor sit amet Only 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 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 37 Exercise Diesel Create headings to help users scanning the page

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 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 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 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

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

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: Heading Bullet Link

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 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

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 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 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)

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 Active Tim wrote this course (subject – verb – object) Passive This 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 83 Templates can be difficult

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 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 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 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 98 Email ‘From’ - 20 character max - Organisation name ‘Subject’ - 45 character max - Meaningful & informative Test alternatives

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 email Link to online version

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)http://www.google.com/technology

Writing for the Web 110 PPC - Character limits 25 35 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 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 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 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

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/

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:

Similar presentations

About project

Feedback

Log in

Auth with social network:

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:

Similar presentations

About project

Feedback