2. 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
5. Some terms of interaction
domain – the area of work under study
e.g. graphic design
– what you want to achieve
e.g. create a solid red triangle
– how you go about doing it
– ultimately in terms of operations or
actions
e.g. … select fill tool, click over triangle
goal
task
Note …
– traditional interaction …
– use of terms differs a lot especially
task/goal !!!
6. 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
8. execution/evaluation loop
• 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
goal
execution
evaluation
system
10. execution/evaluation loop
• perceives system state
• interprets system state
• evaluates system state with respect to goal
goal
execution
evaluation
system
• user establishes the goal
• formulates intention
• specifies actions at interface
• executes action
11. 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
12. 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
13. Abowd and Beale framework
extension of Norman…
their interaction framework has 4
parts
– user
– input
– system
– output
each has its own unique language
interaction translation between languages
problems in interaction = problems in translation
S
core
U
task
O
output
I
input
14. 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
16. Ergonomic
s
• 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
17. 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.
19. 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
20. 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
• command names/abbreviations should be
meaningful!
Typical example: the Unix system
21. 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
22. 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
23. 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
24. Form-fills
• Primarily for data entry or data retrieval
• Screen like paper form.
• Data put in relevant place
• Requires
– good design
– obvious correction
facilities
25. 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
27. Point and click interfaces
• used in ..
– multimedia
– web browsers
– hypertext
• just click something!
– icons, text links or location on map
• minimal typing
28. elements of the wimp interface
windows, icons, menus, pointers
+++
buttons, toolbars,
palettes, dialog boxes
also see supplementary material
on choosing wimp elements
29. 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
30. Icons
• small picture or image
• represents some object in the interface
– often a window or action
• icons can be many and various
– highly stylized
– realistic representations.
31. 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
32. Menus
• Choice of operations or services offered on the
screen
• Required option selected with pointer
problem – take a lot of screen space
solution – pop-up: menu appears when
needed
File Edit
Typewriter
Screen
Times
Options Font
33. 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!
• Contextual menu appears where you are
– 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!
34. 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 !!!
35. 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
36. 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
37. 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
38. 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.
40. Speech–driven interfaces
• rapidly improving …
… but still inaccurate
• how to have robust dialogue?
… interaction of course!
e.g. airline reservation:
reliable “yes” and “no”
+ system reflects back its understanding
“you want a ticket from New York to Boston?”
41. Look and … feel
• WIMP systems have the same elements:
windows, icons., menus, pointers, buttons, etc.
• but different window systems
… behave differently
e.g. MacOS vs Windows menus
appearance + behaviour = look and
feel
42. Error and repair
can’t always avoid errors …
… but we can put them right
make it easy to detect errors
… then the user can repair them
hello, this is the Go Faster booking
system what would you like?
(user) I want to fly from New York to
London you want a ticket from New York to
Boston (user) no
sorry, please confirm one at a
time do you want to fly from New
York (user) yes
… … …
43. 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
