UNIT II DESIGN & SOFTWARE PROCESS

Interactive Design basics – process – scenarios – navigation – screen des

Iteration and prototyping. HCI in software process – software life cy
usability engineering – Prototyping in practice – design rationale. Design
– principles, standards, guidelines, rules. Evaluation Techniques – Univ
Design.
interaction design basics

• design:
– what it is, interventions, goals, constraints
• the design process
– what happens when
• users
– who they are, what they are like …
• scenarios
– rich stories of design
• navigation
– finding your way around a system
• iteration and prototypes
– never get it right first time!
interactions and interventions

design interactions not just interfaces

not just the immediate interaction
e.g. stapler in office – technology changes interaction style
• manual: write, print, staple, write, print, staple, …
• electric: write, print, write, print, …, staple

designing interventions not just artefacts

not just the system, but also …
• documentation, manuals, tutorials
• what we say and do as well as what we make
what is design?
what is design?

achieving goals within constraints

• goals - purpose
– who is it for, why do they want it
• constraints
– materials, platforms
• trade-offs
golden rule of design

understand your materials

for Human–Computer Interaction

understand your materials

• understand computers
– limitations, capacities, tools, platforms
• understand people
– psychological, social aspects
– human error
• and their interaction …
To err is human
• accident reports ..
– aircrash, industrial accident, hospital mistake
– enquiry … blames … ‘human error’
• but …
– concrete lintel breaks because too much weight
– blame ‘lintel error’ ?
… no – design error
we know how concrete behaves under stress
• human ‘error’ is normal
– we know how users behave under stress
– so design for it!
• treat the user at least as well as physical materials!
Central message …

the user
 The process of design

scenarios
what is task analysis
wanted guidelines
principles
interviews analysis precise
ethnography specification
design
what is there
vs. dialogue implement
what is wanted notations and deploy
evaluation
prototype
heuristics architectures
documentation
help
Steps …

• requirements
– what is there and what is wanted …
• analysis
– ordering and understanding
• design
– what to do and how to decide
• iteration and prototyping
– getting it right … and finding what is really needed!
• implementation and deployment
– making it and getting it out there
… but how can I do it all ! !

• limited time  design trade-off

• usability?
– finding problems and fixing them? 
– deciding what to fix? 
• a perfect system is badly designed
– too good  too much effort in design
 user focus

know your user

personae
cultural probes
know your user

• who are they?

• probably not like you!
• talk to them
• watch them
• use your imagination
persona

• description of an ‘example’ user

– not necessarily a real person
• use as surrogate user
– what would Betty think
• details matter
– makes her ‘real’
example persona
Betty is 37 years old, She has been Warehouse Manager for five
years and worked for Simpkins Brothers Engineering for twelve
years. She didn’t go to university, but has studied in her
evenings for a business diploma. She has two children aged 15
and 7 and does not like to work late. She did part of an
introductory in-house computer course some years ago, but it
was interrupted when she was promoted and could no longer
afford to take the time. Her vision is perfect, but her right-hand
movement is slightly restricted following an industrial accident 3
years ago. She is enthusiastic about her work and is happy to
delegate responsibility and take suggestions from her staff.
However, she does feel threatened by the introduction of yet
another new computer system (the third in her time at SBE).
cultural probes

• direct observation
– sometimes hard
• in the home
• psychiatric patients, …

• probe packs
– items to prompt responses
• e.g. glass to listen at wall, camera, postcard
– given to people to open in their own environment
they record what is meaningful to them

• used to …
– inform interviews, prompt ideas, enculture designers
 scenarios

stories for design

use and reuse
scenarios

• stories for design

– communicate with others
– validate other models
– understand dynamics

• linearity
– time is linear - our lives are linear
– but don’t show alternatives
scenarios …

• what will users want to do?

• step-by-step walkthrough
– what can they see (sketches, screen shots)
– what do they do (keyboard, mouse etc.)
– what are they thinking?

• use and reuse throughout design

