Designing usable web content

The University of Georgia

CSCI 4800/6800
Spring 2006

Content is king
Ultimately, users visit your website
for its content. Everything else is
just the backdrop.
Jakob Nielsen
Designing Web Usability, p. 99

Overview (1)
writing for the web
microcontent
- page titles
- page headings & sub-headings
- hyperlinks

online documentation

Overview (2)
graphic & multimedia content
- images, animation, video, sound

credibility and content

User constraints
develop content for target
audience know your users!

technical context
goals and preferences

behavior online

Creating web content

web content should be
created for use online
re-purposed for use online

Content archives
archives (text or multimedia)
be searchable

provide summaries, snapshots in

suitable web format

Rules for good writing

apply to web writing
deliver your message effectively
enhance credibility

Essential strategies for web writing

1. concise
2. easy to scan
3. objective
"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.
Morkes & Nielsen, 1998

Web writing study 1

5 versions of travel web site were tested.
Each version had a distinct writing style, though all
contained essentially the same information

1. promotional (control)
2. concise

3. scannable
4. objective
5. combination of 2, 3, 4

Web writing study 1

51 users took part
ages 22-69 (average 41)
average 2 years web experience

Each version of site

7 pages
same hyperlink structure

Web writing study 1

tasks were:
locate specific information
judgment task (find information, make
judgment about it)
questionnaire
Part 1 (after the first 2 directed tasks)
Part 2 (after the judgement task)
short exam (after 10 minutes study)

Web writing study 1

test measures:
task time (in seconds)
task errors (percentage)
memory (percentage)
time to produce sitemap (in seconds)
subjective satisfaction (scale 1 to 10)

Hypotheses
1.

Users of the scannable and concise versions of the

website will spend significantly less time performing
tasks than will users of the control version.

2.

Scannable and concise users will make significantly

fewer errors on tasks than will control users.

3.

Scannable and concise users will remember site

content significantly better than will control users.

4.

Scannable and concise users will take significantly

less time to recall the website's structure than will
control users. However, all groups (control, scannable,
concise, and objective) will perform the same on
sitemap accuracy, since the site's structure is simple.

Hypotheses
5.

Objective, scannable, and concise users will report

significantly higher subjective satisfaction with the site
than will control users.

6.

Combining objective, scannable, and concise writing

styles into a single site will result in significantly better
measures on task time (6A), error rates (6B),
memorability (6C), site structure (6D), and subjective
satisfaction (6E).

7.

When measures from the first six hypotheses are

combined into an overall usability score for each
version of the site, the scannable, concise, objective,
and combined versions will have higher usability
scores than the control version will.

Results
Condition

Task
Time
(secs)

Task
Errors
(%)

Memory
(%)

Sitemap
(secs)

Subjective
Satisfaction
(1-10)

Promotional

359

0.82

0.41

185

5.7

Concise

209

0.40

0.65

130

7.1

Scannable

229

0.30

0.55

198

7.4

Objective

280

0.50

0.47

159

6.9

Combined

149

0.10

0.67

130

7.0

Conclusions
Hypothesis 1 was confirmed. Users of the scannable
version performed tasks significantly faster than users of
the control version did, t(19) = 1.95, p < .05, one-tailed.
The same was true for users of the concise version,
t(19) = 2.24, p < .05, one-tailed.
Hypothesis 2 was supported. Scannable users made
significantly fewer task errors than control users, t(19) =
2.16, p < .05, one-tailed. Concise users also made fewer
task errors, but the difference approached significance,
t(19) = 1.47, p < .10, one-tailed.
Hypothesis 3 was confirmed. Scannable users had
significantly better memory of site content than did
control users, t(16) = -1.73, p < .05, one-tailed. Concise
users did, as well, t(17) = -2.77, p < .01, one-tailed.

Conclusions
Hypothesis 4 was partially confirmed. As predicted, concise users
took significantly less time to recall the site's structure than
control users did, t(19) = 2.98, p < .001, one-tailed. However,
there was no significant difference in the amount of time
scannable users and control users took to remember the
structure, t(19) = -0.40, p > .69.
As expected, there were no significant differences between the
sitemap accuracy scores of the control users and: scannable
users (t(19) = -0.16, p > .88), concise users (t(19) = -0.24, p >
.82), or objective users (t(19) = -0.09, p > .93).
We did not predict (nor did we find) significant differences
between objective users' and control users' measures for task
time, task errors, memory, or sitemap time. However,
compared to control users, objective users tended to perform
the tasks faster, make fewer task errors, remember site
content better, and recall the site structure faster. The
differences are not significant, but they all point in the same
direction (i.e., they suggest that the objective version is
"better" than the control).

