HCI Merged

Human-Computer
Interaction
Unit-III: HCI Design Process

3 Contents
´ What is Design?
´ Process of Design
Ínteraction Design
´What it is, interventions, goals,
constraints
´ User focus
´ Personas
´ Scenarios
´ Navigation Design
´ Screen design & layout
HCI Unit-III SVS 25/02/21
What is Design?
4 Achieving goals within constraints
´Goals- purpose
- What is the purpose of the design we are
intending to produce?
- Who is it for? Why do they want it?
Ćonstraints
- What materials must we use? What
standards must we adopt?
- How much can it cost?
- How much time do we have to develop it?
- Are there health and safety issues?
´Trade-off- Choosing which goals or constraints can
beHCIrelaxed
Unit-III SVS
so that others can be met. 25/02/21
5 Golden rule of design
Understand your materials
this is obvious in the case of a physical design

6 Golden rule of design conti…
for Human-computer Interaction

únderstand computers
- limitations, capacities, tools,
platforms
únderstand people
- psychological, social aspects
- human error
ánd their interaction …
7 To err is human
áccident reports- aircrash, industrial accident,
hospital mistake.
´ enquiry … blames … ‘human error’
Kerala plane crash: 18 dead after Air Serum fire incident: which killed five
India plane breaks in two at Calicut labourers, Losses pegged at over Rs
1,000 crore
Bad interfaces are slow/error-prone to use. Bad interfaces cost money & cost lives
8 To err is human
Lintel
´but …
ćoncrete lintel breaks because too much weight
´blame ‘lintel error’ ? ….no
ít is design error (architect & engineer)
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!
Human Error- Errors are all those occasions in which a
planned sequence of mental or physical activities fails to
achieve its intended outcome and when these failures cannot
9
be attributed to the intervention of some change agency
Slips and lapses are errors which Mistakes may be defined as deficiencies
result from some failure in the or failures in the judgemental and/or
execution and/or storage stage of an inferential processes involved in the
action sequence, regardless of selection of an objective or in the
whether or not the plan which guided specification of the means to achieve it,
them was adequate to achieve its irrespective of whether or not the action
objective. directed by this decision scheme run
• Mistyping an email address according to plan.
• Mistyping a password • Clicking on a heading that isn't
• Picking the wrong month when clickable
making a reservation • Intentionally double clicking a link or
• Clicking Reset instead of Submit button
button • Typing both first and last name in the
• Mistyping an email address in the first name field
re-enter email address field • Entering today's date instead of the
• Accidentally clicking an adjacent date of birth
link • Replying to all in an email instead of
• Accidentally double
HCI Unit-III SVS clicking a
just one person 25/02/21
button • Entering hyphens in your bank

account number
10 The central message – the user
Ćore of interaction design:

put the user first,
keep the user in the center and
remember the user at the end.

11 The process of design
• HCI professionals complain that they are called in too
late.
• A system has been designed & built, and only when it
proves unusable do they think to ask how to do it
right!
• In other companies usability is seen as equivalent to
testing– checking whether people can use it and
fixing problems, rather than making sure they can
from the beginning.
• In the best companies, usability is designed in from
the start
• Usability is a measure of how well a specific user in a
specific context can use a product/design to
achieve a defined goal effectively, efficiently and
satisfactorily.
12
The process of design
scenarios
what is task analysis
wanted guidelines
principles
interviews analysis precise
ethnography specification
design
what is there
vs. dialogue implement
notations and deploy
what is wanted
evaluation
prototype
heuristics architectures
documentation
help
13
requirements
what is
scenarios • what is there and what is
task analysis
wanted wanted …
analysis
• interviewing people
interviews
ethnography • videotaping them,
• seeing at the documents/
what is there objects/ interface that they
vs.
what is wanted work with
• observing them directly
• Ethnographic study-
Observation derived from
HCI Unit-III SVS
anthropology 25/02/21
14 User Focus
´Know your users (Know thy users)

´Rarely one user of system
Ćollaborative systems- Like email,
Ég, stock control system- warehouse
manager, sales person, client, auditor,
assistant warehouse manager etc.
´Stakeholders

User Focus
´ Who are they? Are they Young or old, experienced computer
15 user or novices
´ Designing generic software- generic users, generic skills, generic

goals eg. MSword, Websites.
´ Specific users- Stock control system
´ Probably not like you!
´ Individuals differ a lot there is a tendency for women to have
better empathetic skills
´ Talk to them
´ structured interview, open-ended discussion
´ participatory design- involving users throughout the design
process, get a deep knowledge of their work context and needs.
´ Watch them- Ethnography or Contextual Inquiry
´ Use your imagination- if you cannot involve actual users you can at
least try to imagine their experiences.
´ User personae: A persona is a rich picture of an imaginary
HCI Unit-III SVS
person
25/02/21
who represents your core user group

Persona – a rich description of
16 Betty the Warehouse Manager
Betty is 37 years old. She has been Warehouse Manager for five
years and has worked for Simpkins Brothers Engineering for 12
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 three 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
scenarios
what is task analysis
wanted analysis
interviews analysis • ordering & understanding,
ethnography • Scenarios and task analysis
what is there
vs.
what is wanted

18 The process of design- analysis-
Scenarios
Stories for design

Use and reuse

19 Example of Scenario
Scenario for purchasing an airline ticket
Priya wants to fly to Guwahati next Thursday, returning on

the last flight on Friday. She wants to know how much this
would cost, and whether it would be cheaper to take a
different flight back. She is not quite sure how Guwahati is
spelt on the computer. When she has found the right
flight, she wants to confirm the purchase with a credit
card.

20 Scenario
´ Stories for design: rich stories of interaction

´ Simplest design representation, but most flexible &
powerful
´ Some scenarios are quite short: ‘the user intends to
press the “save” button, but accidentally pressed the
“delete” button so loses his work’
´ Others are more describing the situation or context.
´ More detailed compared to persona, so make the
event seem real.

21 Scenario
´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?
úse and reuse throughout design

22 … explore the depths
éxplore interaction
´what happens when
éxplore cognition
´what are the users thinking
éxplore architecture
´what is happening inside
23 Scenario
´ Communicate with others
- designers, clients, users
´ Validate other models
- Play it against other models
´ Express dynamics
- Screenshots- appearance
- Scenario- behaviour
´ Time is linear: Scenarios are linear
´ Our lives are linear as we live in time and so
we find it easier to understand simple linear
narratives
´ But no alternatives
Scenario: linearity
24
Scenarios – one linear path through

system
Pros:
´life and time are linear
éasy to understand (stories and narrative are
natural)
ćoncrete (errors less likely)
Cons:
ńo choice, no branches, no special conditions
´miss the unintended
´So:
úse several scenarios
úse several methods
25 Example of Scenario
fare Round trip
Scenario for purchasing an airline ticket

Priya wants to fly to Guwahati next Thursday, returning on
the last flight on Friday. She wants to know how much this
would cost, and whether it would be cheaper to take a
different flight back. She is not quite sure how Guwahati is
spelt on the computer. When she has found the right
flight, she wants to confirm the purchase with a credit
card.
Auto spell Options for

