1

UNIT II DESIGN AND SOFTWARE PROCESS

Interactive Design basics – process – scenarios –

navigation – screen design – Iteration and prototyping.

HCI in software process – software life cycle – usability

engineering – Prototyping in practice – design rationale.

Design rules – principles, standards, guidelines, rules.

Evaluation Techniques – Universal Design.
2 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!
3 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
 4

WHAT IS DESIGN?
 5 WHAT IS DESIGN?

achieving goals within constraints

• goals - purpose
• who is it for, why do they want it

• constraints
• materials, platforms

• trade-offs
6 GOLDEN RULE OF DESIGN

understand your materials

 7 FOR HUMAN–COMPUTER
INTERACTION

understand your materials

• understand computers
• limitations, capacities, tools, platforms

• understand people
• psychological, social aspects
• human error

• and their interaction …

8 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!
9 CENTRAL MESSAGE …

the user
 10 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
11 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
12 … 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
13

USER FOCUS
KNOW YOUR USER

PERSONAE

CULTURAL PROBES
14 KNOW YOUR USER

• who are they?

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

• description of an ‘example’ user

• not necessarily a real person

• use as surrogate user

• what would Betty think

• details matter
• makes her ‘real’
16 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).
17 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
18

SCENARIOS
STORIES FOR DESIGN

USE AND REUSE

19 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
20 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

21 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. … … …
 22 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

23 … EXPLORE THE DEPTHS

• explore interaction
• what happens when

• explore cognition
• what are the users thinking

• explore architecture
• what is happening inside
24 USE SCENARIOS TO ..

• communicate with others

• designers, clients, users

• validate other models

• ‘play’ it against other models

• express dynamics
• screenshots – appearance
• scenario – behaviour
25 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
 26
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
27 LEVELS

• widget choice
• menus, buttons etc.

• screen design
• application navigation design
• environment
• other apps, O/S
28 THE WEB …

• widget choice • elements and tags

– <a href=“...”>

• screen design • page design

• navigation design • site structure
• environment • the web, browser,
external links
29 PHYSICAL DEVICES

• widget choice • controls

– buttons, knobs, dials

• screen design • physical layout

• navigation design • modes of device
• environment • the real world
30 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
 31

LOCAL
FROM ONE SCREEN LOOKING OUT
32 GOAL SEEKING

goal
start
33 GOAL SEEKING

goal
start

progress with local knowledge only ...

34 GOAL SEEKING

goal
start

… but can get to the goal

35 GOAL SEEKING

goal
start

… try to avoid these bits!

36 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
 37 WHERE YOU ARE –
BREADCRUMBS

shows path through web site hierarchy

top level category sub-category
web site this page

live links
to higher
levels
38 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!
39 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 !
 40

GLOBAL
BETWEEN SCREENS

WITHIN THE APPLICATION

41 HIERARCHICAL DIAGRAMS

the system

info and help management messages

add user remove user

42 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

43 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/
44 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
45 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
46 NETWORK DIAGRAMS

main remove
confirm
screen user

add user

• show different paths through system

47 NETWORK DIAGRAMS CTD.

• what leads to what

• what happens when
• including branches

• more task oriented then hierarchy

main remove
confirm
screen user

add user
 48

WIDER STILL

BETWEEN APPLICATIONS

AND BEYOND ...

49 WIDER STILL …

• style issues:
• platform standards, consistency

• functional issues
• cut and paste

• navigation issues
• embedded applications
• links to other apps … the web
 50
Dix , Alan

Finlay, Janet
Abowd, Gregory
Beale, Russell

SCREEN DESIGN AND LAYOUT

BASIC PRINCIPLES

GROUPING, STRUCTURE, ORDER

ALIGNMENT

USE OF WHITE SPACE

ABCDEFGHIJKLM
NOPQRSTUVWXYZ
51 BASIC PRINCIPLES

• ask
• what is the user doing?

