Usability and Writing For The Web

Marie K. ShanahanUniversity of ConnecticutSpring 2013

So what’s the recipe for a good online news story?

The Winning Recipe

• Details* • Design • Interactivity – means giving the reader

some input and control in a story.

*Usefulness

Ribbon image by Billy Alexander, http://www.sxc.hu/photo/1294754

“Too many organizations believe that a web site is about opening a new marketing channel or getting donations or to promote a brand.

No. It’s about solving your customers’ problems.”

- Vincent Flanders, webpagesthatsuck.com

Problem Solving

Most people visit a website because they want or need one or more of the following:

• Information• Entertainment / Diversion• Connect with others• Commerce

Users expect to be able to choose, read, listen, watch, click, share and/or participate.

The most popular sites have…

• Pages that load fast

• Reliable search function

• Layouts that are easy to navigate

• Unobtrusive advertising

• Information that caters to intended audience

The best websites fulfill users expectations with the least amount of stress.

Content is king

• The single most important thing most Web sites can offer to their users is content that those users will find valuable.

You have less than 90 seconds

• Every human being has his/her own distinct thought processes to take him/her from POINT A to POINT B.

• People make a subconscious judgment about a person, environment, or product within 90 seconds of initial viewing.

Don’t Make Me Think

• Be as obvious as possible

• Consistency – uniform layouts

• Keywords

The web is a visual medium.

The Psychology of Color“Vision is the primary source for all

our experiences.”

“We become bored in the absence of a variety of colors and shapes… Color addresses one of our basic neurological needs for stimulation.”

- Jill Morton, “Why Color

Matters”(2005)

Visual functionality

On a web page, successful communication is influenced by:

• Text on the screen

• Page layout

• Images: graphics and photos

• Color

Satisfaction or irritation?

If visitors feel like they have a “sense of mastery” over a web site, they will achieve their goals and find satisfaction.

If visitors find a web page confusing and difficult to use, many will click away, feeling irritated.

Web habits• Scanning and searching• Loyalty only to the page where they

started• Rarely do web users start and end sessions

in the same place• Users stick with one site as long as it

delivers what they seek.

Image courtesy of photoxpress.com

Users aren’t really “reading”

• People scan pages, using their visual brains.

• Provide visual hierarchy on a web page with text size, color, emphasis.

Prominence“The more important something is, the more

prominent it is. For instance, the most important headings are either

larger, bolder, in a distinctive color,

set off by more white space,

nearer the top of the page, or some combination of the above.”

– Steve Krug, “Dont Make Me Think”

Eyetracking

Images from www.useit.com/alertbox/reading_pattern.html

Eyetracking

Graphics from poynterextra.org

“Inverted pyramid” style of writing works very well on the web.

Inverted Pyramid

Graphic from: http://www.district196.org

Get to the point, already.

Put your text on a diet• 79% of web users scan any new page for individual

words and sentences.

• Only 16 percent read it word-for-word.

Targets

• Headlines – less than 8 words

• Sentences – less than 20 words

• Paragraphs – less than 70 words (about 6 lines on screen, then break of white space)

• Pages – less than 400 words

* These were the recommended targets when I worked at Patch.com

Readability on the web (guidelines)• Divide up information into logical

segments or chunks

• One idea per paragraph

• Highlighted keywords

• Bulleted lists

• Subheads

Don’t disorient me

• The computer screen provides a limited view of long documents.

• Long web pages require users to scroll and remember what is off-screen.

• “Chunking” information helps orient users.

Always include hyperlinks. Context. Transparency = credibility

Hyperlinking: Best Practices• Avoid construct a sentence around a

link phrase, such as “click here for more information.“

• Write as you normally would.

• Place the link on the keywords that best describe the additional content.

Deconstructing a hyperlink<a href=“http://www.uconn.edu”>University of Connecticut</a>

HTML code is “nested” = Content is sandwiched between code < >a=anchorhref=hypertext reference“” = you must put the URL in quotesURL = uniform resource locator/ = ends a code call

HTML is unforgiving. If you forget a piece, it won’t work.Always check to make sure your links work. Proofreading.

Search engines lead people to your information.

SEO = Search Engine Optimization

• Web headlines should include obvious keywords that people would use when searching for your story topic.

Headlines: Obvious = Better

• Online headlines alone must provide enough “information scent” to let users predict what they'll get if they click.

• Nothing else may be there to explain a story's content.

-Jakob Nielsen’s Alertbox

Cultivate a voice. Cultivate a voice. Readers welcome a measure of individuality from their information sources.

(image by photoxpress.com)

The Manolo says…“Do not be afraid to be different. In fact, being

different it is the advantage in the marketplace where there are fifty thousand [sources] on the topic you have chosen.”

- http://shoeblogs.com

Active Verbs, Active Voice• Marie was speaking to the audience.

(passive)

• Marie spoke to the audience. (active)

• Marie shouted / mumbled / whined / whispered / cried / questioned / growled / declared to the audience. (active, vivid, descriptive verbs)

Visualize your readersVisualize your readersAlways keep your audience in mind before and during your writing/designing/formatting.

Image by photoxpress.com

Constantly ask…• Why should readers care about this? • How can I make this information

better than my competition?• How can I make this information

useful to my readers?• How can I design this content to be

interactive and engaging?

Writing method

• Write• Read• Cut• Set aside• Cut more• Proofread• Post

Image by photoxpress.com

After you post

• Twitter• Facebook• Share with sources• Share with topic

“influencers”

Assignment• Take a “print” story you wrote in Newswriting I

or another journalism class and produce it on the web using the best practices.

• Give the story a “visual center” • Hyperlink to source material, additional

information• Format your text for ease of reading – short

paragraphs, white space, subheads, bold, bulleted lists.

• Put obvious keywords in your headline - SEO• Be a brutal word editor