Designing usable web content The University of Georgia CSCI 4800/6800 Spring 2006.
-
Upload
silvester-norman -
Category
Documents
-
view
214 -
download
0
Transcript of Designing usable web content The University of Georgia CSCI 4800/6800 Spring 2006.
![Page 1: Designing usable web content The University of Georgia CSCI 4800/6800 Spring 2006.](https://reader030.fdocuments.in/reader030/viewer/2022032706/56649e005503460f94ae8ef8/html5/thumbnails/1.jpg)
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.](https://reader030.fdocuments.in/reader030/viewer/2022032706/56649e005503460f94ae8ef8/html5/thumbnails/2.jpg)
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.](https://reader030.fdocuments.in/reader030/viewer/2022032706/56649e005503460f94ae8ef8/html5/thumbnails/3.jpg)
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.](https://reader030.fdocuments.in/reader030/viewer/2022032706/56649e005503460f94ae8ef8/html5/thumbnails/4.jpg)
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.](https://reader030.fdocuments.in/reader030/viewer/2022032706/56649e005503460f94ae8ef8/html5/thumbnails/5.jpg)
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.](https://reader030.fdocuments.in/reader030/viewer/2022032706/56649e005503460f94ae8ef8/html5/thumbnails/6.jpg)
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.](https://reader030.fdocuments.in/reader030/viewer/2022032706/56649e005503460f94ae8ef8/html5/thumbnails/7.jpg)
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.](https://reader030.fdocuments.in/reader030/viewer/2022032706/56649e005503460f94ae8ef8/html5/thumbnails/8.jpg)
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.](https://reader030.fdocuments.in/reader030/viewer/2022032706/56649e005503460f94ae8ef8/html5/thumbnails/9.jpg)
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.](https://reader030.fdocuments.in/reader030/viewer/2022032706/56649e005503460f94ae8ef8/html5/thumbnails/10.jpg)
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.](https://reader030.fdocuments.in/reader030/viewer/2022032706/56649e005503460f94ae8ef8/html5/thumbnails/11.jpg)
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.](https://reader030.fdocuments.in/reader030/viewer/2022032706/56649e005503460f94ae8ef8/html5/thumbnails/12.jpg)
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.](https://reader030.fdocuments.in/reader030/viewer/2022032706/56649e005503460f94ae8ef8/html5/thumbnails/13.jpg)
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.](https://reader030.fdocuments.in/reader030/viewer/2022032706/56649e005503460f94ae8ef8/html5/thumbnails/14.jpg)
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.](https://reader030.fdocuments.in/reader030/viewer/2022032706/56649e005503460f94ae8ef8/html5/thumbnails/15.jpg)
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.](https://reader030.fdocuments.in/reader030/viewer/2022032706/56649e005503460f94ae8ef8/html5/thumbnails/16.jpg)
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.](https://reader030.fdocuments.in/reader030/viewer/2022032706/56649e005503460f94ae8ef8/html5/thumbnails/17.jpg)
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.](https://reader030.fdocuments.in/reader030/viewer/2022032706/56649e005503460f94ae8ef8/html5/thumbnails/18.jpg)
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.](https://reader030.fdocuments.in/reader030/viewer/2022032706/56649e005503460f94ae8ef8/html5/thumbnails/19.jpg)
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.](https://reader030.fdocuments.in/reader030/viewer/2022032706/56649e005503460f94ae8ef8/html5/thumbnails/20.jpg)
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.](https://reader030.fdocuments.in/reader030/viewer/2022032706/56649e005503460f94ae8ef8/html5/thumbnails/21.jpg)
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.](https://reader030.fdocuments.in/reader030/viewer/2022032706/56649e005503460f94ae8ef8/html5/thumbnails/22.jpg)
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.](https://reader030.fdocuments.in/reader030/viewer/2022032706/56649e005503460f94ae8ef8/html5/thumbnails/23.jpg)
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.](https://reader030.fdocuments.in/reader030/viewer/2022032706/56649e005503460f94ae8ef8/html5/thumbnails/24.jpg)
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.](https://reader030.fdocuments.in/reader030/viewer/2022032706/56649e005503460f94ae8ef8/html5/thumbnails/25.jpg)
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.](https://reader030.fdocuments.in/reader030/viewer/2022032706/56649e005503460f94ae8ef8/html5/thumbnails/26.jpg)
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.](https://reader030.fdocuments.in/reader030/viewer/2022032706/56649e005503460f94ae8ef8/html5/thumbnails/27.jpg)
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.](https://reader030.fdocuments.in/reader030/viewer/2022032706/56649e005503460f94ae8ef8/html5/thumbnails/28.jpg)
Example of ‘happy talk’
![Page 29: Designing usable web content The University of Georgia CSCI 4800/6800 Spring 2006.](https://reader030.fdocuments.in/reader030/viewer/2022032706/56649e005503460f94ae8ef8/html5/thumbnails/29.jpg)
Getting rid of ‘happy talk’
![Page 30: Designing usable web content The University of Georgia CSCI 4800/6800 Spring 2006.](https://reader030.fdocuments.in/reader030/viewer/2022032706/56649e005503460f94ae8ef8/html5/thumbnails/30.jpg)
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.](https://reader030.fdocuments.in/reader030/viewer/2022032706/56649e005503460f94ae8ef8/html5/thumbnails/31.jpg)
Example – wordy instructions
![Page 32: Designing usable web content The University of Georgia CSCI 4800/6800 Spring 2006.](https://reader030.fdocuments.in/reader030/viewer/2022032706/56649e005503460f94ae8ef8/html5/thumbnails/32.jpg)
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.](https://reader030.fdocuments.in/reader030/viewer/2022032706/56649e005503460f94ae8ef8/html5/thumbnails/33.jpg)
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.](https://reader030.fdocuments.in/reader030/viewer/2022032706/56649e005503460f94ae8ef8/html5/thumbnails/34.jpg)
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.](https://reader030.fdocuments.in/reader030/viewer/2022032706/56649e005503460f94ae8ef8/html5/thumbnails/35.jpg)
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.](https://reader030.fdocuments.in/reader030/viewer/2022032706/56649e005503460f94ae8ef8/html5/thumbnails/36.jpg)
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.](https://reader030.fdocuments.in/reader030/viewer/2022032706/56649e005503460f94ae8ef8/html5/thumbnails/37.jpg)
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.](https://reader030.fdocuments.in/reader030/viewer/2022032706/56649e005503460f94ae8ef8/html5/thumbnails/38.jpg)
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.](https://reader030.fdocuments.in/reader030/viewer/2022032706/56649e005503460f94ae8ef8/html5/thumbnails/39.jpg)
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.](https://reader030.fdocuments.in/reader030/viewer/2022032706/56649e005503460f94ae8ef8/html5/thumbnails/40.jpg)
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.](https://reader030.fdocuments.in/reader030/viewer/2022032706/56649e005503460f94ae8ef8/html5/thumbnails/41.jpg)
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.](https://reader030.fdocuments.in/reader030/viewer/2022032706/56649e005503460f94ae8ef8/html5/thumbnails/42.jpg)
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.](https://reader030.fdocuments.in/reader030/viewer/2022032706/56649e005503460f94ae8ef8/html5/thumbnails/43.jpg)
Inverted pyramid example
![Page 44: Designing usable web content The University of Georgia CSCI 4800/6800 Spring 2006.](https://reader030.fdocuments.in/reader030/viewer/2022032706/56649e005503460f94ae8ef8/html5/thumbnails/44.jpg)
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.](https://reader030.fdocuments.in/reader030/viewer/2022032706/56649e005503460f94ae8ef8/html5/thumbnails/45.jpg)
Page chunking example
![Page 46: Designing usable web content The University of Georgia CSCI 4800/6800 Spring 2006.](https://reader030.fdocuments.in/reader030/viewer/2022032706/56649e005503460f94ae8ef8/html5/thumbnails/46.jpg)
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.](https://reader030.fdocuments.in/reader030/viewer/2022032706/56649e005503460f94ae8ef8/html5/thumbnails/47.jpg)
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.](https://reader030.fdocuments.in/reader030/viewer/2022032706/56649e005503460f94ae8ef8/html5/thumbnails/48.jpg)
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.](https://reader030.fdocuments.in/reader030/viewer/2022032706/56649e005503460f94ae8ef8/html5/thumbnails/49.jpg)
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.](https://reader030.fdocuments.in/reader030/viewer/2022032706/56649e005503460f94ae8ef8/html5/thumbnails/50.jpg)
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.](https://reader030.fdocuments.in/reader030/viewer/2022032706/56649e005503460f94ae8ef8/html5/thumbnails/51.jpg)
Microcontent example (1)
search results
![Page 52: Designing usable web content The University of Georgia CSCI 4800/6800 Spring 2006.](https://reader030.fdocuments.in/reader030/viewer/2022032706/56649e005503460f94ae8ef8/html5/thumbnails/52.jpg)
Microcontent example (2)
browser bookmarks
![Page 53: Designing usable web content The University of Georgia CSCI 4800/6800 Spring 2006.](https://reader030.fdocuments.in/reader030/viewer/2022032706/56649e005503460f94ae8ef8/html5/thumbnails/53.jpg)
Microcontent example (3)
browser history list
![Page 54: Designing usable web content The University of Georgia CSCI 4800/6800 Spring 2006.](https://reader030.fdocuments.in/reader030/viewer/2022032706/56649e005503460f94ae8ef8/html5/thumbnails/54.jpg)
Microcontent example (4)poorly-worded hypertext links
![Page 55: Designing usable web content The University of Georgia CSCI 4800/6800 Spring 2006.](https://reader030.fdocuments.in/reader030/viewer/2022032706/56649e005503460f94ae8ef8/html5/thumbnails/55.jpg)
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.](https://reader030.fdocuments.in/reader030/viewer/2022032706/56649e005503460f94ae8ef8/html5/thumbnails/56.jpg)
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.](https://reader030.fdocuments.in/reader030/viewer/2022032706/56649e005503460f94ae8ef8/html5/thumbnails/57.jpg)
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.](https://reader030.fdocuments.in/reader030/viewer/2022032706/56649e005503460f94ae8ef8/html5/thumbnails/58.jpg)
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.](https://reader030.fdocuments.in/reader030/viewer/2022032706/56649e005503460f94ae8ef8/html5/thumbnails/59.jpg)
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.](https://reader030.fdocuments.in/reader030/viewer/2022032706/56649e005503460f94ae8ef8/html5/thumbnails/60.jpg)
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.](https://reader030.fdocuments.in/reader030/viewer/2022032706/56649e005503460f94ae8ef8/html5/thumbnails/61.jpg)
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.](https://reader030.fdocuments.in/reader030/viewer/2022032706/56649e005503460f94ae8ef8/html5/thumbnails/62.jpg)
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.](https://reader030.fdocuments.in/reader030/viewer/2022032706/56649e005503460f94ae8ef8/html5/thumbnails/63.jpg)
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.](https://reader030.fdocuments.in/reader030/viewer/2022032706/56649e005503460f94ae8ef8/html5/thumbnails/64.jpg)
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.](https://reader030.fdocuments.in/reader030/viewer/2022032706/56649e005503460f94ae8ef8/html5/thumbnails/65.jpg)
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.](https://reader030.fdocuments.in/reader030/viewer/2022032706/56649e005503460f94ae8ef8/html5/thumbnails/66.jpg)
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.](https://reader030.fdocuments.in/reader030/viewer/2022032706/56649e005503460f94ae8ef8/html5/thumbnails/67.jpg)
Appropriate format – example
JPEG – 25Kb GIF – 44Kb
![Page 68: Designing usable web content The University of Georgia CSCI 4800/6800 Spring 2006.](https://reader030.fdocuments.in/reader030/viewer/2022032706/56649e005503460f94ae8ef8/html5/thumbnails/68.jpg)
Appropriate format - example
GIF – 2.5Kb JPEG – 4.6Kb
![Page 69: Designing usable web content The University of Georgia CSCI 4800/6800 Spring 2006.](https://reader030.fdocuments.in/reader030/viewer/2022032706/56649e005503460f94ae8ef8/html5/thumbnails/69.jpg)
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.](https://reader030.fdocuments.in/reader030/viewer/2022032706/56649e005503460f94ae8ef8/html5/thumbnails/70.jpg)
Cropping and scaling - example
cropped
scaled
cropped and scaled
![Page 71: Designing usable web content The University of Georgia CSCI 4800/6800 Spring 2006.](https://reader030.fdocuments.in/reader030/viewer/2022032706/56649e005503460f94ae8ef8/html5/thumbnails/71.jpg)
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.](https://reader030.fdocuments.in/reader030/viewer/2022032706/56649e005503460f94ae8ef8/html5/thumbnails/72.jpg)
Balancing quality & file size – example
20Kb 13Kb
![Page 73: Designing usable web content The University of Georgia CSCI 4800/6800 Spring 2006.](https://reader030.fdocuments.in/reader030/viewer/2022032706/56649e005503460f94ae8ef8/html5/thumbnails/73.jpg)
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.](https://reader030.fdocuments.in/reader030/viewer/2022032706/56649e005503460f94ae8ef8/html5/thumbnails/74.jpg)
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.](https://reader030.fdocuments.in/reader030/viewer/2022032706/56649e005503460f94ae8ef8/html5/thumbnails/75.jpg)
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.](https://reader030.fdocuments.in/reader030/viewer/2022032706/56649e005503460f94ae8ef8/html5/thumbnails/76.jpg)
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.](https://reader030.fdocuments.in/reader030/viewer/2022032706/56649e005503460f94ae8ef8/html5/thumbnails/77.jpg)
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.](https://reader030.fdocuments.in/reader030/viewer/2022032706/56649e005503460f94ae8ef8/html5/thumbnails/78.jpg)
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.](https://reader030.fdocuments.in/reader030/viewer/2022032706/56649e005503460f94ae8ef8/html5/thumbnails/79.jpg)
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.](https://reader030.fdocuments.in/reader030/viewer/2022032706/56649e005503460f94ae8ef8/html5/thumbnails/80.jpg)
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.](https://reader030.fdocuments.in/reader030/viewer/2022032706/56649e005503460f94ae8ef8/html5/thumbnails/81.jpg)
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.](https://reader030.fdocuments.in/reader030/viewer/2022032706/56649e005503460f94ae8ef8/html5/thumbnails/82.jpg)
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.](https://reader030.fdocuments.in/reader030/viewer/2022032706/56649e005503460f94ae8ef8/html5/thumbnails/83.jpg)
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.](https://reader030.fdocuments.in/reader030/viewer/2022032706/56649e005503460f94ae8ef8/html5/thumbnails/84.jpg)
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