scenario – movie player
Brian would like to see the new film “Moments of Significance”
and wants to invite Alison, but he knows she doesn’t like “arty”
films. He decides to take a look at it to see if she would like it
and so connects to one of the movie sharing networks. He uses
his work machine as it has a higher bandwidth connection, but
feels a bit guilty. He knows he will be getting an illegal copy of
the film, but decides it is OK as he is intending to go to the
cinema to watch it. After it downloads to his machine he takes
out his new personal movie player. He presses the ‘menu’
button and on the small LCD screen he scrolls using the arrow
keys to ‘bluetooth connect’ and presses the select button. On
his computer the movie download program now has an icon
showing that it has recognised a compatible device and he drags
the icon of the film over the icon for the player. On the player
the LCD screen says “downloading now”, a percent done
indicator and small whirling icon. … … …
also play act …

• mock up device
• pretend you are doing it
• internet-connected swiss army knife …

but where is that thumb?

use toothpick as stylus

… explore the depths

• explore interaction
– what happens when

• explore cognition
– what are the users thinking

• explore architecture
– what is happening inside
use scenarios to ..

• communicate with others

– designers, clients, users

• validate other models

– ‘play’ it against other models

• express dynamics
– screenshots – appearance
– scenario – behaviour
linearity

Scenarios – one linear path through system

Pros:
– life and time are linear
– easy to understand (stories and narrative are natural)
– concrete (errors less likely)
Cons:
– no choice, no branches, no special conditions
– miss the unintended

• So:
– use several scenarios
– use several methods
 the systems

info and help management messages

start

navigation design
add user remove user

local structure – single screen

global structure – whole site
main remove
confirm
screen user

add user
levels

• widget choice
– menus, buttons etc.
• screen design
• application navigation design
• environment
– other apps, O/S
the web …

• widget choice • elements and tags

– <a href=“...”>

• screen design • page design

• navigation design • site structure
• environment • the web, browser,
external links
physical devices

• widget choice • controls

– buttons, knobs, dials

• screen design • physical layout

• navigation design • modes of device
• environment • the real world
think about structure

• within a screen
– later ...
• local
– looking from this screen out
• global
– structure of site, movement between
screens
• wider still
– relationship with other applications
local

from one screen looking out

goal seeking

goal
start
goal seeking

goal
start

progress with local knowledge only ...

goal seeking

goal
start

… but can get to the goal

goal seeking

goal
start

… try to avoid these bits!

four golden rules

• knowing where you are

• knowing what you can do
• knowing where you are going
– or what will happen
• knowing where you’ve been
– or what you’ve done
 where you are – breadcrumbs

shows path through web site hierarchy

top level category sub-category

web site this page

live links
to higher
levels
beware the big button trap

things other things

the thing from

more things
outer space

• where do they go?

– lots of room for extra text!
modes

• lock to prevent accidental use …

– remove lock - ‘c’ + ‘yes’ to confirm
– frequent practiced action
• if lock forgotten
– in pocket ‘yes’ gets pressed
– goes to phone book
– in phone book …
‘c’ – delete entry
‘yes’ – confirm
… oops !
global

between screens
within the application
hierarchical diagrams

the system

info and help management messages

add user remove user

hierarchical diagrams ctd.

• parts of application
– screens or groups of screens

• typically functional separation

the systems

info and help management messages

add user remove user

navigating hierarchies

• deep is difficult!

• misuse of Miller’s 7 ± 2
– short term memory, not menu size

• optimal?
– many items on each screen
– but structured within screen

see /e3/online/menu-breadth/
think about dialogue

what does it mean in UI design?

Minister: do you name take this woman …

Man: I do
Minister: do you name take this man …
Woman: I do
Minister: I now pronounce you man and wife
think about dialogue

what does it mean in UI design?

Minister: do you name take this woman …

• marriage service
• general flow, generic – blanks for names
• pattern of interaction between people
• computer dialogue
• pattern of interaction between users and system
• but details differ each time
network diagrams

main remove
confirm
screen user

add user

• show different paths through system

network diagrams ctd.

• what leads to what

• what happens when
• including branches
• more task oriented then hierarchy

main remove
confirm
screen user

add user
wider still

between applications
and beyond ...
wider still …

• style issues:
– platform standards, consistency
• functional issues
– cut and paste
• navigation issues
– embedded applications
– links to other apps … the web
 Dix , Alan

Finlay, Janet
Abowd, Gregory
Beale, Russell

screen design and layout

basic principles
grouping, structure, order
alignment
use of white space
ABCDEFHIJKLM
NOPQRSTUVWXYZ
basic principles

• ask
– what is the user doing?

• think
– what information, comparisons, order

• design
– form follows function
available tools

• grouping of items
• order of items
• decoration - fonts, boxes etc.
• alignment of items
• white space between items
grouping and structure

