Transcript 3.2

Usability & Design II
19th February
Effective Web Design




Planning your web site
Designing your web site
Evaluating your web site
Design elements
Nielsen’s Heuristics
Visibility
of status
Match to world
User control
Flexibility
Help
Consistency
Errors mgt
error prevention
Simplicity
Recognition
Principles
Design Model
Planning/Requirements
Design
Build/Develop
Evaluate
Design Model
Requirements
A requirement is something the product must
do or a quality that the product must have
Requirements
Requirements – Planning Concepts

URL choice

Choose a domain name and web host.











URL should be easy to remember.
Web host could be company or a web hosting vendor
Branding
E-mailing
Casting a net e.g., discussion groups
Online sales e.g., online coupons and discounts
Search engines
E-information
Visualisation
Analysis
Reverse engineering
Requirements
Design Model
Planning/Requirements
Design
Build/Develop
Evaluate
Design Model
Prototypes
“Users can’t tell you what they want, but
when they see something and use it,
they soon know what they don’t want”
A prototype is an invaluable design tool
for testing ideas, clarifying requirements
and initiating user input and feedback
Core component of iterative design
Prototyping
What is a Prototype?
In web site design it can be (among other things):
a series of screen sketches
a storyboard, i.e. a cartoon-like series of scenes
a Powerpoint slide show
a video simulating the use of a system
a lump of wood (e.g. PalmPilot)
a cardboard mock-up
a piece of software with limited functionality written in
the target language or in another language
Prototyping
Type of Prototypes
Fidelity refers to the level of detail:
•Low Fidelity
•Medium Fidelity
•High Fidelity
Prototyping
Low Fidelity Prototypes
•Uses a medium which is unlike the final medium, e.g.
paper, cardboard
•Is quick, cheap and easily changed
•Examples:
sketches of screens, task sequences, etc
‘Post-it’ notes
storyboards
Prototyping
Storyboards
•
Prototyping
Low Fidelity Prototypes
•This weeks lab:
•Create a web-site with index.html as your homepage and hobbies.html
that links to it
•Use lists, hyperlinks and anchors ….
•Insert the following image as an image map
•Next weeks lab
•Redesign your web page using tables, layers & frames…
•This will ensure that your web page is not all left-aligned
Do a storyboard and a sketch of your screen
Prototyping
Medium Fidelity Prototypes
Prototyping with a computer
•simulate some but not all features of the interface
•engaging for end users
Purpose
•provides sophisticated but limited scenario for the user to try
•can test more subtle design issues
Dangers
•user’s reactions often “in the small”
•users reluctant to challenge designer
•Users reluctant to touch the design
•management may think its real!
Prototyping
Design Model
Planning/Requirements
Design
Build/Develop
Evaluate
Design Model
Evaluation
When to evaluate:
Throughout
design
Design proceeds through iterative cycles of ‘designtest-redesign’
Evaluation is a key ingredient for a successful
design.
Evaluation techniques:
Expert
reviews
Usability
testing
Surveys
Evaluation Issues
Validation & Testing
XHTML
validators are used to check web pages
against XHTML published specifications
Example:
Validators
http://validator.w3.org/
enhance the accessibility of web pages
Another
method is linting, which looks for common
mistakes e.g., poor formatting
Evaluation Issues
Design Elements
Colour
Design
of graphic elements
Design Elements
Colour
YELLOW ON DARK BLUE WORKS WELL
WHITE ON BLACK OR VICE VERSA WORKS WELL
WHITE ON GREEN WORKS WELL
BLACK ON ORANGE WORKS WELL
LIGHT COLOR ON LIGHT COLOR IS POOR
DARK COLOR ON DARK COLOR IS POOR
RED, GREEN, AND OTHER COLORS CLASH
Design Elements
Colour
Problems with Colour
Colour
has an extremely high attention getting capacity
Users might search for relationships and differences that do not
exist
Bewilderment etc. Christmas tree effect

Varying
sensitivity of the eye
All colours are not equal
the eye is more sensitive to colours in the middle of the visual
spectrum (yellow and green) (see next slide)
some combinations can strain the eye
blue - front, red - behind retina

Design Elements
Colour
Problems with Colour

Varying sensitivity of the eye
•Brightness determined
mainly by R+G
•Hard to deal with blue
edges & blue shapes
•Blue not suitable for text
or small objects
From: http://www.cs.gsu.edu/classes/hypgraph/color/coloreff.htm
Design Elements
Colour
Problems with Colour
Colour
viewing deficiencies
8% males, .4% females are colour-blind
red - green most common
red - orange confused with green - yellow

Cross-disciplinary/cultural
differences
colours have different meanings across
situations/cultures
blue
Financial managers - corporate qualities or reliability
Health care professionals - death
Nuclear reactor monitors - coolness or water

Design Elements
Colour
Problems with Colour
Design Elements
Colour
Guidelines for Colour
•Use colour conservatively
•Limit the number and amount of colors
•Recognise the power of color to speed or slow tasks
•Colour coding should support the task
•Colour coding should appear with minimal user effort
•Colour coding should be under user control
•Design for monochrome first
•Consider the needs of colour-deficient users
•Colour can help in formatting
•Be consistent in colour coding
•Be alert to common expectations about color codes
•Be alert to problems with color pairings
•Use colour changes to indicate status changes
•Use colour in graphic displays for greater information density
Design Elements
Design of Graphic Elements
Primary Graphic Elements in a GUI
•Windows
•Menus
•Icons
Design Elements
Design of Graphic Elements
Windows
Users
Must
need to consult multiple sources rapidly
minimally disrupt user's task
Need
to offer users sufficient information and flexibility to
accomplish task, while reducing window housekeeping
actions:

opening, closing, moving, changing size

time spent manipulating windows instead of on task
Design Elements
Design of Graphic Elements
Menus
When designing menus some questions to be asked are:
How long is the menu to be?
In what order will the items appear?
How is the menu to be structured, e.g. when to use sub-menus, dialog
boxes?
What categories will be used to group menu items?
How will division into groups be denoted, e.g. different colors, dividing
lines?
How many menus will there be?
What terminology to use? (results of requirements activities will indicate
this)
How will any physical constraints be accommodated, e.g. mobile phone?

Design Elements
Design of Graphic Elements
Icons
Good
icon design is difficult
Meaning of icons is cultural and context sensitive
Some
tips:
always draw on existing traditions or standards
concrete objects or things are easier to represent
than actions
From clip art, what do these mean
to you?
Design Elements
Design of Graphic Elements
Design Elements
References

Shneiderman, B. & Plaisant, C. (2005) Designing
the User Interface

Preece, J. et al. (2002) Interaction Design

Benyon, D. et al (2005) Designing Interactive
Systems

Ibrahim Zeid (2004), Mastering the Internet,
XHTML, and Javascript
References