+ All Categories
Home > Documents > Designing usable web content The University of Georgia CSCI 4800/6800 Spring 2006.

Designing usable web content The University of Georgia CSCI 4800/6800 Spring 2006.

Date post: 25-Dec-2015
Category:
Upload: silvester-norman
View: 214 times
Download: 0 times
Share this document with a friend
Popular Tags:
84
Designing usable web content The University of Georgia CSCI 4800/6800 Spring 2006
Transcript
Page 1: Designing usable web content The University of Georgia CSCI 4800/6800 Spring 2006.

Designing usable web content

The University of Georgia

CSCI 4800/6800

Spring 2006

Page 2: 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 NielsenDesigning Web Usability, p. 99

Page 3: Designing usable web content The University of Georgia CSCI 4800/6800 Spring 2006.

Overview (1)• writing for the web

• microcontent

- page titles- page headings & sub-

headings- hyperlinks

• online documentation

Page 4: Designing usable web content The University of Georgia CSCI 4800/6800 Spring 2006.

Overview (2)

• graphic & multimedia content

- images, animation, video, sound

• credibility and content

Page 5: Designing usable web content The University of Georgia CSCI 4800/6800 Spring 2006.

User constraints

develop content for target audience – know your users!

• technical context

• goals and preferences

• behavior online

Page 6: Designing usable web content The University of Georgia CSCI 4800/6800 Spring 2006.

Creating web content

web content should be

• created for use online

• re-purposed for use online

Page 7: Designing usable web content The University of Georgia CSCI 4800/6800 Spring 2006.

Content archives

archives (text or multimedia)

• be searchable

• provide summaries, snapshots in suitable web format

Page 8: Designing usable web content The University of Georgia CSCI 4800/6800 Spring 2006.

Rules for good writing

• apply to web writing

• deliver your message effectively

• enhance credibility

Page 9: Designing usable web content The University of Georgia CSCI 4800/6800 Spring 2006.

Essential strategies for web writing1. concise2. easy to scan3. 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

Page 10: Designing usable web content The University of Georgia CSCI 4800/6800 Spring 2006.

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

Page 11: Designing usable web content The University of Georgia CSCI 4800/6800 Spring 2006.

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

Page 12: Designing usable web content The University of Georgia CSCI 4800/6800 Spring 2006.

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)

Page 13: Designing usable web content The University of Georgia CSCI 4800/6800 Spring 2006.

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)

Page 14: Designing usable web content The University of Georgia CSCI 4800/6800 Spring 2006.

Hypotheses1. 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.

Page 15: Designing usable web content The University of Georgia CSCI 4800/6800 Spring 2006.

Hypotheses5. 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.

Page 16: Designing usable web content The University of Georgia CSCI 4800/6800 Spring 2006.

Results

ConditionTaskTime

(secs)

TaskErrors

(%)

Memory

(%)

Sitemap

(secs)

SubjectiveSatisfaction

(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

Page 17: Designing usable web content The University of Georgia CSCI 4800/6800 Spring 2006.

ConclusionsHypothesis 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.

Page 18: Designing usable web content The University of Georgia CSCI 4800/6800 Spring 2006.

ConclusionsHypothesis 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).

Page 19: Designing usable web content The University of Georgia CSCI 4800/6800 Spring 2006.

ConclusionsHypothesis 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, one-tailed), remembered more (t(17) = -4.56, p < .001, one-tailed), 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).

Page 20: Designing usable web content The University of Georgia CSCI 4800/6800 Spring 2006.

ConclusionsHypothesis 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.

Page 21: Designing usable web content The University of Georgia CSCI 4800/6800 Spring 2006.

Web writing study 2

2 test web sites were created using technical whitepapers from Sun’s web sites

Site 13 pageseach ~ 2,200 words original version of documents

Site 28 pageseach ~ 350 words rewritten version of documents (concise, scannable, objective)