• think
• what information, comparisons, order

• design
• form follows function
52 AVAILABLE TOOLS

• grouping of items
• order of items
• decoration - fonts, boxes etc.
• alignment of items
• white space between items
53 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
…… … … …
54 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
55 DECORATION

• use boxes to group logical items

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

ABCDEFGHIJKLM
NOPQRSTUVWXYZ
56 ALIGNMENT - TEXT

• you read from left to right (English and European)

 align left hand side

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

Willy Wonka and the Chocolate Factory

Winston Churchill - A Biography
fine for special effects but hard Wizard of Oz
to scan Xena - Warrior Princess
57 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
58 ALIGNMENT - NUMBERS

532.56
think purpose!
179.3
256.317
which is biggest?
15
73.948
1035
3.142
497.6256
59 ALIGNMENT - NUMBERS

627.865
visually:
1.005763
long number = big number
382.583
2502.56
align decimal points 432.935
or right align integers 2.0175
652.87
56.34
60 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
61 MULTIPLE COLUMNS - 2

• use leaders

sherbert 75
toffee 120
chocolate 35
fruit gums 27
coconut dreams 85
62 MULTIPLE COLUMNS - 3

• or greying (vertical too)

sherbert 75
toffee 120
chocolate 35
fruit gums 27
coconut dreams 85
63 MULTIPLE COLUMNS - 4

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

sherbert 75
toffee 120
chocolate 35
fruit gums 27
coconut dreams 85
64 WHITE SPACE - THE COUNTER

WHAT YOU SEE

65 WHITE SPACE - THE COUNTER

WHAT YOU SEE

THE GAPS BETWEEN

66 PHYSICAL CONTROLS

• grouping of items
• defrost
defrost settings
settings
• type of food
type of food
• time to cook
time to cook
67 PHYSICAL CONTROLS

• grouping of items
• order of items
1) type of
1) heating
type of heating
1
2) 2) temperature
temperature

3) 3)cook
time to time to cook
4) start 2
4) start
3

4
68 PHYSICAL CONTROLS

• grouping of items
• order of items
• decoration
• different
different colours colours
for different
functionsfor different functions
• lines around related
buttons
lines around related
buttons (temp up/down)
69 PHYSICAL CONTROLS

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

? easy to scan ?
70 PHYSICAL CONTROLS

• grouping of items
• order of items
• decoration
• alignment
• white space
• gaps to aid grouping

gaps to aid grouping

 71

USER ACTION AND CONTROL

ENTERING INFORMATION

KNOWING WHAT TO DO

AFFORDANCES
72 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
• natural order for entering information
?
Name: Alan Dix
Address: Lancaster

• top-bottom, left-right (depending on culture)

• set tab order for keyboard entry

N.B. see extra slides for widget choice

73 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
74 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!
 75

APPROPRIATE APPEARANCE
PRESENTING INFORMATION

AESTHETICS AND UTILITY

COLOUR AND 3D

LOCALISATION & INTERNATIONALISATION

76 PRESENTING INFORMATION

• purpose matters name size

• sort order (which column, numeric alphabetic)
chap10
chap1 17
12
• text vs. diagram chap10
chap5 12
16
• scatter graph vs. histogram chap11
chap1 51
17
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)
77 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)
78 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
79 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?
80 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

 
81

PROTOTYPING
82

ITERATION AND
PROTOTYPING
GETTING BETTER …

… AND STARTING WELL

83 PROTOTYPING

• you never get it right first time

• if at first you don’t succeed …

OK?
design prototype evaluate done!

re-design
84 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
85

CHAPTER 6 – HCI IN THE SOFTWARE PROCESS

86 HCI IN THE SOFTWARE
PROCESS
• Software engineering and the design process for
interactive systems

• Usability engineering-improves the usability of

interactive system

• Iterative design and prototyping

• Design rationale
87 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
88 THE WATERFALL MODEL

