Writing for the WebWriting for the Web

Mike Hopkins and Chris Madison

Agenda Reading on the Web Writing Web Content Tips Resources

Note: Writing for the web is about so much more than the written word

How do Users Read on the Web? “They don't”

Jakob Nielson, Alertbox for October 1, 1997 (data validated again in 2006)

Most web readers scan pages Pick out relevant words and sentences 79% always scan a new page 16% or less read every word

How Do Users Read on the Web?

Web a visual medium Construct meaning from

headings, sub-headings links and bold or emphasized text

Print longer text to read offline

Users’ State of Mind User driven medium and users want to feel they are

active on the web at all times and get tasks done quickly.

Users are in an engaged and action-oriented state of mind.

Constantly deciding whether to jump to anther part of the page, site, web, etc. 3-10 seconds to get their attention and keep it before they hit the

back button or another link (perhaps much less) The back button is the most frequently used browser command.

Web medium and net culture encourages behavior with hyperlinks, etc.

Users Read Text Before Images

People tend to read text (3/4 of the time) before they look at any images – exact opposite of what they do on paper.

Think of how you scan a newspaper – we tend to read the headlines and pictures first.

Go to briefs and captions first, then scan pictures. Stanford and Poynter Institute study on reading online

newspapers. http://www.poynterextra.org/et/i.htm

Writing Web Content

Preparing to Write

Know your audienceKnow your audienceKnow your audience

Know Your Audience You are not your audience Take yourself out of the design process Who are your audiences?

Write for the 80% Write for primary and secondary audiences (if significant) Do not write for the exception

Don’t even consider writing until you know who you are writing for and how to engage them

Basic Demographics Age and gender of target audience? Educational level? Spending habits?? Occupation and hobbies? Geographical location? Are they expert (professionals) or novice? (consumers) with your

subject area? Why are they coming to your site? What do they want to do/find? What is their reading level? Level of comfort with browser, web, etc.?

User Research Demographics are just “the facts” not the meat What is your user’s worldview? We employ many research methodologies; qualitative

user research, task analysis, etc. For this class if you can, interview someone else

about your subject are; How do they think about the subject of your site in their daily lives? What perceptions or misconceptions do they have? What information interests them? What questions do they want to know about the subject? What tasks might they want to do? What features might they want?

Web Writing Style: Inverted Pyramid

Print Web

Build up to conclusion through the points and detail

State conclusion first Summarize your main points in the first paragraph Provide detail or supporting material at the end

Writing Style: Inverted Pyramid

Header

Background info, supporting details, links,

call to action

Blurb

Islands of Content

Each page is an “island of content” User can land on it from anywhere

Writing for 3D hyperspace What is this page about? Who is it for?

Expert, novice, type of user Where is this page in relationship to the rest of the site?

What can they do? What do you want them to do?

How to Write for the Web

“How to Write for the Web” By John Morkes and Jakob Nielsen

Results show most usable writing style is: Concise Scannable Objective

Writing for Scanning: Use Hierarchies

HTML naturally designed for hierarchy and users create meaning from the hierarchy Page title Topic title or heading Sub-topic or sub-heading Topic Sentences: Some viewers read ONLY the first sentence in a chunk. Bold words (italic is not easy to read on the web and should generally be

avoided) Links (see below for developing a linking style) Other forms of emphasized text (with visual treatment, etc.)

Structure Content: Concise Information Chunks

What is a chunk? Any idea that needs to be accessed individually.

One idea per chunk. Not more than 100 words.

Every word within a chunk is visible on the screen at one time.

Organize chunks into CLEAR hierarchies A well constructed chunk provides the reader with all

of the information they need to know as well as links to related or supporting pages. Readers may or may not have read the page before the one

they are on and may not read the following page.

Be Concise and Objective

Remove extra “marketing” words when not needed, avoid hyperbole Promotional text adds to cognitive load as users

have to evaluate truth Cut text by 50% from a (non-web) written version 1 page on the web = 1/2 page of print

Be Concise and ObjectiveAND Personal!

The web is a personal medium. You are talking directly to your users on a one-to-one basis. Engage them!

Capitalize on their action oriented engaged state of mind Use action oriented voice, imperative statements such as

Order Now! Start Here! Nike Home

Write for Scanning: Bulleted Lists

Bullets Bulleted lists are easy for users to scan Most effective list is 3 – 5 items If list is to long loses effectiveness Break into logical subgroups or combine elements in the list