check purchase
26
Design a scenario for any specific

task for the system you are designing
in lab/ practical.
Eg.
1. Set the microvan for making cake.
2. Check the number of units
consumed in month of July in meter.

27
Scenario for a mail order enquiry
It is a busy morning with a long queue of telephone calls.

John, who only started the job this week, takes a call from
Mr Jones. Mr Jones says he still has not received the
goods he ordered 3 months ago. Mr Jones does not know
his account number, but gives his name and address.
John retrieves the account, and checks the status of the
order. It shows that the goods were dispatched 7 days
ago. He informs Mr Jones that they should arrive shortly.
He also notices an error in the post code for the address,
which he corrects.
´ requirements The process of design conti…
- what is there and what is wanted …
28
- interviewing people, videotaping them, seeing at the documents/
objects/ interface that they work with, observing them directly
- Observation derived from anthropology, Ethnographic study
´ analysis
- ordering and understanding, Scenarios and task analysis
´ Design- what to do and how to decide
- Shneiderman’s 8 golden rule, Norman’s 7 principles
- Nielsen’s 10 heuristics
´ iteration and prototyping
- getting it right … and finding what is really needed!
- prototyping
´ implementation and deployment- making it & getting it out there
- Writing code, making h/w, writing documentation and manual
- software architecture
29 `
the systems
info and help management messages

start
add user remove user
navigation design
´ local structure – single screen
´ global structure – whole site
main remove
confirm
screen user
add user
30 Navigation Design
We interact at several levels
´ widget choice
´menus, buttons etc.
´ screen design
´ application navigation design
´ environment
óther apps, O/S

Level of Interaction
PC Application Website Physical Device
widget choice elements and tags Controls- buttons,
<a href=“...”> knobs, dials
screen design page design physical layout
navigation design site structure modes of device
environment the web, browser, the real world

external links
HCI Book, Alan Dix

think about structure
´within a screen
´later ...
´local
´looking from this screen / page out
´global
´structure of site, movement between
screens
´wider still
´relationship with other applications

Navigation Design
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

Navigation Design
37
goal seeking
goal
start
… try to avoid these bits!

38
Navigation Design
four golden rules
´knowing where you are- ‘bread crumbs’

´knowing what you can do
´knowing where you are going
ór what will happen
´knowing where you’ve been
ór what you’ve done- lost in hyperspace
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!
Navigation Design
41
modes
´lock to prevent accidental use …
´remove lock - ‘c’ + ‘yes’ to confirm
´frequent practiced action
íf lock forgotten
ín pocket ‘yes’ gets pressed
´goes to phone book
ín phone book …
‘c’ – delete entry
‘yes’ – confirm
… oops !

Navigation Design
global
between screens
within the application
hierarchical diagrams
the system
add user remove user

hierarchical diagrams ctd.
´parts of application
´screens or groups of screens
´typically functional separation

the systems
HCI Unit-III SVS add user remove user25/02/21

45
Navigation Design
navigating hierarchies
´deep is difficult!
´misuse of Miller’s 7 ± 2
´short term memory, not menu size
óptimal?
´many items on each screen
´but structured within screen
Dix , Alan
ü
Finlay, Janet
Abowd, Gregory
Beale, Russell
screen design and

layout
basic principles
grouping, structure, order
alignment
use of white space
ABCDEFGHIJKLM
NOPQRSTUVWXYZ
47 Bad screen design

Bad screen design
48

Good UI design
49

Good UI design
50

screen design & layout
51
basic principles
Ásk
´ what is the user doing?
´Think
´ what information is required?
´ What comparisons may the user
´ need to make?
´ In what order are things likely to be
needed?
´Design
´ form follows function: let the required
interactions drive the layout

52
available tools
´grouping of items
órder of items
´decoration - fonts,
boxes etc.
álignment 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
grouping and structure conti…
physical controls
´grouping of items
defrost´defrost
settingssettings
type of´type
food of food
time to´time
cook to cook

55
order of groups and items
´think! - what is natural order
´should match screen order!
úse boxes, space etc.
´set up tabbing right!
ínstructions
´beware the cake recipes syndrome!
… mix milk and flour, add the fruit
after beating them

56
order of groups and items conti…
physical controls
´grouping of items
órder of items
1) type of1)heating
type of heating 1
2) temperature
2) temperature
3) time to
3)cook
time to cook
2
4) start 4) start
3
4
57
decoration
úse boxes to group logical items
úse fonts for emphasis, headings
´but not too many!!
ABCDEFGHIJKLM
NOPQRSTUVWXYZ
58
decoration conti…
physical controls
´grouping of items
órder of items
´decoration
different
´ colours for
different colours
different functions
for different functions
´ lines around related

lines around
buttonsrelated
buttons (temp up/down)
59
alignment - text
ýou 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
60
alignment – text conti…
physical controls
´grouping of items
órder of items
´decoration
álignment
centred´ text in text
centered buttons
in buttons
? easy to scan ?
? easy to scan ?
61 screen design & layout
alignment - names
Úsually 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
62
alignment - numbers
532.56
think purpose! 179.3
256.317
which is biggest? 15
73.948
1035
3.142
497.6256
63
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
64
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

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

66
ór greying (vertical too)
sherbert 75
toffee 120
chocolate 35
fruit gums 27
coconut dreams 85

67
ór even (with care!) ‘bad’ alignment
sherbert 75
toffee 120
chocolate 35
fruit gums 27
coconut dreams 85

68
white space - the counter
WHAT YOU SEE

69
white space - the counter
WHAT YOU SEE
THE GAPS BETWEEN

70 screen design & layout
space to separate

71 space to structure

72 space to highlight

73 white space conti…
physical controls
´grouping of items
órder of items
´decoration
álignment
´white space
´ gaps to aid grouping
gaps to aid grouping
74 physical controls
´grouping of items
defrost´defrost
settingssettings
type of´type
food of food
time to´time
cook to cook

´grouping of items
defrost´defrost
settingssettings
type of´type
food of food
time to´time
cook to cook

´grouping of items
órder of items
1) type of1)heating
type of heating 1
2) temperature
2) temperature
3) time to
3)cook
time to cook
2
4) start 4) start
3
4
´grouping of items
órder of items
´decoration
different
´ colours for
different colours
different functions
for different functions
´ lines around related

lines around
buttonsrelated
buttons (temp up/down)
´grouping of items
órder of items
´decoration
álignment
centred´ text in text
centered buttons
in buttons
? easy to scan ?
? easy to scan ?
´grouping of items
órder of items
´decoration
álignment
´white space
´ gaps to aid grouping
gaps to aid grouping
80

user action and control
entering information
knowing what to do
affordances
82 entering information
Name: Alan Dix
Address: Lancaster
´ forms, dialogue boxes
´ presentation + data input
´ similar layout issues- data entry
´ alignment - N.B. different label lengths
ü
Name: Alan Dix
Address: Lancaster
´ logical layout
´ use task analysis
´ groupings
´ natural order for entering information
?
Name: Alan Dix
Address: Lancaster
´ top-bottom, left-right (depending on culture)

´ set tab order for keyboard entry

83 knowing what to do
´what is active what is passive

´where do you click
´where do you type
ćonsistent style helps
é.g. web underlined links
´labels and icons
´standards for common actions
´language – bold = current state or
action
appropriate
appearance
presenting information
aesthetics and utility
colour and 3D
localisation & internationalisation
presenting information
name size
chap10
chap1 12
17
85 chap10
chap5 12
16
chap11
chap1 51
17
´ purpose matters chap12
chap14
chap13
chap20
262
22
83
27
´ sort order (which column, numeric chap14
chap8 22
32
alphabetic) …… …
´ text vs. diagram
´ scatter graph vs. histogram
´ use paper presentation

principles!
´ but add interactivity

´ softens design choices
´ e.g. re-ordering columns
´ ‘dancing histograms’
86 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)

87 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

88 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
89
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
HCI Unit-III SVS
ü û 25/02/21
90

91 wireframes

92

93

94 Reference
´ Alan Dix, Janet Finlay” Human-Computer Interaction”

3rd Edition, Pearson publication, ISBN 0130461091

Unit 3: HCI & Software Engineering
Human-Computer
Interaction
Contents
• Iteration and Prototyping
• Software Engineering- Waterfall Model
• Interactive systems & software life cycle
• Usability Engineering
HCI & SDLC 2

Iteration and Prototyping
• All interaction design includes some form of iteration of ideas
• Start with paper designs (sketches) and storyboards demonstrated to
users
• Mockup of tools such as Shockwave or Visual Basic to create
prototype versions of software
• Evaluated to see whether they are acceptable and where there is
room for improvement
• Formative & Summative evaluation- Involve Expert & Real Users
• Result of Evaluation- List of faults or problems
HCI & SDLC 3

Iteration and Prototyping
• Universally accepted ‘best practice’ approach for interaction design
Figure: Role of Prototyping (Ref. Alan Dix)
HCI & SDLC 4

Software Engineering
• Software life cycle / Software development life cycle (SDLC)
• Issues from HCI affecting the usability of interactive systems are
relevant within all the activities of the software life cycle
• Waterfall Model- well known SDLC model
HCI & SDLC 5

Waterfall Model
• graphical representation is
similar of a waterfall
HCI & SDLC 6

Activities in waterfall model of software life cycle
Waterfall Model
• Requirement specification-
(what the system is supposed
to do)
• 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
HCI & SDLC 7

Waterfall Model
• Architectural Design- (how the
system provides the services
expected from it)
• 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 non-
functional requirements
HCI & SDLC 8

Waterfall Model
• Detailed Design-
• refinement of architectural
components and interrelations to
identify modules to be
implemented separately the
refinement is governed by the
non-functional requirements
HCI & SDLC 9

Waterfall Model
• Coding & Unit Testing-
• The detailed design for a
component of the system should
be in such a form that it is
possible to implement it in some
executable programming
language.
• After coding, the component can
be tested to verify that it
performs correctly, according to
some test criteria that were
determined in earlier activities
HCI & SDLC 10
Waterfall Model
• Integration & Testing-
• Once enough components have
been implemented and
individually tested, they must be
integrated as described in the
architectural design.
• Further testing is done to ensure
correct behavior and acceptable
use of any shared resources.
HCI & SDLC 11

Waterfall Model
• Maintenance-
• After product release, all work on the system is
considered under maintenance, until such
time as a new version of the product demands
a total redesign or the product is phased out
entirely.
• Majority of the lifetime of a product is spent in
the maintenance activity.
• Maintenance involves the correction of errors
in the system which are discovered after
release and the revision of the system services
to satisfy requirements that were not realized
during previous development.
• Therefore, maintenance provides feedback to
all of the other activities in the life cycle, as
shown in Figure Fig: Feedback from maintenance activity to
HCI & SDLC 12
other design activities
Verification and Validation
Verification
designing the product right Real-world
requirements
and constraints
Validation The formality gap
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
HCI & SDLC 13

Interactive systems & software life cycle
• Software engineering life cycles arise in 1960 & 1970 for
development of large software systems
• Only concerned with data-processing applications in
business
• Not highly interactive systems, batch-processing systems
• Usability issues not that much important
• Arrival of Personal Computer- more interactive, easy to use
for all users
HCI & SDLC 14
Interactive systems & software life cycle
• design process is iterative
Requirements
specification • cannot assume a linear sequence of
lots of feedback! activities as in the waterfall model
Architectural
design
Detailed
design
• all of the requirements for an interactive Coding and

system cannot be determined from the start unit testing
• systems must be built and the interaction

with users observed and evaluated in order Integration
and testing
to determine how to make them more

usable Operation and
maintenance
HCI & SDLC 15
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
HCI & SDLC 16
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
HCI & SDLC 17
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?
HCI & SDLC 18
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 HCI & SDLC 19
Reference
• Alan Dix, Janet Finlay, Gregory D. Abowd and Russell Beale, 2005.
“Human-Computer Interaction” (4th Edition) Prentice-Hall, Inc., USA.
HCI & SDLC 20

Unit 3: Design Rules
Human-Computer
Interaction
Design Rules
• Design Rules are rules a designer can follow in order to increase the
usability of the eventual software product
• Classified based on rule’s authority & generality
• By authority, we mean an indication of whether or not the rule must
be followed in design or whether it is only suggested.
• By generality, we mean whether the rule can be applied to many
design situations or whether it is focussed on a more limited
application situation
Design Rules
• Principles are abstract design rules, with high generality and low
authority.
• Standards are specific design rules, high in authority and limited in
application.
• Guidelines tend to be lower in authority and more general in
application.
Golden rules & Heuristics
• Shneiderman’s Eight Golden Rules of Interface Design
• Norman’s Seven Principles for Transforming Difficult Tasks into Simple

Ones
Eight Golden Rules of Interface Design
1. Strive for consistency in action sequences, layout, terminology, command use and so
on.
2. Enable frequent users to use shortcuts, such as abbreviations, special key sequences
and macros, to perform regular, familiar actions more quickly.
3. Offer informative feedback for every user action, at a level appropriate to the
magnitude of the action.
4. Design dialogs to yield closure so that the user knows when they have completed a
task.
5. Offer error prevention and simple error handling so that, ideally, users are
prevented from making mistakes and, if they do, they are offered clear and
informative instructions to enable them to recover.
6. Permit easy reversal of actions in order to relieve anxiety and encourage exploration,
since the user knows that he can always return to the previous state.
7. Support internal locus of control so that the user is in control of the system, which
responds to his actions.
8. Reduce short-term memory load by keeping displays simple, consolidating multiple
page displays and providing time for learning action sequences.
Eight Golden Rules: Strive for consistency
Instagram's design has been consistent from 2009 The look of Mac OS over time.
to 2020, with its Feed Layout style and navbar Mac OS Menu Bar stays consistent.
icons staying consistent
Eight Golden Rules: Enable frequent
users to use shortcuts
Mac allows users to use a variety of keyboard

shortcuts, commonly used examples include
copy and paste (Command-C and Command-V),
and taking screenshots (Command-Shift-3).
For experienced or frequent users, Instagram has this shortcut feature

where you press and hold on profile icon and you can switch between your
accounts without even going to the profile page.
Eight Golden Rules: Offer informative feedback
A great example of visual feedback can be seen

when a file becomes “highlighted” as user clicks on
a file on a Mac desktop.
Poorly designed error messages often show an error-code that

does not mean anything to the user. As a good designer you
should always seek to give human-readable and meaningful
feedback.
Another example is when the user drags a folder across the

desktop, they can see the folder represented as physically
being moved as they hold down their mouse.
Eight Golden Rules: Design dialogs to yield closure
As the user installs software to the Mac OS, an informative screen shows what step the
user is currently at in their installation.
As the user installs the program “Parallels Desktop 9”, it shows that it is currently
“copying files”.
8 Golden Rules: Offer error prevention & error handling
A gentle error message is shown explaining to the user what A bad example by Windows displays an error message that uses
was happening and why it was happening. It even goes further the words “fatal” and “terminated”. Such negative, unfriendly
to reassure the user, telling them that they are in control (see words are sure to scare away most users!
‘Support Internal Locus of Control’ below) by explaining that
this is due to their own security preference choices.
Eight Golden Rules: Permit easy reversal of actions
The user can undo a previous action quickly and easily.

Eight Golden Rules: Support internal locus of
control
Mac’s Activity Monitor allows the user to Quit or Force Quit a program if it crashes.
Eight Golden Rules: Reduce short-term memory load
Great examples of how Apple implements the rules of consistency (1st rule) by displaying the same bottom menu
across different versions of the iOS. This is also a great example of how Apple reduces short-term memory load
(8th rule). As humans are only capable of retaining 5 items in our short term memory at one time, the Apple iPhone
has stuck with allowing only 4 app icons to sit in the main menu area at the bottom of the screen, regardless of
whether it’s the iOS 4 or the iOS 7.
Reference
• Alan Dix, Janet Finlay, Gregory D. Abowd and Russell Beale, 2005.
“Human-Computer Interaction” (4th Edition) Prentice-Hall, Inc., USA.
• Author/Copyright holder: Marc Smith. Copyright terms and license:
CC BY 2.0
• Shneiderman’s Eight Golden Rules Will Help You Design Better
Interfaces by Euphemia Wong
Unit-IV Evaluation & Support
universal design
is the design of products and environments to be
usable by all people, to the greatest extent possible,
without the need for adaptation or specialized
design. The intent of Universal Design is to simplify
life for everyone by making products,
communications, and the built environment more
usable by as many people as possible at little or no
extra cost. Universal Design benefits people of all
ages and abilities.
(Mace et al., 1991)
universal design principles
- 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
equitable use
• Is your design going to be useful to a

wide range of people; including those
with different physical and mental
capacities from your test users?
• Can it be marketed to those people with
different capacities?
flexibility in use
• When your design is put

into use; can it be used in
many different ways?
• Will adapt to the way one
person wants to use it or
has to use it because of
differing abilities?
simple and intuitive to use
• How easy is your design for someone to

pick up and start using immediately
without instruction?
• The easier it is for someone to use
irrespective of their previous skills,
experiences or learning and irrespective
of their ability to concentrate for long
periods of time; the easier it will be for
a wide-range of user to use it.
perceptible information
• Does your design give

the user enough
information to make the
most efficient use of your
product?
• Is this true in all
conditions?
(environmental
conditions or the user’s
abilities)
tolerance for error
• Have you tried to make your design

“foolproof”?
• In that, no matter how it is used, there
are minimal errors and minimal
consequences for those errors?
• This is vital for those with differing
abilities; they may make mistakes
compared to other users but they
should not be unduly inconvenience for
those mistakes either.
low physical effort
• Has your design tried to minimize the

physical effort needed to get the best
use from your product?
• Have you tried to keep motions that
may cause fatigue in the user to a
minimum?
size & space for approach and use
• Finally, have you considered the

environment that the product will be
used in?
• Does your design allow for the right
amounts of space for a user to
approach
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
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
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
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
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.
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
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
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
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
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
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
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
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

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.
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
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

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
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
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
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
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!
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
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
… 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
Unit IV: Evaluation & Support
EVOLUTION TECHNIQUES
Human-Computer Interaction
Contents
2
• Evaluation Technique
• Goals of Evaluation
• Expert Analysis
• Cognitive Walkthrough
• Heuristic Evaluation- Nielsen’s 10 heuristics
• Model-based Evaluation (Unit-5)
• GOMS and KLM
• Evaluating through User Participation
• Styles of Evaluation
• Empirical methods: experimental evaluation
• Observational techniques
• Query techniques
• Evolutional through monitoring physiological responses
Recall : The process of design
3
what is scenarios
wanted task analysis guidelines
analysis principles precise
interviews
ethnography specification
design
what is there dialogue implement
notations and deploy
vs.
what is wanted evaluation prototype
heuristics architectures
documentation
help
Evaluation Techniques 23/04/21
Evaluation Techniques
4
§ Evaluation
§ tests usability and functionality of system
§ occurs in laboratory, field and/or in collaboration with users
§ evaluation techniques: expert analysis and user participation
§ evaluates both design and implementation
§ should be considered at all stages in the design life cycle

Evaluation Techniques
5
Expert Analysis User Participation

1. Cognitive Walkthrough 1. those performed under
laboratory conditions
2. Heuristic Evaluation
2. those conducted in the work
3. Model-based Evaluation
environment or ‘in the field’
4. Using previous studies in eval
3. Empirical methods:
uation experimental evaluation

Goals of Evaluation
6
1) assess extent of system functionality
2) assess effect of interface on user
3) identify specific problems

Evaluating Designs Through Experts
7
Ø Expensive mistakes can be avoided
Ø More costly to rectify error discovered in later design process
Ø Many methods depends upon designers, human factor experts
Cognitive Walkthrough
Heuristic Evaluation
Model-based evaluation
Ø Used at any stage of development process
Ø Cheap, do not require user involvement
Ø Assess, whether or not a system upholds accepted usability
principles
Review-based evaluation
8
¨ Proposed by Polson et al.
¨ Origin, code walkthrough familiar in software engineering
¨ Sequence of actions refers to the steps that an interface will
require a user to perform in order to accomplish some
known task. The evaluators then ‘step through’ that action
sequence to check it for potential usability problems.
¨ Evaluates design on how well it supports user in learning
task (learning through exploration)
¨ Usually performed by expert in cognitive psychology
Cognitive Walkthrough (ctd)
9
¨ Need four things:

1) A specification or prototype of the system
2) A description of the task the user is to perform on the
system.
3) A complete, written list of the actions needed to
complete the task with the proposed system.
4) An indication of who the users are and what kind of
experience and knowledge
¨ Standard evaluation forms

Cognitive Walkthrough (ctd)
10
Following four questions for each step-in action sequence
1) Is the effect of the action the same as the user’s goal at that point?
2) Will users see that the action is available?
3) Once users have found the correct action, will they know it is the one they
need?
4) After the action is taken, will users understand the feedback they get?
Cognitive Example: Programming Video Recorder by Remote control on VCR
Walkthrough Representative Task: Program the video to time-record program starting
at 18.00 and finishing at 19.15 on channel 4 on 24 February 2005
Example
11
(a) (b)
Above pictures is remote control (a)in normal use Action Sequence
Evaluation in terms of User
Techniques Action (UA) and System
23/04/21
(b)after timed record button pressed Display or response (SD)
Cognitive With the action list we proceed with the walkthrough. For each action (1–10) we must
answer the four questions and tell a story about the usability of the system.
Beginning with UA 1:
Walkthrough
12
UA 1: Press the ‘timed record’ button
Question 1: Is the effect of the action the same as the user’s goal at that point?
Example The timed record button initiates timer programming. It is reasonable to assume that a user
familiar with VCRs would be trying to do this as his first goal.
Question 2: Will users see that the action is available?
The ‘timed record’ button is visible on the remote control.
Question 3: Once users have found the correct action, will they know it is the one they need?
It is not clear which button is the ‘timed record’ button. The icon of a clock (fourth button
down on the right) is a possible candidate but this could be interpreted as a button to
change the time. Other possible candidates might be the filled circle (associated with
record). In fact, the icon of the clock is the correct choice but it is quite possible that the user
would fail at this point. This identifies a potential usability problem.
Question 4: After the action is taken, will users understand the feedback they get?
Once the action is taken the display changes to the timed record mode and shows familiar
headings (start, end, channel, date). It is reasonable to assume that the user would recognize
these as indicating successful completion of the first action.
So we find a potential usability problem relating to the icon used on the ‘timed record’
button. The analysis proceeds in this fashion, with a walkthrough form completed for each
action. Evaluation Techniques 23/04/21
Remote control design
13
¨ A heuristic is a guideline or general principle or rule of thumb that can
guide a design decision or be used to critique a decision that has already
been made
¨ Proposed by Nielsen and Molich in 1990.
¨ Usability criteria (heuristics) are identified
¨ Used for evaluating Early Design also be used on prototypes, storyboards & fully
functioning systems
¨ Flexible & Cheap – Discount Usability Technique
¨ Design examined by experts to see if these are violated, 3 or 5 evaluators is
sufficient to identify about 75% of usability problems
¨ Heuristic evaluation `debugs' design

