1. Human Computer Interaction
The Interaction – Chapter 3

2. Contents Introduction Models of Interaction Ergonomics
Interaction Styles
Interactivity
Experience, Engagement & Fun
4/21/2017
The Interaction 2

3. Introduction Communication What is Interaction
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
4/21/2017
The Interaction 3

4. Contents Introduction Models of Interaction Ergonomics
Interaction Styles
Interactivity
Experience, Engagement & Fun
4/21/2017
The Interaction 4

5. Models of Interaction Communication: Complex Human – Complex Systems
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
4/21/2017
The Interaction 5

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
Domain
Concepts of Domain
4/21/2017
The Interaction 6

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
4/21/2017
The Interaction 7

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
4/21/2017
The Interaction 8

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
4/21/2017
The Interaction 9

10. Execution – Evaluation Cycle
system
evaluation
execution
goal
Example – Switching on the Light
Evening falls while reading
4/21/2017
The Interaction 10

11. Execution – Evaluation Cycle
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
system
evaluation
execution
goal
You decide you need more light. Goal : Get more light
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
4/21/2017
The Interaction 11

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
4/21/2017
The Interaction 12

13. Human Error – Slips & Mistakes
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
4/21/2017
The Interaction 13

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
4/21/2017
The Interaction 14

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 U
task S
core O
output I
input
4/21/2017
The Interaction 15

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
Performance
Articulation
System is in a new State
4/21/2017
The Interaction 16

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
Presentation
Observation
Performance
Articulation
Problems in interaction = Problems in translation
4/21/2017
The Interaction 17

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
4/21/2017
The Interaction 18

19. Contents Introduction Models of Interaction Ergonomics
Interaction Styles
Interactivity
Experience, Engagement & Fun
4/21/2017
The Interaction 19

20. Ergonomics Physical Aspects of Interaction 4/21/2017 The Interaction

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
4/21/2017
The Interaction 21

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.
4/21/2017
The Interaction 22

23. Ergonomics Examples Health Issues
Lighting, Noise, Temperature, Time Spent etc.
Lighting Ergonomics
4/21/2017
The Interaction 23

24. Ergonomics Examples Use of Colour An indicator – Not the only Cue
Color use – Coherent with common conventions
Red for Warning etc.
4/21/2017
The Interaction 24

25. Contents Introduction Models of Interaction Ergonomics
Interaction Styles
Interactivity
Experience, Engagement & Fun
4/21/2017
The Interaction 25

26. Interaction Styles
4/21/2017
The Interaction 26

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
4/21/2017
The Interaction 27

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!
4/21/2017
The Interaction 28

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
4/21/2017
The Interaction 29

30. Menus
4/21/2017
The Interaction 30

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
4/21/2017
The Interaction 31

32. Query Interfaces Question/answer interfaces Query languages (e.g. SQL)
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
4/21/2017
The Interaction 32

33. Form-Fills Primarily for data entry or data retrieval
Screen like paper form
Easy to Use
Generally allow
Blank Fields
Correction Facilities
4/21/2017
The Interaction 33

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
4/21/2017
The Interaction 34

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
4/21/2017
The Interaction 35

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
4/21/2017
The Interaction 36

37. Three Dimensional Interfaces
Virtual Reality Interfaces
Ordinary WIMP elements: 3D Appearance
Shading
Sculptured
flat buttons …
click me!
… or sculptured
4/21/2017
The Interaction 37

38. Elements of the WIMP Interface
Windows, icons, menus, pointers
Buttons, toolbars, palettes, dialog boxes
4/21/2017
The Interaction 38

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
4/21/2017
The Interaction 39

40. Windows
Menu Bar
Title Bar
Scroll Bar
4/21/2017
The Interaction 40

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
4/21/2017
The Interaction 41

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
4/21/2017
The Interaction 42

43. Pointers
4/21/2017
The Interaction 43

44. Menus Choice of operations or services offered on the screen
Required option selected with pointer
4/21/2017
The Interaction 44

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
4/21/2017
The Interaction 45

46. Menus Pin-up menus – ‘Pinned’ to the screen, hides when asked
Pop-up menus
Contextual menu
Hidden – Pops up on request
4/21/2017
The Interaction 46

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!
4/21/2017
The Interaction 47

48. Menus Cascading menus Hierarchical menu structure
Menu selection opens new menu
4/21/2017
The Interaction 48

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
4/21/2017
The Interaction 49

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
4/21/2017
The Interaction 50

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
4/21/2017
The Interaction 51

52. Toolbars Long lines of icons Fast access to common actions
Often customizable
Choose which toolbars to see
Choose what options are on it
4/21/2017
The Interaction 52

53. Palettes Little windows of actions – Shown/hidden
e.g. available shapes in drawing package
Menu ‘tears off’ to become palette
4/21/2017
The Interaction 53

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
4/21/2017
The Interaction 54

55. Interaction Styles - Usability
An installation program
4/21/2017
The Interaction 55

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?
4/21/2017
The Interaction 56

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.?
4/21/2017
The Interaction 57

58. Contents Introduction Models of Interaction Ergonomics
Interaction Styles
Interactivity
Experience, Engagement & Fun
4/21/2017
The Interaction 58

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?”
4/21/2017
The Interaction 59

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
… … …
4/21/2017
The Interaction 60

61. Contents Introduction Models of Interaction Ergonomics
Interaction Styles
Interactivity
Experience, Engagement & Fun
4/21/2017
The Interaction 61

62. 4/21/2017
The Interaction 62

63. What is important in HCI
Usability
Effectiveness
Efficiency
Satisfaction
People are going to work better if they enjoy what they are doing
4/21/2017
The Interaction 63

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
4/21/2017
The Interaction 64

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
4/21/2017
The Interaction 65

66. Designing Experience (Simulation)
Real Christmas crackers
Cheap and cheerful!
Joke, plastic toy, paper hat
Pull and bang
4/21/2017
The Interaction 66

67. Designing Experience (Simulation)
Virtual crackers
Cheap and cheerful!
Joke, web toy, cut-out mask
Click and bang
4/21/2017
The Interaction 67

68. Designing Experience (Simulation)
Virtual crackers
Cheap and cheerful!
Joke, web toy, cut-out mask
Click and bang
4/21/2017
The Interaction 68

69. How crackers work sender recipient sender fill in web form
To: wxv
From: ..
receive
recipient
closed cracker page
open
message
recipient clicks
cracker opens ...
very slowly
sender
watches
progress
joke
links
open cracker page
web toy
mask
4/21/2017
The Interaction 69

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 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)
4/21/2017
The Interaction 70

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
4/21/2017
The Interaction 71

72. Managing Value If you want people to use your device/application
Understand their value
People use something
ONLY IF it has perceived value AND value exceeds cost
4/21/2017
The Interaction 72

73. Managing Value Value Cost Helps me get my work done Faster
Enjoyment (may not be calculated)
Cost
Download time
Money £, $, €
Learning effort
4/21/2017
The Interaction 73

74. General Lesson If you want someone to do something …
Make it easy for them!
Understand their values
4/21/2017
The Interaction 74

75. References Chapter 3 - Human Computer Interaction by Dix et al.
User Interface Hall of Fame/Shame
4/21/2017
The Interaction 75