Conclusions
Hypothesis 5 was confirmed. Scannable users reported
significantly higher subjective satisfaction with the site
than control users did, t(19) = -2.41, p < .05, one-tailed .
The same was true for concise users (t(19) = -1.85, p <
.05, one-tailed) and objective users (t(19) = -1.76, p <
.05, one-tailed).
Hypothesis 6 was confirmed. Users of the combined
version performed tasks significantly faster than users of
the control version did, t(19) = 3.30, p < .01, one-tailed.
They also made fewer errors (t(19) = 3.36, p < .01, onetailed), remembered more (t(17) = -4.56, p < .001, onetailed), drew the sitemap faster (t(18) = 3.42, p < .01,
one-tailed), and had higher subjective satisfaction (t(19)
= -1.90, p < .05, one-tailed).

Conclusions
Hypothesis 7 was confirmed. Overall usability scores for all
versions of the site show that, compared to the control
version, the scannable version is 47% better, the
concise version 58% better, the objective version 27%
better, and the combined version was 124% better.
Table 2 contains these data, as well as each condition's
normalized mean score for each major measure.
Nineteen out of 20 mean scores were higher than the
corresponding scores for the control version, meaning
that the other four versions were "better" than the control
for nearly all of these measures.

Web writing study 2

2 test web sites were created using technical
whitepapers from Suns web sites
Site 1
3 pages
each ~ 2,200 words
original version of documents

Site 2
8 pages
each ~ 350 words
rewritten version of documents
(concise, scannable, objective)

Web writing study 2

21 participants (technical users) took part
in study. Tasks were:
find specific information

judgment task (find info, make judgment about

it)
questionnaire
short exam (after 8 minutes studying the site)

Web writing study 2

Four test measures were used:
task time (in seconds)
task errors (percentage)
memory (percentage)
subjective satisfaction (scale 1 to 10)

Results
Task
Condition
Time

Task
Errors

Subjective
Memory
Satisfaction

original

637

0.91

0.33

4.9

rewritten

315

0.10

0.65

6.7

Usability improvements
Study 1
Overall usability improvement: 124%
http://www.useit.com./papers/webwriting/writing.html

Study 2
Overall usability improvement: 159%
http://www.useit.com./papers/webwriting/rewriting.html

Be concise
Every sentence, every phrase, every word
has to fight for its life
Crawford Kilian
Writing for the Web, pp. 58-9

omit unnecessary sentences in a paragraph

omit unnecessary words in a sentence
use a short word over a long one

Be concise
Happy talk must die
Steve Krug
Don't Make Me Think, p. 46

get rid of welcome messages and introductory text

dont waste words telling users where they are or
what they can do
dont waffle on with explanations of whats on the
site

Example of happy talk

Getting rid of happy talk

Be concise
Instructions must die
Steve Krug
Don't Make Me Think, p. 46

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.

Example wordy instructions

Trimming instructions
Original

Revised

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

Trimming instructions
Original
Please select your
answers from the dropdown menus and radio
buttons below.

Revised
[removed]

13 words reduced to 0

Trimming instructions
Original
The questionnaire
should only take you
2-3 minutes to
complete.

Revised
It will take you 2-3
minutes to complete
this survey.
Same number of words
but uses less space.

Trimming instructions
Original
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.

Revised
[remove]

42 reduced to 0

Trimming instructions
Original
If you have comments
or concerns that
require a response,
please contact
Customer Service

Revised
Do not use this form
for comments that
require a response.
Contact Customer
Service.
Same number of words
but more direct and
provides contact link.

Trimming instructions
rewritten version:
Please help us improve this site. It will take you
2-3 minutes to complete this survey.
Do not use this form for comments that require a
response. Contact Customer Service.

Before: 103 words

After: 31 words

Improve scanning
use simple sentence structures
keep paragraphs short

one-topic per paragraph

opening sentence in a paragraph should
be the topic sentence

Improve scanning
break up text with headings and subheadings
use meaningful headings and subheadings
use bulleted lists
highlight or emphasize key words or
phrases

Other beneficiaries
techniques that improve scanning also
assist disabled users
users with cognitive/reading disabilities
those using text-to-speech browsers

Techniques for longer text

normal style of writing
introduction
background material

details/facts
conclusions

needs to be reversed

Techniques for longer text

use inverted pyramids
conclusion first
important details next
other details and background last

provide a summary paragraph

Inverted pyramid example

Techniques for longer texts

use page chunking for non-linear content
split information into page-long
hyperlinked chunks
intro page with links to content pages
each page focuses on one topic/theme

background info on secondary, linked

pages

Page chunking example

Techniques for longer texts

limit the use of within-page links
(named anchors, bookmarks)
users may think theyre being taken to

another page
may think back button isnt working
properly

Use objective language

limit use of promotional writing
(marketese)
avoid exaggeration, boasting
dont make subjective claims or claims
without evidence

Objective writing example

Nebraska is filled with
internationally
recognised attractions
that draw large crowds
of people every year,
without fail. In 1996,
some of the most
popular places were

Nebraska has several

attractions. In 1996, some
of the most-visited places
were

In 1996, six of the mostvisited places in Nebraska

were

What is microcontent?
page titles
page headings & sub-headings
text hyperlinks

