Documenti di Didattica
Documenti di Professioni
Documenti di Cultura
of
preventio
n...
Microsofts Spectacu
lar Errors
Adobe UI Gripes
Fall 2006
PSYCH / CS 6750
Agenda
Error types
Slip types
Error prevention guidelines
Error recovery guidelines
Fall 2006
PSYCH / CS 6750
Fall 2006
PSYCH / CS 6750
Fall 2006
PSYCH / CS 6750
Errors in User-Computer
Dialog
Three phases
Read-scan phase -- Perceptual
errors
Think phase -- Cognitive errors
Respond phase -- Motor errors
PSYCH / CS 6750
Perceptual Errors
Result from poor perceptual
cues
Display of objects that are
visually similar
Invisible or poorly expressed
states
Failure to capture users
attention
Lack of perceivable feedback
Fall 2006
PSYCH / CS 6750
Perceptual Errors
Are
perceptu
al
errors
likely
here?
Fall 2006
Tallly Ho Uniforms
PSYCH / CS 6750
Cognitive Errors
Caused by taxing memory and
thinking
Tax recall memory
Poor mnemonic aids
Inconsistency
Lack of context or status info
e.g., where came from in a menu
PSYCH / CS 6750
Cognitive Errors
Are
cognitiv
e errors
likely
here?
Fall 2006
PSYCH / CS 6750
10
Motor Errors
Taxing the motor skills
Awkward movements
Highly similar motor sequences
e.g., double click, click
PSYCH / CS 6750
11
Motor Errors
Lots of
errors
are
likely
here!!
Fall 2006
PSYCH / CS 6750
12
Example Studies
170 experienced UNIX users over 9
days
Individual commands error rates of 3-50%
PSYCH / CS 6750
13
Slips
Automatic (subconscious) error
that occurs without
deliberation
Examples?
Fall 2006
PSYCH / CS 6750
14
Types of Slips
1. Capture error
Continue frequently done activity
instead of intended one
Type animation instead of animate
Confirm deletion of file instead of
cancel
2. Description error
Intended action has much in common
with others possible (usually when
distracted, close proximity)
ctrl key & caps lock key / Sun & Mac
Fall 2006
PSYCH / CS 6750
15
Types of Slips
3. Data driven error
Triggered by arrival of sensory
info which intrudes into normal
action
Call to give someone a number, dial
that number instead
4. Associative activation
Internal thoughts and
associations trigger action
Phone rings, yell come in
Fall 2006
PSYCH / CS 6750
16
Types of Slips
5. Loss of activation
Forgetting goal in middle of
sequence of actions
Start going into room, then forget
why youre going there
6. Mode errors
Do action in one mode thinking
youre in another
Delete file, but youre in wrong
directory
Fall 2006
PSYCH / CS 6750
17
Error-handling
Strategies
1. Avoid and prevent
2. Identify and understand
3. Handle and recover
Fall 2006
PSYCH / CS 6750
18
Preventing Errors
Rules of thumb:
Preventing slips can be done by
analysing users interaction with
the application, then tweaking
screen design, button spacing, etc.
Preventing many mistakes requires
that users understand the system
better; may require more radical
redesign, or perhaps a totally
different metaphor
Fall 2006
PSYCH / CS 6750
19
Error Prevention
Guidelines
Eliminate modes or provide
visible cues for modes
Use good coding techniques
(color, style)
Maximize recognition, minimize
recall
Design non-similar motor
sequences or commands
Minimize need for typing
Fall 2006
PSYCH / CS 6750
20
Fall 2006
PSYCH / CS 6750
21
Error Prevention
Guidelines
Fall 2006
PSYCH / CS 6750
22
Error prevention
Warn user an unusual situation is
occurring
Bell or alert box
Fall 2006
PSYCH / CS 6750
23
Error prevention
Nothing - Just dont do anything
(Careful, user must determine
problem)
Mac: move file to bad place
Fall 2006
PSYCH / CS 6750
24
Error Recovery
Guidelines
Provide undo function
Provide cancel function from
operations in progress
Require confirmation for
drastic, destructive commands
Provide reasonableness checks
on input data
Did you really mean to order
5000?
Fall 2006
PSYCH / CS 6750
25
Error Recovery
Guidelines
However, before a user can recover,
must
Other options?
Self-correct - Guess correct action & do it
Spell-check correction
PSYCH / CS 6750
26
Error Recovery
Guidelines
Return cursor to error field,
allow fix
Tell them what to fix, how to fix
it
PSYCH / CS 6750
27
Fall 2006
PSYCH / CS 6750
28
????
Fall 2006
PSYCH / CS 6750
29
Fall 2006
PSYCH / CS 6750
30
Command Assistance
E.g., on-screen manuals, help commands
(man on Unix), etc.
Simple and efficient if the user knows what
he/she is looking for and is seeking either
a reminder or more detailed information
But
What if people dont know what theyre looking for?
What about commands that the user does not know
about but needs?
What about commands the user thinks exist but do
not?
PSYCH / CS 6750
31
Command Prompts
In CL interfaces, usage prompts
are an example.
Assumes that
system can detect error
user understands the command well
enough to apply the guidance
PSYCH / CS 6750
32
Context-sensitive Help
Move away from placing onus on user to
remember the command
Often not very sophisticated
Common examples:
Microsofts Whats This? option
Tooltips
Clippy (arrrgh)
PSYCH / CS 6750
33
PSYCH / CS 6750
34
Agenda
Dimensions and terminology
Non-computer methods
Computer methods
Psych / CS 6750
36
Psych / CS 6750
37
An Essential Concept of
UCD
Requirements for an interactive
system cannot be fully
specified at the beginning of
the lifecycle
Iterative design
Psych / CS 6750
38
Design Artifacts
How do we express early design
ideas?
No software coding at this stage
Key notions
Make it fast!!!
Allow lots of flexibility for
radically different designs
Make it cheap
Promote valuable feedback
*** Facilitate iterative design and evaluation
Psych / CS 6750
39
Dilemma
You cant evaluate design until
its built
But
40
But
Be aware of weaknesses of prototypes
Prototypes, obviously, are prototypes:
not the real system
Cant simulate non-functional features,
such as security or reliabilitythese are
precisely the things sacrificed when
developing a prototype
Response time is key to usability but may
be difficult/impossible to convey in a
prototype
Psych / CS 6750
41
Prototyping Dimensions
1. Representation
How is the design depicted or
represented?
Can be just textual description
or can be visuals and diagrams
2. Scope
Is it just the interface (mockup) or does it include some
computational component?
Psych / CS 6750
42
Dimensions (contd)
3. Executability
4. Maturation
Revolutionary
- Throwofout
old one
What
are the stages
the
Evolutionary
Keep changing
product
as it -comes
along? previous de
Psych / CS 6750
43
Terminology (1)
Early prototyping
Late prototyping
Psych / CS 6750
44
Terminology (2)
Low-fidelity prototype
High-fidelity prototype
Psych / CS 6750
45
Terminology (3)
Horizontal prototype
Vertical prototype
Fewer features or aspects of the interface
but done in great detail
Psych / CS 6750
46
Prototyping Methods
Psych / CS 6750
47
Design Description
Can simply have a textual
description of a system design
Obvious weakness is that its so
far from eventual system
Doesnt do a good job
representing visual aspects of
interface
Psych / CS 6750
48
Flow Chart
Functional specification of
how the system operates, in
a step-by-step flow
IF-THENs, branches, loops
No visual layout/interface
specified
More detailed, useful for
quick evaluation, but
requires more commitment of
resources to produce
Also more advanced
(sometimes means more
rigid) than simpler mockups
Psych / CS 6750
49
Sketches, Mock-ups
Paper-based drawings of
interfaces
Good for brainstorming
Focuses people on high-level
design notions
Not so good for illustrating
flow and the details
Quick and cheap -> helpful
feedback
Psych / CS 6750
50
Mockups: Simple
sketches
Psych / CS 6750
51
Mockups: Complex
details
Psych / CS 6750
52
Mockup: Controls
Psych / CS 6750
53
Physical Mock-Up
Styrofoam and Buttons
Spring 2004
CS 4750
project Golf
Caddy by:
Chris Hamilton
Linda Kang
Luigi Montanez
Ben Tomassetti
54
Physical Mock-Ups
Wooden blocks and labels device control
(Three versions of
a hand-held controller)
55
Storyboarding
Pencil and paper simulation or
walkthrough of system look and
functionality
Use sequence of diagrams/drawings
Show key snap shots
Quick & easy
Psych / CS 6750
56
Example
57
Scenario
Susan walks into the dark house from the garage.
She sees the illuminated light switches near
the door and chooses the red switch, which is
color-coded for all on for the current room,
which is the laundry room. The lights
illuminate the security alarm, which began
emitting an auditory warning when the door was
opened. Susan walks to the Elan screen and
touches it, revealing the top-level menu. She
selects the security tab, and enters her
code at the prompt. The security system is
then disarmed and it displays a message saying
security system off.
59
Scenario Utility
Engaging and interesting
Allows designer to look at
problem from another persons
point of view
Facilitates feedback and opinions
Can be very futuristic and
creative
Can involve social and
interpersonal aspects of the task
Psych / CS 6750
60
Other Techniques
Tutorials & Manuals
Maybe write them out ahead of
time to flesh out functionality
Forces designer to be explicit
about decisions
Putting it on paper is valuable
Psych / CS 6750
61
Computer-Supported
Methods
62
e.g., Computer
Mockups
Psych / CS 6750
63
Prototyping Tools
1.Draw/Paint programs
Draw each screen, good for look
IP Address
OK
Cancel
64
Psych / CS 6750
Photoshop
65
Illustrator
Psych / CS 6750
66
Prototyping Tools
2. Scripted simulations/slide
shows
Put storyboard-like views down with
(animated) transitions between them
Can give user very specific script
to follow
Often called chauffeured
prototyping
Examples: PowerPoint, Hypercard,
Macromedia Director, HTML
Psych / CS 6750
67
Dreamweaver
Psych / CS 6750
68
Fireworks
Psych / CS 6750
69
Scripting Example
Ctrl-p
70
Macromedia Director
Combines various media with script
written in Lingo language
Concerned with place and time
Objects positioned in space on stage
Objects positioned in time on score
Psych / CS 6750
71
Psych / CS 6750
72
Director Output
Psych / CS 6750
73
Prototyping Tools
3. Interface Builders
Tools for laying out windows,
controls, etc. of interface
Have build and test modes that are
good for exhibiting look and feel
Generate code to which back-end
functionality can be added through
programming
74
Control
properties
UI Controls
Design area
75
Flash - A category of
its own
Psych / CS 6750
76
True Programming
Less useful for rapid
prototyping, but can save
re-coding time down the road
More constrained in look and
feel
Constrained to traditional
interaction styles and
methods
Hard to think outside the box
Psych / CS 6750
77
Java
Psych / CS 6750
78
Java Output
Psych / CS 6750
79
http://guir.berkeley.edu
Psych / CS 6750
80
Prototyping
Enhancements
Wizard of Oz - Person
simulates and controls system
from behind the scenes
Use mock interface and
interact with users
Good for simulating
system that would be
difficult to build
Can be either computer-based or not
Psych / CS 6750
81
Wizard of Oz
Method:
Behavior should be algorithmic
Good for voice recognition
systems and non-traditional
interfaces
Advantages:
Allows designer to immerse
oneself in situation
See how people respond, how to
specify tasks
Psych / CS 6750
82
Prototyping Summary
Tradeoffs of simplicity,
manageability
Veracity
Interactiveness
Up-front costs vs. down the road
costs
Key: Dont let the prototyping
environment drive or constrain
your creativity!!
Psych / CS 6750
83
Photoshop/Illustrator:
http://www.absolutecross.com/tutorials/photoshop/
http://www.planetphotoshop.com/tutorials.html
http://thetechnozone.com/bbyc/Illustrator.htm
http://studio.pinnacle-elite.com/tutorials/aitut01.html
Tutorials
Dreamweaver/HTML:
http://www.cbtcafe.com/dreamweaver/
http://www.sitebuilder.ws/dreamweaver/tutorials/
Fireworks:
http://www.cbtcafe.com/fireworks/index.html
VB:
http://www.vbtutor.net/vbtutor.html
http://juicystudio.com/tutorial/vb/
http://webspace.dialnet.com/paul_pbcoms/vb/tutor.html
Flash:
http://www.uic.edu/depts/accc/seminars/flashintro/index.h
tml
http://www.absolutecross.com/tutorials/flash/
Director:
http://www.herts.ac.uk/lis/mmedia/directortutorial/
http://www.tutorialfind.com/tutorials/macromedia/director
/
http://www.fbe.unsw.edu.au/learning/director/
Psych / CS 6750
84