cs101- introduction to computing- lecture 25
DESCRIPTION
Virtual University Course CS101- Introduction to Computing Lecture No 25 Web Design for UsabilityTRANSCRIPT
![Page 1: CS101- Introduction to Computing- Lecture 25](https://reader030.vdocuments.site/reader030/viewer/2022020110/559b753e1a28ab7f4f8b4707/html5/thumbnails/1.jpg)
1
CS101 Introduction to Computing
Lecture 25Web Design for Usability
![Page 2: CS101- Introduction to Computing- Lecture 25](https://reader030.vdocuments.site/reader030/viewer/2022020110/559b753e1a28ab7f4f8b4707/html5/thumbnails/2.jpg)
2
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
![Page 3: CS101- Introduction to Computing- Lecture 25](https://reader030.vdocuments.site/reader030/viewer/2022020110/559b753e1a28ab7f4f8b4707/html5/thumbnails/3.jpg)
3
Heuristic
Rule of thumb learned through trial & error
Common sense lesson drawn from experience
![Page 4: CS101- Introduction to Computing- Lecture 25](https://reader030.vdocuments.site/reader030/viewer/2022020110/559b753e1a28ab7f4f8b4707/html5/thumbnails/4.jpg)
4
CautionCaution!!CautionCaution!! 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-enough
![Page 5: CS101- Introduction to Computing- Lecture 25](https://reader030.vdocuments.site/reader030/viewer/2022020110/559b753e1a28ab7f4f8b4707/html5/thumbnails/5.jpg)
5
Given many parts of a system to be designed/built,
do the hard part 1st1st
![Page 6: CS101- Introduction to Computing- Lecture 25](https://reader030.vdocuments.site/reader030/viewer/2022020110/559b753e1a28ab7f4f8b4707/html5/thumbnails/6.jpg)
6
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
![Page 7: CS101- Introduction to Computing- Lecture 25](https://reader030.vdocuments.site/reader030/viewer/2022020110/559b753e1a28ab7f4f8b4707/html5/thumbnails/7.jpg)
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: CS101- Introduction to Computing- Lecture 25](https://reader030.vdocuments.site/reader030/viewer/2022020110/559b753e1a28ab7f4f8b4707/html5/thumbnails/8.jpg)
8
don’t make me think!
![Page 9: CS101- Introduction to Computing- Lecture 25](https://reader030.vdocuments.site/reader030/viewer/2022020110/559b753e1a28ab7f4f8b4707/html5/thumbnails/9.jpg)
9
Usability!
![Page 10: CS101- Introduction to Computing- Lecture 25](https://reader030.vdocuments.site/reader030/viewer/2022020110/559b753e1a28ab7f4f8b4707/html5/thumbnails/10.jpg)
10
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!
![Page 11: CS101- Introduction to Computing- Lecture 25](https://reader030.vdocuments.site/reader030/viewer/2022020110/559b753e1a28ab7f4f8b4707/html5/thumbnails/11.jpg)
11
speed!
![Page 12: CS101- Introduction to Computing- Lecture 25](https://reader030.vdocuments.site/reader030/viewer/2022020110/559b753e1a28ab7f4f8b4707/html5/thumbnails/12.jpg)
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 things work; they muddle through
![Page 13: CS101- Introduction to Computing- Lecture 25](https://reader030.vdocuments.site/reader030/viewer/2022020110/559b753e1a28ab7f4f8b4707/html5/thumbnails/13.jpg)
13
![Page 14: CS101- Introduction to Computing- Lecture 25](https://reader030.vdocuments.site/reader030/viewer/2022020110/559b753e1a28ab7f4f8b4707/html5/thumbnails/14.jpg)
14
think roadside billboard
rather than Dewan-e-Ghalib
![Page 15: CS101- Introduction to Computing- Lecture 25](https://reader030.vdocuments.site/reader030/viewer/2022020110/559b753e1a28ab7f4f8b4707/html5/thumbnails/15.jpg)
15
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)
![Page 16: CS101- Introduction to Computing- Lecture 25](https://reader030.vdocuments.site/reader030/viewer/2022020110/559b753e1a28ab7f4f8b4707/html5/thumbnails/16.jpg)
16
Simplify, simplify, simplify!
![Page 17: CS101- Introduction to Computing- Lecture 25](https://reader030.vdocuments.site/reader030/viewer/2022020110/559b753e1a28ab7f4f8b4707/html5/thumbnails/17.jpg)
17
Designs should be
consistent &
predictable (unified)
![Page 18: CS101- Introduction to Computing- Lecture 25](https://reader030.vdocuments.site/reader030/viewer/2022020110/559b753e1a28ab7f4f8b4707/html5/thumbnails/18.jpg)
18
![Page 19: CS101- Introduction to Computing- Lecture 25](https://reader030.vdocuments.site/reader030/viewer/2022020110/559b753e1a28ab7f4f8b4707/html5/thumbnails/19.jpg)
19
![Page 20: CS101- Introduction to Computing- Lecture 25](https://reader030.vdocuments.site/reader030/viewer/2022020110/559b753e1a28ab7f4f8b4707/html5/thumbnails/20.jpg)
20
Elements of Website Design
1. Navigation scheme
2. Layout of information
3. Overall look and feel
![Page 21: CS101- Introduction to Computing- Lecture 25](https://reader030.vdocuments.site/reader030/viewer/2022020110/559b753e1a28ab7f4f8b4707/html5/thumbnails/21.jpg)
21
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
![Page 22: CS101- Introduction to Computing- Lecture 25](https://reader030.vdocuments.site/reader030/viewer/2022020110/559b753e1a28ab7f4f8b4707/html5/thumbnails/22.jpg)
22
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
![Page 23: CS101- Introduction to Computing- Lecture 25](https://reader030.vdocuments.site/reader030/viewer/2022020110/559b753e1a28ab7f4f8b4707/html5/thumbnails/23.jpg)
23
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
![Page 24: CS101- Introduction to Computing- Lecture 25](https://reader030.vdocuments.site/reader030/viewer/2022020110/559b753e1a28ab7f4f8b4707/html5/thumbnails/24.jpg)
24
11- click- click
navigationnavigation??
![Page 25: CS101- Introduction to Computing- Lecture 25](https://reader030.vdocuments.site/reader030/viewer/2022020110/559b753e1a28ab7f4f8b4707/html5/thumbnails/25.jpg)
25
Now, let’s take a look ata few good designs …
![Page 26: CS101- Introduction to Computing- Lecture 25](https://reader030.vdocuments.site/reader030/viewer/2022020110/559b753e1a28ab7f4f8b4707/html5/thumbnails/26.jpg)
26
![Page 27: CS101- Introduction to Computing- Lecture 25](https://reader030.vdocuments.site/reader030/viewer/2022020110/559b753e1a28ab7f4f8b4707/html5/thumbnails/27.jpg)
27
A good solution to a problem
somehow looks nice & elegant
![Page 28: CS101- Introduction to Computing- Lecture 25](https://reader030.vdocuments.site/reader030/viewer/2022020110/559b753e1a28ab7f4f8b4707/html5/thumbnails/28.jpg)
28
![Page 29: CS101- Introduction to Computing- Lecture 25](https://reader030.vdocuments.site/reader030/viewer/2022020110/559b753e1a28ab7f4f8b4707/html5/thumbnails/29.jpg)
29
![Page 30: CS101- Introduction to Computing- Lecture 25](https://reader030.vdocuments.site/reader030/viewer/2022020110/559b753e1a28ab7f4f8b4707/html5/thumbnails/30.jpg)
30
![Page 31: CS101- Introduction to Computing- Lecture 25](https://reader030.vdocuments.site/reader030/viewer/2022020110/559b753e1a28ab7f4f8b4707/html5/thumbnails/31.jpg)
31
![Page 32: CS101- Introduction to Computing- Lecture 25](https://reader030.vdocuments.site/reader030/viewer/2022020110/559b753e1a28ab7f4f8b4707/html5/thumbnails/32.jpg)
32
Good designs assist the user in recovering from errors
![Page 33: CS101- Introduction to Computing- Lecture 25](https://reader030.vdocuments.site/reader030/viewer/2022020110/559b753e1a28ab7f4f8b4707/html5/thumbnails/33.jpg)
33
Assisting the User Recover from Errors
• Location, post code mismatch
• Credit card number errors
• Phone numbers
• Spelling errors
![Page 34: CS101- Introduction to Computing- Lecture 25](https://reader030.vdocuments.site/reader030/viewer/2022020110/559b753e1a28ab7f4f8b4707/html5/thumbnails/34.jpg)
34
![Page 35: CS101- Introduction to Computing- Lecture 25](https://reader030.vdocuments.site/reader030/viewer/2022020110/559b753e1a28ab7f4f8b4707/html5/thumbnails/35.jpg)
35
A few constructive recommendations
Let’s look at a few Web sites and see how we can improve their usability
![Page 36: CS101- Introduction to Computing- Lecture 25](https://reader030.vdocuments.site/reader030/viewer/2022020110/559b753e1a28ab7f4f8b4707/html5/thumbnails/36.jpg)
36
![Page 37: CS101- Introduction to Computing- Lecture 25](https://reader030.vdocuments.site/reader030/viewer/2022020110/559b753e1a28ab7f4f8b4707/html5/thumbnails/37.jpg)
37
Enter
Dragon’s Lair
All rights reserved, 2002.
![Page 38: CS101- Introduction to Computing- Lecture 25](https://reader030.vdocuments.site/reader030/viewer/2022020110/559b753e1a28ab7f4f8b4707/html5/thumbnails/38.jpg)
38
![Page 39: CS101- Introduction to Computing- Lecture 25](https://reader030.vdocuments.site/reader030/viewer/2022020110/559b753e1a28ab7f4f8b4707/html5/thumbnails/39.jpg)
39
![Page 40: CS101- Introduction to Computing- Lecture 25](https://reader030.vdocuments.site/reader030/viewer/2022020110/559b753e1a28ab7f4f8b4707/html5/thumbnails/40.jpg)
40
WW WW WW
![Page 41: CS101- Introduction to Computing- Lecture 25](https://reader030.vdocuments.site/reader030/viewer/2022020110/559b753e1a28ab7f4f8b4707/html5/thumbnails/41.jpg)
41
SKIPRESTART
LOADING …
Click here to go to the main page directly
![Page 42: CS101- Introduction to Computing- Lecture 25](https://reader030.vdocuments.site/reader030/viewer/2022020110/559b753e1a28ab7f4f8b4707/html5/thumbnails/42.jpg)
42
![Page 43: CS101- Introduction to Computing- Lecture 25](https://reader030.vdocuments.site/reader030/viewer/2022020110/559b753e1a28ab7f4f8b4707/html5/thumbnails/43.jpg)
43
A few more Web design heuristics
![Page 44: CS101- Introduction to Computing- Lecture 25](https://reader030.vdocuments.site/reader030/viewer/2022020110/559b753e1a28ab7f4f8b4707/html5/thumbnails/44.jpg)
44
1. Designing (arranging)
Display Elements
![Page 45: CS101- Introduction to Computing- Lecture 25](https://reader030.vdocuments.site/reader030/viewer/2022020110/559b753e1a28ab7f4f8b4707/html5/thumbnails/45.jpg)
45
Making Display Elements Legible
1. Elements must be large enough tobe processed visually
2. Elements must contrast sufficiently with their backgrounds
![Page 46: CS101- Introduction to Computing- Lecture 25](https://reader030.vdocuments.site/reader030/viewer/2022020110/559b753e1a28ab7f4f8b4707/html5/thumbnails/46.jpg)
46
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
![Page 47: CS101- Introduction to Computing- Lecture 25](https://reader030.vdocuments.site/reader030/viewer/2022020110/559b753e1a28ab7f4f8b4707/html5/thumbnails/47.jpg)
47
![Page 48: CS101- Introduction to Computing- Lecture 25](https://reader030.vdocuments.site/reader030/viewer/2022020110/559b753e1a28ab7f4f8b4707/html5/thumbnails/48.jpg)
48
2. Ensuring Text is
Readable
![Page 49: CS101- Introduction to Computing- Lecture 25](https://reader030.vdocuments.site/reader030/viewer/2022020110/559b753e1a28ab7f4f8b4707/html5/thumbnails/49.jpg)
49
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
![Page 50: CS101- Introduction to Computing- Lecture 25](https://reader030.vdocuments.site/reader030/viewer/2022020110/559b753e1a28ab7f4f8b4707/html5/thumbnails/50.jpg)
50
![Page 51: CS101- Introduction to Computing- Lecture 25](https://reader030.vdocuments.site/reader030/viewer/2022020110/559b753e1a28ab7f4f8b4707/html5/thumbnails/51.jpg)
51
![Page 52: CS101- Introduction to Computing- Lecture 25](https://reader030.vdocuments.site/reader030/viewer/2022020110/559b753e1a28ab7f4f8b4707/html5/thumbnails/52.jpg)
52
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 53: CS101- Introduction to Computing- Lecture 25](https://reader030.vdocuments.site/reader030/viewer/2022020110/559b753e1a28ab7f4f8b4707/html5/thumbnails/53.jpg)
53
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
![Page 54: CS101- Introduction to Computing- Lecture 25](https://reader030.vdocuments.site/reader030/viewer/2022020110/559b753e1a28ab7f4f8b4707/html5/thumbnails/54.jpg)
54
3. Using Pictures &
Illustrations
![Page 55: CS101- Introduction to Computing- Lecture 25](https://reader030.vdocuments.site/reader030/viewer/2022020110/559b753e1a28ab7f4f8b4707/html5/thumbnails/55.jpg)
55
Avoid using pictures that are strictly decorative
![Page 56: CS101- Introduction to Computing- Lecture 25](https://reader030.vdocuments.site/reader030/viewer/2022020110/559b753e1a28ab7f4f8b4707/html5/thumbnails/56.jpg)
56
4. Using Motion
![Page 57: CS101- Introduction to Computing- Lecture 25](https://reader030.vdocuments.site/reader030/viewer/2022020110/559b753e1a28ab7f4f8b4707/html5/thumbnails/57.jpg)
57
1. Use motion to attract the viewer’s attention
2. Avoid the use of motion for “cosmetic” purposes
![Page 58: CS101- Introduction to Computing- Lecture 25](https://reader030.vdocuments.site/reader030/viewer/2022020110/559b753e1a28ab7f4f8b4707/html5/thumbnails/58.jpg)
58
Success is defined by the user, notnot the builder
![Page 59: CS101- Introduction to Computing- Lecture 25](https://reader030.vdocuments.site/reader030/viewer/2022020110/559b753e1a28ab7f4f8b4707/html5/thumbnails/59.jpg)
59
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
![Page 60: CS101- Introduction to Computing- Lecture 25](https://reader030.vdocuments.site/reader030/viewer/2022020110/559b753e1a28ab7f4f8b4707/html5/thumbnails/60.jpg)
60
Reading Assignment
www.useit.com
![Page 61: CS101- Introduction to Computing- Lecture 25](https://reader030.vdocuments.site/reader030/viewer/2022020110/559b753e1a28ab7f4f8b4707/html5/thumbnails/61.jpg)
61
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