logically together  physically together

Billing details: Delivery details:

Name Name
Address: … Address: …
Credit card no Delivery time

Order details:
item quantity cost/item cost
size 10 screws (boxes) 7 3.71 25.97
…… … … …
order of groups and items

• think! - what is natural order

• should match screen order!

– use boxes, space etc.
– set up tabbing right!

• instructions
– beware the cake recipie syndrome!
… mix milk and flour, add the fruit
after beating them
decoration

• use boxes to group logical items

• use fonts for emphasis, headings
• but not too many!!

ABCDEFHIJKLM
NOPQRSTUVWXYZ
alignment - text

• you read from left to right (English and

European)

 align left hand side

Willy Wonka and the Chocolate Factory
boring but
Winston Churchill - A Biography readable!
Wizard of Oz
Xena - Warrior Princess

Willy Wonka and the Chocolate Factory

Winston Churchill - A Biography
Wizard of Oz
fine for special effects Xena - Warrior Princess
but hard to scan
alignment - names

• Usually scanning for surnames

 make it easy!

Alan Dix


Janet Finlay
Gregory Abowd
Dix , Alan

Finlay, Janet


Russell Beale Abowd, Gregory
Beale, Russell
Alan Dix
Janet Finlay
Gregory Abowd
Russell Beale
alignment - numbers

532.56
think purpose!
179.3
256.317
which is biggest? 15
73.948
1035
3.142
497.6256
alignment - numbers

visually:
627.865
long number = big number 1.005763
382.583
align decimal points 2502.56
or right align integers 432.935
2.0175
652.87
56.34
multiple columns

• scanning across gaps hard:

(often hard to avoid with large data base fields)

sherbert 75
toffee 120
chocolate 35
fruit gums 27
coconut dreams 85
multiple columns - 2

• use leaders

sherbert 75
toffee 120
chocolate 35
fruit gums 27
coconut dreams 85
multiple columns - 3

• or greying (vertical too)

sherbert 75
toffee 120
chocolate 35
fruit gums 27
coconut dreams 85
multiple columns - 4

• or even (with care!) ‘bad’ alignment

sherbert 75
toffee 120
chocolate 35
fruit gums 27
coconut dreams 85
white space - the counter

WHAT YOU SEE

white space - the counter

WHAT YOU SEE

THE GAPS BETWEEN

space to separate
space to structure
space to highlight
physical controls

• grouping of items
–defrost
defrostsettings
settings
–type
typeofoffood
food
– time to cook
time to cook
physical controls

• grouping of items
• order of items
1) type
1) type of heating
of heating
1
2) temperature
2) temperature
3) time to cook
3) time to cook
4) start 2
4) start
3

4
physical controls

• grouping of items
• order of items
• decoration
–different
differentcolours
coloursfor
for different
different functions
functions
–lines
linesaround
aroundrelated
related
buttons(temp up/down)
buttons
physical controls

• grouping of items
• order of items
• decoration
• alignment
– centered text in buttons
centred text in buttons
? easy to scan ?
? easy to scan ?
physical controls

• grouping of items
• order of items
• decoration
• alignment
• white space
– gaps to aid grouping
gaps to aid grouping
user action and control

entering information
knowing what to do
affordances
entering information
Name: Alan Dix
Address: Lancaster
• forms, dialogue boxes


– presentation + data input
– similar layout issues Name: Alan Dix
– alignment - N.B. different label lengths Address: Lancaster

• logical layout
– use task analysis (ch15)
– groupings
?
Name: Alan Dix
Address: Lancaster

– natural order for entering information

• top-bottom, left-right (depending on culture)
• set tab order for keyboard entry

N.B. see extra slides for widget choice

knowing what to do

• what is active what is passive

– where do you click
– where do you type
• consistent style helps
– e.g. web underlined links
• labels and icons
– standards for common actions
– language – bold = current state or action
affordances
mug handle
• psychological term
‘affords’
• for physical objects grasping
– shape and size suggest actions
• pick up, twist, throw
– also cultural – buttons ‘afford’ pushing
• for screen objects
– button–like object ‘affords’ mouse click
– physical-like objects suggest use
• culture of computer use
– icons ‘afford’ clicking
– or even double clicking … not like real buttons!
 appropriate appearance

presenting information
aesthetics and utility
colour and 3D
localisation & internationalisation
presenting information

