Usability & Writing For The Web

Why people use media Diversion - escape from routine or problems; emotional release Personal relationships - companionship; social utility Personal identity - self-reference; reality exploration; value reinforcement Surveillance - forms of information seeking - from “McQuail’s Mass Communication Theory: 5th edition,” 2005

Diversion - escape from routine or problems; emotional release

Personal relationships - companionship; social utility

Personal identity - self-reference; reality exploration; value reinforcement

Surveillance - forms of information seeking

- from “McQuail’s Mass Communication Theory: 5th edition,” 2005

Why do people visit a website? Most people visit a website to solve one or more of the following three problems. They want/need information. They want/need to make a purchase or donation. They want/need to be entertained. - Vincent Flanders, webpagesthatsuck.com

Most people visit a website to solve one or more of the following three problems.

They want/need information.

They want/need to make a purchase or donation.

They want/need to be entertained.

- Vincent Flanders, webpagesthatsuck.com

Content is king The single most important thing most Web sites can offer to their users is content that those users will find valuable. Information is what drives web sites Therefore any site must begin with engaging content.

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

Information is what drives web sites

Therefore any site must begin with engaging content.

Qualities of a good website Pages that load fast Reliable search function Page layouts that are visually engaging and easy to navigate Unobtrusive advertising Valuable information that caters to intended audience Fulfills users expectations with least amount of stress

Pages that load fast

Reliable search function

Page layouts that are visually engaging and easy to navigate

Unobtrusive advertising

Valuable information that caters to intended audience

Fulfills users expectations with least amount of stress

Individual experience The fact is no two people surf the Internet alike. Every human being has his/her own distinct thought processes to take him/her from POINT A to POINT B. AND people make a subconscious judgment about a person, environment, or product within 90 seconds of initial viewing.

The fact is no two people surf the Internet alike.

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

AND 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 Online attention span is minimal Consistency – uniform layouts Incorporate web conventions

Be as obvious as possible

Online attention span is minimal

Consistency – uniform layouts

Incorporate web conventions

Web Conventions Standard web elements that people who use web pages all the time recognize - Navigation across the top or left side - Search box - Hyperlinks that are colored and/or underlined

Standard web elements that people who use web pages all the time recognize

- Navigation across the top or left side

- Search box

- Hyperlinks that are colored and/or underlined

The Web is a Visual Medium The visual functionality of a web site is influenced by: - Text on the screen - Page layout - Images: graphics and photos - Color: Makes a psychological impact.

The visual functionality of a web site is influenced by:

- Text on the screen

- Page layout

- Images: graphics and photos

- Color: Makes a psychological impact.

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)

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

Blue is… … the most popular web design color. Color studies have shown that almost everyone likes some shade of the color blue.

… the most popular web design color.

Color studies have shown that almost everyone likes some shade of the color blue.

Know your audience Men tend to prefer cooler colors (blues and greens) Women tend to prefer warmer colors (reds and oranges). Young children tend to prefer brighter, more solid colors.

Men tend to prefer cooler colors (blues and greens)

Women tend to prefer warmer colors (reds and oranges).

Young children tend to prefer brighter, more solid colors.

Good design If good web site design can spark positive feelings among users, it will: Increase user productivity. Minimize visual fatigue. Entice users to return. Design sells, but the right design sells better.

If good web site design can spark positive feelings among users, it will:

Increase user productivity.

Minimize visual fatigue.

Entice users to return.

Design sells, but the right design sells better.

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 with the experience. But if visitors find a web page confusing and difficult to use, many will click away from the site, feeling irritated and unfulfilled.

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

But if visitors find a web page confusing and difficult to use, many will click away from the site, feeling irritated and unfulfilled.

Match the Medium On the Web , users are engaged and want to get things done . The Web is an active medium. While watching TV , viewers want to be entertained. They are in relaxation mode; they don't want to make choices . TV is a passive medium.

On the Web , users are engaged and want to get things done .

The Web is an active medium.

