Lecture 21
●
Questions about the group project?
●
Schedule reminders:
–
Tuesday, December 2, is a project work day.
Groups must meet during class time.
–
Group presentations will be Thursday, December 4.
We also will do IDEA forms at the end of class.
–
Tuesday, December 9 will be a course wrap-up
November 25, 2014
CS 350 - Computer/Human Interaction
1
Outline
●
Chapter 21 – Interaction Cycle
●
Chapter 22 – UX Design Guidelines
–
Planning
–
Translation
November 25, 2014
CS 350 - Computer/Human Interaction
2
The Interaction Cycle
●
●
●
Adaptation of Norman’s “stages-of-action”
model
Characterizes sequences of user actions
typically occurring in interaction
Between human user and almost any kind of
machine
November 25, 2014
CS 350 - Computer/Human Interaction
3
Norman’s stages-of-action model
November 25, 2014
CS 350 - Computer/Human Interaction
4
The gulf of execution
●
●
Language gap from user to system
–
Desired effect (user goals and intentions) known in
work domain
–
What to do in system to make it happen?
Need translation to convert
–
From intentions in work domain
–
To actions on objects in system domain
November 25, 2014
CS 350 - Computer/Human Interaction
5
The gulf of evaluation
●
●
Language gap from system back to user
–
Observe system feedback about what happened in
the system
–
What does that mean in terms of meeting user
goals?
Need translation to convert
–
From state changes in system
–
To assessing outcome in work domain
November 25, 2014
CS 350 - Computer/Human Interaction
6
The Interaction Cycle:
adaptation of Norman’s model
November 25, 2014
CS 350 - Computer/Human Interaction
7
Scope and universality
●
Graphical user interfaces (GUIs)
●
Web pages
●
Hand-held or mobile devices
●
ATMs, elevator buttons, highway signage
●
Almost any kind of device or system
November 25, 2014
CS 350 - Computer/Human Interaction
8
Planning
●
●
●
Help users understand what system features
exist and how they can be used in their work
context
Make clear all possibilities for what users can
do at every point
Help users plan most efficient ways to complete
their tasks
November 25, 2014
CS 350 - Computer/Human Interaction
9
Planning
●
Design helping user know what to do
–
User model and high-level understanding of system
–
User goal decomposition
–
Task/step structuring and sequencing, workflow
–
Supporting learning at planning level
November 25, 2014
CS 350 - Computer/Human Interaction
10
Planning
●
Example: Tabs at top digital library Website
pages not well organized by task
November 25, 2014
CS 350 - Computer/Human Interaction
11
Planning
●
●
Keep users aware of task progress, what has
been done and what is left to do
Provide cognitive affordances to remind users
to complete transaction
November 25, 2014
CS 350 - Computer/Human Interaction
12
Translation
●
●
●
Provide effective cognitive affordances that
help users get access to system functionality
Help users know/learn what actions are needed
to carry out intentions
Help users predict outcome of actions
November 25, 2014
CS 350 - Computer/Human Interaction
13
Translation
●
Design helping user know how to do something
–
Existence of cognitive affordance
–
Presentation of cognitive affordance (issues about
noticeability, legibility)
–
Content, meaning of cognitive affordance (issues
about clarity, precision)
–
Task structures for flexibility and efficiency
November 25, 2014
CS 350 - Computer/Human Interaction
14
Existence of cognitive affordance
●
Help users determine how to get started
November 25, 2014
CS 350 - Computer/Human Interaction
15
Presentation of
cognitive affordance
●
About how cognitive affordances appear to
users
–
Not about how they convey meaning
November 25, 2014
CS 350 - Computer/Human Interaction
16
Make cognitive affordances visible
●
Example: Looking for deodorant in a store
November 25, 2014
CS 350 - Computer/Human Interaction
17
Make cognitive affordances visible
●
Example: Can't see sign until get around display
November 25, 2014
CS 350 - Computer/Human Interaction
18
Presentation of cognitive
affordance
●
●
●
Make cognitive affordances noticeable
–
Status message lines often do not work
–
Pop-up message next to cursor will be far more
noticeable
Make text legible, readable
Mainly about font size, color, contrast with
background
November 25, 2014
CS 350 - Computer/Human Interaction
19
Presentation of cognitive
affordance
●
Give similar cognitive affordances consistent
appearance in presentation
–
Example: Archive button jumps around
November 25, 2014
CS 350 - Computer/Human Interaction
20
Presentation of cognitive
affordance
November 25, 2014
CS 350 - Computer/Human Interaction
21
Content and meaning of
cognitive affordance
●
●
Use precise wording for clarity in labels, menu
titles, menu choices, icons, data fields
Example: adapt label to system state (“Marked
for Deletion”)
–
Label is declarative whether box is checked or not
–
Better if label changes when checkbox state
changes
November 25, 2014
CS 350 - Computer/Human Interaction
22
Content and meaning of
cognitive affordance
November 25, 2014
CS 350 - Computer/Human Interaction
23
Content and meaning of
cognitive affordance
●
Provide cognitive
affordances to
indicate
formatting within
data fields
–
What is the
format for the
effective date?
November 25, 2014
CS 350 - Computer/Human Interaction
24
Content and meaning of
cognitive affordance
●
●
Make choices distinguishable
Example: Tragic airplane crash—unfortunate
but true story
–
October 31, 1999
–
EgyptAir Flight 990 airliner crash traced directly to
poor usability in cockpit controls design
November 25, 2014
CS 350 - Computer/Human Interaction
25
Make choices distinguishable
●
Two sets of switches
–
–
–
●
Similar in appearance
Similar labels: Cut out and Cut off
Located relatively close to each other
Both switches are used infrequently, only under
(different) unusual flight conditions
–
–
Even highly-trained expert pilots would not be
experienced with these switches
Therefore, higher importance of cognitive
affordances in the labels
November 25, 2014
CS 350 - Computer/Human Interaction
26
Make choices distinguishable
●
Theory of crash (from blackbox data)
–
Hit a downdraft
–
Attempted to pull plane out of unexpected dive
–
Intended to set “Cut out” switches to stabilizer trim
–
But accidentally set “Cut off” switches, shutting off
fuel to both engines
November 25, 2014
CS 350 - Computer/Human Interaction
27
Design issues
●
●
Distinguishability of labeling, especially under
conditions of stress and infrequent use
Solution: add distinguishability by making labels
more complete (add all-important noun)
–
“Cut out trim” versus “Cut off fuel”
–
Putting noun first even better: “Fuel off” and “Trim
out”
November 25, 2014
CS 350 - Computer/Human Interaction
28
Design issues
●
Physical proximity of the two controls
–
●
Inviting physical slip of grabbing wrong one despite
knowing difference
Stabilizer trim and fuel functions completely
unrelated
–
Solution: Separate and regroup with related
functions
–
Further: Protect “Fuel off” switch; require additional
physical action to access
November 25, 2014
CS 350 - Computer/Human Interaction
29
Content and meaning of
cognitive affordance
●
Consistency of cognitive affordance wording to
convey meaning
–
Use consistent wording in labels for menus,
buttons, icons, fields
–
Use similar names for similar kinds of things
November 25, 2014
CS 350 - Computer/Human Interaction
30
Do not use multiple synonyms
for same thing
November 25, 2014
CS 350 - Computer/Human Interaction
31
Use same term for same things
November 25, 2014
CS 350 - Computer/Human Interaction
32
Use consistent way for user to
express similar kinds of choices
●
Example: “Circle all selections,” but size choice
is by check boxes
November 25, 2014
CS 350 - Computer/Human Interaction
33
Control complexity with layout and
grouping by function
●
Group
together
objects and
design
elements
associated
with related
tasks and
functions
–
What does
OK do?
November 25, 2014
CS 350 - Computer/Human Interaction
34
Control complexity with layout and
grouping by function
●
November 25, 2014
CS 350 - Computer/Human Interaction
Do not
group
together
objects
and design
elements
associated
with
different
tasks or
objects
35
Content and meaning of
cognitive affordance
●
●
Be complete in your design of cognitive
affordances
Include enough information for users to
determine correct action
●
Use enough words for unambiguous labels
●
Long labels are not necessarily bad
●
Adding words can add precision
November 25, 2014
CS 350 - Computer/Human Interaction
36
Content and meaning of
cognitive affordance
●
Example: what does “revert” mean and what
are consequences of “reverting?”
November 25, 2014
CS 350 - Computer/Human Interaction
37
Content and meaning of
cognitive affordance
●
Example: urgent but unclear question
–
But what are the consequences?
November 25, 2014
CS 350 - Computer/Human Interaction
38
Usage centeredness in
cognitive affordances
●
●
Employ usage-centered wording, language of
user and work context
Example: toaster “system” (at Harlaxton?)
–
Users put bread on input side of a conveyor belt
going in
–
Inside, overhead heating coils
–
Bread comes out other end as toast
November 25, 2014
CS 350 - Computer/Human Interaction
39
Usage centeredness in
cognitive affordances
●
Some toaster systems
–
Single control, a knob labeled “Speed”
–
Additional labels
●
●
●
“Faster” (clockwise rotation of knob)
“Slower” (counterclockwise rotation)
Translation across gulf of execution
–
Slower moving belt makes darker toast because
bread is under heating coils longer
–
Faster movement means lighter toast
November 25, 2014
CS 350 - Computer/Human Interaction
40
Usage centeredness in
cognitive affordances
●
Often observed confusion and amusement
–
Concept of speed doesn't match mental model of
toast making
●
●
●
“Why do we have a knob to control toaster speed?”
“Why would anyone wait to make toast slowly when they
could get it faster?”
Easy solution
–
Use labels in user’s work domain rather than in
system domain
–
“Lighter” and “darker”
November 25, 2014
CS 350 - Computer/Human Interaction
41
Anticipate and avoid user errors with
cognitive affordances in design
●
Shampoo and conditioner
November 25, 2014
CS 350 - Computer/Human Interaction
42
Anticipate and avoid user errors with
cognitive affordances in design
●
User-created affordances
November 25, 2014
CS 350 - Computer/Human Interaction
43
Anticipate and avoid user errors with
cognitive affordances in design
●
Another design approach
November 25, 2014
CS 350 - Computer/Human Interaction
44
Anticipate and avoid user errors with
cognitive affordances in design
●
●
●
●
Help users avoid inappropriate and erroneous
choices
Disable buttons, menu choices to make
inappropriate choices unavailable
Gray out to make inappropriate choices appear
unavailable
But help users understand why a choice is
unavailable
November 25, 2014
CS 350 - Computer/Human Interaction
45
Cognitive affordances for
error recovery
●
●
Provide a clear way to undo and reverse
actions
Offer constructive help for error recovery
November 25, 2014
CS 350 - Computer/Human Interaction
46
Design task structure for
flexibility and efficiency
●
Provide alternative ways to perform tasks
●
Provide shortcuts
●
●
Provide keyboard alternatives to avoid physical
“switching” actions
But don’t overload the possibilities
–
Avoid grouping of objects and functions that need to
be dealt with separately
November 25, 2014
CS 350 - Computer/Human Interaction
47
Design task structure for
flexibility and efficiency
●
Task thread continuity
–
–
●
Anticipate most likely next action, step, or task path
If you tell them what they should do, help them get
there
Example: dialogue box message
–
–
–
Tells user that page margins are too wide for printed
page
Suggests resetting page margins so document can
be printed
Therefore, follow up with button to go directly to
page setup screen
November 25, 2014
CS 350 - Computer/Human Interaction
48
Design task structure for
flexibility and efficiency
●
Efficiency
–
Do not make user redo any work, reenter data
–
Retain user state information
●
Example: having to find folder you are working in, over
and over
November 25, 2014
CS 350 - Computer/Human Interaction
49
Design task structure for
flexibility and efficiency
●
Keeping users in control
–
Maddening when applications or webpages steal
focus with no indication of what happened
–
Control jerked away and working context
disappears
–
Takes extra cognitive energy and physical actions
to get back
–
Can happen repeatedly
November 25, 2014
CS 350 - Computer/Human Interaction
50
Physical Actions
●
Design helping user do actions
–
Existence of necessary physical affordances in user
interface.
–
Sensing UI objects for and during manipulation
November 25, 2014
CS 350 - Computer/Human Interaction
51
Physical Actions
●
Design helping user do actions
–
Manipulating UI objects, making physical actions
–
Fitts law issues
–
Issues of awkwardness and fatigue
–
Haptics and physicality
November 25, 2014
CS 350 - Computer/Human Interaction
52
Outcomes
●
Internal, invisible effect/result within system
–
●
●
●
Outcomes must be revealed to user via system
feedback
Where usefulness lives
Functional affordance of non-user-interface
system functionality
Issues are about computational errors, software
bugs
November 25, 2014
CS 350 - Computer/Human Interaction
53
Assessment
●
Design helping user know if interaction was
successful
–
Existence of feedback
–
Presentation of feedback
–
Content, meaning of feedback
November 25, 2014
CS 350 - Computer/Human Interaction
54