• purpose matters name size

– sort order (which column, numeric alphabetic) chap10
chap1 17
12
– text vs. diagram chap10
chap5 12
16
chap11
chap1 51
17
– scatter graph vs. histogram chap12
chap14 262
22
chap13
chap20 83
27
• use paper presentation principles! chap14
chap8
……
22
32
…

• but add interactivity

– softens design choices
• e.g. re-ordering columns
• ‘dancing histograms’ (chap 21)
aesthetics and utility

• aesthetically pleasing designs

– increase user satisfaction and improve productivity
• beauty and utility may conflict
– mixed up visual styles  easy to distinguish
– clean design – little differentiation  confusing
– backgrounds behind text
… good to look at, but hard to read
• but can work together
– e.g. the design of the counter
– in consumer products – key differentiator (e.g. iMac)
colour and 3D

• both often used very badly!

• colour
– older monitors limited palette
– colour over used because ‘it is there’
– beware colour blind!
– use sparingly to reinforce other information
• 3D effects
– good for physical information and some graphs
– but if over used …
e.g. text in perspective!! 3D pie charts
bad use of colour

• over use - without very good reason (e.g. kids’

site)
• colour blindness
• poor use of contrast
• do adjust your set!
– adjust your monitor to greys only
– can you still read your screen?
across countries and cultures
• localisation & internationalisation
– changing interfaces for particular cultures/languages
• globalisation
– try to choose symbols etc. that work everywhere

• simply change language?

– use ‘resource’ database instead of literal text
… but changes sizes, left-right order etc.
• deeper issues
– cultural assumptions and values
– meanings of symbols
e.g tick and cross … +ve and -ve in some cultures
… but … mean the same thing (mark this) in others

 
prototyping
iteration and prototyping

getting better …
… and starting well
prototyping

• you never get it right first time

• if at first you don’t succeed …

OK?
design prototype evaluate done!

re-design
pitfalls of prototyping

• moving little by little … but to where

• Malverns or the Matterhorn?

1. need a good start point

2. need to understand what is wrong
NUCLEAR REACTOR MAIN CONTROL PANEL
Alarm Control

LOTS OF OTHER alarm

+
–

CONTROLS control
panel
reactor targets
information
panel emergency
shutdown
Reactor Targets
panel
Emergency Shutdown
7934
Pressure
325
manual IMMEDIATE
Temp
10256
override keypad
SHUTDOWN
COMMENCE
Flow Rate
panel for manual emergency
override confirm
Manual Override 7 8 9
panel Emergency Confirm
6000
Target 4 5 6 CONFIRM

Pressure SET
0 1 2 3 CANCEL
Emergency Scenario

Jenny, the Nuclear Power Plant operator has normal sight and no physical
or perceptual impairments. Her shift started at 11pm and it is now 5am
in the morning. So far the plant has been operating within normal
parameters and the current alarm state is therefore green
1 Jenny notices the core reaction rate has risen very rapidly
2. she realises she must immediately change the reactor
target pressure to correct this
3. she goes to the Alarm Control Panel on the far right of the
main reactor control panel and presses '+' twice (as it is
starting off in green state)
4. the Emergency Confirm button glows red
5. she moves across to the Manual Override panel on the
far left of the main reactor control panel
………
 chapter 6

HCI in the software

process
HCI in the software process

• Software engineering and the design process

for interactive systems

• Usability engineering

• Iterative design and prototyping

• Design rationale
the software lifecycle

• Software engineering is the discipline for

understanding the software design process, or
life cycle

• Designing for usability occurs at all stages of

the life cycle, not as a single isolated activity
The waterfall model
Requirements
specification

Architectural
design

Detailed
design

Coding and
unit testing

Integration
and testing

Operation and
maintenance
Activities in the life cycle
Requirements specification
designer and customer try capture what the system is
expected to provide can be expressed in natural language or
more precise languages, such as a task analysis would provide

Architectural design
high-level description of how the system will provide the
services required factor system into major components of the
system and how they are interrelated needs to satisfy both
functional and nonfunctional requirements

Detailed design
refinement of architectural components and interrelations to
identify modules to be implemented separately the refinement
is governed by the nonfunctional requirements
 Verification and validation

Real-world
requirements
and constraints The formality gap

Verification
designing the product right
 Validation
designing the right product
 