Requirements
Requirements
specification
specification

Architectural
Architectural
design
design

Detailed
Detailed
design
design

Coding
Coding and
and
unit
unit testing
testing

Integration
Integration
and
and testing
testing

Operation
Operation and
and
maintenance
maintenance
89 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
 90 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
91 THE LIFE CYCLE FOR
INTERACTIVE SYSTEMS
Requirements
Requirements cannot assume a linear
specification
specification
sequence of activities
as in the waterfall model
Architectural
Architectural
design
design

Detailed
Detailed
design
design

Coding
Coding and
and
unit
unit testing
testing

lots of feedback! Integration

Integration
and
and testing
testing

Operation
Operation and
and
maintenance
maintenance
92 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
93 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
94 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?
95 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
96 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
97 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
98 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
99 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
100 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
101 STRUCTURE OF GIBIS

supports
Position Argument
responds to
Issue
responds to
objects to
Position Argument
specializes

Sub-issue generalizes

questions

Sub-issue

Sub-issue
102 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
103 THE QOC NOTATION

Criterion
Option

Question Option Criterion

Option
Criterion

… Consequent …
Question
Question
104 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
105 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
106
CHAPTER 7 – DESIGN RULES
107 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
108 TYPES OF DESIGN RULES

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

increasing generality
Guidelines

increasing generality
• standards
• specific design rules
• high authority
• limited application Standards
• guidelines
• lower authority
• more general application increasing authority
increasing authority
109 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
110 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
111 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
112 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
113 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)
114 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
115 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
116 USING DESIGN RULES

increasing generality
Guidelines

increasing
generality
Standards
Design rules
• suggest how to increase usability
increasing authority
increasing authority
• differ in generality and authority
117 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
118 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
119 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
120 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
121 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.
122 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
123 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.
124 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 8 - EVALUATION
TECHNIQUES
125
126 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
127 GOALS OF EVALUATION

• assess extent of system functionality

• assess effect of interface on user

• identify specific problems

 128

EVALUATING DESIGNS
COGNITIVE WALKTHROUGH

HEURISTIC EVALUATION

REVIEW-BASED EVALUATION
129 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
130 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?
131 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.

132 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
 133

EVALUATING THROUGH USER

PARTICIPATION
134 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
135 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
137 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
138 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
139 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.
140 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”

141 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.
142 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
143 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
144 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
145 EXPERIMENTAL STUDIES ON
GROUPS
More difficult than single-user experiments

Problems with:
• subject groups
• choice of task
• data gathering
• analysis
146 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

147 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

148 DATA GATHERING

several video cameras

+ direct logging of application

problems:
• synchronisation
• sheer volume!

one solution:
• record from each perspective
149 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!

150 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
 151

OBSERVATIONAL METHODS
THINK ALOUD
COOPERATIVE EVALUATION
PROTOCOL ANALYSIS
AUTOMATED ANALYSIS
POST-TASK WALKTHROUGHS
152 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
153 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
154 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
155 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
156 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
157

QUERY TECHNIQUES
INTERVIEWS

QUESTIONNAIRES
158 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
159 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
160 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
 161

PHYSIOLOGICAL METHODS
EYE TRACKING

PHYSIOLOGICAL MEASUREMENT
162 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
163 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
164 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
CHAPTER
165 10 - UNIVERSAL DESIGN
 UNIVERSAL DESIGN PRINCIPLES
166
- NCSW

• equitable use
• flexibility in use
• simple and intuitive to use
• perceptible information
• tolerance for error
• low physical effort
• size and space for approach and use
167 MULTI-SENSORY SYSTEMS

• More than one sensory channel in interaction

• e.g. sounds, text, hypertext, animation, video, gestures, vision

• Used in a range of applications:

• particularly good for users with special needs, and virtual reality

• Will cover
• general terminology
• speech
• non-speech sounds
• handwriting

• considering applications as well as principles

168 USABLE SENSES