14
¨ Each evaluator assesses system and notes violations of any of

these heuristics
¨ Based on below severity rating scale
¤ 0 = I don’t agree that this is a usability problem at all
¤ 1 = Cosmetic problem only: need not be fixed unless extra time is available on project
¤ 2 = Minor usability problem: fixing this should be given low priority
¤ 3 = Major usability problem: important to fix, so should be given high priority
¤ 4 = Usability catastrophe: imperative to fix this before product can be released (Nielsen)

How to Conduct Heuristic Evaluation?
15
¨ Establish an appropriate list of heuristics

¨ Select your evaluators
¨ Brief your evaluators
¨ First evaluation phase- identify specific elements to evaluate
¨ Second evaluation phase- applying the chosen heuristics to the
elements identified during the first phase
¨ Record problems
¨ Debriefing session
Why You Should Evaluate Against Your Own Heuristics
16
¨ Designers are encouraged to establish their own design-specific heuristics to
evaluate their products, systems, websites, etc. Since Nielsen and Molich de
veloped these heuristics in the 1990s, technology has advanced and they are
less attuned to many of the products available in the market today.
¨ For instance, Nielsen and Molich's heuristics would be too general to evaluat
e the usability of designs intended for online communities or mobile devices
where the working environment is constantly changing.
¨ However, the original heuristics are still largely applicable in spite of the spec
ific capabilities and constraints of modern designs. Therefore, as a designer i
t’s crucial that you learn to incorporate Nielsen and Molich’s heuristics into y
our designs as the first step.
17

