The Interaction

Intended Learning Outcomes

At the end of the lesson, students should be

able to
1. Understand how the user must communicate
his requirements to the computer;
2. Discuss some models of interaction;
3. Survey different styles of interaction that
consider how well they support the
user.
What is interaction?

communication

user  system
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
Intention - is a specific action required to meet the
goal.
Norman’s Model
This led to formulation of Stages of Execution
and Evaluation
 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
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!
 Slip
• People do know what to do, in fact that may have
successfully done this thing before many times, but
they still make an error

accidentally typing a wrong

word when you’re writing
a text, even though you
know how to spell it
WRONLGY

leaving your change in a

chocolate vending machine
Mistakes
• people don’t know what to do because they haven’t
learned or been taught to use something properly

trying to use an old Xbox

game controller like a
motion-sensitive Wiimote
and gesturing with it in the
air when you need to
press the buttons
 ergonomics

physical aspects of interfaces

industrial interfaces

https://www.yo
utube.com/watch?
v=LAKlmdMHpdE
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.
Interfaces

Office interface vs. industrial interface?

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

• office– direct manipulation

– user interacts
with artificial world system

• industrial – indirect manipulation

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

Interaction styles between

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

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
Natural language

• speech recognition or typed natural language

• Problems
– vague
– ambiguous
– hard to do well!
• Solutions
– pick on key words
 Query interfaces

• Question/answer interfaces
– user led through interaction
via series of questions
– 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
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

Lotus 1-2-3
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
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
elements of the wimp interface

windows, icons, menus, pointers

+++
buttons, toolbars,
palettes, dialog boxes
also see supplementary material
on choosing wimp elements
Windows

• Areas of the screen that behave as if they

were independent
– can contain text or graphics
– can be moved or resized
– can overlap and obscure each other, or can be laid
out next to one another (tiled)

• scrollbars
– allow the user to move the contents of the window
up and down or from side to side
• title bars
– describe the name of the window
 Icons

• small picture or image

• represents some object
in the interface
– often a window or action
• windows can be closed
down (iconised)
– small representation of
many accessible windows
• icons can be many and
various
– highly stylized
– realistic representations.
Pointers

• important component
– WIMP style relies on pointing and selecting things
• uses mouse, trackpad, joystick, trackball,
cursor keys or keyboard shortcuts
• wide variety of graphical images
Menus
• Choice of operations or services offered on the screen
• Required option selected with pointer

File Edit Options Font

Typewriter
Screen
Times

problem – take a lot of screen space

solution – pop-up: menu appears when needed
 Kinds of Menus
• Menu Bar at top of screen (normally), menu
drags down
– pull-down menu - mouse hold and drag
down menu
– drop-down menu - mouse click reveals
menu
– fall-down menus - mouse just moves over
bar!

• Context menu appears upon user interaction,

such as a right-click mouse operation
– pop-up menus - actions for selected
object
– pie menus - arranged in a circle
• easier to select item (larger target
area)
• quicker (same distance to any option)
… but not widely used!
 Menus extras
• Cascading menus
– hierarchical menu structure
– menu selection opens new menu
– and so in ad infinitum

• Keyboard accelerators
– key combinations - same effect as
menu item
– two kinds
• active when menu open – usually first
letter
• active when menu closed – usually
Ctrl + letter
usually different !!!
Menus design issues

• which kind to use

• what to include in menus at all
• words to use (action or description)
• how to group items
• choice of keyboard accelerators
Buttons

• individual and isolated regions within a

display that can be selected to invoke
an action

• Special kinds
– radio buttons
– set of mutually exclusive choices
– check boxes
– set of non-exclusive choices
Toolbars

• long lines of icons …

… but what do they do?

• fast access to common

actions

• often customizable:
– choose which toolbars to
see
– choose what options are on
it
 Palettes and tear-off menus
• Problem
menu not there when you want it

• Solution
palettes – little windows of actions
– shown/hidden via
menu option
e.g. available shapes in drawing
package
tear-off and pin-up menus
– menu ‘tears off’ to become
palette
Dialogue boxes

• information windows that pop up to inform of

an important event or request information.

e.g: when saving a file, a dialogue box is

displayed to allow the user to specify the filename
and location. Once the file is saved, the box
disappears.
General lesson …

if you want someone to do something …

• make it easy for them!

• understand their values