Web Design for Usability
-
Upload
adeel-rehman -
Category
Documents
-
view
219 -
download
0
Transcript of Web Design for Usability
![Page 1: Web Design for Usability](https://reader031.fdocuments.in/reader031/viewer/2022021117/577d1e9c1a28ab4e1e8edc5c/html5/thumbnails/1.jpg)
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
![Page 2: Web Design for Usability](https://reader031.fdocuments.in/reader031/viewer/2022021117/577d1e9c1a28ab4e1e8edc5c/html5/thumbnails/2.jpg)
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
![Page 3: Web Design for Usability](https://reader031.fdocuments.in/reader031/viewer/2022021117/577d1e9c1a28ab4e1e8edc5c/html5/thumbnails/3.jpg)
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
![Page 4: Web Design for Usability](https://reader031.fdocuments.in/reader031/viewer/2022021117/577d1e9c1a28ab4e1e8edc5c/html5/thumbnails/4.jpg)
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
![Page 5: Web Design for Usability](https://reader031.fdocuments.in/reader031/viewer/2022021117/577d1e9c1a28ab4e1e8edc5c/html5/thumbnails/5.jpg)
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
![Page 6: Web Design for Usability](https://reader031.fdocuments.in/reader031/viewer/2022021117/577d1e9c1a28ab4e1e8edc5c/html5/thumbnails/6.jpg)
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
![Page 7: Web Design for Usability](https://reader031.fdocuments.in/reader031/viewer/2022021117/577d1e9c1a28ab4e1e8edc5c/html5/thumbnails/7.jpg)
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
![Page 8: Web Design for Usability](https://reader031.fdocuments.in/reader031/viewer/2022021117/577d1e9c1a28ab4e1e8edc5c/html5/thumbnails/8.jpg)
8/2/2019 Web Design for Usability
http://slidepdf.com/reader/full/web-design-for-usability 8/62
8
don’t make me think !
![Page 9: Web Design for Usability](https://reader031.fdocuments.in/reader031/viewer/2022021117/577d1e9c1a28ab4e1e8edc5c/html5/thumbnails/9.jpg)
8/2/2019 Web Design for Usability
http://slidepdf.com/reader/full/web-design-for-usability 9/62
9
Usability !
![Page 10: Web Design for Usability](https://reader031.fdocuments.in/reader031/viewer/2022021117/577d1e9c1a28ab4e1e8edc5c/html5/thumbnails/10.jpg)
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!
![Page 11: Web Design for Usability](https://reader031.fdocuments.in/reader031/viewer/2022021117/577d1e9c1a28ab4e1e8edc5c/html5/thumbnails/11.jpg)
8/2/2019 Web Design for Usability
http://slidepdf.com/reader/full/web-design-for-usability 11/62
11
speed !
![Page 12: Web Design for Usability](https://reader031.fdocuments.in/reader031/viewer/2022021117/577d1e9c1a28ab4e1e8edc5c/html5/thumbnails/12.jpg)
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
![Page 13: Web Design for Usability](https://reader031.fdocuments.in/reader031/viewer/2022021117/577d1e9c1a28ab4e1e8edc5c/html5/thumbnails/13.jpg)
8/2/2019 Web Design for Usability
http://slidepdf.com/reader/full/web-design-for-usability 13/62
13
![Page 14: Web Design for Usability](https://reader031.fdocuments.in/reader031/viewer/2022021117/577d1e9c1a28ab4e1e8edc5c/html5/thumbnails/14.jpg)
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
![Page 15: Web Design for Usability](https://reader031.fdocuments.in/reader031/viewer/2022021117/577d1e9c1a28ab4e1e8edc5c/html5/thumbnails/15.jpg)
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 )
![Page 16: Web Design for Usability](https://reader031.fdocuments.in/reader031/viewer/2022021117/577d1e9c1a28ab4e1e8edc5c/html5/thumbnails/16.jpg)
8/2/2019 Web Design for Usability
http://slidepdf.com/reader/full/web-design-for-usability 16/62
16
Simplify,
simplify,
simplify!
![Page 17: Web Design for Usability](https://reader031.fdocuments.in/reader031/viewer/2022021117/577d1e9c1a28ab4e1e8edc5c/html5/thumbnails/17.jpg)
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)
![Page 18: Web Design for Usability](https://reader031.fdocuments.in/reader031/viewer/2022021117/577d1e9c1a28ab4e1e8edc5c/html5/thumbnails/18.jpg)
8/2/2019 Web Design for Usability
http://slidepdf.com/reader/full/web-design-for-usability 18/62
18
![Page 19: Web Design for Usability](https://reader031.fdocuments.in/reader031/viewer/2022021117/577d1e9c1a28ab4e1e8edc5c/html5/thumbnails/19.jpg)
8/2/2019 Web Design for Usability
http://slidepdf.com/reader/full/web-design-for-usability 19/62
19
![Page 20: Web Design for Usability](https://reader031.fdocuments.in/reader031/viewer/2022021117/577d1e9c1a28ab4e1e8edc5c/html5/thumbnails/20.jpg)
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
![Page 21: Web Design for Usability](https://reader031.fdocuments.in/reader031/viewer/2022021117/577d1e9c1a28ab4e1e8edc5c/html5/thumbnails/21.jpg)
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
![Page 22: Web Design for Usability](https://reader031.fdocuments.in/reader031/viewer/2022021117/577d1e9c1a28ab4e1e8edc5c/html5/thumbnails/22.jpg)
8/2/2019 Web Design for Usability
http://slidepdf.com/reader/full/web-design-for-usability 22/62
![Page 23: Web Design for Usability](https://reader031.fdocuments.in/reader031/viewer/2022021117/577d1e9c1a28ab4e1e8edc5c/html5/thumbnails/23.jpg)
8/2/2019 Web Design for Usability
http://slidepdf.com/reader/full/web-design-for-usability 23/62
![Page 24: Web Design for Usability](https://reader031.fdocuments.in/reader031/viewer/2022021117/577d1e9c1a28ab4e1e8edc5c/html5/thumbnails/24.jpg)
8/2/2019 Web Design for Usability
http://slidepdf.com/reader/full/web-design-for-usability 24/62
24
- click
navigation
![Page 25: Web Design for Usability](https://reader031.fdocuments.in/reader031/viewer/2022021117/577d1e9c1a28ab4e1e8edc5c/html5/thumbnails/25.jpg)
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 …
![Page 26: Web Design for Usability](https://reader031.fdocuments.in/reader031/viewer/2022021117/577d1e9c1a28ab4e1e8edc5c/html5/thumbnails/26.jpg)
8/2/2019 Web Design for Usability
http://slidepdf.com/reader/full/web-design-for-usability 26/62
26
![Page 27: Web Design for Usability](https://reader031.fdocuments.in/reader031/viewer/2022021117/577d1e9c1a28ab4e1e8edc5c/html5/thumbnails/27.jpg)
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
![Page 28: Web Design for Usability](https://reader031.fdocuments.in/reader031/viewer/2022021117/577d1e9c1a28ab4e1e8edc5c/html5/thumbnails/28.jpg)
8/2/2019 Web Design for Usability
http://slidepdf.com/reader/full/web-design-for-usability 28/62
28
![Page 29: Web Design for Usability](https://reader031.fdocuments.in/reader031/viewer/2022021117/577d1e9c1a28ab4e1e8edc5c/html5/thumbnails/29.jpg)
8/2/2019 Web Design for Usability
http://slidepdf.com/reader/full/web-design-for-usability 29/62
29
![Page 30: Web Design for Usability](https://reader031.fdocuments.in/reader031/viewer/2022021117/577d1e9c1a28ab4e1e8edc5c/html5/thumbnails/30.jpg)
8/2/2019 Web Design for Usability
http://slidepdf.com/reader/full/web-design-for-usability 30/62
30
![Page 31: Web Design for Usability](https://reader031.fdocuments.in/reader031/viewer/2022021117/577d1e9c1a28ab4e1e8edc5c/html5/thumbnails/31.jpg)
8/2/2019 Web Design for Usability
http://slidepdf.com/reader/full/web-design-for-usability 31/62
![Page 32: Web Design for Usability](https://reader031.fdocuments.in/reader031/viewer/2022021117/577d1e9c1a28ab4e1e8edc5c/html5/thumbnails/32.jpg)
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
![Page 33: Web Design for Usability](https://reader031.fdocuments.in/reader031/viewer/2022021117/577d1e9c1a28ab4e1e8edc5c/html5/thumbnails/33.jpg)
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
![Page 34: Web Design for Usability](https://reader031.fdocuments.in/reader031/viewer/2022021117/577d1e9c1a28ab4e1e8edc5c/html5/thumbnails/34.jpg)
8/2/2019 Web Design for Usability
http://slidepdf.com/reader/full/web-design-for-usability 34/62
34
![Page 35: Web Design for Usability](https://reader031.fdocuments.in/reader031/viewer/2022021117/577d1e9c1a28ab4e1e8edc5c/html5/thumbnails/35.jpg)
8/2/2019 Web Design for Usability
http://slidepdf.com/reader/full/web-design-for-usability 35/62
![Page 36: Web Design for Usability](https://reader031.fdocuments.in/reader031/viewer/2022021117/577d1e9c1a28ab4e1e8edc5c/html5/thumbnails/36.jpg)
8/2/2019 Web Design for Usability
http://slidepdf.com/reader/full/web-design-for-usability 36/62
36
![Page 37: Web Design for Usability](https://reader031.fdocuments.in/reader031/viewer/2022021117/577d1e9c1a28ab4e1e8edc5c/html5/thumbnails/37.jpg)
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.
![Page 38: Web Design for Usability](https://reader031.fdocuments.in/reader031/viewer/2022021117/577d1e9c1a28ab4e1e8edc5c/html5/thumbnails/38.jpg)
8/2/2019 Web Design for Usability
http://slidepdf.com/reader/full/web-design-for-usability 38/62
38
![Page 39: Web Design for Usability](https://reader031.fdocuments.in/reader031/viewer/2022021117/577d1e9c1a28ab4e1e8edc5c/html5/thumbnails/39.jpg)
8/2/2019 Web Design for Usability
http://slidepdf.com/reader/full/web-design-for-usability 39/62
39
![Page 40: Web Design for Usability](https://reader031.fdocuments.in/reader031/viewer/2022021117/577d1e9c1a28ab4e1e8edc5c/html5/thumbnails/40.jpg)
8/2/2019 Web Design for Usability
http://slidepdf.com/reader/full/web-design-for-usability 40/62
40
![Page 41: Web Design for Usability](https://reader031.fdocuments.in/reader031/viewer/2022021117/577d1e9c1a28ab4e1e8edc5c/html5/thumbnails/41.jpg)
8/2/2019 Web Design for Usability
http://slidepdf.com/reader/full/web-design-for-usability 41/62
41
W W W
![Page 42: Web Design for Usability](https://reader031.fdocuments.in/reader031/viewer/2022021117/577d1e9c1a28ab4e1e8edc5c/html5/thumbnails/42.jpg)
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
![Page 43: Web Design for Usability](https://reader031.fdocuments.in/reader031/viewer/2022021117/577d1e9c1a28ab4e1e8edc5c/html5/thumbnails/43.jpg)
8/2/2019 Web Design for Usability
http://slidepdf.com/reader/full/web-design-for-usability 43/62
43
![Page 44: Web Design for Usability](https://reader031.fdocuments.in/reader031/viewer/2022021117/577d1e9c1a28ab4e1e8edc5c/html5/thumbnails/44.jpg)
8/2/2019 Web Design for Usability
http://slidepdf.com/reader/full/web-design-for-usability 44/62
44
A few more Webdesign heuristics
![Page 45: Web Design for Usability](https://reader031.fdocuments.in/reader031/viewer/2022021117/577d1e9c1a28ab4e1e8edc5c/html5/thumbnails/45.jpg)
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
![Page 46: Web Design for Usability](https://reader031.fdocuments.in/reader031/viewer/2022021117/577d1e9c1a28ab4e1e8edc5c/html5/thumbnails/46.jpg)
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
![Page 47: Web Design for Usability](https://reader031.fdocuments.in/reader031/viewer/2022021117/577d1e9c1a28ab4e1e8edc5c/html5/thumbnails/47.jpg)
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
![Page 48: Web Design for Usability](https://reader031.fdocuments.in/reader031/viewer/2022021117/577d1e9c1a28ab4e1e8edc5c/html5/thumbnails/48.jpg)
8/2/2019 Web Design for Usability
http://slidepdf.com/reader/full/web-design-for-usability 48/62
48
![Page 49: Web Design for Usability](https://reader031.fdocuments.in/reader031/viewer/2022021117/577d1e9c1a28ab4e1e8edc5c/html5/thumbnails/49.jpg)
8/2/2019 Web Design for Usability
http://slidepdf.com/reader/full/web-design-for-usability 49/62
49
2. EnsuringText is
Readable
![Page 50: Web Design for Usability](https://reader031.fdocuments.in/reader031/viewer/2022021117/577d1e9c1a28ab4e1e8edc5c/html5/thumbnails/50.jpg)
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
![Page 51: Web Design for Usability](https://reader031.fdocuments.in/reader031/viewer/2022021117/577d1e9c1a28ab4e1e8edc5c/html5/thumbnails/51.jpg)
8/2/2019 Web Design for Usability
http://slidepdf.com/reader/full/web-design-for-usability 51/62
51
![Page 52: Web Design for Usability](https://reader031.fdocuments.in/reader031/viewer/2022021117/577d1e9c1a28ab4e1e8edc5c/html5/thumbnails/52.jpg)
8/2/2019 Web Design for Usability
http://slidepdf.com/reader/full/web-design-for-usability 52/62
52
![Page 53: Web Design for Usability](https://reader031.fdocuments.in/reader031/viewer/2022021117/577d1e9c1a28ab4e1e8edc5c/html5/thumbnails/53.jpg)
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
![Page 54: Web Design for Usability](https://reader031.fdocuments.in/reader031/viewer/2022021117/577d1e9c1a28ab4e1e8edc5c/html5/thumbnails/54.jpg)
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
![Page 55: Web Design for Usability](https://reader031.fdocuments.in/reader031/viewer/2022021117/577d1e9c1a28ab4e1e8edc5c/html5/thumbnails/55.jpg)
8/2/2019 Web Design for Usability
http://slidepdf.com/reader/full/web-design-for-usability 55/62
55
3. UsingPictures &
Illustrations
![Page 56: Web Design for Usability](https://reader031.fdocuments.in/reader031/viewer/2022021117/577d1e9c1a28ab4e1e8edc5c/html5/thumbnails/56.jpg)
8/2/2019 Web Design for Usability
http://slidepdf.com/reader/full/web-design-for-usability 56/62
56
Avoid usingpictures thatare strictlydecorative
![Page 57: Web Design for Usability](https://reader031.fdocuments.in/reader031/viewer/2022021117/577d1e9c1a28ab4e1e8edc5c/html5/thumbnails/57.jpg)
8/2/2019 Web Design for Usability
http://slidepdf.com/reader/full/web-design-for-usability 57/62
57
4. UsingMotion
![Page 58: Web Design for Usability](https://reader031.fdocuments.in/reader031/viewer/2022021117/577d1e9c1a28ab4e1e8edc5c/html5/thumbnails/58.jpg)
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
![Page 59: Web Design for Usability](https://reader031.fdocuments.in/reader031/viewer/2022021117/577d1e9c1a28ab4e1e8edc5c/html5/thumbnails/59.jpg)
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
![Page 60: Web Design for Usability](https://reader031.fdocuments.in/reader031/viewer/2022021117/577d1e9c1a28ab4e1e8edc5c/html5/thumbnails/60.jpg)
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
![Page 61: Web Design for Usability](https://reader031.fdocuments.in/reader031/viewer/2022021117/577d1e9c1a28ab4e1e8edc5c/html5/thumbnails/61.jpg)
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:
![Page 62: Web Design for Usability](https://reader031.fdocuments.in/reader031/viewer/2022021117/577d1e9c1a28ab4e1e8edc5c/html5/thumbnails/62.jpg)
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