Page 22: Designing usable web content The University of Georgia CSCI 4800/6800 Spring 2006.

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)

Page 23: Designing usable web content The University of Georgia CSCI 4800/6800 Spring 2006.

Web writing study 2

Four test measures were used:

– task time (in seconds)

– task errors (percentage)

– memory (percentage)

– subjective satisfaction (scale 1 to 10)

Page 24: Designing usable web content The University of Georgia CSCI 4800/6800 Spring 2006.

Results

ConditionTaskTime

TaskErrors

MemorySubjectiveSatisfaction

original 637 0.91 0.33 4.9

rewritten 315 0.10 0.65 6.7

Page 25: Designing usable web content The University of Georgia CSCI 4800/6800 Spring 2006.

Usability improvements

Study 1Overall usability improvement: 124%

http://www.useit.com./papers/webwriting/writing.html

Study 2Overall usability improvement: 159%

http://www.useit.com./papers/webwriting/rewriting.html

Page 26: Designing usable web content The University of Georgia CSCI 4800/6800 Spring 2006.

Be concise

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

Crawford KilianWriting 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

Page 27: Designing usable web content The University of Georgia CSCI 4800/6800 Spring 2006.

Be concise

“Happy talk must die”Steve Krug

Don't Make Me Think, p. 46

• get rid of welcome messages and introductory text

• don’t waste words telling users where they are or what they can do

• don’t waffle on with explanations of what’s on the site

Page 28: Designing usable web content The University of Georgia CSCI 4800/6800 Spring 2006.

Example of ‘happy talk’

Page 29: Designing usable web content The University of Georgia CSCI 4800/6800 Spring 2006.

Getting rid of ‘happy talk’

Page 30: Designing usable web content The University of Georgia CSCI 4800/6800 Spring 2006.

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”.

Page 31: Designing usable web content The University of Georgia CSCI 4800/6800 Spring 2006.

Example – wordy instructions

Page 32: Designing usable web content The University of Georgia CSCI 4800/6800 Spring 2006.

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

Page 33: Designing usable web content The University of Georgia CSCI 4800/6800 Spring 2006.

Trimming instructions

Original Revised

Please select your answers from the drop-down menus and radio

buttons below.

[removed]

13 words reduced to 0

Page 34: Designing usable web content The University of Georgia CSCI 4800/6800 Spring 2006.

Trimming instructions

Original Revised

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 but uses less space.

Page 35: Designing usable web content The University of Georgia CSCI 4800/6800 Spring 2006.

Trimming instructions

Original RevisedAt 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 reduced to 0

Page 36: Designing usable web content The University of Georgia CSCI 4800/6800 Spring 2006.

Trimming instructions

Original Revised

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

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.

Page 37: Designing usable web content The University of Georgia CSCI 4800/6800 Spring 2006.

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

Page 38: Designing usable web content The University of Georgia CSCI 4800/6800 Spring 2006.

Improve scanning

• use simple sentence structures

• keep paragraphs short

• one-topic per paragraph

• opening sentence in a paragraph should be the topic sentence

Page 39: Designing usable web content The University of Georgia CSCI 4800/6800 Spring 2006.

Improve scanning

• break up text with headings and sub-headings

• use meaningful headings and sub- headings

• use bulleted lists

• highlight or emphasize key words or phrases

Page 40: Designing usable web content The University of Georgia CSCI 4800/6800 Spring 2006.

Other beneficiaries

techniques that improve scanning also assist disabled users

• users with cognitive/reading disabilities

• those using text-to-speech browsers

Page 41: Designing usable web content The University of Georgia CSCI 4800/6800 Spring 2006.

Techniques for longer text

normal style of writing…• introduction

• background material

• details/facts

• conclusions

… needs to be reversed

Page 42: Designing usable web content The University of Georgia CSCI 4800/6800 Spring 2006.

Techniques for longer text

conclusion firstimportant details nextother details and background last

use ‘inverted pyramids’

