Content is king

Ultimately, users visit your website for its content. Everything else is just the backdrop.

Jakob Nielsen, Designing Web Usability, p.99

Credibility of content 

Enhancing credibility

Users don't read online

Nielsen/Morkes study found:

Source: Alertbox, http://www.useit.com/alertbox/9710a.html

Why users scan

1. reading online is slower and harder

Reading from computer screens is tiring for the eyes and about 25 percent slower than reading from paper. No wonder people attempt to minimise the number of words they read. To the extent this reason explains users' behavior, they should read more when we get high-resolution, high-scanrate monitors in five years since lab studies have shown such screens to have the same readability as paper.

Source: Alertbox, http://www.useit.com/alertbox/whyscanning.html 

Why users scan

2. users need to feel active

The Web is a user-driven medium where users feel that they have to move on and click on things. One of our users said: "If I have to sit here and read the whole article, then I'm not productive." People want to feel that they are active when they are on the Web. 

Source: Alertbox, http://www.useit.com/alertbox/whyscanning.html 

Why users scan

3. is this the right page?

Each page has to compete with hundreds of millions of other pages for the user's attention. Users don't know whether this page is the one they need or
whether some other page would be better: they are not willing to commit the investment of reading the page in the hope that it will be good. Most pages are in fact not worth the users' time, so experience encourages them to rely on information foraging. Instead of spending a lot of time on a single page, users move between many pages and try to pick the most tasty segments of each.

Source: Alertbox, http://www.useit.com/alertbox/whyscanning.html 

Why users scan

4. lots of information out there: too little time

Modern life is hectic and people simply don't have time to work too hard for their information. As one of our test users said, "If this [long page with blocks of text] happened to me at work, where I get 70 emails and 50 voicemails a day, then that would be the end of it. If it doesn't come right out at me, I'm going to give up on it." 

Source: Alertbox, http://www.useit.com/alertbox/whyscanning.html 

Rules for writing

Rules for good writing learnt at school are still relevant online.

Also

See: Strunk's Elements of Style

3 key strategies for web writing

  1. be concise
  2. write objectively (avoid 'marketese')
  3. write for scannability

Why writing strategies matter

"A common thread between conciseness, scannability, and objectivity is that each reduces the user's cognitive load, which results in faster, more efficient processing of information."

Source: John Morkes and Jakob Nielsen, http://www.useit.com./papers/webwriting/rewriting.html

Being concise - in a nutshell

Be concise - expert advice

"Every sentence, every phrase, every word has to fight for its life"

Crawford Killian, Writing for the Web

"Krug's third law of usability: get rid of half the words on each page, then get rid of half what's left"

Steve Krug Don't Make Me Think, p. 45

"Write 50 percent less text."

Jakob Nielsen Designing Web Usability, p. 101

Happy talk must die

We all know happy talk when we see it: it's the introductory text that's supposed to welcome us to the site and tell us how great it is, or to tell us what we're about to see in the section we've just entered.

Source: Steve Krug Don't Make Me Think, p. 46

Example of happy talk

Removing the introductory paragraph would bring more of the content onto the user's screen.

example screen shot

Instructions must die

The other major source of needless words is instructions. The main thing you need to know about instructions is that no one is going to read them--at least not until after repeated attempts at 'muddling through' have failed.

Source: Steve Krug Don't Make Me Think, p. 46

Example - instructions

Source: Verizon.com site survey 

Example - trimming instructions

From this To this Result
The following questionnaire is designed to provide us with information that will help us improve the site and make it more relevant to your needs. Please help us improve this site. 25 words reduced to 6
Please select your answers from the drop-down menus and radio buttons below. REMOVE 13 words reduced to 0

Users don't need to be told how to complete an online survey.  If they do, the won't know what a 'drop-down box' or 'radio button' is anyway.

The questionnaire should only take you 2-3 minutes to complete. It will take you 2-3 minutes to complete this survey Same number of words used, but takes up less space on the page. 

It doesn't hurt to indicate how much time the survey will take. 

