Spread Knowledge

CS101 - Introduction to Computing - Lecture Handout 25

User Rating:  / 0

Related Content: CS101 - VU Lectures, Handouts, PPT Slides, Assignments, Quizzes, Papers & Books of Introduction to Computing

Web Design for Usability

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


Rule of thumb learned through trial & error
Common sense lesson drawn from experience

Caution! Caution!

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


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
What’s a Good Site?
The one that achieves the result that it was designed forGenerally, that result can only be achieved by giving the user what s/he wants, as quickly as possible, without her/him expending much effortOne definition of usability: Let the user have what s/he wants, quickly, without much effort“Quickly” is important!


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


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)

Designs should be consistent & predictable (unified)

Designs should be consistent

Elements of Website Design:

Navigation scheme
Layout of information
Overall look and feel

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

A Few Navigation Design Heuristics:

Put the main navigation on the left of the page
It should be ‘invisible’ until it is wanted
It should require an economy of action & time
It should remain consistent
Use text for navigation labels. If you must use icons, put a description underneath each icon

Navigation Design Heuristics (contd.):

Labels should be clear, understandable
Labels should be legible
Do not play with standard browser buttons & features Provide search capability

Navigation Design Heuristics

Navigation Design Heuristics 1

Good designs assist the user in recovering from errors

Assisting the User Recover from Errors:

Location, post code mismatch
Credit card number errors
Phone numbers
Spelling errors

Recover from Errors

A few constructive recommendations

Let’s look at a few Web sites and see how we can improve their usability

constructive recommendations

Dragon’s Lair

Dragon’s Lair

Making Display Elements Legible:

Designing (arranging) Display Elements

Elements must be large enough to be processed visually
Elements must contrast sufficiently with their backgrounds

Making Display Elements Legible:

Related elements should be visually grouped through the use of space, color, or graphical boundaries
The relative levels of importance among elements in a display should be revealed graphically

Elements Legible

Ensuring Text is Readable:

Use sans serif (e.g. Arial, Helvetica, Verdana) typefaces for display on screen
Display type intended for continuous reading at 10 to 14 points
Avoid the overuse of bold and italics
Avoid setting type in all caps

Ensuring Text is Readable

Arrange type intended for extended reading flush left, ragged right
Avoid lines of type shorter than 40 characters and longer than 60 characters

Mark the boundaries between paragraphs with blank lines rather than indentation
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

Using Pictures & Illustrations:

Avoid using pictures that are strictly decorative

Using Motion

Use motion to attract the viewer’s attention
Avoid the use of motion for “cosmetic” purposes
Success is defined by the user, not the builder

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

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