Nielsen’s ten heuristics
18
1. Visibility of system status Always keep users informed about what is going on, through
appropriate feedback within reasonable time.
2. Match between system and the real world The system should speak the user’s language,
with words, phrases and concepts familiar to the user
3. User control and freedom Users often choose system functions by mistake and need a
clearly marked ‘emergency exit’ to leave the unwanted state
4. Consistency and standards: words, situations or actions mean the same thing in different
contexts.
5. Error prevention: Whenever possible, design systems so that potential errors are kept to
a minimum. Eliminating or flagging actions that may result in errors are two possible means
of achieving error prevention.
Nielsen’s ten heuristics Conti…
19 6. Recognition rather than recall: Minimize cognitive load by maintaining task-relevant
information within the display while users explore the interface.
7. Flexibility and efficiency: With increased use comes the demand for less interactions
that allow faster navigation. This can be achieved by using abbreviations, function keys,
hidden commands and macro facilities.
8. Aesthetic and minimalist design Dialogs should not contain information that is
irrelevant or rarely needed.
9. Help users recognize, diagnose and recover from errors: Designers should assume
users are unable to understand technical terminology, therefore, error messages should
almost always be expressed in plain language to ensure nothing gets lost in translation.
10. Help and documentation: depending on the type of solution, documentation may be
necessary. When users require help, ensure it is easily located, specific to the task at
hand and worded in a way that will guide them through the necessary steps towards a
solution to the issue they are facing.
Model-based evaluation
20
¨ To represent behavior of an interactive system
¨ design specification and evaluation into the same framework
¨ GOMS (goals, operators, methods and selection) model