The formality gap
validation will always rely to some extent on subjective means of
proof
Management and contractual issues
design in commercial and legal contexts
The life cycle for interactive
systems
Requirements cannot assume a linear
specification
sequence of activities
Architectural as in the waterfall model
design

Detailed
design

Coding and
unit testing

Integration
lots of feedback! and testing

Operation and
maintenance
Usability engineering
The ultimate test of usability based on measurement of user
experience

Usability engineering demands that specific usability measures be

made explicit as requirements

Usability specification
– usability attribute/principle
– measuring concept
– measuring method
– now level/ worst case/ planned level/ best case

Problems
– usability specification requires level of detail that may not be
– possible early in design satisfying a usability specification
– does not necessarily satisfy usability
part of a usability
specification for a VCR

Attribute: Backward recoverability

Measuring concept: Undo an erroneous programming
sequence
Measuring method: Number of explicit user actions
to undo current program
Now level: No current product allows such an undo
Worst case: As many actions as it takes to
program-in mistake
Planned level: A maximum of two explicit user actions
Best case: One explicit cancel action
ISO usability standard 9241

adopts traditional usability categories:

• effectiveness
– can you achieve what you want to?
• efficiency
– can you do it without wasting effort?
• satisfaction
– do you enjoy the process?
some metrics from ISO 9241
Usability Effectiveness Efficiency Satisfaction
objective measures measures measures

Suitability Percentage of Time to Rating scale

for the task goals achieved complete a task for satisfaction

Appropriate for Number of power Relative efficiency Rating scale for

trained users features used compared with satisfaction with
an expert user power features

Learnability Percentage of Time to learn Rating scale for

functions learned criterion ease of learning

Error tolerance Percentage of Time spent on Rating scale for

errors corrected correcting errors error handling
successfully
Iterative design and
prototyping
• Iterative design overcomes inherent problems of incomplete
requirements

• Prototypes
– simulate or animate some features of intended system
– different types of prototypes
• throw-away
• incremental
• evolutionary

• Management issues
– time
– planning
– non-functional features
– contracts
Techniques for prototyping
Storyboards
need not be computer-based
can be animated

Limited functionality simulations

some part of system functionality provided by designers
tools like HyperCard are common for these
Wizard of Oz technique

Warning about iterative design

design inertia – early bad decisions stay bad
diagnosing real usability problems in prototypes….
…. and not just the symptoms
Design rationale

Design rationale is information that explains why

a computer system is the way it is.

Benefits of design rationale

– communication throughout life cycle
– reuse of design knowledge across products
– enforces design discipline
– presents arguments for design trade-offs
– organizes potentially large design space
– capturing contextual information
Design rationale (cont’d)

Types of DR:
• Process-oriented
– preserves order of deliberation and decision-making
• Structure-oriented
– emphasizes post hoc structuring of considered
design alternatives

• Two examples:
– Issue-based information system (IBIS)
– Design space analysis
Issue-based information
system (IBIS)
• basis for much of design rationale research
• process-oriented
• main elements:
issues
– hierarchical structure with one ‘root’ issue
positions
– potential resolutions of an issue
arguments
– modify the relationship between positions and issues

• gIBIS is a graphical version

 structure of gIBIS
supports
Position Argument
responds to
Issue
responds to
objects to
Position Argument
specializes

Sub-issue generalizes

questions

Sub-issue

Sub-issue
Design space analysis

• structure-oriented

• QOC – hierarchical structure:

questions (and sub-questions)
– represent major issues of a design
options
– provide alternative solutions to the question
criteria
– the means to assess the options in order to make a choice

• DRL – similar to QOC with a larger language

and more formal semantics
the QOC notation

Option Criterion

Question Option Criterion

Option
Criterion

… Consequent …
Question
Question
Psychological design rationale

• to support task-artefact cycle in which user tasks are

affected by the systems they use
• aims to make explicit consequences of design for users
• designers identify tasks system will support
• scenarios are suggested to test task
• users are observed on system
• psychological claims of system made explicit
• negative aspects of design can be used to improve next
iteration of design
Summary

The software engineering life cycle

– distinct activities and the consequences for
interactive system design
Usability engineering
– making usability measurements explicit as
requirements
Iterative design and prototyping
– limited functionality simulations and animations
Design rationale
– recording design knowledge
– process vs. structure
 chapter 7

design rules
design rules

Designing for maximum usability

– the goal of interaction design

