Chapter 3 - evaluates system state with respect to goal

 The Interaction
1. Interaction models  Using Norman’s model
- translations between user and system - Some systems are harder to use than others
2. Ergonomics
- physical characteristics of interaction Gulf of Execution
3. Interaction styles user’s formulation of actions
- The nature of user/system dialog ≠ actions allowed by the system
4. Context (The gulf of execution is the difference between
- social, organizational, motivational the user’s formulation of the actions to reach the
goal and the actions allowed by the system.)
 What is interaction?
- Interaction involves at least two participants: the Gulf of Evaluation
user and the system user’s expectation of changed system state
- other extremes are highly interactive input devices ≠ actual presentation of this state
and paradigms, such as direct manipulation, and (The gulf of evaluation is the distance between the
the applications of virtual reality physical presentation of the system state and the
expectation of the user.)
 Models of interaction
1. Some terms of interaction 3. Human error - slips and mistakes
Domain  Slip
- The area of work under study - understand system and goal
e.g. graphic design (geometric shapes, a drawing - correct formulation of action
surface, and a drawing utensil) - incorrect action
Task  Mistake
- how you go about doing it - may not even have right goal!
- ultimately in terms of operations or actions
- e.g. … select the fill tool, click over the triangle Fixing things?
Goal slip – better interface design
- What you want to achieve mistake – better understanding of system
- e.g. create a solid red triangle
Intention 4. Abowd and Beale framework
- Is a specific action required - extension of Norman…
to meet the goal - their interaction framework has 4 parts
user
2. Donald Norman’s model input
- Norman’s model concentrates on user’s view of system
the interface. output
Seven stages: - each has its own unique language
- user establishes the goal - interaction  translation between languages
- formulates intention - problems in interaction = problems in translation
- specifies actions at interface
- executes action Using Abowd & Beale’s model
- perceives system state User intentions
- interprets system state  translated into actions at the interface
- evaluates system state with respect to goal  translated into alterations of system state
 reflected in the output display
Execution/evaluation loop  interpreted by the user
- user establishes the goal
- formulates intention General framework for understanding interaction
- specifies actions at interface - not restricted to electronic computer systems
- executes action - identifies all major components involved in
- perceives system state interaction
- interprets system state - allows comparative assessment of systems
- an abstraction
 Ergonomics 3. Menus
- Study of the physical characteristics of interaction - Set of options displayed on the screen
- Also known as human factors – but this can also - Options visible
be used to mean much of HCI! less recall - easier to use
- Ergonomics good at defining standards and rely on recognition so names should be
guidelines for constraining the way we design meaningful
certain aspects of systems - Selection by:
numbers, letters, arrow keys, mouse
1. Industrial interfaces combination (e.g. mouse plus accelerators)
- Office interface vs. industrial interface? - Often options are hierarchically grouped
- Context matters! sensible grouping is needed
- traditional … dials and knobs
- now … screens and keypads 4. Natural language
- Familiar to user
2. Glass interface - speech recognition or typed natural language
- cheaper, more flexible, multiple representations, - Problems:
precise values vague
- not physically located, loss of context, complex ambiguous
interfaces hard to do well!
- Solutions:
3. Indirect manipulation try to understand a subset
Office pick on key words
- direct manipulation user interacts
with artificial world 5. Query interfaces
Industrial - Question/answer interfaces
- indirect manipulation user interacts with real - user led through interaction via series of questions
world through interface - suitable for novice users but restricted
- issues .. functionality
- feedback - often used in information systems
- delays - Query languages (e.g. SQL)
- used to retrieve information from database
Interaction style - requires understanding of database structure and
1. Common interaction styles - language syntax, hence requires some expertise
- command line interface
- menus 6. Form-fills
- natural language - Primarily for data entry or data retrieval
- question/answer and query dialogue - Screen like paper form.
- form-fills and spreadsheets - Data put in relevant place
- WIMP - Requires;
- point and click good design
- three–dimensional interfaces obvious correction
facilities
2. Command line interface
- Way of expressing instructions to the computer 7. Spreadsheets
directly: function keys, single characters, short - first spreadsheet VISICALC, followed by Lotus 1-
abbreviations, whole words, or a combination 2-3 MS Excel most common today
- suitable for repetitive tasks - sophisticated variation of form-filling.
- better for expert users than novices grid of cells contain a value or a formula
- offers direct access to system functionality formula can involve values of other cells
- command names/abbreviations should be e.g. sum of all cells in this column
meaningful! user can enter and alter data spreadsheet maintains
- Typical example: the Unix system consistency
 - icons can be many and various