While watching TV , viewers want to be entertained. They are in relaxation mode; they don't want to make choices .

TV is a passive medium.

Experience In linear media, people expect you to construct their experience for them. In print and broadcast, readers/watchers are willing to follow the author's lead. Online users want to construct their own experience by piecing together content from multiple sources, emphasizing their desires .

In linear media, people expect you to construct their experience for them.

In print and broadcast, readers/watchers are willing to follow the author's lead.

Online users want to construct their own experience by piecing together content from multiple sources, emphasizing their desires .

“Ruthless” People arrive at a website with a goal in mind Tend to be ruthless in pursuing their own interests.

People arrive at a website with a goal in mind

Tend to be ruthless in pursuing their own interests.

Users aren’t really “reading” Most people don’t read web pages People scan pages, using their visual brains Provide visual hierarchy on a page with color, text size. “ Inverted pyramid” style of writing works well in cyberspace.

Most people don’t read web pages

People scan pages, using their visual brains

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

“ Inverted pyramid” style of writing works well in cyberspace.

Why inverted pyramid? Readers can stop at any time and still get most important parts of the article. We want to write long, but our readers want to read short. No delayed ledes. Put the nut graph of the story at the top.

Readers can stop at any time and still get most important parts of the article.

We want to write long, but our readers want to read short.

No delayed ledes.

Put the nut graph of the story at the top.

Write Visually Remember, the Web is a visual medium. No huge walls of gray text Use bulleted lists Use numbered lists Use tables Break up text with colorful pictures, graphics, video

Remember, the Web is a visual medium.

No huge walls of gray text

Use bulleted lists

Use numbered lists

Use tables

Break up text with colorful pictures, graphics, video

Writing For The Web Make it ‘tight and bright’ Use active voice and action verbs. Avoid overusing adjectives and adverbs. Use the five W’s, (who, what, when, where and why) but really remember the “so what?” Explain why the user should care

Make it ‘tight and bright’

Use active voice and action verbs.

Avoid overusing adjectives and adverbs.

Use the five W’s, (who, what, when, where and why) but really remember the “so what?”

Explain why the user should care

Writing For The Web Conversational style Cross between broadcast writing and print Lively verbs, colorful adjectives and distinct nouns. Keep paragraphs short. One idea per paragraph. Leave a blank line between paragraphs for ease of reading.

Conversational style

Cross between broadcast writing and print

Lively verbs, colorful adjectives and distinct nouns.

Keep paragraphs short.

One idea per paragraph.

Leave a blank line between paragraphs for ease of reading.

Prominence “ The more important something is, the more prominent it is. The most important headings are either larger , bolder , set off by a distinctive color, surrounded by more white space or nearer the top of the page - or some combination of the above.” – Steve Krug, ‘Don’t Make Me Think’

“ The more important something is, the more prominent it is.

The most important headings are either larger , bolder , set off by a distinctive color,

surrounded by more white space

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

– Steve Krug, ‘Don’t Make Me Think’

Readers on a mission Storytelling approach to exposition often slows down users on the web. Web users want actionable content – lots and lots of clicking. Link, link, link. Give users stuff to click on.

Storytelling approach to exposition often slows down users on the web.

Web users want actionable content – lots and lots of clicking.

Link, link, link. Give users stuff to click on.

Half the word count, please Only 16 percent web users read word-for-word. Readability improves if you use: - highlighted keywords - sub-headings - bulleted lists - one idea per paragraph - ½ the word-count of conventional writing.

Only 16 percent web users read word-for-word.

Readability improves if you use: - highlighted keywords - sub-headings - bulleted lists - one idea per paragraph - ½ the word-count of conventional writing.

Chunking Reading text on-screen is tiresome. So break up your information into logical " chunks ." The key to good chunking is to divide your information into comprehensive segments.

Reading text on-screen is tiresome.

So break up your information into logical " chunks ."

The key to good chunking is to divide your information into comprehensive segments.

