Week 2

the interaction
In the last lecture

• Interaction Design
 What is Interaction Design
• Interaction Design (IxD) is the design of
interactive products and services in which a
designer’s focus goes beyond the item in
development to include the way users will
interact with it.

• Close scrutiny of users’ needs, limitations

and contexts, etc. empowers designers to
customize output to suit precise demands.

Reference: https://www.interaction-design.org/literature/topics/interaction-design
Interaction Design is a Part of
User Experience Design

Reference: https://www.interaction-design.org/literature/topics/interaction-design
 What is Interaction Design
• Designers’ work in IxD involves five
dimensions:
– words (1D),
– visual representations (2D),
– physical objects/space (3D),
– time (4D), and
– behavior (5D).

Reference: https://www.interaction-design.org/literature/topics/interaction-design
 What is Interaction Design
• Designers’ work in IxD involves five dimensions:
– words (1D),
• Words (1D) encompass text, such as button labels, which
help give users the right amount of information.
– visual representations (2D),
• Visual representations (2D) are graphical elements such as
images, typography and icons that aid in user interaction.
– physical objects/space (3D),
• Physical objects/space (3D) refers to the medium through
which users interact with the product or service—for
instance, a laptop via a mouse, or a mobile phone via
fingers.

Reference: https://www.interaction-design.org/literature/topics/interaction-design
 What is Interaction Design
• Designers’ work in IxD involves five
dimensions:
– time (4D),
• Time (4D) relates to media that changes with time, such
as animations, videos and sounds.
– behavior (5D).
• Behavior (5D) is concerned with how the previous four
dimensions define the interactions a product affords—for
instance, how users can perform actions on a website, or
how users can operate a car. Behavior also refers to how
the product reacts to the users’ inputs and provides
feedback.

Reference: https://www.interaction-design.org/literature/topics/interaction-design
What is Interaction Design

Reference: https://www.interaction-design.org/literature/topics/interaction-design
In Today’s Lecture

• Interaction Framework
What is Interaction?
communication
What is interaction?

communication

user  system

but is that all … ?

– see “language and action” in Later lectures
…
The Interaction

• interaction models
– translations between user and system
• ergonomics
– physical characteristics of interaction
• interaction styles
– the nature of user/system dialog
• context
– social, organizational, motivational
Common interaction styles

• command line interface

• menus
• natural language
• question/answer and query dialogue
• form-fills and spreadsheets
• WIMP
• point and click
• three–dimensional interfaces
models of interaction

terms of interaction
Norman model
interaction framework
Some terms of interaction

domain – the area of work under study

e.g. graphic design
goal – what you want to achieve
e.g. create a solid red triangle
task – how you go about doing it
– ultimately in terms of operations or actions
e.g. … select fill tool, click over triangle

Note …
– traditional interaction …
– use of terms differs a lot especially task/goal !!!
Donald Norman’s Model

• Norman’s model concentrates on user’s

view of the interface
goal
execution evaluation
system
Donald Norman’s model

• Seven stages
– user establishes the goal
– formulates intention
– specifies actions at interface
– executes action
– perceives system state
– interprets system state
– evaluates system state with respect to goal

• Norman’s model concentrates on user’s view

of the interface
execution/evaluation loop
goal
execution evaluation
system

• user establishes the goal

• formulates intention
• specifies actions at interface
• executes action
• perceives system state
• interprets system state
• evaluates system state with respect to goal
execution/evaluation loop
goal
execution evaluation
system

• user establishes the goal

• formulates intention
• specifies actions at interface
• executes action
• perceives system state
• interprets system state
• evaluates system state with respect to goal
execution/evaluation loop
goal
execution evaluation
system

• user establishes the goal

• formulates intention
• specifies actions at interface
• executes action
• perceives system state
• interprets system state
• evaluates system state with respect to goal
execution/evaluation loop
goal
execution evaluation
system

• user establishes the goal

• formulates intention
• specifies actions at interface
• executes action
• perceives system state
• interprets system state
• evaluates system state with respect to goal
Structure of an Action
• Example
– Night time sitting in chair, reading a book.
Need light
Goal (Some thing to be achieved)
Get more Light

translate

Intention (Specific action taken to get the goal)

Push switch button to ON lamp
translate

•Move Body
•Stretch
•Extend finger
Using Norman’s model

Some systems are harder to use than others

Gulf of Execution
user’s formulation of actions
≠ actions allowed by the system

Gulf of Evaluation
user’s expectation of changed system state
≠ actual presentation of this state
Human error - slips and mistakes

slip
understand system and goal
correct formulation of action
incorrect action

mistake
may not even have right goal!

