301 lect 14
TRANSCRIPT
-
8/6/2019 301 Lect 14
1/12
1
CMPUT 301: Lecture 14
The Interaction
Lecturer: Martin JagersandDepartment of Computing Science
University of Alberta
Notes based on previous courses by
Ken Wong, Eleni Stroulia
Zach Dodds, Martin Jagersand
2
Today:
Models of interaction
Interaction styles
Elements of WIMPS
3
Models of Interaction
Terms:
goal
to be accomplished
domain
area of discourse
tasks
operations to manipulate
domain concepts
intention
specific action required to
meet goal
core language
computational attributes of
the domain relevant to the
system
task language
psychological attributes of
the domain relevant to the
user
4
Normans Model of Interaction
Execution-evaluation cycle:
1. establishing the goal
2. forming the intention
3. specifying the action sequence
4. executing the action
5. perceiving the system state
6. interpreting the system state
7. evaluating the system state with respect to goals
and intentions
-
8/6/2019 301 Lect 14
2/12
2
5
Normans Model of Interaction
Why interfaces cause problems: gulfs of execution
difference between
1. the users 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
6
Interaction Framework
Framework: four components
language for each
component
input and output
components form the
interface
four translations
execution, state
change, then
evaluation
System UserInterface
7
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
8
Interaction Framework
Does the input language reach all system states?
e.g.,
remote control unit with no way to access certain
functions
-
8/6/2019 301 Lect 14
3/12
3
9
Interaction Framework
How to express system state with limited outputdevices?
e.g.,
limited screen space to present the entire system state
10
Interaction Framework
How effectively can the user interpret andevaluate the output?
e.g.,
unmarked analog clock
misleading or no feedback
previewing facilities
advice
11
Frameworks and HCI
12
Ergonomics
Ergonomics:
Human factors engineering
the study of the physical characteristics of the
interaction e.g.,
physical controls
physical environment
qualities of the display
-
8/6/2019 301 Lect 14
4/12
4
13
Ergonomics
Arrangement of controls and displays: efficiently accessible
avoid frustration
well organized
14
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
15
Ergonomics
Health issues:
physical position
temperature
lighting
noise
time (exposure)
16
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
-
8/6/2019 301 Lect 14
5/12
5
17
Command Line
Example:% c a t f oo | t r - s c A -Z a- z \ 0 1 2 |
t r A - Z a - z | s o r t | u n i q - c | s o r t - n | t a i l - 5 0
18
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
19
Menus
Example:P a y m e n t D e t a i l s
P a y m e n t m e t h o d s :
1 . Ca s h
2 . C h e q u e3 . C r e d i t c a r d
4 . I n v o i c e
9 . C a n c e l t r a n s a c t i o n
Ch o o s e o n e : _
20
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
-
8/6/2019 301 Lect 14
6/12
6
21
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
22
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
23
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
24
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
-
8/6/2019 301 Lect 14
7/12
7
25
Spreadsheets
like forms, with a grid of cells containing valuesand formulas
Issues:
another programming paradigm
dependencies among cells
Designed for: what-if analyses
In practice used for: lists
26
Interaction styles
Indirect interface1. User has to visualize in
his/her mind
2. No direct feedback on
state change
3. Dissociation between
users command and
system response
Direct manipulation1. Visually presents task
concepts
2. Immediate reaction
3. Easy learning
4. Encourages exploration
5. Affords high subject
satisfaction
27
WIMP
What is a WIMP interface?
28
WIMP
What:
windows, icons, menus, pointer
user in control
Examples:
Microsoft Windows
Mac OS
X Windows + window manager
NeXTStep
-
8/6/2019 301 Lect 14
8/12
8
29 30
Point and Click
What: virtually all actions take only a single mouse click
Examples:
web browser
multimedia (CD ROM) programs
touchscreen information kiosks
31
3D
What:
using 3D techniques, appearances, or workspaces
Examples:
virtual reality
virtual worlds
shading effects on icons, buttons, etc.
32
-
8/6/2019 301 Lect 14
9/12
9
33
3D
34
6D, n-D
Interact with computer controlled, intelligent (??)machines:
35
WIMP Interface Elements
Windows
overlapping, tiled
scrollbars
titlebars
move, resize, raise, lower,
maximize, minimize,
close, etc.
36
WIMP Interface Elements
Icons
-
8/6/2019 301 Lect 14
10/12
10
37
WIMP Interface Elements
Menus: pulldown, popup, falldown, tearoff, pinup, pie
grouping, hierarchy
keyboard accelerators
consistency
too tall?
38
WIMP Interface Elements
Pointer: click to focus, focus follows pointer
cursor shape indicates mode
tooltips, balloon help
39
WIMP Interface Elements
Other:
buttons
radio buttons
check boxes
sliders
toolbars
tabs
progress indicators
palettes
dialog boxes
40
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
-
8/6/2019 301 Lect 14
11/12
11
41
Screen Design and Layout
Entering information: use clear, logical layout of form fields
requires task analysis
alignment is important
42
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
43
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
44
Screen Design and Layout
Knowing what to do:
affordances
where do I click?
elements should suggest, by their shape and otherattributes, what you can do with them
e.g., a button affords pushing
-
8/6/2019 301 Lect 14
12/12
12
45
Screen Design and Layout
Localization/internationalization: change of language for text
alignment and layout
date formats
time formats
number formats
46
Screen Design and Layout
Date/time formats:
47
Interactivity
Beyond the look of a user interface, there is
also the feel.
48
End
What did I learn today?
What questions do I still have?