CS101 Introduction to Computing

Lecture 25
Web Design for Usability

1
 During the last lecture …

• We looked at the role of heuristics in

architectural (or high-level) design

• We also became familiar with a few popular

design heuristics

2
 Heuristic

Rule of thumb learned through trial & error

Common sense lesson drawn from experience

3
Caution!
Caution!
Heuristics don’t always
lead to the best results
At times they even lead to the
wrong ones, but mostly to
results that are good-enough4
Given many parts of a system to be designed/built,

do the hard part 1st

5
 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

6
 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

7
don’t make me think!

8
Usability!
9
 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! 10
speed!
11
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

12
13
think roadside billboard
rather than Dewan-e-Ghalib

14
 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)15
Simplify, simplify,
simplify!

16
Designs should be
consistent &
predictable
(unified)
17
18
19
Elements of Website Design

1. Navigation scheme

2. Layout of information

3. Overall look and feel

20
 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

21
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 22 icon
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

23
 - click
navigation
24
Now, let’s take a look at
a few good designs …

25
26
A good solution
to a problem
somehow looks
nice & elegant
27
28
29
30
31
Good designs
assist the user
in recovering
from errors
32
Assisting the User Recover from Errors

• Location, post code mismatch

• Credit card number errors

• Phone numbers

• Spelling errors

33
34
 A few constructive
recommendations

Let’s look at a few Web sites and see how

we can improve their usability

35
36
 Enter
Dragon’s Lair

All rights reserved, 2002. 37

38
39
WWW
40
 LOADING …

RESTART SKIP

Click here to go to the main page directly

41
42
A few more Web
design heuristics

43
1. Designing
(arranging)
Display
Elements 44
Making Display Elements Legible

1. Elements must be large enough to

be processed visually

2. Elements must contrast sufficiently

with their backgrounds

45
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

46
47
2. Ensuring
Text is
Readable
48
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

49
50
51
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

52
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

53
 3. Using
Pictures &
Illustrations
54
Avoid using
pictures that
are strictly
decorative
55
4. Using
Motion
56
1. Use motion to attract the viewer’s
attention

2. Avoid the use of motion for “cosmetic”

purposes

57
 Success is defined by
the user, not the builder

58
 In Today’s Lecture

• We looked at the role of usability in Web site

design

• We identified some of the factors affecting

the usability of a Web page

59
Reading Assignment

www.useit.com

60
 Next Lecture:
Computer Networks

• We will become able to appreciate the role of

networks in computing

• We will familiarize ourselves with various

networking topologies and protocols

61