Slide 1

Know how. Know now.

Web Content That Works for

Today’s Audiences

Effective Web Content

For Editors, Writers, DevelopersBy Anita Schaepe, Web Editor – CIT © 2009

By Anita Schaepe, Web Editor and Content Consultant - CIT, IANR, 2009 Effective, because today’s web users have limited time and attention spans, need to complete tasks and transactions quickly or else they will quit or go elsewhere. Effective= users can complete tasks they set out to do. Studies show readers spend less than 5 seconds on a page (more for home navigational pages-up to 30 sec.) determining if you have the information they need. Catch them while you can. You have 4.4 seconds. GO.

Slide 2

Know how. Know now.

Effective web content is:

Scannable

Concise

Personable

Meaningful

2

Users come to your site to do 1 of 3 things: 1) Find information; 2) Learn a process, 3) Make a transaction. (shop, buy, register, bank, etc) We will cover each of these elements in more depth. Can we have it all? Simplicity doesn’t have to be meaningless or mean talking down to people or dumbing down language. In fact, talk down to them and you’ve lost your audience. But overload your writing or your page and you’ve lost them, too. Simple sentences appeal to everyone—highly scannable. 1.Write simply; use bullets, subheads, bold fonts, visual cues 2. Get to the point. Avoid non-essential info. Provide calls to action 3. Treat it like a conversation. Users want to interact with a site 4. Show & Tell what content users will find here

Slide 3

Know how. Know now.

Scannable

Create pages that can be skimmed quickly

Use clues

Visual

Textual

Navigational

Give obvious calls to action.

Focus on text, not graphics.

3

“Scent of information”: an obvious trail to the desired information or product. (Jared Spool-www.uie.com) Visual cues, textual cues, navigational cues Make calls to action obvious. Use RH column, bars, graphics. For registration, Apply here, order here, contact us, etc. How users read on the web: http://www.useit.com/alertbox/9710a.html Focus on text: Most photos get <1 second of notice.

Slide 4

Know how. Know now.

Use white space effectively

Leave a blank line between paragraphs or when

leading up to a list

Avoid running text too far to the right

Keep it clean

4

Running text too far to right reduces readability and speed. Use photos, white space to break up text.

Slide 5

Know how. Know now.

Use bullet points and lists

Easily scanned

Moves reader to linked page or article

Bullets - un-ordered lists

Numbered lists - ordered lists

Give a brief description of content

Coping in Stressful Times During DroughtEmotional, physical, and financial aspects of drought-

related stress for farm families discussed.

(PDF version 524 KB; 4 pages)

5