The 5 senses (sight, sound, touch, taste and smell) are used by us every day
• each is important on its own
• together, they provide a fuller interaction with the natural world

Computers rarely offer such a rich interaction

Can we use all the available senses?

• ideally, yes
• practically – no

We can use • sight • sound • touch (sometimes)

We cannot (yet) use • taste • smell

169 MULTI-MODAL VS. MULTI-
MEDIA
• Multi-modal systems
• use more than one sense (or mode ) of interaction
e.g. visual and aural senses: a text processor may speak the words as well as
echoing them to the screen

• Multi-media systems
• use a number of different media to communicate information
e.g. a computer-based teaching system:may use video, animation, text and still
images: different media all using the visual mode of interaction; may also use
sounds, both speech and non-speech: two more media, now using a different mode
170 SPEECH

Human beings have a great and natural mastery of speech

• makes it difficult to appreciate the complexities

but
• it’s an easy medium for communication
171 STRUCTURE OF SPEECH

phonemes
• 40 of them
• basic atomic units
• sound slightly different depending on the context they are in,
these larger units are …
allophones
• all the sounds in the language
• between 120 and 130 of them
• these are formed into …
morphemes
• smallest unit of language that has meaning.
172 SPEECH (CONT’D)

Other terminology:
• prosody
• alteration in tone and quality
• variations in emphasis, stress, pauses and pitch
• impart more meaning to sentences.

• co-articulation
• the effect of context on the sound
• transforms the phonemes into allophones

• syntax – structure of sentences

• semantics – meaning of sentences
173 SPEECH RECOGNITION
PROBLEMS
• Different people speak differently:
• accent, intonation, stress, idiom, volume, etc.

• The syntax of semantically similar sentences may vary.

• Background noises can interfere.
• People often “ummm.....” and “errr.....”
• Words not enough - semantics needed as well
• requires intelligence to understand a sentence
• context of the utterance often has to be known
• also information about the subject and speaker

e.g. even if “Errr.... I, um, don’t like this” is recognised, it is a fairly useless piece of information
on it’s own
174 THE PHONETIC TYPEWRITER

• Developed for Finnish (a phonetic language, written as it is said)

• Trained on one speaker, will generalise to others.
• A neural network is trained to cluster together similar
sounds, which are then labelled with the corresponding
character.
• When recognising speech, the sounds uttered are allocated
to the closest corresponding output, and the character for
that output is printed.
• requires large dictionary of minor variations to correct general
mechanism
• noticeably poorer performance on speakers it has not been trained on
175 THE PHONETIC TYPEWRITER (CTD)

a a a ah h æ æ ø ø e e e

o a a h r æ l ø y y j i

o o a h r r r g g y j i

o o m a r m n m n j i i

l o u h v vm n n h hj j j

l u v v p d d t r h hi j

. . u v tk k p p p r k s

. . v k pt t p t p h s s
176 SPEECH RECOGNITION: USEFUL?

• Single user or limited vocabulary systems

e.g. computer dictation
• Open use, limited vocabulary systems can work satisfactorily
e.g. some voice activated telephone systems
• general user, wide vocabulary systems …
… still a problem
• Great potential, however
• when users hands are already occupied
e.g. driving, manufacturing
• for users with physical disabilities
• lightweight, mobile devices
177 SPEECH SYNTHESIS

The generation of speech

Useful
• natural and familiar way of receiving information

Problems
• similar to recognition: prosody particularly

Additional problems
• intrusive - needs headphones, or creates noise in the workplace
• transient - harder to review and browse
178 SPEECH SYNTHESIS: USEFUL?

Successful in certain constrained applications

when the user:
• is particularly motivated to overcome problems
• has few alternatives

Examples:
• screen readers
• read the textual display to the user
utilised by visually impaired people

• warning signals
• spoken information sometimes presented to pilots whose visual and haptic skills are
already fully occupied
179 NON-SPEECH SOUNDS