Chunking, continued Long web pages tend to disorient readers; they require users to scroll long distances and to remember what is off-screen . The more a reader needs to scroll, the less likely they are to read the story. Chunking is a method to create consistency of web style, and helps readers understand the content flow on your site.

Long web pages tend to disorient readers; they require users to scroll long distances and to remember what is off-screen .

The more a reader needs to scroll, the less likely they are to read the story.

Chunking is a method to create consistency of web style, and helps readers understand the content flow on your site.

Hyperlinks Never construct a sentence around a link phrase, such as " click here for more information ." Write as you normally would and place the link on words that best describe the additional content. U.S. Sen. Chris Dodd's [ linked to Dodd’s official site ] latest television ad features the kind words of one of his closest colleagues: U.S. Sen. Ted Kennedy [link to Kennedy’s official site]. Poor: U.S. Sen. Chris Dodd's latest television ad features the kind words of one of his closest colleagues: U.S. Sen. Ted Kennedy. Click here to see Sen. Dodd’s official web page. Click here to see Sen. Kennedy’s official web page.

Never construct a sentence around a link phrase, such as " click here for more information ." Write as you normally would and place the link on words that best describe the additional content.

U.S. Sen. Chris Dodd's [ linked to Dodd’s official site ] latest television ad features the kind words of one of his closest colleagues: U.S. Sen. Ted Kennedy [link to Kennedy’s official site].

Poor: U.S. Sen. Chris Dodd's latest television ad features the kind words of one of his closest colleagues: U.S. Sen. Ted Kennedy. Click here to see Sen. Dodd’s official web page. Click here to see Sen. Kennedy’s official web page.

Headlines On the web, headlines sell the story Hyperlinked headlines are often the only thing a potential user will see at first. Online, the headline alone must provide enough “information scent” to let users predict what they'll get if they follow the link. Obvious = better. -Jakob Nielsen’s Alertbox

On the web, headlines sell the story

Hyperlinked headlines are often the only thing a potential user will see at first.

Online, the headline alone must provide enough “information scent” to let users predict what they'll get if they follow the link.

Obvious = better.

-Jakob Nielsen’s Alertbox

SEO / Headines SEO stands for S earch E ngine O ptimization. SEO is important because Google & Yahoo can drive lots of traffic to your content. Headlines should be SEO’d - use relevant keywords that people would use to search - 6 to 10 words; strong verbs If possible, put the same keywords in the first paragraph of the story.

SEO stands for S earch E ngine O ptimization.

SEO is important because Google & Yahoo can drive lots of traffic to your content.

Headlines should be SEO’d

- use relevant keywords that people would use to search

- 6 to 10 words; strong verbs

If possible, put the same keywords in the first paragraph of the story.

Other stylistic considerations Cultivate a voice. Web readers welcome a measure of individuality from their information sources. With so many competing sources, a unique conversational voice may help distinguish your content.

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

With so many competing sources, a unique conversational voice may help distinguish your content.

Options Most of the time, human beings don’t choose the best option. We tend to choose the first reasonable option. “ As soon as we find a link that seems like it might lead to what we’re looking for, there’s a very good chance that we’ll click it.” - Steve Krug,“Don’t Make Me Think!”

Most of the time, human beings don’t choose the best option.

We tend to choose the first reasonable option.

“ As soon as we find a link that seems like it might lead to what we’re looking for, there’s a very good chance that we’ll click it.”

- Steve Krug,“Don’t Make Me Think!”

Web habits Scanning and searching Rarely do web users start and end sessions in the same place Loyalty only to the page where they started Users stick with one site as long as it delivers what they are looking for .

Scanning and searching

Rarely do web users start and end sessions in the same place

Loyalty only to the page where they started

Users stick with one site as long as it delivers what they are looking for .

Competition for attention The easier it becomes to find places with good information, the less time users will spend visiting any individual website. (Blame Google for making it too easy!)

The easier it becomes to find places with good information, the less time users will spend visiting any individual website.

(Blame Google for making it too easy!)