microcontent very small

amount of space to make your
message clear

Importance of microcontent
often read out of context, truncated
search results
bookmarks/favorites

browser history lists

during quick page scan

text-to-speech readers links summary

Microcontent example (1)

search results

Microcontent example (2)

browser bookmarks

Microcontent example (3)

browser history list

Microcontent example (4)

poorly-worded hypertext links

Microcontent techniques (1)

a clear and accurate description
of whats on the page
of whats in the paragraph below the heading
of what the hyperlink leads to

"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

Microcontent techniques (2)

short and scannable
titles get truncated in bookmarks/history lists
avoid unnecessary words (welcome to..)

dont use all uppercase (harder to scan)

put important words first
dont use articles (a, the)

Microcontent techniques (3)

all pages should have unique titles
to identify one page on your site from another
to assist user locate specific content

Online documentation
help doesnt!
Its just not acceptable for web sites to come with
documentation.

Jakob Nielsen, Designing Web Usability, p. 129.

user interface problems can not be

corrected in the documentation

When is online documentation OK?

Intranet
- staff may be willing to invest time reading
documentation

Extranet
- business partners may be willing to invest
time reading documentation

Internet
- users less likely to invest time reading
documentation. Will do so only when theyre
in trouble and have nowhere else to go

Writing online documentation (1)

hire a professional
must be searchable
must be task-oriented, step-by-step

must be concise

Writing online documentation (2)

provide links to a glossary
use examples to demonstrate
instructions
I cannot stress enough the need for examples.
Every user we have ever interviewed about
computer documentation has requested more
examples.
Jakob Nielsen, Designing Web Usability, p. 131

Graphics and multimedia content

disadvantages
take more time to download

(some) require special plug-ins

not accessible to all users
- non-graphical browsers
- dont have/dont want/cant install plug-in
- sight/hearing disabilities

Graphics and multimedia content

advantages
can convey information quickly

enhance e-commerce
useful for cognitively impaired

useful for deaf community

Tips for using graphics (1)

never use gratuitously

- should provide information
- should complement/relate to content
- resist temptation to render text as graphic

Gratuitous use example

TV image used for
channel navigation
metaphor does it
add to or enhance
content?

All text rendered

as images

Tips for using graphics (2)

use appropriate format
- better compression
- better quality

- better rendering

Appropriate format example

JPEG 25Kb

GIF 44Kb

Appropriate format - example

GIF 2.5Kb

JPEG 4.6Kb

Tips for using graphics (3)

optimise file size (dimensions)
- crop and scale
Relevance-enhanced image reduction results in
images that preserve both context and detail, even
at very small sizes.
Jakob Nielsen, Designing Web Usability, p. 140

Cropping and scaling - example

cropped

scaled

cropped and scaled

Tips for using graphics (4)

Optimise file weight (Kbytes)

- reduce colours

- balance file size and quality

Balancing quality & file size example

20Kb

13Kb

Tips for using multimedia (1)

use format appropriate for content
PDF for content to be printed with format
retained
animated formats to show movement,
transitions, 3-dimensionality, change over
time

Tips for using multimedia (2)

use common formats (PDF,

Flash, quicktime)
dont rely on auto-download & install
ensure users are motivated to
install plug-in
(content must be worth it)

Tips for using multimedia (3)

dont

force it on users

- use plug-in detection scripts with care!

- tell people what theyre downloading (size
and format)

provide

accessible alternatives

- text
- images in standard format

Tips for using video/audio

provide short previews

- use these to motivate users to download
- allow users to make an informed choice

segment larger works into

topical chunks
- allow users to choose portions to view/hear

Credibility
anyone can publish online
credibility, trustworthiness,
expertise are unclear
important to establish credibility

Study of credibility
1999 study of credibility
- over 1400 participants (online survey)
- average age 33
- 44% female, 58% male
- 42% US, 58% Finland
- some university education
- $US 31,000 income
- 3.7 years online
- 1-5 purchases online
- 13.9 hours/week online

Enhancing credibility (1)

Convey the real world aspects
of the organisation
provide a physical address
provide contact phone numbers
provide contact email address
provide photographs of staff

Enhancing credibility (2)

Make the site easy to use
ease of navigation
structure makes sense to users
pages download quickly
search is provided

Enhancing credibility (3)

Include markers of expertise
identify the author

show authors credentials

content includes citations and references

Enhancing credibility (4)

Include markers of trustworthiness
provides unbiased (objectively written, not
promotional in style) content
identifies as or with an organisation you can trust
provides links to external information sources

Enhancing credibility (5)

Avoid amateurism
professional-looking design
content up to date
no spelling or grammatical errors
no broken links

links only to other good quality sites

References
Crawford Kilian
Writing for the Web
Steve Krug
Dont Make Me Think

Jakob Nielsen
Designing Web Usability
Alertbox - http://www.useit.com/alertbox
Papers & Essays - http://www.useit.com/papers/

webcredibility.org