web design for usability
Post on 05-Apr-2018
219 Views
Preview:
TRANSCRIPT
8/2/2019 Web Design for Usability
http://slidepdf.com/reader/full/web-design-for-usability 1/62
1
CS101 Introduction to Computing
Lecture 25Web Design for Usability
8/2/2019 Web Design for Usability
http://slidepdf.com/reader/full/web-design-for-usability 2/62
2
During the last lecture …
• We looked at the role of heuristics inarchitectural (or high-level) design
• We also became familiar with a few popular design heuristics
8/2/2019 Web Design for Usability
http://slidepdf.com/reader/full/web-design-for-usability 3/62
3
Heuristic
Rule of thumb learned through trial & error
Common sense lesson drawn from experience
8/2/2019 Web Design for Usability
http://slidepdf.com/reader/full/web-design-for-usability 4/62
4
Caution !
Caution !
Heuristics don’t alwayslead to the best results
At times they even lead to thewrong ones, but mostly to
results that are good-enough
8/2/2019 Web Design for Usability
http://slidepdf.com/reader/full/web-design-for-usability 5/62
5
Given many parts of a system to be designed/built,
do the hard part 1st
8/2/2019 Web Design for Usability
http://slidepdf.com/reader/full/web-design-for-usability 6/62
6
Today s Goal: Web Design for Usability
• To become able to appreciate the role ofusability in Web design
• To become able to identify some of thefactors affecting the usability of a Web page
8/2/2019 Web Design for Usability
http://slidepdf.com/reader/full/web-design-for-usability 7/62
7
When I look at a Web page it should beself-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
8/2/2019 Web Design for Usability
http://slidepdf.com/reader/full/web-design-for-usability 8/62
8
don’t make me think !
8/2/2019 Web Design for Usability
http://slidepdf.com/reader/full/web-design-for-usability 9/62
9
Usability !
8/2/2019 Web Design for Usability
http://slidepdf.com/reader/full/web-design-for-usability 10/62
10
What s a Good Site? • The one that achieves the result that it was
designed for
• Generally, that result can only be achieved bygiving the user what s/he wants , as quickly aspossible, without her/him expending much effort
• One definition of usability: Let the user havewhat s/he wants, quickly, without much effort
• “Quickly ” is important!
8/2/2019 Web Design for Usability
http://slidepdf.com/reader/full/web-design-for-usability 11/62
11
speed !
8/2/2019 Web Design for Usability
http://slidepdf.com/reader/full/web-design-for-usability 12/62
12
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 thingswork; they muddle through
8/2/2019 Web Design for Usability
http://slidepdf.com/reader/full/web-design-for-usability 13/62
13
8/2/2019 Web Design for Usability
http://slidepdf.com/reader/full/web-design-for-usability 14/62
14
think roadside billboard
rather than Dewan-e-Ghalib
8/2/2019 Web Design for Usability
http://slidepdf.com/reader/full/web-design-for-usability 15/62
15
Design is Important!
• 62% of shoppers gave up looking for the itemthey wanted to buy online ( Zona Research )
• 40% visitors don t return to a site if their firstvisit 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 )
8/2/2019 Web Design for Usability
http://slidepdf.com/reader/full/web-design-for-usability 16/62
16
Simplify,
simplify,
simplify!
8/2/2019 Web Design for Usability
http://slidepdf.com/reader/full/web-design-for-usability 17/62
17
Designs should be
consistent &
predictable (unified)
8/2/2019 Web Design for Usability
http://slidepdf.com/reader/full/web-design-for-usability 18/62
18
8/2/2019 Web Design for Usability
http://slidepdf.com/reader/full/web-design-for-usability 19/62
19
8/2/2019 Web Design for Usability
http://slidepdf.com/reader/full/web-design-for-usability 20/62
20
Elements of Website Design
1. Navigation scheme
2. Layout of information
3. Overall look and feel
8/2/2019 Web Design for Usability
http://slidepdf.com/reader/full/web-design-for-usability 21/62
21
Website Navigation
• The interface/controls that a Websiteprovides to the user for accessingvarious parts of the Website
• It probably is the most important aspect of the design of a Website
8/2/2019 Web Design for Usability
http://slidepdf.com/reader/full/web-design-for-usability 22/62
8/2/2019 Web Design for Usability
http://slidepdf.com/reader/full/web-design-for-usability 23/62
8/2/2019 Web Design for Usability
http://slidepdf.com/reader/full/web-design-for-usability 24/62
24
- click
navigation
8/2/2019 Web Design for Usability
http://slidepdf.com/reader/full/web-design-for-usability 25/62
25
Now, let s take a look at a few good designs …
8/2/2019 Web Design for Usability
http://slidepdf.com/reader/full/web-design-for-usability 26/62
26
8/2/2019 Web Design for Usability
http://slidepdf.com/reader/full/web-design-for-usability 27/62
27
A good solutionto a problemsomehow looks
nice & elegant
8/2/2019 Web Design for Usability
http://slidepdf.com/reader/full/web-design-for-usability 28/62
28
8/2/2019 Web Design for Usability
http://slidepdf.com/reader/full/web-design-for-usability 29/62
29
8/2/2019 Web Design for Usability
http://slidepdf.com/reader/full/web-design-for-usability 30/62
30
8/2/2019 Web Design for Usability
http://slidepdf.com/reader/full/web-design-for-usability 31/62
8/2/2019 Web Design for Usability
http://slidepdf.com/reader/full/web-design-for-usability 32/62
32
Good designsassist the userin recoveringfrom errors
A i i h U R f E
8/2/2019 Web Design for Usability
http://slidepdf.com/reader/full/web-design-for-usability 33/62
33
Assisting the User Recover from Errors
• Location, post code mismatch
• Credit card number errors
• Phone numbers
• Spelling errors
8/2/2019 Web Design for Usability
http://slidepdf.com/reader/full/web-design-for-usability 34/62
34
8/2/2019 Web Design for Usability
http://slidepdf.com/reader/full/web-design-for-usability 35/62
8/2/2019 Web Design for Usability
http://slidepdf.com/reader/full/web-design-for-usability 36/62
36
8/2/2019 Web Design for Usability
http://slidepdf.com/reader/full/web-design-for-usability 37/62
37
Enter
Dragon’s Lair
All rights reserved, 2002.
8/2/2019 Web Design for Usability
http://slidepdf.com/reader/full/web-design-for-usability 38/62
38
8/2/2019 Web Design for Usability
http://slidepdf.com/reader/full/web-design-for-usability 39/62
39
8/2/2019 Web Design for Usability
http://slidepdf.com/reader/full/web-design-for-usability 40/62
40
8/2/2019 Web Design for Usability
http://slidepdf.com/reader/full/web-design-for-usability 41/62
41
W W W
8/2/2019 Web Design for Usability
http://slidepdf.com/reader/full/web-design-for-usability 42/62
42
SKIPRESTART
LOADING …
Click here to go to the main page directly
8/2/2019 Web Design for Usability
http://slidepdf.com/reader/full/web-design-for-usability 43/62
43
8/2/2019 Web Design for Usability
http://slidepdf.com/reader/full/web-design-for-usability 44/62
44
A few more Webdesign heuristics
8/2/2019 Web Design for Usability
http://slidepdf.com/reader/full/web-design-for-usability 45/62
45
1. Designing(arranging) DisplayElements
Making Display Elements Legible
8/2/2019 Web Design for Usability
http://slidepdf.com/reader/full/web-design-for-usability 46/62
46
Making Display Elements Legible
1. Elements must be large enough tobe processed visually
2. Elements must contrast sufficientlywith their backgrounds
Making Display Elements Legible
8/2/2019 Web Design for Usability
http://slidepdf.com/reader/full/web-design-for-usability 47/62
47
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 shouldbe revealed graphically
8/2/2019 Web Design for Usability
http://slidepdf.com/reader/full/web-design-for-usability 48/62
48
8/2/2019 Web Design for Usability
http://slidepdf.com/reader/full/web-design-for-usability 49/62
49
2. EnsuringText is
Readable
8/2/2019 Web Design for Usability
http://slidepdf.com/reader/full/web-design-for-usability 50/62
50
1. Use sans serif (e.g. Arial, Helvetica,Verdana) typefaces for display on screen
2. Display type intended for continuousreading at 10 to 14 points
3. Avoid the overuse of bold and italics
4. Avoid setting type in all caps
8/2/2019 Web Design for Usability
http://slidepdf.com/reader/full/web-design-for-usability 51/62
51
8/2/2019 Web Design for Usability
http://slidepdf.com/reader/full/web-design-for-usability 52/62
52
8/2/2019 Web Design for Usability
http://slidepdf.com/reader/full/web-design-for-usability 53/62
53
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
8/2/2019 Web Design for Usability
http://slidepdf.com/reader/full/web-design-for-usability 54/62
54
7. Mark the boundaries between paragraphswith blank lines rather than indentation
8. Use headings and subheadings to visuallyreveal the relationships among textelements they label – paragraphs afterparagraphs of text do not work that well onthe Web
8/2/2019 Web Design for Usability
http://slidepdf.com/reader/full/web-design-for-usability 55/62
55
3. UsingPictures &
Illustrations
8/2/2019 Web Design for Usability
http://slidepdf.com/reader/full/web-design-for-usability 56/62
56
Avoid usingpictures thatare strictlydecorative
8/2/2019 Web Design for Usability
http://slidepdf.com/reader/full/web-design-for-usability 57/62
57
4. UsingMotion
8/2/2019 Web Design for Usability
http://slidepdf.com/reader/full/web-design-for-usability 58/62
58
1. Use motion to attract the viewer s
attention
2. Avoid the use of motion for “cosmetic”
purposes
8/2/2019 Web Design for Usability
http://slidepdf.com/reader/full/web-design-for-usability 59/62
59
Success is defined bythe user, not the builder
In Today s Lecture
8/2/2019 Web Design for Usability
http://slidepdf.com/reader/full/web-design-for-usability 60/62
60
In Today s Lecture
• We looked at the role of usability in Web sitedesign
• We identified some of the factors affectingthe usability of a Web page
Reading Assignment
8/2/2019 Web Design for Usability
http://slidepdf.com/reader/full/web-design-for-usability 61/62
61
Reading Assignment
www.useit.com
Next Lecture:
8/2/2019 Web Design for Usability
http://slidepdf.com/reader/full/web-design-for-usability 62/62
Next Lecture:Computer Networks
• We will become able to appreciate the role ofnetworks in computing
• We will familiarize ourselves with various networking topologies and protocols
top related