Write for Scanning: Tables

Tables can help organize information Especially good when users need to compare options

or understand sequential order Examples: Program Summaries

Compare All Programs

Optimization Optimize every part of the page Headers and sub-heads

Catchy names don’t give users the information they need

Summaries and other micro content Site Point Guidelines Tibco Example (move and relink)

Embedded Linking Links can mislead!

Users scan links to determine content Link carefully

Don’t link users OUT of your content before you want them to leave the page or your site

Users tend to click on the first link they see Don’t link just because you can Typical example:

SU school pages often mention Stanford University in first paragraph and link to SU Home. User clicks out of the site and never returns.

Embedded Linking Style

Lower usability This embedded link is surrounded by text. Embedded link is followed by text.

Higher usability Example:

This is not an embedded link The additional descriptive text appears as a

separate line

Get Important Content “Above the Fold”

Users are now more comfortable with scrolling When in a hurry they don’t always do so – miss content

Very audience dependent Online shoppers may not scroll Prospective students are highly motivated and are more likely to

scroll

Even experienced users often miss important information if it is not “above the fold" or amount of content that displays in their monitor

EXAMPLE of solution

Writing for Printing All content is not appropriate for web writing style If it is a document you intend the user to print and

read: Provide a brief summary of the document so that user knows

whether the document is relevant to them. Sub-divide the info, add TOC, subheadings, links, anchors, Assume the user will print the entire document to read it.

Make SURE the entire document prints with one print command – never break up text that needs to be printed in one document – process, job aids, research papers, etc.

Use Cascading Style Sheets to control print (removes navigation and extra graphics)

Writing to be found – Search Engines

Various types of search engines Crawlers Human Power Directories Hybrid of both (getting more common)

Test content periodically with various search engines - make sure the results are what you want

Check Search Engine Watch regularly for updates Best info now requires membership

Writing to be Found – Search Engines A few tips from Search Engine Watch

Search engines will also check to see if the search keywords appear near the top of a web page, such as in the headline or in the first few paragraphs of text. They assume that any page relevant to the topic will mention those words right from the beginning.

Frequency is the other major factor in how search engines determine relevancy. A search engine will analyze how often keywords appear in relation to other words in a web page. Those with a higher frequency are often deemed more relevant than other web pages. Go explore more! Search Engine Placement Tips and

other articles

Writing to be Found - Accessibility There is no usability without accessibility Basic guidelines for accessibility can be found at:

508 Checklist www.webaim.org/standards/508/checklist?templatetype=3

WC3 Consortium http://www.w3.org/WAI/

Mike quick recap here

Writing for the World

“Start with Plain English” Use short sentences Use simple, common, concrete words Use “you” (second person) Use the active voice mostly Use positive language Put the main idea first

Be stricter than usual about sentence length 20 word maximum

P. 47 & 50 Web Word Wizardry

Adapting for World Wide English Try to avoid slang, hidden metaphors, and idiomatic expressions

Just around the corner The tip of the iceberg In the ballpark

P. 50 Web Word Wizardry

Be specific with dates Example: 3 February 2006

US: 2/3/06 Others: 3/2/06 Others: 06/2/3 Etc.

On a form, give them the date format such as mm/dd/yyyy P. 56 Web Word Wizardry (adapted)

Adapting for World Wide English

Avoid phrasal verbs (two or more words) Instead of pick up , write collect Instead of pick up on, write notice or observe Instead of pick out, write choose or select, etc.

Use simple tenses Beware of short common words with many

meanings Double-check the clarity of, it, they, this, these,

that and those P. 52 Web Word Wizardry

Example: Bechtel page!

Jargon Free Zone Avoid domain jargon Avoid abbreviations unless they are universally

recognized (USA ok) Write for the un-indoctrinated

TIPS

A few tips on writing your content

Home Page Content First time visitor needs to immediately know what your site will do

for them Home page is an ad for the rest of the site –

Must sell users to continue their exploration and return again and again if that’s appropriate

Include: What is this site about and who is it for Why should I be here? What is the benefit of continuing to explore the site What are my options, what is the site hierarchy? Timely content and teases for the rest of the site Search, short-cuts, registration, etc. Where do I start?

Write to Brand Everything about a site is the brand

Site architecture, information architecture, visual design, and every word you write

What is the brand? How do you want it be experienced? “Experience is the brand” . . . Clement Mok

See Resources section below Write to gain the trust and credibility Web democratizes – you need to stand out as reliable, up-to-

