Transcript Lecture 25 - GEOCITIES.ws

Today’s Goal:
Web Design for Usability
•
To become able to appreciate the role of
usability in Web design
•
To become able to identify some of the
factors affecting the usability of a Web page
1
When I look at a Web page it should be
self-evident, obvious, self-explanatory
I should be able to ‘get it’ - what it is &
how to use it - without expending
any effort thinking about it
excerpt from Steve Krug’s book Don’t Make Me Think
2
What’s a Good Site?
• The one that achieves the result that it was
designed for
• Generally, that result can only be achieved by
giving the user what s/he wants, as quickly as
possible, without her/him expending much effort
• One definition of usability: Let the user have
what s/he wants, quickly, without much effort
• “Quickly” is important!
3
Users don't read; they scan
Users don't make optimal choices;
they look for the first good-enough
solution
Users don't figure out how things
work; they muddle through
4
5
Design is Important!
• 62% of shoppers gave up looking for the item
they wanted to buy online (Zona Research)
• 40% visitors don’t return to a site if their first
visit was a -ive experience (Forrester Research)
• 83% of users have left sites in frustration due to
poor navigation, slowness (NetSmart Research)
• Simple designs have greater impact: they can
be understood immediately! (Mullet/Sano) 6
Designs should be
consistent &
predictable
(unified)
7
8
9
Elements of Website Design
1. Navigation scheme
2. Layout of information
3. Overall look and feel
10
Website Navigation
• The interface/controls that a Website
provides to the user for accessing
various parts of the Website
• It probably is the most important aspect
of the design of a Website
11
A Few Navigation Design Heuristics
1. Put the main navigation on the left of the page
2. It should be ‘invisible’ until it is wanted
3. It should require an economy of action & time
4. It should remain consistent
5. Use text for navigation labels. If you must use
icons, put a description underneath each icon
12
Navigation Design Heuristics (contd.)
6. Labels should be clear, understandable
7. Labels should be legible
8. Do not play with standard browser buttons &
features
9. Provide search capability
13
14
15
Assisting the User Recover from Errors
• Location, post code mismatch
• Credit card number errors
• Phone numbers
• Spelling errors
16
A few constructive
recommendations
Let’s look at a few Web sites and see how
we can improve their usability
17
Enter
Dragon’s Lair
All rights reserved, 2002.
18
LOADING …
RESTART
SKIP
Click here to go to the main page directly
19
20
A few more Web
design heuristics
21
1. Designing
(arranging)
Display
Elements
22
Making Display Elements Legible
1. Elements must be large enough to
be processed visually
2. Elements must contrast sufficiently
with their backgrounds
23
Making Display Elements Legible
3. Related elements should be visually
grouped through the use of space,
color, or graphical boundaries
4. The relative levels of importance
among elements in a display should
be revealed graphically
24
25
2. Ensuring
Text is
Readable
26
1. Use sans serif (e.g. Arial, Helvetica,
Verdana) typefaces for display on screen
2. Display type intended for continuous
reading at 10 to 14 points
3. Avoid the overuse of bold and italics
4. Avoid setting type in all caps
27
28
29
5. Arrange type intended for extended
reading flush left, ragged right
6. Avoid lines of type shorter than 40
characters and longer than 60 characters
30
7. Mark the boundaries between paragraphs
with blank lines rather than indentation
8. Use headings and subheadings to visually
reveal the relationships among text
elements they label – paragraphs after
paragraphs of text do not work that well on
the Web
31
3. Using
Pictures &
Illustrations
32
Avoid using
pictures that
are strictly
decorative
33
4. Using
Motion
34
1. Use motion to attract the viewer’s
attention
2. Avoid the use of motion for “cosmetic”
purposes
35
Success is defined by
the user, not the builder
36