An ounce

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

Slips versus Mistakes

Recall:
Human errors can be classified into slips and mistakes

Can understand using Normans gulf of execution

SLIP: If you understand a system well you may know
exactly what to do to satisfy your goals: youve
formulated the correct action. But you may fail to
execute that action correctly (mis-type, press the
wrong button)
MISTAKE: If you dont know the system well you may not
even formulate the right goal. (Example: you may pick
the magnifying glass icon thinking it is the find
function, when it actually zooms the text).

Both may be corrected for, and designed around.

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

Can generally lead to either

slips or mistakes
Fall 2006

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

Mental calculations and

translations
Fall 2006

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

Pressure for speed

Require a high degree of handeye coordination
Requiring special types of motor
skills (type)
Fall 2006

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%

Kraut et al, CHI 83

300 security system users over 20

months
12,117 error messages
Most common 11 errors -> 65%
2517 involved repeated errors (with no
non-errors in between) within 10 minutes

Bad error recovery/help

Mosteller & Ballas, Human Facto
Fall 2006

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

Error Prevention Guidelines

Test and monitor for errors
and engineer them out
Allow reconsideration of
action by user (e.g., removing
file from trash)

Fall 2006

PSYCH / CS 6750

21

Error Prevention
Guidelines

Provide appropriate type of

feedback
Gag - Prevent user from
continuing
Erroneous login

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

be able to detect that an error has

occurred
Detection: provided by easy visibility,
feedback

Other options?
Self-correct - Guess correct action & do it
Spell-check correction

Dialog - System opens dialog with user

Go into debugger on run-time crash

Query - Ask user what shouldve been

done, then allow error action as legal
one (did you mean?)
Command language naming error
Fall 2006

PSYCH / CS 6750

26

Error Recovery
Guidelines
Return cursor to error field,
allow fix
Tell them what to fix, how to fix
it

Provide some intelligence

Guess what they wanted to do

Provide quick access to

context-sensitive help
Fall 2006

PSYCH / CS 6750

27

Error Handling Example

(Web)

Form fill in is the most common

error case

Fall 2006

PSYCH / CS 6750

28

????

Fall 2006

PSYCH / CS 6750

29

User Support (aka

Help)
Line between error recovery and
help can be fuzzy
Overarching design principle:
must be as unobtrusive as
possible

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?

Command assistance is little help here.

Fall 2006

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

Generally only helpful for

simple errors
Fall 2006

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)

Whats the context?

Just the control itself? (Simple)
Users past history and application state?
(More sophisticated)
Fall 2006

PSYCH / CS 6750

33

Wizards and Assistants

Attempt to prevent errors by providing
common paths through software
Safety, efficiency, and accuracy (as long as its a
supported task)

May be unnecessarily constraining

Guidelines: allow backward movement, show
progress indicator
Assistant: Clippy is actually an example of
this. A context-sensitive trigger to launch
a wizard style interaction
Q: What went wrong with Clippy?
Fall 2006

PSYCH / CS 6750

34

Agenda
Dimensions and terminology
Non-computer methods
Computer methods

Psych / CS 6750

36

Your Project Group

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

After building, changes to the

design are difficult

Simulate the design, in low-cost

manner
Psych / CS 6750

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

Can the prototype be run?

If coding, there will be periods
when it cant
A goal for later-state
prototyping

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

Very broad, does or shows much of the inter

but does this in a shallow manner

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

Sketches solves two problems with use of more

fully-developed prototypes
User reluctance to suggest changes to what might
look like a finished product
User focus too much on details (graphic design, etc)
of UI rather than big picture
http://swiki.cc.gatech.edu/cs3750/uploads/119/Story_Board.pdf

57

Scenarios (aka Use

Cases)
Hypothetical or fictional
situations of use
Typically involving some person,
event, situation and environment
Provide context of operation
Often in narrative form, but can
also be sketches or even videos
Also used in cognitive walkthrough
58

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

Can support more rapid changes

to simple mockups
Can support more functionality
for prototypes
Can lead to stale design,
can focus user (or customer)
too much on the details of the
interface, too early in the
design process
Psych / CS 6750

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

Thin, horizontal prototype PhotoShop, Corel Draw,

Psych / CS 6750

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

e.g., HTML, Javascri

Psych / CS 6750

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

Easy to transition between screens

Can export as executable or as Web
Shockwave file

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

Examples: Visual Basic, Delphi,

UIMX, ...
Psych / CS 6750

74

Control
properties

UI Controls

Design area

e.g., Visual Basic

Psych / CS 6750

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

Other Prototyping Tools

Denim

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