provide a summary paragraph

Page 43: Designing usable web content The University of Georgia CSCI 4800/6800 Spring 2006.

Inverted pyramid example

Page 44: Designing usable web content The University of Georgia CSCI 4800/6800 Spring 2006.

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 45: Designing usable web content The University of Georgia CSCI 4800/6800 Spring 2006.

Page chunking example

Page 46: Designing usable web content The University of Georgia CSCI 4800/6800 Spring 2006.

Techniques for longer texts

limit the use of within-page links (named anchors, bookmarks)

• users may think they’re being taken to another page

• may think back button isn’t working properly

Page 47: Designing usable web content The University of Georgia CSCI 4800/6800 Spring 2006.

Use objective language

• limit use of promotional writing (‘marketese’)

• avoid exaggeration, boasting

• don’t make subjective claims or claims without evidence

Page 48: Designing usable web content The University of Georgia CSCI 4800/6800 Spring 2006.

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 most- visited places in Nebraska were…

Page 49: Designing usable web content The University of Georgia CSCI 4800/6800 Spring 2006.

What is microcontent?

• page titles

• page headings & sub-headings

• text hyperlinks

‘microcontent’ – very small amount of space to make your message clear

Page 50: Designing usable web content The University of Georgia CSCI 4800/6800 Spring 2006.

Importance of microcontentoften read out of context, truncated

• search results

• bookmarks/favorites

• browser history lists

• during quick page scan

• text-to-speech readers’ links summary

Page 51: Designing usable web content The University of Georgia CSCI 4800/6800 Spring 2006.

Microcontent example (1)

search results

Page 52: Designing usable web content The University of Georgia CSCI 4800/6800 Spring 2006.

Microcontent example (2)

browser bookmarks

Page 53: Designing usable web content The University of Georgia CSCI 4800/6800 Spring 2006.

Microcontent example (3)

browser history list

Page 54: Designing usable web content The University of Georgia CSCI 4800/6800 Spring 2006.

Microcontent example (4)poorly-worded hypertext links

Page 55: Designing usable web content The University of Georgia CSCI 4800/6800 Spring 2006.

Microcontent techniques (1)a clear and accurate description

– of what’s on the page

– of what’s 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

Page 56: Designing usable web content The University of Georgia CSCI 4800/6800 Spring 2006.

Microcontent techniques (2)

– titles get truncated in bookmarks/history lists

– avoid unnecessary words (‘welcome to..’)

– don’t use all uppercase (harder to scan)

– put important words first

– don’t use articles (‘a’, ‘the’)

short and scannable

Page 57: Designing usable web content The University of Georgia CSCI 4800/6800 Spring 2006.

Microcontent techniques (3)

all pages should have unique titles

– to identify one page on your site from another

– to assist user locate specific content

Page 58: Designing usable web content The University of Georgia CSCI 4800/6800 Spring 2006.

Online documentation

“help doesn’t!”

“It’s 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

Page 59: Designing usable web content The University of Georgia CSCI 4800/6800 Spring 2006.

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 they’re

in trouble and have nowhere else to go

Page 60: Designing usable web content The University of Georgia CSCI 4800/6800 Spring 2006.

Writing online documentation (1)

• hire a professional

• must be searchable

• must be task-oriented, step-by-step

• must be concise

Page 61: Designing usable web content The University of Georgia CSCI 4800/6800 Spring 2006.

Writing online documentation (2)

• use examples to demonstrate instructions

• provide links to a glossary

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

Page 62: Designing usable web content The University of Georgia CSCI 4800/6800 Spring 2006.

Graphics and multimedia contentdisadvantages

• take more time to download

• (some) require special plug-ins

• not accessible to all users

- non-graphical browsers- don’t have/don’t want/can’t install plug-in- sight/hearing disabilities

Page 63: Designing usable web content The University of Georgia CSCI 4800/6800 Spring 2006.

Graphics and multimedia contentadvantages