¨ predicts user performance with a particular interface and can be used to filter
particular design options.
¨ Keystroke-Level Model- (lower-level modeling techniques) KLM

¨ Provide predictions of the time users will take to perform low-level physical tasks.

Evaluating through User Participation
•21 Styles of Evaluation • Observational techniques
• Laboratory studies • Think aloud & cooperative evaluation
• Field studies • Prototype analysis
• Empirical methods: experimental • Automatic protocol analysis tools
evaluation • Post-task walkthroughs
• Participants • Query techniques
• Variables • Interviews
• Hypothesis • Questionnaires
• Experimental design • Evolutional through monitoring
• Statistical measures physiological responses
• Eye tracking for usability evaluation
• Physiological measurements
Evaluating through user Participation
Styles of Evaluation
23
¨ Evaluation through actual User
¨ Styles of evaluation:
¤ Performed under laboratory conditions
¤ conducted in the work environment

Laboratory studies
24
¨ 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, such as a space station

Field Studies
25
¨ Advantages:
¤ natural environment
¤ context retained (though observation may alter it)
¤ longitudinal studies possible
¨ Disadvantages:
¤ distractions
¤ noise
¨ Appropriate
¤ where context is crucial for longitudinal studies

Empirical methods: Experimental evaluation
27
¨ Most powerful method of evaluating design

