HCL Ch3 Interaction
HCL Ch3 Interaction
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
2
Models of interaction
3
Some terms of interaction
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
6
Execution/evaluation loop(cont.)
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
7
Execution/evaluation loop(cont.)
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
8
Using Norman’s model
– Gulf of Evaluation:
The distance between the physical representation of the system’s state and
the user’s expectations.
•Each has its own unique language(User’s task language and the
System’s core language).
•Interaction translation between languages
– problems in interaction = problems in translation 10
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
• There are four main translations involved in the interaction:
articulation, performance, presentation and observation.
11
Translations between
Ergonomics
12
Ergonomics - examples
immediate
feedback
instruments
19
Interaction styles
• Interaction can be seen as a dialog between the computer
and the user.
• common interface styles including:
– 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
21
Menus
• Question/answer interfaces
– User-led through interaction via a series of questions
– suitable for novice users but restricted functionality
– often used in information systems
24
Form-fills
25
Spreadsheets
Windows
Icons
Menus
Pointers
… or windows, icons, mice, and pull-down menus!
27
Point and click interfaces
• used in ..
– multimedia
– web browsers
– hypertext
• minimal typing
28
Three-dimensional interfaces
• Virtual reality
• ‘ordinary’ window systems
– highlighting flat buttons …
– visual affordance
– indiscriminate use click me!
just confusing!
… or sculptured
• 3D workspaces
– use for extra virtual space
– light and occlusion give depth
– distance effects
29
Elements of the wimp interface
30
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
31
Icons
32
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
33
Menus
34
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!
35
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 !!!
36
Menus design issues
37
Buttons
• Special kinds
– radio buttons
– set of mutually exclusive choices
– check boxes
– set of non-exclusive choices
38
Toolbars
• often customizable:
– choose which toolbars to see
– choose what options are on it
39
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
40
Dialogue boxes
41
Interactivity
• Easy to focus on look, what about feeling?
• Speech–driven interfaces: Rapidly improving but still inaccurate.
e.g. airline reservation: reliable “yes” and “no”
+ system reflects back its understanding.
• 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
• 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
42
Experience, engagement, and fun
• It’s not sufficient that people can use a system, they must
want to use it.
• The more experiential aspects of interaction will be
discussed such as:
• Designing experience
• Physical engagement
• Managing value
43
Understanding Experience
• Home, entertainment, shopping
– not enough that people can use a system
– they must want to use it!
• Psychology of experience
– flow (Csikszentimihalyi)
– balance between anxiety and boredom
• Education
– zone of proximal development
– things you can just do with help
• Wider ...
– literary analysis, film studies, drama
44
Designing experience
• real crackers
– cheap and cheerful!
– bad joke, plastic toy, paper hat
– pull and bang
45
Designing experience
• Virtual crackers
– cheap and cheerful
– bad joke, web toy, cut-out mask
– click and bang
46
How crackers work
fill in web form
closed
cracker page
open
watches recipient clicks
message cracker opens ...
progress
very slowly
open
cracker page
sender joke
links
47
The crackers experience
• many constraints:
– ergonomic – minimum button size
– physical – high-voltage switches are big
– legal and safety – high cooker controls
– context and environment – easy to clean
– aesthetic – must look good
– economic – … and not cost too much!
49
Design trade-offs
between categories
e.g. ergonomics vs. physical – MiniDisc remote
ergonomics – controls need to be bigger
physical – no room!
solution – multifunction controls & reduced functionality
50
Fluidity
51
Inverse actions
• yes/no buttons
– well sort of
• ‘joystick’
52
Spring back controls
• one-shot buttons
• joystick
• some sliders
53
A minidisk controller
controls:
logical relationship
~ spatial grouping
55
Compliant interaction
BUT NOTE
• exceptions (e.g. habit)
• value NOT necessarily personal gain or money
57
Weighing up value
value
• helps me get my work done
• fun
• good for others
cost
• download time
• money £, $, €
• learning effort
58
Value and organizational design
• coercion
• tell people what to do!
• value = keep your job
• enculturation
• explain corporate values
• establish support (e.g share options)
• emergence
• design process so that
individuals value organisational value
59