• can convey information quickly

• enhance e-commerce

• useful for cognitively impaired

• useful for deaf community

Page 64: Designing usable web content The University of Georgia CSCI 4800/6800 Spring 2006.

Tips for using graphics (1)

never use gratuitously

- should provide information

- should complement/relate to content

- resist temptation to render text as graphic

Page 65: Designing usable web content The University of Georgia CSCI 4800/6800 Spring 2006.

Gratuitous use – example

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

All text rendered as images

Page 66: Designing usable web content The University of Georgia CSCI 4800/6800 Spring 2006.

Tips for using graphics (2)

use appropriate format

- better compression

- better quality

- better rendering

Page 67: Designing usable web content The University of Georgia CSCI 4800/6800 Spring 2006.

Appropriate format – example

JPEG – 25Kb GIF – 44Kb

Page 68: Designing usable web content The University of Georgia CSCI 4800/6800 Spring 2006.

Appropriate format - example

GIF – 2.5Kb JPEG – 4.6Kb

Page 69: Designing usable web content The University of Georgia CSCI 4800/6800 Spring 2006.

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

Page 70: Designing usable web content The University of Georgia CSCI 4800/6800 Spring 2006.

Cropping and scaling - example

cropped

scaled

cropped and scaled

Page 71: Designing usable web content The University of Georgia CSCI 4800/6800 Spring 2006.

Tips for using graphics (4)

Optimise file weight (Kbytes)

- reduce colours

- balance file size and quality

Page 72: Designing usable web content The University of Georgia CSCI 4800/6800 Spring 2006.

Balancing quality & file size – example

20Kb 13Kb

Page 73: Designing usable web content The University of Georgia CSCI 4800/6800 Spring 2006.

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

Page 74: Designing usable web content The University of Georgia CSCI 4800/6800 Spring 2006.

Tips for using multimedia (2)• use common formats (PDF, Flash, quicktime)

• don’t rely on auto-download & install

• ensure users are motivated to install plug-in (content must be worth it)

Page 75: Designing usable web content The University of Georgia CSCI 4800/6800 Spring 2006.

Tips for using multimedia (3)• don’t force it on users

- use plug-in detection scripts with care!

- tell people what they’re downloading (size and format)

• provide accessible alternatives- text

- images in standard format

Page 76: Designing usable web content The University of Georgia CSCI 4800/6800 Spring 2006.

Tips for using video/audio

• provide short previews

• segment larger works into topical chunks

- allow users to choose portions to view/hear

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

Page 77: Designing usable web content The University of Georgia CSCI 4800/6800 Spring 2006.

Credibility

anyone can publish online

• credibility, trustworthiness, expertise are unclear

• important to establish credibility

Page 78: Designing usable web content The University of Georgia CSCI 4800/6800 Spring 2006.

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

Page 79: Designing usable web content The University of Georgia CSCI 4800/6800 Spring 2006.

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

Page 80: Designing usable web content The University of Georgia CSCI 4800/6800 Spring 2006.

Enhancing credibility (2)

Make the site easy to use

• ease of navigation

• structure makes sense to users

• pages download quickly

• search is provided

Page 81: Designing usable web content The University of Georgia CSCI 4800/6800 Spring 2006.

Enhancing credibility (3)

Include markers of expertise

• identify the author

• show author’s credentials

• content includes citations and references

Page 82: Designing usable web content The University of Georgia CSCI 4800/6800 Spring 2006.

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

Page 83: Designing usable web content The University of Georgia CSCI 4800/6800 Spring 2006.

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

Page 84: Designing usable web content The University of Georgia CSCI 4800/6800 Spring 2006.

ReferencesCrawford Kilian

Writing for the Web

Steve KrugDon’t Make Me Think

Jakob NielsenDesigning Web Usability

Alertbox - http://www.useit.com/alertbox

Papers & Essays - http://www.useit.com/papers/

webcredibility.org


Recommended