• Principles of usability
– general understanding

• Standards and guidelines

– direction for design

• Design patterns
– capture and reuse design knowledge
types of design rules

• principles
– abstract design rules
– low authority
– high generality Guidelines

increasing generality
increasing generality
• standards
– specific design rules
– high authority
Standards
– limited application
• guidelines
– lower authority increasing authority
increasing authority
– more general application
Principles to support usability

Learnability
the ease with which new users can begin effective
interaction and achieve maximal performance

Flexibility
the multiplicity of ways the user and system exchange
information

Robustness
the level of support provided the user in determining
successful achievement and assessment of goal-
directed behaviour
Principles of learnability

Predictability
– determining effect of future actions based on
past interaction history
– operation visibility

Synthesizability
– assessing the effect of past actions
– immediate vs. eventual honesty
Principles of learnability (ctd)

Familiarity
– how prior knowledge applies to new system
– guessability; affordance

Generalizability
– extending specific interaction knowledge to new
situations

Consistency
– likeness in input/output behaviour arising from similar
situations or task objectives
Principles of flexibility

Dialogue initiative
– freedom from system imposed constraints on input
dialogue
– system vs. user pre-emptiveness

Multithreading
– ability of system to support user interaction for more
than one task at a time
– concurrent vs. interleaving; multimodality

Task migratability
– passing responsibility for task execution between user
and system
Principles of flexibility (ctd)

Substitutivity
– allowing equivalent values of input and
output to be substituted for each other
– representation multiplicity; equal opportunity

Customizability
– modifiability of the user interface by user
(adaptability) or system (adaptivity)
Principles of robustness

Observability
– ability of user to evaluate the internal state of the
system from its perceivable representation
– browsability; defaults; reachability; persistence;
operation visibility

Recoverability
– ability of user to take corrective action once an error
has been recognized
– reachability; forward/backward recovery;
commensurate effort
Principles of robustness (ctd)

Responsiveness
– how the user perceives the rate of
communication with the system
– Stability

Task conformance
– degree to which system services support all
of the user's tasks
– task completeness; task adequacy
Using design rules
Guidelines

increasing generality
increasing generality
Design rules
Standards
• suggest how to increase usability
• differ in generality and authority
increasing
increasingauthority
authority
Standards

• set by national or international bodies to

ensure compliance by a large community of
designers standards require sound underlying
theory and slowly changing technology

• hardware standards more common than

software high authority and low level of detail

• ISO 9241 defines usability as effectiveness,

efficiency and satisfaction with which users
accomplish tasks
Guidelines

• more suggestive and general

• many textbooks and reports full of guidelines
• abstract guidelines (principles) applicable
during early life cycle activities
• detailed guidelines (style guides) applicable
during later life cycle activities
• understanding justification for guidelines aids
in resolving conflicts
Golden rules and heuristics

• “Broad brush” design rules

• Useful check list for good design
• Better design using these than using nothing!
• Different collections e.g.
– Nielsen’s 10 Heuristics (see Chapter 9)
– Shneiderman’s 8 Golden Rules
– Norman’s 7 Principles
Shneiderman’s 8 Golden Rules

1. Strive for consistency

2. Enable frequent users to use shortcuts
3. Offer informative feedback
4. Design dialogs to yield closure
5. Offer error prevention and simple error
handling
6. Permit easy reversal of actions
7. Support internal locus of control
8. Reduce short-term memory load
Norman’s 7 Principles

1. Use both knowledge in the world and

knowledge in the head.
2. Simplify the structure of tasks.
3. Make things visible: bridge the gulfs of
Execution and Evaluation.
4. Get the mappings right.
5. Exploit the power of constraints, both natural
and artificial.
6. Design for error.
7. When all else fails, standardize.
HCI design patterns

• An approach to reusing knowledge about

successful design solutions
• Originated in architecture: Alexander
• A pattern is an invariant solution to a recurrent
problem within a specific context.
• Examples
– Light on Two Sides of Every Room (architecture)
– Go back to a safe place (HCI)
• Patterns do not exist in isolation but are linked to
other patterns in languages which enable complete
designs to be generated
HCI design patterns (cont.)
• Characteristics of patterns
– capture design practice not theory
– capture the essential common properties of good examples
of design
– represent design knowledge at varying levels: social,
organisational, conceptual, detailed
– embody values and can express what is humane in
interface design
– are intuitive and readable and can therefore be used for
communication between all stakeholders
– a pattern language should be generative and assist in the
development of complete designs.
Summary