At the bottom of this form you can choose to leave your name, address, and telephone number. If you leave your name and number you may be contacted in the future to participate in a survey to help us improve this site. REMOVE 42 words reduced to 0

It doesn't belong here. Put it at the end of the survey (trim the text too) where I can act on it.

If you have comments or concerns that require a response please contact Customer Service. Do not use this form for comments or concerns that require a response. Contact Customer Service

An additional two words, but

  • made warning about inappropriate form use more clear
  • provided a link to contact customer service

Source: adapted from Steve Krug Don't Make Me Think, pp. 47-48

Write objectively

Users know marketing speak when they see it.

A study by John Morkes and Jakob Nielsen showed that overall usability of web content is significantly increased by writing objectively.

Source: http://www.useit.com./papers/webwriting/rewriting.html and Jakob Nielsen Designing Web Usability, p. 105.

Example - write objectively

Original text Using objective language Objective, concise and scannable
Nebraska is filled with internationally recognised attractions that draw large crowds of people every year, without fail. In 1996, six of the best-attended attractions in Nebraska were Fort Robinson State Park (355,000 visitors), Scotts Bluff National Monument (132,166), Arbor Lodge State Historical Park & Museum (100,000), Carhenge (86,598), Stuhr Museum of the Prairie Pioneer (60,002), and Buffalo Bill Ranch State Historical Park (28,644). Nebraska has several attractions. In 1996, some of the most-visited places were Fort Robinson State Park (355,000 visitors), Scotts Bluff National Monument (132,166), Arbor Lodge State Historical Park & Museum (100,000), Carhenge (86,598), Stuhr Museum of the Prairie Pioneer (60,002), and Buffalo Bill Ranch State Historical Park (28,644).

In 1996, six of the most visited places in Nebraska were:

  • Fort Robinson State Park
  • Scotts Bluff National Monument
  • Arbor Lodge State Historical Park & Museum
  • Carhenge
  • Stuhr Museum of the Prairie Pioneer
  • Buffalo Bill Ranch State Historical Park
Usability improvement 27% more usable 124% more usable

Source: Jakob Nielsen Designing Web Usability, p. 105.

Write for scannability

keep paragraphs short

break up text chunks with

Techniques for longer texts

need to reverse our writing structure for the web

Source: Jakob Nielsen http://www.useit.com/alertbox/9606.html

Example - inverted pyramid

example screen shot

Techniques for longer texts

Page titles are important

page titles (in header of HTML document) often displayed out of context

Page titles are microcontent

"A page title is microcontent and needs to be a pearl of clarity. You get 40 to 60 characters to explain what people will find on your page. Unless the title makes it absolutely clear what the page is about, users will never open it."

Jakob Nielsen, Designing Web Usability, p. 123.

Example - search results

example screen shot

Example - bookmarks

first words used in a title become very important

example screen shot

Example - history list

first words used in a title become very important

example screen shot

Tips for page titles

Careful use of humour

Design for legibility

Design for legibility

Example - legibility

busy backgrounds and lack of contrast hamper legibility

example screen shot

Meaningful text links

Underlining links

Hyperlink colours

colours for unvisited and visited links 

When non-standard link colours are used, users lose the ability to clearly see which parts of the site they have already visited and which parts remain to be explored.

Jakob Nielsen, Designing Web Usability, p. 62

Hyperlink styles

multiple styles of hyperlinking on one page can confuse users

Example - hyperlinks

small coloured squares are links at top left but not at bottom of page

example screen shot

Source: Monash Faculty of Art and Design

Hyperlinking objects

clickable objects

Example - clickable object

example screen shot

Source: Monash University

Example - clickable object

example screen shot

Source: One Art (note: design now changed)

Appropriate use of images

must add to the communication of information

avoid using graphics for text (headings, navigation, pull quotes)

Optimising images

Cropping and scaling images

Use of animations

Example - animations

all of these animated gifs were on the one page, some used more than once!

animationanimationanimation

animation

animationanimationanimationanimation

Source: All About Lawns

Use of multimedia formats

Inform users first

if you are going to use multimedia formats

Summary