Human Computer Interaction
The Interaction – Chapter 3
04/19/23 The Interaction 2
Contents Introduction
Models of Interaction
Ergonomics
Interaction Styles
Interactivity
Experience, Engagement & Fun
04/19/23 3
Introduction What is Interaction
Communication
Machine is capable of doing the job Humans need to get the job done from the system
User System
User must communicate his requirements to the system
The Interaction
04/19/23 The Interaction 4
Contents Introduction
Models of Interaction
Ergonomics
Interaction Styles
Interactivity
Experience, Engagement & Fun
04/19/23 5
Models of Interaction Communication: Complex Human – Complex Systems
Models of Interaction
Help Understand what is going on in the Interaction
Identify the likely root of difficulties
Two Models
Norman’s Model (The execution-evaluation cycle)
Abowd and Beale framework
The Interaction
04/19/23 6
Some Terms of Interaction Domain
The area of work under study
Graphic design Graphic shapes, drawing surface, drawing utensils
Tasks
Operations to manipulate the concepts of a domain
e.g. construction of graphic shape with certain attributes
Goal
What you want to achieve
e.g. create a solid red triangle
Concepts of DomainDomain
The Interaction
04/19/23 7
Some Terms of Interaction Task
How you go about doing it – Ultimately in terms of operations or
actions
e.g. … select fill tool, click over triangle
Task Analysis
Identification of problem space for user of an interactive system in
terms of the domain, goals, intentions and task
The Interaction
04/19/23 8
Some Terms of Interaction Task Language
User’s language: Describes attributes of domain
relevant to the User state
Core Language
System’s Language: Describes attributes of domain
relevant to the System state
The Interaction
04/19/23 9
Norman’s Model of Interaction Based on Execution – Evaluation Cycle
Two major stages: Execution & Evaluation
Execution Establishing the goal
Forming the intention
Specifying the action sequence
Executing the action
Evaluation Perceiving the system state
Interpreting the system state
Evaluating the system state with respect to the goals and intentions
The Interaction
04/19/23 10
Execution – Evaluation Cycle
Example – Switching on the Light
Evening falls while reading
system
evaluationexecution
goal
The Interaction
04/19/23 11
Execution – Evaluation Cycle
You decide you need more light. Goal : Get more light
systemevaluationexecution
goal Establishing the goal
Forming the intention
Specifying the action sequence
Executing the action
Perceiving the system state
Interpreting the system state
Evaluating the system state
Intention: Switch on the lamp Specify the Action Sequence to reach over an press the lamp switch
Action executed – Perceive the results: Light is on or not Interpret – e.g. No light: Bulb has blown, Lamp not plugged in -> New Intentions
Light comes out – Evaluate the new state according to your goal If the light is enough – Cycle Completes
If NOT, formulate a new intention of switching on he ceiling light for example
The Interaction
04/19/23 12
Using Norman’s Model Some Systems are harder to use than others
Gulf of Execution – Difference b/w
User’s formulation of actions
Actions allowed by the system
AIM: Reduce this gulf
Gulf of Evaluation – Difference b/w
Presentation of the system state
User Expectation
More effort required to interpret presentation: Less effective
Interaction
The Interaction
04/19/23 13
Human Error – Slips & Mistakes Slip
Understand system and goal
Correct formulation of action
Incorrect action
Mistake
May not even have right goal!
Example
Slip: Mistype, accidental mouse press
Mistake: Magnifying glass icon – Find/Zoom
The Interaction
04/19/23 14
Human Error – Slips & Mistakes Fixing Errors
Slips
Better interface design
E.g. Putting more space b/w buttons
Mistakes
Better understanding of the system
Improved training, radical redesigning
The Interaction
04/19/23 15
Abowd & Beale Framework Interaction framework – Four parts
User
Input
System
Output
Each part has its own unique language
Interaction = Translation b/w languages
Input + Output = Interface
Interface sits b/w User and System
Utask
Score
Ooutput
Iinput
The Interaction
04/19/23 16
Abowd & Beale Framework Interactive Cycle
User begins with formulation of
a Goal/Task
Task articulated within the input
language
Input language is translated to
core language as operations to
be performed
System transforms itself
ArticulationPerformance
System is in a new State
The Interaction
04/19/23 17
Abowd & Beale Framework Interactive Cycle (Contd…)
System attribute values rendered
to Output
User observes the output and
asses the result of interaction
w.r.t the Goal
ArticulationPerformance
Presentation Observation
Problems in interaction = Problems in translation
The Interaction
04/19/23 18
Abowd & Beale Framework Example: Video Recording using a remote control
Ineffective Interaction: User not sure VCR is set to record properly
Articulation: User pressed the keys on the remote in the wrong
order
Performance: VCR may record any channel but remote control
lacks the channel selection
Presentation: VCR display does not indicate the setting of program
Observation: User does not interpret the feedback properly
The Interaction
04/19/23 The Interaction 19
Contents Introduction
Models of Interaction
Ergonomics
Interaction Styles
Interactivity
Experience, Engagement & Fun
04/19/23 20
ErgonomicsPhysical Aspects of Interaction
The Interaction
04/19/23 21
Ergonomics Ergonomics is the science of designing
the job, equipment, and workplace to fit
the worker
Ergonomics involves arranging the
environment to ‘fit’ the person in it
Ergonomic Design/Products
Easy to use and comfortable
Reduce fatigue, strain
Enhance productivity
The Interaction
04/19/23 22
Ergonomics Examples Arrangement of Controls & Displays
Grouped according to: Function,
Sequence, Frequency
Surrounding Environment
Design of work Environment
Where will the system be used?
Who will use it?
For how long will it be used?
Seated users: Comfort, Back support
etc.
The Interaction
04/19/23 23
Ergonomics Examples Health Issues
Lighting, Noise, Temperature, Time Spent etc.
Lighting Ergonomics
The Interaction
04/19/23 24
Ergonomics Examples Use of Colour
An indicator – Not the only Cue
Color use – Coherent with common conventions
Red for Warning etc.
The Interaction
04/19/23 The Interaction 25
Contents Introduction
Models of Interaction
Ergonomics
Interaction Styles
Interactivity
Experience, Engagement & Fun
04/19/23 26
Interaction Styles
The Interaction
04/19/23 27
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
The Interaction
04/19/23 28
Command Line Interface Way of expressing instructions to the computer
directly
Function keys, single characters, short abbreviations,
whole words, or a combination
Powerful – Offers direct access to system functionality
Better for expert users than novices
Command names/abbreviations should be
meaningful!
The Interaction
04/19/23 29
Menus Set of options displayed on the screen
Options visible
Rely on recognition rather than recall
Easier to use
Names should be meaningful
Selection by:
numbers, letters, alphabets, arrow keys, mouse
Menus
Purely Text
May have a Graphical Component
Restricted form of full WIMP system
The Interaction
04/19/23 30
Menus
The Interaction
04/19/23 31
Natural Language Familiar to user
Speech recognition or typed natural language
Problems
Ambiguity at Phrase Level
The boy hit the dog with the stick
Ambiguity of Individual words
Synonyms, Pronouns
General natural language interface – Unlikely
Restricted domain – Known Vocabulary
The Interaction
04/19/23 32
Query Interfaces Question/answer interfaces
User led through interaction via series of questions
Query languages (e.g. SQL)
Used to retrieve information from database
Natural-language-style queries
SELECT Name FROM Students WHERE GPA > 3.0
Requires understanding of database structure and language syntax,
hence requires some expertise
The Interaction
04/19/23 33
Form-Fills Primarily for data entry or data retrieval
Screen like paper form
Easy to Use
Generally allow
Blank Fields
Correction Facilities
The Interaction
04/19/23 34
Spread Sheets 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
MS Excel – Most common spread sheet today
The Interaction
04/19/23 35
WIMP Interface Windows, Icons, Menu, Pointers
Or Windows, Icons, Mice, and Pull-down menus
Default style for majority of interactive computer
systems, especially PCs and desktop machines
Windows, MAC
The Interaction
04/19/23 36
Point and Click Interfaces Commonly Used in ..
Multimedia
Web browsers
Hypertext
Just click something!
Icons, text links or location on map
Minimal typing
Web is a typical point and click interface
Closely related to WIMP
The Interaction
04/19/23 37
Three Dimensional Interfaces Virtual Reality Interfaces
Ordinary WIMP elements: 3D
Appearance
Shading
Sculptured
flat buttons …
… or sculptured
click me!
The Interaction
04/19/23 38
Elements of the WIMP Interface Windows, icons, menus, pointers
Buttons, toolbars, palettes, dialog boxes
The Interaction
04/19/23 39
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
The Interaction
04/19/23 40
Windows
Scroll Bar
Title BarMenu Bar
The Interaction
04/19/23 41
Icons Small picture or image
Represents some object in the
interface
Often a window or action
Icons can take many forms
Highly stylized
Realistic representations
The Interaction
04/19/23 42
Pointers Important component
WIMP style relies on pointing and selecting things
Uses mouse, trackpad, joystick, trackball, cursor keys
or keyboard shortcuts
Wide variety of Pointer Cursors
Cursor Hot-spot
The location to which it points
The Interaction
04/19/23 43
Pointers
The Interaction
04/19/23 44
Menus Choice of operations or services offered on the screen
Required option selected with pointer
The Interaction
04/19/23 45
Menus Menu Bar at top of screen (normally), menu drags down
Pull-down menu -Drags down on mouse click
Fall-down menus - Mouse just moves over bar
The Interaction
04/19/23 46
Menus Pin-up menus – ‘Pinned’ to the screen, hides when asked
Pop-up menus
Contextual menu
Hidden – Pops up on request
The Interaction
04/19/23 47
Menus Pie menus
Arranged in a circle
Easier to select item (larger target area)
Quicker (same distance to any option)
Take up more screen space – Not widely used!
The Interaction
04/19/23 48
Menus Cascading menus
Hierarchical menu structure
Menu selection opens new menu
The Interaction
04/19/23 49
Menus Keyboard accelerators
Key combinations - same effect as
menu item
Two types
Active when menu open – usually first
letter
Active when menu closed – usually
Ctrl + letter
The Interaction
04/19/23 50
Menu Design Issues Which kind of menu to use?
What to include in menus at all?
How to group items?
Order
Frequency and importance
Opposite functionalities
Choice of keyboard accelerators
The Interaction
04/19/23 51
Buttons Individual and isolated regions within a display that can be selected to
invoke an action
Resemble ‘push buttons’
Toggle buttons
Radio buttons
– set of mutually exclusive choices
Check boxes
– set of non-exclusive choices
The Interaction
04/19/23 52
Toolbars Long lines of icons
Fast access to common actions
Often customizable
Choose which toolbars to see
Choose what options are on it
The Interaction
04/19/23 53
Palettes Little windows of actions – Shown/hidden
e.g. available shapes in drawing package
Menu ‘tears off’ to become palette
The Interaction
04/19/23 54
Dialog Boxes Information windows that pop up to inform of an
important event or request information.
E.g. Save file Dialog box
Specify the filename and location
Disappears once the file is saved
The Interaction
04/19/23 55
Interaction Styles - Usability An installation program
The Interaction
04/19/23 56
Interaction Styles - Usability Change of interaction style
Text Based Menu
This program will install COCOS software in directory C:\COCOS. Type:1 - to install COCOS 2 - to change directory 3 - to exit without installation Your choice: __
Is it clear what and how to do?
The Interaction
04/19/23 57
Interaction Styles - Usability Usability is affected by
Directness - Can users perform all operations they need? Can they
perform them in a concise, natural way?
Flexibility - Can users easily perform any reasonable operation at
any time?
Visibility - Can users see the actions they can perform? Is it clear
which operations will be done by each action?
Consistency - Can users predict application's behavior, based on
uniform screen design, similar representation of the similar
operations, etc.?
The Interaction
04/19/23 The Interaction 58
Contents Introduction
Models of Interaction
Ergonomics
Interaction Styles
Interactivity
Experience, Engagement & Fun
04/19/23 59
Interactivity Defining feature of interactive system
Speech driven interfaces
Rapidly improving
Still inaccurate
Speech based: Input is Difficult, Interaction is Easier
Yes/No Response – Reliable
System reflects back its understanding
E.g. Air line reservation
“you want a ticket from New York to Boston?”
The Interaction
04/19/23 60
Interactivity Error and Repair
Can’t always avoid errors …
Make it easy to detect errors
…And then repair them
Sys: Hello, this is the Go Faster booking system. What would you like?
User: I want to fly from New York to London
Sys: You want a ticket from New York to Boston
User: no
Sys: Sorry, please confirm one at a time
Sys: Do you want to fly from New York
User: yes
… … …
The Interaction
04/19/23 The Interaction 61
Contents Introduction
Models of Interaction
Ergonomics
Interaction Styles
Interactivity
Experience, Engagement & Fun
04/19/23 62The Interaction
04/19/23 63
What is important in HCI Usability
Effectiveness
Efficiency
Satisfaction
People are going to work better if they enjoy what they are doing
The Interaction
04/19/23 64
User Experience Example – Shopping
Internet stores
Going to shops, feeling the clothes,
being with friends
Go shopping without spending
Shopping
Not an efficient financial transaction
It’s an experience
The Interaction
04/19/23 65
Psychology of Experience Flow – Total Engagement
Doing something you know how to do?
Edge of your abilities - beyond your limits
Example: Rock Climbing
Education
Zone of proximal development
Things you can do with some support (teacher,
book etc.)
Learning at its best in this zone
The Interaction
04/19/23 66
Designing Experience (Simulation)
Real Christmas crackers
Cheap and cheerful!
Joke, plastic toy, paper hat
Pull and bang
The Interaction
04/19/23 67
Designing Experience (Simulation)
Virtual crackers
Cheap and cheerful!
Joke, web toy, cut-out mask
Click and bang
The Interaction
04/19/23 68
Designing Experience (Simulation)
Virtual crackers
Cheap and cheerful!
Joke, web toy, cut-out mask
Click and bang
The Interaction
04/19/23 69
How crackers work
sender
fill in web form
To: wxvFrom: ..
receive email recipient
closedcracker page
open
messagerecipient clicks
cracker opens ...very slowly
jokelinks
opencracker page
web toymask
sender
watchesprogress
The Interaction
04/19/23 70
The cracker experience Real cracker Virtual cracker
Surface elements
Design Cheap and cheerful Simple page/graphics
Play Plastic toy and joke Web toy and joke
Dressing up Paper hat Mask to cut out
Experienced effects
Shared Offered to another Sent by email message
Co-experience Pulled together Sender can't see content until opened by recipient
Excitement Cultural connotations Recruited expectation
Hiddenness Contents inside First page - no contents
Suspense Pulling cracker Slow ... page change
Surprise Bang (when it works) WAV file (when it works)
The Interaction
04/19/23 71
Physical Design Design constraints
Ergonomic – minimum button size
Physical – high-voltage switches are big
Safety – high cooker controls
Context and environment – easy to clean
Aesthetic – must look good
Economic – … and not cost too much!
Constraints may be self contradicting
Front Vs Back control for a cooking range
The Interaction
04/19/23 72
Managing Value If you want people to use your device/application
Understand their value
People use something
ONLY IFit has perceived value
ANDvalue exceeds cost
The Interaction
04/19/23 73
Managing Value Value
Helps me get my work done
Faster
Enjoyment (may not be calculated)
Cost
Download time
Money £, $, €
Learning effort
The Interaction
04/19/23 74
General Lesson
If you want someone to do something …
Make it easy for them!
Understand their values
The Interaction
04/19/23 75
References Chapter 3 - Human Computer Interaction
by Dix et al.
User Interface Hall of Fame/Shame
The Interaction
Top Related