8. WIMP Interface realistic representations.
Windows
Icons 3. Pointers
Menus - important component
Pointers - WIMP style relies on pointing and selecting things
… or windows, icons, mice, and pull-down - uses mouse, trackpad, joystick, trackball,
menus! - cursor keys or keyboard shortcuts
- default style for majority of interactive computer - wide variety of graphical images
systems, especially PCs and desktop machines
4. Menus
9. Point and click interfaces - Choice of operations or services offered on the
used in .. screen
- Multimedia - Required option selected with pointer
- web browsers - problem – take a lot of screen space
- hypertext - solution – pop-up: menu appears when needed

just click something!  Kinds of Menus

- icons, text links or location on map - Menu Bar at top of screen (normally), menu drags
- minimal typing down
- pull-down menu - mouse hold and drag down
10. Three dimensional interfaces menu
- virtual reality - drop-down menu - mouse click reveals menu
- ‘ordinary’ window systems - fall-down menus - mouse just moves over bar!
highlighting - Contextual menu appears where you are
visual affordance - pop-up menus - actions for selected object
indiscriminate use - pie menus - arranged in a circle
just confusing! easier to select item (larger target area)
- 3D workspaces quicker (same distance to any option)
use for extra virtual space … but not widely used!
light and occlusion give depth
distance effects 5. Menus extras
- Cascading menus
Elements of the wimp interface hierarchical menu structure
1. Windows menu selection opens new menu
- Areas of the screen that behave as if they were and so in ad infinitum
independent - Keyboard accelerators
- can contain text or graphics key combinations - same effect as menu item
- can be moved or resized two kinds
- can overlap and obscure each other, or can be laid active when menu open – usually first letter
out next to one another (tiled) active when menu closed – usually Ctrl + letter
- Scrollbars usually different !!!
allow the user to move the contents of the window
up and down or from side to side 6. Menus design issues
- Title bars - which kind to use
describe the name of the window - what to include in menus at all
- words to use (action or description)
2. Icons - how to group items\
- small picture or image - choice of keyboard accelerators
- represents some object in the interface
- often a window or action 7. Buttons
- windows can be closed down (iconised) - individual and isolated regions within a display
small representation that
many accessible windows - can be selected to invoke an action
- Special kinds radio buttons
- set of mutually exclusive choices 3. Error and repair
- check boxes - can’t always avoid errors …… but we can put
- set of non-exclusive choices them right

8. Toolbars - make it easy to detect errors … then the user can

- long lines of icons …… but what do they do? repair them
fast access to common actions
often customizable: 4. Context
choose which toolbars to see - Interaction affected by social and organizational
choose what options are on it context
- other people
9. Palettes and tear-off menus desire to impress, competition, fear of failure
- Problem - motivation
menu not there when you want it fear, allegiance, ambition, self-satisfaction
- Solution - inadequate systems
palettes – little windows of actions cause frustration and lack of motivation
shown/hidden via menu option
e.g. available shapes in drawing package Experience, engagement and fun
tear-off and pin-up menus 1. Experience
menu ‘tears off’ to become palette - home, entertainment, shopping
not enough that people can use a system
10. Dialogue boxes they must want to use it!
- information windows that pop up to inform of an - psychology of experience
important event or request information. flow
- e.g: when saving a file, a dialogue box is balance between anxiety and boredom
displayed to allow the user to specify the filename - education
and location. Once the file is saved, the box zone of proximal development
disappears. things you can just do with help
- wider ...
Interactivity literary analysis, film studies, drama
1. Speech–driven interfaces
- rapidly improving …… but still inaccurate 2. Designing experience
- how to have robust dialogue? … interaction of - real crackers
course! cheap and cheerful!
- e.g. airline reservation: reliable “yes” and “no” + bad joke, plastic toy, paper hat
system reflects back pull and bang
- virtual crackers
- WIMP systems have the same elements: cheap and cheerful
windows, icons., menus, pointers, buttons, etc. bad joke, web toy, cut-out mask
but different window systems … behave click and bang
differently
- e.g. MacOS vs Windows menus 3. Physical design
- appearance + behaviour = look and feel - many constraints:
ergonomic – minimum button size
2. Initiative physical – high-voltage switches are big
- who has the initiative? legal and safety – high cooker controls
- old question –answer: computer context and environment – easy to clean
- WIMP interface – user aesthetic – must look good
- WIMP exceptions … pre-emptive parts of the economic – … and not cost too much!
interface
- modal dialog boxes 4. Spring back controls
come and won’t go away! - one-shot buttons
good for errors, essential steps joystick
but use with care some sliders
- good – large selection sets
- bad – hidden state

5. A minidisk controller
- series of spring-back controls each cycle through
some options –natural inverse back/forward
- twist for track movement pull and twist for
volume
– spring back
– natural inverse for twist

- physical layout
controls: logical relationship ~ spatial
grouping

6. Compliant interaction
- rotary knobs reveal internal state and can be
controlled by both user and machine
- state evident in mechanical buttons

7. example – HCI book search

- value for people who have the book
- helps you to look up things chapter and page
number
- value for those who don’t … sort of online mini-
encyclopaedia
- full paragraph of context