web design for usability

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



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



3

Heuristic

Rule of thumb learned through trial & error

Common sense lesson drawn from experience



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



5

Given many parts of a system to be designed/built,

do the hard part 1st



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



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

don’t make me think !



9

Usability !



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!



11

speed !



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



13



14

think roadside billboard

rather than Dewan-e-Ghalib



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 )



16

Simplify,

simplify,

simplify!



17

Designs should be

consistent &

predictable (unified)



18



19



20

Elements of Website Design

1. Navigation scheme

2. Layout of information

3. Overall look and feel



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



24

- click

navigation



25

Now, let s take a look at a few good designs …



26



27

A good solutionto a problemsomehow looks

nice & elegant



28



29



30



32

Good designsassist the userin recoveringfrom errors

A i i h U R f E



33

Assisting the User Recover from Errors

• Location, post code mismatch

• Credit card number errors

• Phone numbers

• Spelling errors



34



36



37

Enter

Dragon’s Lair

All rights reserved, 2002.



38



39



40



41

W W W



42

SKIPRESTART

LOADING …

Click here to go to the main page directly



43



44

A few more Webdesign heuristics



45

1. Designing(arranging) DisplayElements

Making Display Elements Legible



46


1. Elements must be large enough tobe processed visually

2. Elements must contrast sufficientlywith their backgrounds




47


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



48



49

2. EnsuringText is

Readable



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



51



52



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



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



55

3. UsingPictures &

Illustrations



56

Avoid usingpictures thatare strictlydecorative



57

4. UsingMotion



58

1. Use motion to attract the viewer s

attention

2. Avoid the use of motion for “cosmetic”

purposes



59

Success is defined bythe user, not the builder

In Today s Lecture



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



61

Reading Assignment

www.useit.com

Next Lecture:



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

web design for usability

Documents