Transcript Classes15_Web_usabil..

Web Content Development
Dr. Komlodi
Class 15: Web usability
30
34
38
42
46
50
54
58
62
66
70
74
78
82
86
90
94
98
10
2
Exam 1 Distribution
2.5
2
1.5
Series2
1
0.5
0
Usability Definition
– After all, usability really means making sure
that something works well: that a person of
average (or even below average) ability and
experience can use the thing … for its
intended purpose without getting hopelessly
frustrated.
Steve Krug
Nielsen’s Usability Definition
• Five quality components:
– Learnability: How easy is it for users to accomplish
basic tasks the first time they encounter the design?
– Efficiency: Once users have learned the design, how
quickly can they perform tasks?
– Memorability: When users return to the design after
a period of not using it, how easily can they
reestablish proficiency?
– Errors: How many errors do users make, how severe
are these errors, and how easily can they recover
from the errors?
– Satisfaction: How pleasant is it to use the design?
» http://www.useit.com/alertbox/20030825.html
Nielsen’s Usability Definition
• How do you measure them?
– Learnability: time of first use, errors, success
– Efficiency: time, error, outcome success Once users
have learned the design, how quickly can they
perform tasks?
– Memorability: test after some time, time, success,
When users return to the design after a period of not
using it, how easily can they reestablish proficiency?
– Errors: observe, record, How many errors do users
make, how severe are these errors, and how easily
can they recover from the errors?
– Satisfaction: survey, ratings, interview, observation,
How pleasant is it to use the design?
Krug’s 1st Law of Usability
• Don’t make me think!
– Web pages should be self-evident, or at
least self-explanatory
– Most people are going to spend far less
time looking at the pages we design
than we’d like to think
A Very Bad Example
http://www.gaia-group.com/index2.htm
Krug’s Web Design Guidelines
1.
Create a clear visual hierarchy on each page (using
size, positioning, nesting)
1.
2.
3.
2.
3.
4.
5.
The more important something is, the more prominent it is.
Things that are related logically are also related visually.
Things are “nested” visually to show what’s part of what.
Take advantage of conventions (especially labels and
navigation)
Break up pages into clearly defined areas
Make it obvious what is clickable
Keep the noise down
1 Visual Hierarchy, 2 Conventions, 3 Clearly Defined Areas
What is Clickable?
• Avoid using graphics as links
About the Home Page
• Content
– Site identity and
mission: the tagline
and welcome blurb
– Global Navigation
(Site hierarchy)
– Search
– Teases
– Timely content
– Deals
– Shortcuts
– Registration
Answers five questions:
1. What is this [site about]?
2. What do they have here?
3. What can I do here?
4. Why should I be here and not somewhere else?
5. Where do I start?
Nielsen’s Home Page Design Guidelines
• Make the site's purpose clear: Explain who
you are and what you do
– Include a one-sentence tagline
– Write a window title with good visibility in search
engines and bookmark lists
– Group all corporate information in one distinct area
• Help users find what they need
– Emphasize the site's top high-priority tasks
– Include a search input box
Nielsen’s Home Page Design
Guidelines (Cont.)
• Reveal site content
– Show examples of real site content
– Begin link names with the most important keyword
– Offer easy access to recent homepage features
• Use visual design to enhance, not define,
interaction design
– Don't over-format critical content, such as navigation areas
– Use meaningful graphics
» Nielsen: http://www.useit.com/alertbox/20020512.html
PWU Rules of Usability
1.
2.
3.
4.
5.
6.
7.
8.
Do not use “Under Construction”, it is either there or not
Make sure links change color when visited
Allow your users to use the “Back” button
Do not open a new browser window. (But maybe a new
tab?)
Do not use pop-up windows unless to display a small
amount of supplementary information
Do not include design elements that look like ads
Follow web standards
User direct language and high quality writing
PWU (Less Important) Rules of
Usability
• These rules have lost importance during the past few years
because of advances in technology
– Slow download time – do not include many graphics or highly interactive
content
– Do not user frames
– Do not use Macromedia Flash
– Make sure your search engine is set up correctly and does not return
irrelevant or low-relevancy items
– Do not include multimedia or long videos
– Do not use fixed-width content elements that create frozen layouts
– Test your design across platforms and browsers
PWU Rules of Usability
• Make sure you make links look clickable
• If possible, avoid long scrolling pages
• If you require registration make sure it is
worth it for your users
• Do not use complex URL-s
• Avoid complex pull-down or cascading
menus
Usability Exercise
• Work in teams of three
• Find an especially badly designed site (but
not a spam site)
• Use the usability guidelines covered in
today’s class to critique the site
• Post you critique on the Blackboard
discussion board for this exercise