Principles for usability

– repeatable design for usability relies on maximizing
benefit of one good design by abstracting out the
general properties which can direct purposeful
design
– The success of designing for usability requires both
creative insight (new paradigms) and purposeful
principled practice

Using design rules

– standards and guidelines to direct design activity
 chapter 9

evaluation techniques
Evaluation Techniques

• Evaluation
– tests usability and functionality of system
– occurs in laboratory, field and/or in collaboration
with users
– evaluates both design and implementation
– should be considered at all stages in the design life
cycle
Goals of Evaluation

• assess extent of system functionality

• assess effect of interface on user

• identify specific problems

 Evaluating Designs

Cognitive Walkthrough
Heuristic Evaluation
Review-based evaluation
Cognitive Walkthrough

Proposed by Polson et al.

– evaluates design on how well it supports user
in learning task
– usually performed by expert in cognitive
psychology
– expert ‘walks though’ design to identify
potential problems using psychological
principles
– forms used to guide analysis
Cognitive Walkthrough (ctd)

• For each task walkthrough considers

– what impact will interaction have on user?
– what cognitive processes are required?
– what learning problems may occur?

• Analysis focuses on goals and

knowledge: does the design lead the
user to generate the correct goals?
Heuristic Evaluation

• Proposed by Nielsen and Molich.

• usability criteria (heuristics) are identified

• design examined by experts to see if these are
violated

• Example heuristics
– system behaviour is predictable
– system behaviour is consistent
– feedback is provided

• Heuristic evaluation `debugs' design.

Review-based evaluation
• Results from the literature used to support or
refute parts of design.

• Care needed to ensure results are transferable to

new design.

• Model-based evaluation

• Cognitive models used to filter design options

e.g. GOMS prediction of user performance.

• Design rationale can also provide useful evaluation

information
Evaluating through user
Participation
Laboratory studies

• Advantages:
– specialist equipment available
– uninterrupted environment

• Disadvantages:
– lack of context
– difficult to observe several users cooperating

• Appropriate
– if system location is dangerous or impractical for
constrained single user systems to allow controlled
manipulation of use
Field Studies

• Advantages:
– natural environment
– context retained (though observation may alter it)
– longitudinal studies possible

• Disadvantages:
– distractions
– noise

• Appropriate
– where context is crucial for longitudinal studies
Evaluating Implementations

Requires an artefact:
simulation, prototype,
full implementation
Experimental evaluation

• controlled evaluation of specific aspects of

interactive behaviour
• evaluator chooses hypothesis to be tested
• a number of experimental conditions are
considered which differ only in the value of
some controlled variable.
• changes in behavioural measure are attributed
to different conditions
Experimental factors

• Subjects
– who – representative, sufficient sample
• Variables
– things to modify and measure
• Hypothesis
– what you’d like to show
• Experimental design
– how you are going to do it
Variables

• independent variable (IV)

characteristic changed to produce different
conditions
e.g. interface style, number of menu items

• dependent variable (DV)

characteristics measured in the experiment
e.g. time taken, number of errors.
Hypothesis

• prediction of outcome
– framed in terms of IV and DV

e.g. “error rate will increase as font size decreases”

• null hypothesis:
– states no difference between conditions
– aim is to disprove this

e.g. null hyp. = “no change with font size”

Experimental design

• within groups design

– each subject performs experiment under each
condition.
– transfer of learning possible
– less costly and less likely to suffer from user
variation.
• between groups design
– each subject performs under only one condition
– no transfer of learning
– more users required
– variation can bias results.
Analysis of data

• Before you start to do any statistics:

– look at data
– save original data

• Choice of statistical technique depends on

– type of data
– information required

• Type of data
– discrete - finite number of values
– continuous - any value
Analysis - types of test
• parametric
– assume normal distribution
– robust
– powerful

• non-parametric
– do not assume normal distribution
– less powerful
– more reliable

• contingency table
– classify data by discrete attributes
– count number of data items in each group
Analysis of data (cont.)

• What information is required?

– is there a difference?
– how big is the difference?
– how accurate is the estimate?

• Parametric and non-parametric tests

mainly address first of these
Experimental studies on groups

More difficult than single-user experiments

Problems with:
– subject groups
– choice of task
– data gathering
– analysis
Subject groups

larger number of subjects

 more expensive

longer time to `settle down’

