Writing for the Web Megan McDermott Web Redesign Bootcamp November 19, 2010.

Writing for the Web

Megan McDermott

Web Redesign Bootcamp

November 19, 2010

Basic Principles

1. Users (usually) don't read

2. Content is a conversation

3. Text is wayfinding

4. Keep it short!

5. Keep accessibility and Search Engine Optimization (SEO) in mind

• “Communication at Waterloo? It’s about clarity, knowing your audience, and meeting their needs.”– Tell it like it is– Know your audience– Have a voice

• This is good writing for the web!

Users don't read, they scan

• Very important principle of web writing• Looking for relevant information• Often looking for specific information• Is this relevant? Is it interesting? Is it

useful?

Users don't read, they scan

Evidence

Evidence

It's a conversation

• Be casual, personal• Read it aloud• What does the user

need to know?• Talk to them: use

“you”, “we”• Avoid jargon, acronyms

It's a conversation

After you complete the form and send your payment, please allow one week for processing.

Or, in the right context:

Please allow one week for processing.

Be relevant

Content as wayfinding

• Scanning to find relevant content• Am I in the right place?• Does your content help or

hinder?• Sometimes no text is good text• Users coming from different

directions; may not have the context you expect

No text is good text?

Redundant

Shouldn’t be necessaryRefers to something further down

Keywords

• Users skim for keywords that match what they are looking for

• May enter these words into a search engine

ADMISSIO

NS

Residence

Co-opOrientation

Scholarships

Style Guide

eCommunity

Majors

Writing for scan-ability

• Get to the point!• Inverted pyramid style• Be direct• Give users only what they

need to know

Keep it short!

• Short paragraphs, short sentences• Be succinct• Say only what you need to say (not

more)• Remove unessential words

Keep it short!

Remove unnecessary words

Remove unnecessary words

Avoid “wall of text”

• Break up with headings, lists, useful graphics

• Facilitate scanning

Avoid “wall of text”

Titles & Headings

• Used for wayfinding & SEO• Each topic needs a heading• Be specific• Use keywords• Should make sense out of context

Paragraphs and sentences

• One idea per paragraph• Short – 1-3 sentences per paragraph• Compound sentences difficult to scan,

translate

Use short, simple sentences

The reputational rankings are always Waterloo’s pride, but the university also ranks high on objective criteria, according to Maclean’s, which placed Waterloo third in Canada — the same as last year — among the 12 “comprehensive” universities it ranked.

The reputational rankings are always Waterloo’s pride, but the university also ranks high on objective criteria. Maclean’s placed Waterloo third in Canada among the 12 “comprehensive” universities it ranked.

Using lists

• Help to break up text• Easier to scan• Draw reader’s

attention

Using lists

Using lists

Using links

• Users may scan through links• Screen readers facilitate this• Use clear labels• Make sure other text doesn’t look like a link

Example:

Formatting for readability

• Use correct formatting for all text elements– Headings– Paragraphs– Lists– Tables

• Design will enforce good formatting, spacing, link colours etc.

Formatting for readabilityHaven’t we seen this before?

Heading placed beside text

Formatting for readability

Formatting for readability

Useful metrics

• Recommended maximum lengths– headings: 250 characters– paragraphs: less than 3 sentences– sentences: less than 20 words

Resources

• How users read on the web (c. 1997!): http://www.useit.com/alertbox/9710a.htmland other articles:http://www.useit.com/papers/webwriting/

• Yahoo style guide (Writing):http://styleguide.yahoo.com/writing

• Writing effective web documents:http://www.tbs-sct.gc.ca/clf2-nsi2/tb-bo/td-dt/wewd-rdwe-eng.asp

Resources

• Waterloo Positioning Guide: http://positioningguide.uwaterloo.ca

• Writing for international audience: http://www.webpagecontent.com/arc_archive/139/5/