HTML documents are preferred for reading online. Offer PDF as alternative. Label links to PDFs and other sites by title or topic, not by URL address. This is difficult to decipher onscreen: (http://www.ianrpubs.unl.edu/epublic/live/g1525/build/g1525.pdf) and can interfere with formats. Unlike print publications, it is unnecessary to show the address. Users will access the link by clicking, not typing. List related links of interest including docs. Give a brief description. One sentence or sentence fragment: The emotional, physical, and financial aspects of drought-related stress are discussed, along with recommended coping strategies. (*PDF 703 KB, 4 pages) * PDF requires Adobe Acrobat Reader. Download free. . (Exception for very widely recognized URL’s such as www.whitehouse.gov, or www.Google.com )

Slide 6

Know how. Know now.

Concise

Readers are impatient!

Be brief

Online reading is difficult

Most important information FIRST

Avoid fluff

6

Being Concise also helps with the ability to scan the page. It is more difficult and uncomfortable to read online than sitting back in your easy chair to read the paper or a novel. Background info may be good information to include in a subpage or elsewhere down the page, but not in the first paragraph. Put yourself in your user’s place. We are impatient and selfish! Provide the facts and information, calls to action, tools, your readers most likely want FIRST, and then links to deeper information, html documents, outside links…. Avoid fluff such as “Welcome” messages and all non-essential information Note about PDFs: Users may have a difficult time reading them; may not know to increase type size or how to use bookmarks, they may take a long time to load for some. We saw this over and over in usability tests performed at UNL.

Slide 7

Know how. Know now.

Use inverted pyramid style

KISS (Keep It Short and Simple)

Lead with summary

Next - important supporting information

Last – details

Remember, web readers are IMPATIENT!

7

KISS to avoid the Kiss of Death—be long and boring and they are gone! According to Jakob Nielsen of Nielsen Norman Group and useit.com, guru of web usability, readers read 25% slower online than in print, so we should give them about half as much text! Begin with the conclusion! Follow with most important supporting information, then details This helps readers scan for personally valuable information quickly. The readers are in control of what and how much they wish to read.

Slide 8

Know how. Know now.

Get to the point quickly

Users want information QUICK

Use subheads, sidebars and links

Use one subhead before user must scroll

Write shorter, more concise sentences

8

Nielsen calls this “lean forward style,” and “active, reader driven” content. Use short words, no more than about 5 syllables whenever possible. Word length is one important measure of reading ease by all indexes. (Even though many readers do understand longer words, the shorter the better for fast reading. Time less spent- more tasks accomplished.) On the Web users want to go places, do things, and get the information they need quickly Use subheads, sidebars and links for lengthier articles or background information. Offer printer-friendly pages for reading offline. Write short, concise sentences, short words and short paragraphs - more concisely than you would for lengthier, journals or publications. Make short paragraphs, breaking up the page with appropriate white space (use blank lines or horizontal rule <hr> to visually separate). Use no more than about 5 lines (on the screen) per paragraph. One idea per paragraph. A one sentence paragraph is OK.

Slide 9

Know how. Know now.

Personable

More conversational than standard print

Use “You” to draw reader in

Text is interaction

Target reader

Use “Words that Work”

Be objective, not promotional

Avoid “marketese”

9

from Dr. Frank Luntz’ Words That Work Use carewords-words that people care about or search with. Ref: www.customercarewords.com According to Ginny Redish, Letting Go of the Words, research shows that people inside an organization overestimate the words their readers know by 25%-30%. Just over half of consumers (54%) claim any familiarity at all with the term ’sustainability,’ and most of these consumers cannot define it appropriately upon probing. – Source: Hartman Group, 2007

Slide 10

Know how. Know now.

Meaningful

Divide information

Small chunks

Hyperlink together

Give options to dig deeper

Be specific

Link labels should mean something

7-10 words optimal

Tell them what they will get

Offer links, related pages, calls to action

10

Divide into small content-rich chunks. Link labels should be “dull as dirt” Cannot be cute or include clever titles---should be able to read out of context and know what is meant If you offer promise of more information, make sure you deliver what is expected. Put addresses in the usual 3-4 address line format-as expected.

Slide 11

Know how. Know now.

Use active voice

Use subject, verb, object

Avoid passive tense

Use strong, specific, actionable verbs.

Begin lists with an action verb or with a

specific noun.

Use the imperative form for instructions

11

Example: Passive – A new tool is being researched by the industry to optimize production. Vs. Active – The industry is researching a new method for optimizing production. Imperative example: Use the imperative form when instructing: (as I did above) • Use the UNL Winter Wheat Variety Selection Tool to screen varieties for the traits you are interested in, or, •Read about the variety characteristics and view images in the Virtual Tour. •Check Wheat Variety Testing results from UNL. After locating a few varieties that sound good to you check to see how your selected varieties performed in trials near you. Select the crop year and a list of available tables will show by county or region (html & .xls formats). (politely)

Slide 12

Know how. Know now.

Examples: before

12

Slide 13

Know how. Know now.

BYF after

13

Blank lines, bolded, short paragraphs, important program information first. Visual cues, calls to action.

Slide 14

Know how. Know now.

Before

14

Notice the flashy yellow New sign, which appears promotional can be detracting. Includes lengthy welcome message, blocks of text which are not the first items users would come here for.

Slide 15

Know how. Know now.

Use of bullets

15

Slide 16

Know how. Know now.

Good

16

Too much text, but uses bullets.

Slide 17

Know how. Know now.

Better

17

Ordered list, key points in bullets, links to further info, first things first

Slide 18

Know how. Know now.

18

Another example of bulleted information and links to more information

Slide 19

Know how. Know now.

Search Engine Optimization (SEO)

Recognizes and reads

Page titles, html headers and first words

Increase search rankings

Use keywords

Avoid jargon

Link to outside reputable sites

From within the text

Related links

19

Use HTML Headers, not larger fonts. SEO= Search Engine Optimization. Increasing the probability that your pages will show up near the top of a Google or other search engine list. Repeat essential key words, ‘carewords’, search words Page Title = the descriptive title that shows up in the blue browser bar at top of screen, is bookmarked by users, and is listed by search engines in a search. Users may hunt for links in text to more information; Referrals to your site from outside sources increase trust and reputation, in turn increasing SEO Running text clear across screen makes it slower to read or scan

Slide 20

Know how. Know now.

Descriptive Page Titles

20

Page titles coded correctly show up at top of blue browser bar, and as titles when you bookmark a page. They can be lengthy and should contain keywords, or words that users search with

Slide 21

Know how. Know now.

Web Exceptions to Style

Passive voice: If the key word is an object,

place it first. “Passive voice redeemed for

web headings”

Numerals are preferred online for numbers

Easier to scan and pick out quickly

Leave out punctuation in bulleted lists

21

Web Exception: When the key word is an object, place it first. It needs to be first in a headline or bullet list for scanning or search engine use; “Positive parenting skills are practiced by caring adults.” Use sparingly. Rephrase when possible. 1, 2, 3, rather than one, two, three; and 10 versus ten

Slide 22

Know how. Know now.

Best Fonts and Contrast

High contrast black on white

ALL CAPS are to be avoided even in

headers

Sans serif fonts are easier to read quickly

Don’t mix font types on a page

22

Reverse of white on black can be effective sometimes. All caps is slower reading. Sans serif according to studies, is easier to read quickly. Have we adapted? Verdana, Arial, Calibri are all good choices.

Slide 23

Know how. Know now.

Copy edit and test

Look at it onscreen as viewers would

Proofread; put it away; proofread again.

Consult a Web style guide

Read it out loud; does it get across essential info

concisely?

Usability Testing

23

DUH, but check it in all common browsers for effect, clarity, graphics. Usability testing: Assign a neutral audience member a specific task; follow their actions, watch for errors, frustration. Succes. Meant for correcting glaring issues of user success. Remember, users are IMPATIENT. and have millions of options at their fingertips. Test, tweak, test again. (Lana’s presentation follows this one for in depth info on usability studies.) Visit http://usability.unl.edu for more info and our findings

Slide 24

Know how. Know now.

A nod to the experts:

Ann Wylie, Wylie Communications: Three tips to

creating copy that clicks, www.wyliecomm.com

Jakob Nielsen of www.useit.com:

Tips to attract online readers

Writing for Reuse

Writing for the Web

24

Killer Web Content, Gerry McGovern- www.gerrymcgovern.com www.Customercarewords.com

Slide 25

Know how. Know now.

Additional references

Letting Go of the Words: Writing Web Content that Works,

Janice (Ginny) Redish, 2007, Morgan Kaufmann Pub.

User Interface Engineering, Jared Spool-

www.uie.com

The Web Style Guide 3rd Edition (online), Basic

Design Principles for Creating Web Sites, by Patrick

J. Lynch and Sarah Horton

25

We in CIT keep a house style guide as a wiki and in addition I have added, or begun, a web style guide and web projects style guides which is part of that. The intention is to make it a webpage within our department pages that can be shared with our authors and web developers.