Usability

1
Usability Design II

• 19th February

2
Effective Web Design

• Planning your web site
• Designing your web site
• Evaluating your web site
• Design elements

3
Nielsens Heuristics
Principles
4
Design Model
Planning/Requirements
Design
Build/Develop
Evaluate
Design Model
5
Requirements

• A requirement is something the product must do or
  a quality that the product must have

Requirements
6
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
7
Design Model
Planning/Requirements
Design
Build/Develop
Evaluate
Design Model
8
Prototypes
Users cant tell you what they want, but when
they see something and use it, they soon know
what they dont 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
9
What is a Prototype?

• In web site design it can be (among other
  things)
• a series of screen sketchesa storyboard, i.e. a
  cartoon-like series of scenes a Powerpoint slide
  showa video simulating the use of a systema
  lump of wood (e.g. PalmPilot)a cardboard
  mock-upa piece of software with limited
  functionality written in the target language or
  in another language

Prototyping
10
Type of Prototypes

• Fidelity refers to the level of detail
• Low Fidelity
• Medium Fidelity
• High Fidelity

Prototyping
11
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
12
Storyboards

Prototyping
13
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
14
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
• users reactions often in the small
• users reluctant to challenge designer
• Users reluctant to touch the design
• management may think its real!

Prototyping
15
Design Model
Planning/Requirements
Design
Build/Develop
Evaluate
Design Model
16
Evaluation

• When to evaluate
• Throughout design
• Design proceeds through iterative cycles of
  design-test-redesign
• Evaluation is a key ingredient for a successful
  design.
• Evaluation techniques
• Expert reviews
• Usability testing
• Surveys

Evaluation Issues
17
Validation Testing

• XHTML validators are used to check web pages
  against XHTML published specifications
• Example http//validator.w3.org/
• Validators enhance the accessibility of web pages
• Another method is linting, which looks for common
  mistakes e.g., poor formatting

Evaluation Issues
18
Design Elements

• Colour
• Design of graphic elements

Design Elements
19
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
20
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
21
Colour

• Problems with Colour
• Varying sensitivity of the eye

• Brightness determined mainly by RG
• Hard to deal with blue edges blue shapes
• Blue not suitable for text or small objects

Design Elements
22
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
23
Colour

• Problems with Colour

Design Elements
24
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
25
Design of Graphic Elements

• Primary Graphic Elements in a GUI
• Windows
• Menus
• Icons

Design Elements
26
Design of Graphic Elements

• Windows
• Users need to consult multiple sources rapidly
• Must 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
27
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
28
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
29
Design of Graphic Elements
Design Elements
30
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