date Disclose who is behind the site, where you are located, etc.

Address Specific Audience Voice and emphasis can differ from section to section

or user segment to user segment if appropriate Examples:

Prospective students versus parents Expert versus novice users Luxury purchase versus basic necessity

In general a conversational tone is preferred by web users (goes back to personal nature f the web)

Response Cues

Web is an interactive medium - What do you want the user to do?

Don’t strand them at the bottom of the page – direct them

Every page can have a call to action. Call to action

Fill out a form Proceed to deeper information Email Sign-up

Invite them to act in their own interest to get them to respond Tell them the benefits of their action.

Response Cues: Example “Just fill-out this form to make sure you get regular

updates on the latest research in biotechnology – and you may win a free seminar of your choice! ”

Establish a Style Guide Develop a style guide for your site:

Establish a glossary for you/your writers that shoes how to address abbreviations, acronyms, capitalization, gender, italics, numbers, quotes, product names, proper names and trademarks

Provide standards for bibliographies, references, unusual punctuation More p. 136 The Web Writers Guide

Establish a Style Guide Include commonly missed web terms such as:

Logon – noun Log on – verb (sign-on better end-user term)

World Wide Web – formal name WWW – formal abbreviation web – web pages, website Minimize Hyphenation

Use online not on-line Email versus e-mail – your choice but pick a standard.

Some editors still prefer E-mail to make meaning clearer. More at:

http://www.webreference.com/content/writing/overcome.html

Content Development/Mgt.Plan For large professional sites we develop a content

development/management plan which includes the whole world of information design as well as process and technology Tool include: page templates, content templates Methods for presenting quantitative information, etc. As well as technical strategies like content management

systems, etc.

Just be aware that all this exists when you venture out into the world

Question Everything Question every idea and word you want to put

on the site – everything you write is for a user – think and then think again about why you want to include each piece of content.

What is the benefit of every word to your audiences?

Test Meaning!What Meaning Did You Create?

Web is a visual medium Test the meaning you have created Ask someone else to tell you what the page is

about WITHOUT reading the text – just the headings, subheads, links, etc.

Rules of thumb: reduce your text by 50% from print Red Cross Authorized Provider

ResourcesResources

Netography

Jakob Nielsen’s useit.com http://www.useit.com/

(search on writing for the web)

Quality Web Content http://www.webpagecontent.com/

(by author of Web Word Wizardry)

Netography (and writing resources)

Microcontent: How to Write Headlines, Page Titles, and Subject Lines http://www.useit.com/alertbox/980906.html

Writing Headlines P.124 Nielsen, Designing Web Usability (book)

Writing Hypertext Copy http://kbs.cs.tu-berline.de/~jutta/ht/writing/text.html

Netography Elements of Style, by William Strunk, Jr. Newsgroup on English language use

http://alt-usage-english.org/fast_faq.shtml Writing Web for the Web; Quick and Easy Tips for Non-

writers http://www.webreference.com/content/writing/

A List Apart: Articles: 10 Tips on Writing the Living Web Many many more – look up Writing for the Web

Bibliography (linked to Amazon)

The Web Writer's Guide by Darlene Maciuba-Koppel

Hot Textby Jonathan Price (Author), Lisa Price (Author)

Writing for the Web (Writers' Edition)by Crawford Kilian

The Web Content Style Guideby Gerry McGovern (Author), et al

Designing Web Usability: The Practice of Simplicity

by Jakob Nielsen Prioritizing Web Usability

by Jakob Nielsen, Hoa Loranger

Bibliography

Web Style Guideby Patrick J. Lynch, Sarah Horton

Web Word Wizardry A Net-Savvy Writing Guideby Rachel McAlpine

Persuasive Online Copywritingby Bryan Eisenberg, et al

The Online Copywriter's Handbookby Robert W. Bly

Developing Online Contentby Irene Hammerich, Claire Harrison

Words That Sell By Richard Bayan

Bibliography The User is Always Right: A Practical Guide to Creating and Usin

g Personas for WebSteve Mulder with Ziv Yaar Chapter Available:

http://www.boxesandarrows.com/files/banda/long-live-the-user/Mulder_TheUserIsAlwaysRight_Ch3.pdf

About Face 2.0 The Essentials of Interaction Design By Alan Cooper and Robert Reimann

Emotional Branding: the new paradigm for connecting brands to peopleMarc Gobé

The 22 Immutable Laws of BrandingBy Al and Laura Ries