Post on 15-Dec-2015
transcript
1
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
2
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
3
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!
4
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
5
6
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)
7
Designs should be
consistent &
predictable (unified)
8
9
10
Elements of Website Design
1. Navigation scheme
2. Layout of information
3. Overall look and feel
11
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
12
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
13
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
14
15
16
Assisting the User Recover from Errors
• Location, post code mismatch
• Credit card number errors
• Phone numbers
• Spelling errors
17
A few constructive recommendations
Let’s look at a few Web sites and see how we can improve their usability
18
Enter
Dragon’s Lair
All rights reserved, 2002.
19
SKIPRESTART
LOADING …
Click here to go to the main page directly
20
21
A few more Web design heuristics
22
1. Designing (arranging)
Display Elements
23
Making Display Elements Legible
1. Elements must be large enough tobe processed visually
2. Elements must contrast sufficiently with their backgrounds
24
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
25
26
2. Ensuring Text is
Readable
27
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
28
29
30
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
31
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
32
3. Using Pictures &
Illustrations
33
Avoid using pictures that are strictly decorative
34
4. Using Motion
35
1. Use motion to attract the viewer’s attention
2. Avoid the use of motion for “cosmetic” purposes
36
Success is defined by the user, notnot the builder