… even more variation!

difficult to timetable

so … often only three or four groups

The task

must encourage cooperation

perhaps involve multiple channels

options:
– creative task e.g. ‘write a short report on …’
– decision games e.g. desert survival task
– control task e.g. ARKola bottling plant
Data gathering

several video cameras

+ direct logging of application

problems:
– synchronisation
– sheer volume!

one solution:
– record from each perspective
Analysis

N.B. vast variation between groups

solutions:
– within groups experiments
– micro-analysis (e.g., gaps in speech)
– anecdotal and qualitative analysis

look at interactions between group and media

controlled experiments may `waste' resources!

Field studies

Experiments dominated by group formation

Field studies more realistic:

distributed cognition  work studied in context
real action is situated action
physical and social environment both crucial

Contrast:
psychology – controlled experiment
sociology and anthropology – open study and rich data
Observational Methods

Think Aloud
Cooperative evaluation
Protocol analysis
Automated analysis
Post-task walkthroughs
Think Aloud

• user observed performing task

• user asked to describe what he is doing and why,
what he thinks is happening etc.

• Advantages
– simplicity - requires little expertise
– can provide useful insight
– can show how system is actually use
• Disadvantages
– subjective
– selective
– act of describing may alter task performance
Cooperative evaluation

• variation on think aloud

• user collaborates in evaluation
• both user and evaluator can ask each other
questions throughout

• Additional advantages
– less constrained and easier to use
– user is encouraged to criticize system
– clarification possible
Protocol analysis
• paper and pencil – cheap, limited to writing speed
• audio – good for think aloud, difficult to match with other
protocols
• video – accurate and realistic, needs special equipment,
obtrusive
• computer logging – automatic and unobtrusive, large
amounts of data difficult to analyze
• user notebooks – coarse and subjective, useful insights,
good for longitudinal studies

• Mixed use in practice.

• audio/video transcription difficult and requires skill.
• Some automatic support tools available
automated analysis – EVA

• Workplace project
• Post task walkthrough
– user reacts on action after the event
– used to fill in intention
• Advantages
– analyst has time to focus on relevant incidents
– avoid excessive interruption of task
• Disadvantages
– lack of freshness
– may be post-hoc interpretation of events
post-task walkthroughs

• transcript played back to participant for

comment
– immediately  fresh in mind
– delayed  evaluator has time to identify
questions
• useful to identify reasons for actions
and alternatives considered
• necessary in cases where think aloud is
not possible
Query Techniques

Interviews
Questionnaires
Interviews

• analyst questions user on one-to -one basis

usually based on prepared questions
• informal, subjective and relatively cheap

• Advantages
– can be varied to suit context
– issues can be explored more fully
– can elicit user views and identify unanticipated
problems
• Disadvantages
– very subjective
– time consuming
Questionnaires

• Set of fixed questions given to users

• Advantages
– quick and reaches large user group
– can be analyzed more rigorously
• Disadvantages
– less flexible
– less probing
Questionnaires (ctd)

• Need careful design

– what information is required?
– how are answers to be analyzed?

• Styles of question
– general
– open-ended
– scalar
– multi-choice
– ranked
Physiological methods

Eye tracking
Physiological measurement
eye tracking

• head or desk mounted equipment tracks the

position of the eye
• eye movement reflects the amount of
cognitive processing a display requires
• measurements include
– fixations: eye maintains stable position. Number and
duration indicate level of difficulty with display
– saccades: rapid eye movement from one point of
interest to another
– scan paths: moving straight to a target with a short
fixation at the target is optimal
physiological measurements
• emotional response linked to physical changes
• these may help determine a user’s reaction to
an interface
• measurements include:
– heart activity, including blood pressure, volume and pulse.
– activity of sweat glands: Galvanic Skin Response (GSR)
– electrical activity in muscle: electromyogram (EMG)
– electrical activity in brain: electroencephalogram (EEG)
• some difficulty in interpreting these
physiological responses - more research needed
Choosing an Evaluation Method

when in process: design vs. implementation

style of evaluation: laboratory vs. field
how objective: subjective vs. objective
type of measures: qualitative vs. quantitative
level of information: high level vs. low level
level of interference: obtrusive vs. unobtrusive
resources available: time, subjects,
equipment, expertise