Fixing things?
slip – better interface design
mistake – better understanding of system
Abowd and Beale framework
extension of Norman…
their interaction framework has 4 parts O
– user output
– input
S U
– system core task
– output I
input
each has its own unique language
interaction  translation between languages

problems in interaction = problems in translation

Using Abowd & Beale’s model
user intentions
 translated into actions at the interface
 translated into alterations of system state
 reflected in the output display
 interpreted by the user

general framework for understanding interaction

– not restricted to electronic computer systems
– identifies all major components involved in interaction
– allows comparative assessment of systems
– an abstraction
Abowd and Beale framework

O
Ob
output ser
t ation va t io n
se n
Pre

S U
core task

on
Pe
rfo
rm I ul a ti
an tic
c e input Ar
HCI and Frameworks
 ergonomics

physical aspects of interfaces

industrial interfaces
Ergonomics

• Study of the physical characteristics of

interaction

• Also known as human factors – but this can

also be used to mean much of HCI!

• Ergonomics good at defining standards and

guidelines for constraining the way we design
certain aspects of systems
Ergonomics - examples

• arrangement of controls and displays

e.g. controls grouped according to function or
frequency of use, or sequentially
• surrounding environment
e.g. seating arrangements adaptable to cope with all
sizes of user
• health issues
e.g. physical position, environmental conditions
(temperature, humidity), lighting, noise,
• use of colour
e.g. use of red for warning, green for okay,
awareness of colour-blindness etc.
Industrial interfaces

Office interface vs. industrial interface?

Context matters!
office industrial
type of data textual numeric
rate of change slow fast
environment clean dirty

… the oil soaked mouse!

Glass interfaces ?

• industrial interface:
– traditional … dials and knobs
– now … screens and keypads
• glass interface
+ cheaper, more flexible, Vessel B Temp
multiple representations,
precise values 0 100 200

– not physically located,

loss of context, 113
complex interfaces
• may need both multiple representations
of same information
Indirect manipulation

• office– direct manipulation

– user interacts
with artificial world system

• industrial – indirect manipulation

– user interacts
with real world
through interface
interface plant
• issues ..
immediate
– feedback
feedbac
– delays k
instruments
 interaction styles

dialogue … computer and user

distinct styles of interaction

Common interaction styles

• command line interface

• menus
• natural language
• question/answer and query dialogue
• form-fills and spreadsheets
• WIMP
• point and click
• three–dimensional interfaces
Command line interface

• Way of expressing instructions to the computer

directly
– function keys, single characters, short abbreviations,
whole words, or a combination

• suitable for repetitive tasks

• better for expert users than novices
• offers direct access to system functionality
• command names/abbreviations should be
meaningful!

Typical example: the Unix system

Examples
Menus

• Set of options displayed on the screen

• Options visible
– less recall - easier to use
– rely on recognition so names should be meaningful
• Selection by:
– numbers, letters, arrow keys, mouse
– combination (e.g. mouse plus accelerators)
• Often options hierarchically grouped
– sensible grouping is needed
• Restricted form of full WIMP system
Menu based Example Menu based Example
Natural language

• Familiar to user
• speech recognition or typed natural language
• Problems
– vague
– ambiguous
– hard to do well!
• Solutions
– try to understand a subset
– pick on key words
Example
Query interfaces

• Question/answer interfaces
– user led through interaction via series of questions
– suitable for novice users but restricted functionality
– often used in information systems

• Query languages (e.g. SQL)

– used to retrieve information from database
– requires understanding of database structure and
language syntax, hence requires some expertise
Example
Form-fills

• Primarily for data entry or data retrieval

• Screen like paper form.
• Data put in relevant place
• Requires
– good design
– obvious correction
facilities
Spreadsheets

• first spreadsheet VISICALC, followed by

Lotus 1-2-3
MS Excel most common today
• sophisticated variation of form-filling.
– grid of cells contain a value or a formula
– formula can involve values of other cells
e.g. sum of all cells in this column
– user can enter and alter data spreadsheet
maintains consistency
WIMP Interface

Windows
Icons
Menus
Pointers
… or windows, icons, mice, and pull-down menus!

• default style for majority of interactive

computer systems, especially PCs and desktop
machines
Point and click interfaces

• used in ..
– multimedia
– web browsers
– hypertext

• just click something!

– icons, text links or location on map

• minimal typing
Three dimensional interfaces

• virtual reality
• ‘ordinary’ window systems
– highlighting flat buttons …
– visual affordance
– indiscriminate use click me!
just confusing!
• 3D workspaces … or sculptured
– use for extra virtual space
– light and occlusion give depth
– distance effects
Context

Interaction affected by social and organizational

context

• other people
– desire to impress, competition, fear of failure
• motivation
– fear, allegiance, ambition, self-satisfaction
• inadequate systems
– cause frustration and lack of motivation