¨ controlled evaluation of specific aspects of interactive
behaviour
¨ evaluator chooses hypothesis to be tested
¨ changes in behavioural measure are attributed to different
conditions

Experimental factors
28
¨ Participants
¤ who – Actual User or Representative, Size of Participants
¨ Variables
¤ things to modify and measure
¨ Hypothesis
¤ what you’d like to show
¨ Experimental design
¤ how you are going to do it
¨ Statistical measures

Participants
29
¤ Actual user or representative

¤ Participants set- Sample Size,
n determined by pragmatic conditions
¤ More participants required to discover more usability
problems

Variables
30
¨ Independent variable (IV) (manipulated / changed)
characteristic changed to produce different conditions
e.g. interface style, number of menu items
¨ Dependent variable (DV) (measured)
characteristics measured in the experiment
e.g. time taken, number of errors.
Example: an experiment that wants to test whether search speed improves as the
number of menu items decreases may consider menus with five, seven, and ten items.
Hypothesis
31
¨ prediction of outcome, asumption

¤ Eg: Hypothesis: “People make more errors in static widgets compare to dynamic
widgets during data entry”
¨ framed in terms of IV and DV

¤ Independent variables: Dynamic widgets & Static Widgets
¤ Dependent variables: Error & Time (Performance)

Experimental design
¨32Participants, IV, DV, hypothesis
¨ Experimental Methods
1. within groups design-

¨ each subject performs experiment under each
condition.
¨ transfer of learning possible
¨ less costly & less likely to suffer from user
variation
2. between groups design-
¨ each subject performs under only one condition
¨ no transfer of learning
¨ more users required
¨ variation can bias results
Statistical measures
33 ¨ Depends on type of data & questions we want to answer
¨ Variable- discrete variables or continuous variables
¨ Parametric test- for normal distribution
¨ Otherwise, Non-parametric test

Think Aloud
35
¨ 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 show how system is actually use
¨ Disadvantages
¤ subjective
¤ selective

Cooperative evaluation
36
¨ 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
37
Methods for recording user actions include the following:
¨ 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 analyse
¨ 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 tool – EVA
(Experimental Video Annotator)
38
¨ The evaluator can devise a set of buttons indicating different events.
¨ Include timestamps and snapshots, as well as notes of expected events and
errors
¨ 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

EVA (Experimental Video Annotator)
39

Interviews
41
¨ 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
42
¨ 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)
43
¨ Need careful design
¤ what information is required? Sample Scalar Questionnaire
¤ how are answers to be analyzed?
¨ Styles of question
¤ General: questions about age, sex,
occupation, place of residence,
and so on Sample Multi-choice Questionnaire
¤ open-ended
¤ scalar
¤ multi-choice
¤ ranked
Sample Ranked Questionnaire
Evaluating through User Participation
Eye tracking
45
¨ 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
Eye tracking Device
46

Physiological measurements
47
¨ 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
48
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

References
49
• Alan Dix, Janet Finlay” Human-Computer Interaction” 3rd Edition, Pearson
publication, ISBN 0130461091.
• Shrikant Salve and Ganesh Bhutkar (2011). Heuristic Evaluation of Online
Documentation using Qualitative Indicators, International Journal of
Computer Applications 36(10):1-10, December 2011. Published by
Foundation of Computer Science, New York, USA.
• Shrikant Salve and Pradeep Yammiyavar, (2015). Quantitative Probabilistic
Widgets as a Method to Improve Usability Performance of Data Entry
Tasks, Springer, ISBN 978-981-10-4979-8.

Graded Assignment
50
Conduct the Evaluation using “Empirical methods: experimental
evaluation” for your prototype (HCI lab prototype).
Include below given points
1. Participants
2. Variables
3. Hypothesis
4. Experimental design
5. Statistical measures (t-test)
Submit three page report. (20 marks)
Reference: Shrikant Salve and Pradeep Yammiyavar, (2015). Quantitative Probabilistic

Widgets as a Method to Improve Usability Performance of Data Entry Tasks, Springer,
ISBN 978-981-10-4979-8. Evaluation Techniques 23/04/21
51
Thank You

Unit V: Models
Communication & Collaborative Models
Contents
• Face to Face Communication
• Text-based communication
Unit-V Models- Communication Models 2

Face to Face Communication
• Face-to-face contact is the most primitive form of communication –
primitive, that is, in terms of technology.
• The first thing to note is that face-to-face communication involves not
just speech and hearing, but also the subtle use of body language
and eyegaze
• How they influence our use of computer-mediated communications

Transfer effects and personal space
• Personal space
• People who start to converse at opposite ends of a room, they will
quickly move toward one another until they are a few feet apart.
• Personal space also differs across cultures
• A similar problem can occur in a video conference
• Distortions need to be avoided

Eye Contact & Gaze
• Normal conversation uses eye contact extensively.
• Our eyes tell us whether our colleague is listening or not; they can convey
interest, confusion.
• People who look away when you look at them may appear to be hiding
something.
• The problems of obtaining effective eye contact with standard video
equipment. If the camera is strapped to the top of the monitor (a common
arrangement) both participants will look as if their eyes are slightly
dropped.
• Experiments have shown that remotely working participants experience a
greater sense of social presence if video is used in addition to an audio link.

Gestures and body language
• We use our hands to indicate items of interest.
• A video connection may not be sufficient to allow our colleagues to
read our movements.
• Solution: Use of a group pointer, a mouse-controlled icon which can
be used to point to things on a shared screen an image of the
participants’ hands with the electronic screen.
• Problem to be addressed: The attention is focused on keyboard and
screen, which can reduce the opportunities for eye contact. Large
monitors may block participants’ views of one another’s bodies,
reducing their ability to interpret gestures and body position.
Turn Tacking, Back channels, confirmation
and interruption
• Turn-taking : Ex; A says something, then B says something, then back
to A
• Turn-taking is the process by which the roles of speaker and listener
are exchanged.
• Back channels are often a crucial part of this process.
• Back channels : The nods, grimaces, shrug of the shoulder and small
noises.

Examples of Videos Conferencing
• MSTeams
• Zoom Meeting
• Goto Webinar
• Google Meet
• Skype
….

Text-based communication
Most common media for asynchronous groupware
exceptions: voice mail, answer-phones
Familiar medium, similar to paper letters
but, electronic text may act as speech substitute!
Types of electronic text:
• discrete directed messages, no structure
• linear messages added (in temporal order)
• non-linear hypertext linkages
• spatial two dimensional arrangement
In addition, linkages may exist to other artefacts

Text-based communication
Figure shows a screen shot of the York Conferencer

system showing such a transcript

Problems with text
No facial expression or body language
Þ weak back channels
So, difficult to convey:

affective state – happy, sad, …
illocutionary force – urgent, important, …
Participants compensate:
‘flaming’ and smilies
;-) :-( :-)
loss of sequence
Network delays or coarse granularity Þ overlap
1. Bethan: how many should be in the group?
2. Rowena: maybe this could be one of the 4 strongest reasons
3. Rowena: please clarify what you mean
4. Bethan: I agree
5. Rowena: hang on
6. Rowena: Bethan what did you mean?
Message pairs 1&2 and 3&4 composed simultaneously
– lack of common experience
Rowena: 2 1 3 4 5 6
Bethan: 1 2 4 3 5 6
N.B. breakdown of turn-taking due to poor back channels

Reference
• Alan Dix, Janet Finlay” Human-Computer Interaction” 3rd Edition,
Pearson publication, ISBN 0130461091.

Unit V: Models
Content
• Models
• Descriptive Model
• Predictive model
• GOMS
• KLM- Physical & device model
• Linguistic Models
• Communication & Collaborative Models
05/05/21 Models 2
Models
05/05/21 Models 3
Models
• To represent behavior of an interactive system
• We refer to either human, computer or both
05/05/21 Models 4
Benefits of Models
• Understanding- use to understand the way users behave or likely to
behave during interaction with computer. Eg. website
• Design- integrate a computational user model into the system
development process itself
• The model are used to “predict” the next state of the system so as to
make the users satisfied and increase usability
• Testing- there are checklists and heuristics to be followed to ensure
the product usability
• These are derived from some models of user behavior, as in case of
design guidelines
• Automatic evaluation- algorithmic approach to evaluate systems
without direct intervention of any human evaluator to check for
usability of design
05/05/21 Models 5
Model Taxonomy
• Descriptive Model- describe user behavior in specific usage scenario
• Predictive model- predict user states- mathematical and can compute

state variable (or set of performance measures)
• Predictive model also called as predictive engineering models or
performance model
05/05/21 Models 6
Model Taxonomy
Descriptive Model- describe user behavior in specific usage scenario
1. Buxton’s 3-state model for graphical input device- simple model to
capture behaviour of users of pointing devices
2. Guiard’s model of bimanual skills: which represents our hand
movement behaviour
3. Normal model of interaction: which is a relatively detailed model of
the mental and sensory motor activities that we perform during our
interaction with computers.
05/05/21 Models 7
Model Taxonomy
• Predictive model- predict user states- mathematical and can compute
state variable (or set of performance measures)
• Predictive model also called as predictive engineering models or
performance model
• GOMS
• KLM- Physical & device model
05/05/21 Models 8
Keystroke- Level Model (KLM)
“The Keystroke-Level Model for User Performance Time with Interactive Systems”, by
Smart Card and Thomas Moran, 1980 [2,3]
- Predicting time an expert user take to perform a given task on a given computer system.
- Counting keystrokes
- Other low-level operations like user’s mental preparation and system responses
• Predictive engineering model to be used for design and analysis of interactive systems
• Primary objective- to allow designer predict the time it takes for a user to perform an
interaction task using an interface and interaction method (the task execution time)
05/05/21 Models 9
Keystroke- Level Model (KLM)
• Example- you are playing a video game or you are simply watching a
video and wish to close it.
• With a KLM you can predict the time you are likely to take to do that.
05/05/21 Models 10
KLM- Fundamental
• A KLM of an interactive task is a set of “operators” arranged in
sequence
• Operator represents a low-level cognitive activity with a pre-
determined and fixed execution time
• Assumption- any (interaction) task can be represented as a sequence
of low-level (cognitive) sub tasks or operators
05/05/21 Models 11
Keystroke- Level Model (KLM) conti…
KLM decomposes execution phase into five different physical motor

operators, mental operator and system response operator
K Keystroking, striking keys, including shifts and other modifier keys.

B Pressing a mouse button.
P Pointing, moving the mouse (or similar device) at a target.
H Homing, switching the hand between mouse and keyboard.
D Drawing lines using the mouse.
M Mentally preparing for a physical action.
R System response which may be ignored if the user does not have to wait
for it, as in copy typing.
05/05/21 Models 12
KLM - Operators
05/05/21 Models 13
KLM Analysis- Steps
05/05/21 Models 14
KLM - Operators
Texecute = TK + TB + TP + TH + TD + TM + TR
Times for various operators in

the keystroke-level model
(adapted from Card, Moran and
Newell [56], published and
reprinted by permission of
Lawrence Erlbaum Associates,
Inc.)
05/05/21 Models 15
KLM - Operators
05/05/21 Models 16
Keystroke- Level Model (KLM) conti…
Task: Closing Window
F4-METHOD H[to keyboard] MK[F4 function key]

F4-METHOD = 0.4 + 1.35 + 0.28 = 2.03 seconds
CLOSE-METHOD P[to close icon] MB[LEFT up]

CLOSE-METHOD = 1.1 + 1.35 + 0.1 = 2.55 seconds
05/05/21 Models 17
KLM- Example-1
Step 1: “Text saving task” with file menu option - a representative task
( as it is one of the frequently performed activities)
05/05/21 Models 18
KLM- Example-1
• Step 2- Identify Operators
• Which operators is/are relevant for this task
• We don’t perform any keypress activity- operator K is not needed
• Four operators: P, B, H and M
05/05/21 Models 19
KLM- Example-1 (Operator Sequence)
Task: “Text saving task” with file menu option
05/05/21 Models 20
KLM- Task Execution Time
Step 3: Add up the operator times to get the total task time
05/05/21 Models 21
KLM Example-1
Task: “Text saving task” with file menu option
Operator Sequence & Task Execution Time
05/05/21 Models 22
Problem Statement
• Suppose you are typing a text. Suddenly you noticed a typing error, in the form of
a mistyped letter
05/05/21 Models 23
Problem Statement
• Take the cursor to the place of editing (using either arrow key or
mouse pointer)
• Edit the character (delete and retype)
• Come back to the current place of typing
05/05/21 Models 24
KLM Example-2 (Model)
05/05/21 Models 25
KLM Example-2 (Model)
05/05/21 Models 26
Exercise
1. Drag the file into the trash cane
2. Use the short cut “control + T”
05/05/21 Models 27
GOMS
• CMN GOMS model which stands for “Card Moran Newell GOMS”
• hierarchical cognitive process
05/05/21 Models 28
GOMS Components
ØGoals- what the user want to achieve?
ØOperators- Lowest level of cognitive activity. The basic actions that
the user must perform in order to use the system.
ØMethods- set of operators arranged in sequence to achieve goal/
sub-goal, decomposition of a goal into subgoals / operators
ØSelection Rules- means of choosing between competing methods;
sometimes, there can be more than one methods to achieve a goal,
we need to specify selection rules.
05/05/21 Models 29
GOMS example:1
GOAL: CLOSE-WINDOW
. [select GOAL: USE-MENU-METHOD
. MOVE-MOUSE-TO-FILE-MENU
. PULL-DOWN-FILE-MENU
. CLICK-OVER-CLOSE-OPTION
GOAL: USE-CTRL-W-METHOD
. PRESS-CONTROL-W-KEYS]
For a particular user:
Rule 1: Select USE-MENU-METHOD unless another
rule applies
Rule 2: If the application is GAME,
select CTRL-W-METHOD
05/05/21 Models 30
GOMS Example 2
GOMS model for the interaction task: “save a file using menu option”
05/05/21 Models 31
GOMS Example 3
• GOMS model for the interaction task: “save a file”- either hot-key combination
or menu option can be used
05/05/21 Models 32
GOMS Steps for Model Creation
• Step1- determine the high-level user goals
• Step2- for each goal, determine method ( i.e. operator sequence)

