Post on 25-Dec-2015
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
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 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
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)
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.
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.
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
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.
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).
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).
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.
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)
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
ConditionTaskTime
TaskErrors
MemorySubjectiveSatisfaction
original 637 0.91 0.33 4.9
rewritten 315 0.10 0.65 6.7
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
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
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
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 Revised
Please select your answers from the drop-down menus and radio
buttons below.
[removed]
13 words reduced to 0
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.
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
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.
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 sub-headings
• use meaningful headings and sub- headings
• 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
conclusion firstimportant details nextother details and background last
use ‘inverted pyramids’
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 they’re being taken to another page
• may think back button isn’t working properly
Use objective language
• limit use of promotional writing (‘marketese’)
• avoid exaggeration, boasting
• don’t 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 most- visited 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 microcontentoften 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 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
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
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 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
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
Writing online documentation (1)
• hire a professional
• must be searchable
• must be task-oriented, step-by-step
• must be concise
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
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
Graphics and multimedia contentadvantages
• 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)
• don’t rely on auto-download & install
• ensure users are motivated to install plug-in (content must be worth it)
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
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
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 author’s 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
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