boings, bangs, squeaks, clicks etc.

• commonly used for warnings and alarms

• Evidence to show they are useful

• fewer typing mistakes with key clicks
• video games harder without sound

• Language/culture independent, unlike speech

180 NON-SPEECH SOUNDS: USEFUL?

• Dual mode displays:

• information presented along two different sensory channels
• redundant presentation of information
• resolution of ambiguity in one mode through information in
another
• Sound good for
• transient information
• background status information

e.g. Sound can be used as a redundant mode in the Apple Macintosh;

almost any user action (file selection, window active, disk insert, search
error, copy complete, etc.) can have a different sound associated with it.
181 AUDITORY ICONS

• Use natural sounds to represent different types of object or

action
• Natural sounds have associated semantics which can be mapped
onto similar meanings in the interaction
e.g. throwing something away
~ the sound of smashing glass
• Problem: not all things have associated meanings

• Additional information can also be presented:

• muffled sounds if object is obscured or action is in the
background
• use of stereo allows positional information to be added
182 SONICFINDER FOR THE
MACINTOSH
• items and actions on the desktop have associated sounds
• folders have a papery noise
• moving files – dragging sound
• copying – a problem …
sound of a liquid being poured into a receptacle
rising pitch indicates the progress of the copy

• big files have louder sound than smaller ones

183 EARCONS

• Synthetic sounds used to convey information

• Structured combinations of notes (motives ) represent
actions and objects
• Motives combined to provide rich information
• compound earcons
• multiple motives combined to make one more complicated earcon
184 EARCONS (CTD)

• family earcons
similar types of earcons represent similar classes of action or similar objects:
the family of “errors” would contain syntax and operating system errors

• Earcons easily grouped and refined due to compositional and

hierarchical nature

• Harder to associate with the interface task since there is no natural

mapping
185 TOUCH

• haptic interaction
• cutaneous perception
• tactile sensation; vibrations on the skin
• kinesthetics
• movement and position; force feedback

• information on shape, texture, resistance, temperature, comparative

spatial factors
• example technologies
• electronic braille displays
• force feedback devices e.g. Phantom
• resistance, texture
186 HANDWRITING RECOGNITION

Handwriting is another communication mechanism which we are used to in

day-to-day life

• Technology
• Handwriting consists of complex strokes and spaces
• Captured by digitising tablet
• strokes transformed to sequence of dots
• large tablets available
• suitable for digitising maps and technical drawings
• smaller devices, some incorporating thin screens to display the
information
• PDAs such as Palm Pilot
• tablet PCs
187 HANDWRITING RECOGNITION
(CTD)
• Problems
• personal differences in letter formation
• co-articulation effects

• Breakthroughs:
• stroke not just bitmap
• special ‘alphabet’ – Graffeti on PalmOS

• Current state:
• usable – even without training
• but many prefer keyboards!
188 GESTURE

• applications
• gestural input - e.g. “put that there”
• sign language

• technology
• data glove
• position sensing devices e.g MIT Media Room

• benefits
• natural form of interaction - pointing
• enhance communication between signing and non-signing users

• problems
• user dependent, variable and issues of coarticulation
189 USERS WITH DISABILITIES

• visual impairment
• screen readers, SonicFinder
• hearing impairment
• text communication, gesture, captions
• physical impairment
• speech I/O, eyegaze, gesture, predictive systems (e.g. Reactive keyboard)
• speech impairment
• speech synthesis, text communication
• dyslexia
• speech input, output
• autism
• communication, education
190 … PLUS …

• age groups
• older people e.g. disability aids, memory aids, communication tools to
prevent social isolation
• children e.g. appropriate input/output devices, involvement in design
process

• cultural differences
• influence of nationality, generation, gender, race, sexuality, class,
religion, political persuasion etc. on interpretation of interface features
• e.g. interpretation and acceptability of language, cultural symbols,
gesture and colour