• Optionally, determine selection rules if required
• Method for a goal may invoke sub goals
• Step3- For each sub goal, go to Step2
• Goal- sub goal recursion stops only when the method for a goal contains
only operators
05/05/21 Models 33
Linguistic Models
• Understanding the user's behaviour and cognitive difficulty based on
analysis of language between user and system.
• Backus–Naur Form (BNF)

• Task–Action Grammar (TAG)
05/05/21 Models 34
Backus-Naur Form (BNF)
• Very common notation from computer science
• A purely syntactic view of the dialogue
• Terminals
• lowest level of user behaviour
• e.g. CLICK-MOUSE, MOVE-MOUSE
• Non-terminals
• ordering of terminals
• higher level of abstraction
• e.g. select-menu, position-mouse
05/05/21 Models 35
Example of BNF
• Basic syntax:
• nonterminal ::= expression
• An expression
• contains terminals and non-terminals
• combined in sequence (+) or as alternatives (|)
Polyline
draw line ::= select line + choose points + last point For example, imagine a graphics system that has a
select line ::= pos mouse + CLICK MOUSE line-drawing function. To select function user must
choose points ::= choose one | choose one + choose points select ‘line’ menu option. The line-drawing function
allows user to draw a polyline, that is a sequence of
choose one ::= pos mouse + CLICK MOUSE line arcs between points. The user selects the points
last point ::= pos mouse + DBL CLICK MOUSE by clicking mouse button in drawing area. The user
pos mouse ::= NULL | MOVE MOUSE+ pos mouse double clicks to indicate last point of polyline.
05/05/21 Models 36
Task Action Grammar (TAG)
• Making consistency more explicit
• Encoding user's world knowledge
• Parameterised grammar rules
• Non-terminals are modified to include additional semantic

features
05/05/21 Models 37
Consistency in TAG
• In BNF, three UNIX commands would be described as:
copy ::= cp + filename + filename | cp + filenames + directory
move ::= mv + filename + filename | mv + filenames + directory
link ::= ln + filename + filename | ln + filenames + directory
• No BNF measure could distinguish between this and a less

consistent grammar in which
link::= ln + filename + filename | ln + directory + filenames
05/05/21 Models 38
Consistency in TAG (cont'd)
• consistency of argument order made explicit using a
parameter, or semantic feature for file operations
• Feature Possible values
Op = copy; move; link
• Rules
file-op[Op] ::= command[Op] + filename + filename
| command[Op] + filenames + directory
command[Op = copy] ::= cp
command[Op = move] ::= mv
command[Op = link] ::= ln
05/05/21 Models 39
Assignment on “KLM & GOMS models”
Prepare the KLM and GOMS model for the given task on specified user interface.
The group wise allotment of task on UI is given in table below.
Submit this assignment on Moodle.
Bat Groups as per HCI lab Task UI
ch
Vrushali, Sweta, Madhav, Buy “HP-Laptop” on Flipkart Flipkart
Aishwarya
Ankita, Sneha, Shantanu, Book round trip to Delhi on MakeMyTrip MakeMyTrip
Shaikh
Rishikesh, shubhankar, Chetan, Book hotel in Delhi on trivago trivago
Aditya, saurabh
Pratiksha, Rupesh, Sandesh Submit assignment on moodle Moodle
Dimpal, Vaibhav, Prachi, Onkar Buy apple watch-6 from apple.in Apple.in
Rohit, Aarati, Dipshikha Add picture on Instagram Instagram
Add picture on Instagram Instagram
Join HCI course on Udemy.com Udemy.com
05/05/21
Get ‘5kg Onion’ &Models
‘10kg Ashirwad Atta’ from Bigbasket Bigbasket 40
References
1. Alan Dix, Janet E. Finlay, Gregory D. Abowd, and Russell Beale. 2003.
Human-Computer Interaction (3rd Edition). Prentice-Hall, Inc., USA.
2. Card, S.K., Moran, W,P., and Newell, A. The keystroke-level model of
user performance time with interactive systems. Rep. SSL- 79-1,
Xerox, Palo Alto Res.
3. Kieras, David, “Using the Keystroke-Level Model to Estimate
Excecution Times” (PDF). p. 3. Retrieved 22 June 2015.
05/05/21 Models 41
Thank you
05/05/21 Models 42

HCI Merged

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HCI Merged

Uploaded by

Copyright:

Available Formats

Human-Computer

Unit-III: HCI Design Process

Understand your materials

this is obvious in the case of a physical design

HCI Unit-III SVS 25/02/21

for Human-computer Interaction

button • Entering hyphens in your bank

´Core of interaction design:

HCI Unit-III SVS 25/02/21

´Know your users (Know thy users)

HCI Unit-III SVS 25/02/21

´ Designing generic software- generic users, generic skills, generic

who represents your core user group

HCI Unit-III SVS 25/02/21

HCI Unit-III SVS 25/02/21

Stories for design

HCI Unit-III SVS 25/02/21

Scenario for purchasing an airline ticket

Priya wants to fly to Guwahati next Thursday, returning on

HCI Unit-III SVS 25/02/21

´ Stories for design: rich stories of interaction

HCI Unit-III SVS 25/02/21

´what will users want to do?

´use and reuse throughout design

HCI Unit-III SVS 25/02/21

Scenarios – one linear path through

Scenario for purchasing an airline ticket

Auto spell Options for

Design a scenario for any specific

HCI Unit-III SVS 25/02/21

Scenario for a mail order enquiry

It is a busy morning with a long queue of telephone calls.

info and help management messages

add user remove user

We interact at several levels

HCI Unit-III SVS 25/02/21

screen design page design physical layout

navigation design site structure modes of device

environment the web, browser, the real world

HCI Book, Alan Dix

HCI Unit-III SVS 25/02/21

HCI Unit-III SVS 25/02/21

progress with local knowledge only ...

HCI Unit-III SVS 25/02/21

… but can get to the goal

HCI Unit-III SVS 25/02/21

… try to avoid these bits!

HCI Unit-III SVS 25/02/21

´knowing where you are- ‘bread crumbs’

shows path through web site hierarchy

things other things

the thing from

´where do they go?

HCI Unit-III SVS 25/02/21

info and help management messages

add user remove user

´typically functional separation

info and help management messages

HCI Unit-III SVS add user remove user25/02/21

screen design and

HCI Unit-III SVS 25/02/21

HCI Unit-III SVS 25/02/21

HCI Unit-III SVS 25/02/21

HCI Unit-III SVS 25/02/21