CMPUT 301: Lecture 14
The Interaction
Lecturer: Martin Jagersand
Department of Computing Science
University of Alberta
Notes based on previous courses by
Ken Wong, Eleni Stroulia
Zach Dodds, Martin Jagersand
Today:
• Models of interaction
• Interaction styles
• Elements of WIMPS
2
Models of Interaction
• Terms:
– goal
– to be accomplished
– domain
– area of discourse
– tasks
– operations to
manipulate domain
concepts
– core language
– computational attributes
of the domain relevant
to the system
– task language
– psychological attributes
of the domain relevant
to the user
– intention
– specific action required
to meet goal
3
Norman’s Model of Interaction
•
Execution-evaluation cycle:
1.
2.
3.
4.
5.
6.
7.
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 with respect to
goals and intentions
4
Norman’s Model of Interaction
•
Why interfaces cause problems:
–
gulfs of execution
difference between
1. the user’s formulation of the actions needed to
reach the goal and
2. actions allowed by the system
–
gulfs of evaluation
distance between
1. the presentation of the system state and
2. the expectation of the user
5
Interaction Framework
• Framework:
– four components
– language for each
component
– input and output
components form
the interface
– four translations
– execution, state
change, then
evaluation
System
Interface
User
6
Interaction Framework
• Does the (users) task language map easily to
the input language?
– e.g.,
– turning on only a certain section of room lights
– running a program whose icon is not visible
7
Interaction Framework
• Does the input language reach all system
states?
– e.g.,
– remote control unit with no way to access certain
functions
8
Interaction Framework
• How to express system state with limited
output devices?
– e.g.,
– limited screen space to present the entire system
state
9
Interaction Framework
• How effectively can the user interpret and
evaluate the output?
– e.g.,
– unmarked analog clock
– misleading or no feedback
– previewing facilities
– advice
10
Frameworks and HCI
11
Ergonomics
• Ergonomics:
– Human factors engineering
– the study of the physical characteristics of the
interaction
– e.g.,
– physical controls
– physical environment
– qualities of the display
12
Ergonomics
• Arrangement of controls and displays:
– efficiently accessible
– avoid frustration
– well organized
13
Ergonomics
• Organizing controls and displays:
– functional
– group by function
– sequential
– arrange to reflect order of use in a task
– frequency
– most commonly used controls are most accessible
14
Ergonomics
• Health issues:
–
–
–
–
–
physical position
temperature
lighting
noise
time (exposure)
15
Interaction Styles
• Common interfaces:
–
–
–
–
–
–
–
–
–
command line
menus
natural language
question/answer and query dialog
forms and spreadsheets
Direct/Indirect manipulation
WIMP
point and click
3D
16
Command Line
• Example:
% cat foo | tr -sc A-Za-z ‘\012’ |
tr A-Z a-z | sort | uniq -c | sort -n | tail -50
17
Command Line
•
Advantages
–
–
–
•
flexible and powerful
useful for repetitive tasks
Easy to define macros
Disdvantages
–
–
–
more difficult to use and learn
need to recall commands (no cues)
commands may vary across systems
18
Menus
• Example:
Payment Details
Payment methods:
1. Cash
2. Cheque
3. Credit card
4. Invoice
9. Cancel transaction
Choose one: _
19
Menus
• Advantages
– recognize options instead of recalling
– Structures learning (logical grouping and
meaningful naming)
• Disadvantages
– Dangers of too many menus
– Can consume lots screen space
– Consider country selection
20
Natural Language
• What:
– user expresses instructions in everyday
language
• Issues:
– ambiguity
– “The man hit the boy with the stick”
– restricted domains or vocabulary
– e.g.,
– Train ticket buying
21
Question/Answer
• What:
– user replies to a series of questions with yes/no
or multiple choice answers
• Issues:
– easy to learn and use
– limited in flexibility and power
– e.g.,
– wizards and assistants
– Turbotax
22
Query Dialog
• What:
– user constructs expressions to retrieve information
from a database
• Issues:
–
–
–
–
query language syntax
requires experience
does result match what was intended?
e.g.,
– search engines
23
Forms
• User is presented with a display resembling
a paper form and enters data into fields
Advantages:
– Simplifies data entry
– Requires modest training
Issues:
– movement around the form
– input validation and correction
24
Spreadsheets
• like forms, with a grid of cells containing
values and formulas
Issues:
–
–
–
–
another programming paradigm
dependencies among cells
Designed for: what-if analyses
In practice used for: lists
25
Interaction styles
• Indirect interface
1. User has to visualize
in his/her mind
2. No direct feedback
on state change
3. Dissociation between
users command and
system response
• Direct manipulation
1. Visually presents
task concepts
2. Immediate reaction
3. Easy learning
4. Encourages
exploration
5. Affords high subject
satisfaction
26
WIMP
• What is a WIMP interface?
27
WIMP
• What:
– windows, icons, menus, pointer
– user in control
• Examples:
–
–
–
–
Microsoft Windows
Mac OS
X Windows + window manager
NeXTStep
28
29
Point and Click
• What:
– virtually all actions take only a single mouse
click
• Examples:
– web browser
– multimedia (CD ROM) programs
– touchscreen information kiosks
30
3D
• What:
– using 3D techniques, appearances, or
workspaces
• Examples:
– virtual reality
– virtual worlds
– shading effects on icons, buttons, etc.
31
32
3D
33
6D, n-D
• Interact with computer controlled,
intelligent (??) machines:
34
WIMP Interface Elements
• Windows
–
–
–
–
overlapping, tiled
scrollbars
titlebars
move, resize, raise,
lower, maximize,
minimize, close, etc.
35
WIMP Interface Elements
• Icons
36
WIMP Interface Elements
• Menus:
–
–
–
–
–
pulldown, popup, falldown, tearoff, pinup, pie
grouping, hierarchy
keyboard accelerators
consistency
too tall?
37
WIMP Interface Elements
• Pointer:
– click to focus, focus follows pointer
– cursor shape indicates mode
– tooltips, balloon help
38
WIMP Interface Elements
• Other:
–
–
–
–
–
–
–
–
–
buttons
radio buttons
check boxes
sliders
toolbars
tabs
progress indicators
palettes
dialog boxes
39
Screen Design and Layout
• Presenting information:
– match presentation to purpose
– e.g.,
– sort file listing by name, or by date, or …
– alignment of text versus numbers
40
Screen Design and Layout
• Entering information:
– use clear, logical layout of form fields
– requires task analysis
– alignment is important
41
Screen Design and Layout
• Aesthetics and utility:
– beauty versus utility
– a pretty interface is not necessarily a good
interface
– still, good graphic design can increase user
satisfaction
42
Screen Design and Layout
• Knowing what to do:
– style guides
– platform or company standards for the design of user
interfaces
– e.g., Macintosh Human Interface Guidelines
43
Screen Design and Layout
• Knowing what to do:
– affordances
– “where do I click?”
– elements should suggest, by their shape and other
attributes, what you can do with them
– e.g., a button affords pushing
44
Screen Design and Layout
• Localization/internationalization:
–
–
–
–
–
change of language for text
alignment and layout
date formats
time formats
number formats
45
Screen Design and Layout
• Date/time formats:
46
Interactivity
• Beyond the “look” of a user interface, there
is also the “feel”.
47
End
• What did I learn today?
• What questions do I still have?
48