Cooper Part II
Making Well-Behaved Products
Data Entry & Error Handling
Jeff Offutt
http://www.cs.gmu.edu/~offutt/
SWE 632
User Interface Design and Development
Cooper Ed4, Ch 14-15
Outline
1. Rethinking Data Entry, Storage, and
Retrieval (ch 14)
2. Preventing Errors and Informing
Decisions (ch 15)
1-Jul-16
© Jeff Offutt, 2001-2014
2
Ch 14 : Rethinking Data Entry,
Storage, and Retrieval
• Being considerate (ch 8) is particularly important when
users enter data
• Implementation-model thinking (ch 9) makes it particularly
difficult to design usable data entry screens
• Understanding the users’ mental model (ch 1) can allow us
to design sensible data handling interfaces
• Some major issues :
– Finding data
– Data integrity and data immunity
– Auditing and editing data
1-Jul-16
© Jeff Offutt, 2001-2014
3
Data Integrity versus Data
Immunity
• I’ve heard the phrase “garbage in, garbage out” since I
was in college
• It means if the users enter incorrect data then the
program will behave incorrectly
• Experienced developers design the user interface to block
invalid data
Data Integrity :The state of the program is
based on correct, valid input data
• Input data validation means checking the data before
sending it to the software and rejecting it if does not
conform
1-Jul-16
© Jeff Offutt, 2001-2014
4
Data Validation is Anti-Usable
•
•
•
•
Input data validation is like a rude guard at a security
check who won’t let you through if you have a 4 ounce
bottle of eyedrops !
It puts the database needs before the users’ needs
It makes users feel like suspects
It treats typos like malicious behavior
Sometimes invalid data is reasonable
– We don’t have the complete data
– We mis-typed something
– It really doesn’t matter — the rules are overly restrictive
• Data validation makes users feel they are not in control
1-Jul-16
© Jeff Offutt, 2001-2014
5
Data Immunity
• Instead of using data validation to ensure integrity …
• Make the software immune from invalid data
Most invalid data can be modified to be valid
by the software !
•
Four types of immunization
1.
2.
3.
4.
1-Jul-16
Repairing automatically
Masking out invalid data
Flexible rule enforcement
Auditing instead of editing
© Jeff Offutt, 2001-2014
6
(1) Repair Data
• Think about google … if you search on “gorge mson”,
google will respond : “Showing results for george
mason”
– Plus a link to a page that matches the original string
• Examples of automatically fixing data:
– Words can be converted to numbers (“five” to “5”)
– Look for relationships in data (“Fairfax, BA” to “Fairfax, VA”)
• Let the programmers be creative !
Ultimately, it saves money to have
programmers work harder than requiring
users to work harder
1-Jul-16
© Jeff Offutt, 2001-2014
7
(2) Mask Out Invalid Data
• For many types of data, the UI can prevent invalid data
from being entered
– Why allow “five” for a number — use masking to ignore all nonnumeric characters
– Fill in dashes automatically, so it doesn’t matter if the users
entered “123-45-6789” or “123456789”
– Use radio buttons or dropdowns when possible
An error may not be your program’s fault,
but it is our program’s responsibility
1-Jul-16
© Jeff Offutt, 2001-2014
8
(3) Enforce Rules Flexibly
•
Defining good rules is hard — defining perfect rules is
impossible !
–
•
Humans are not good at being exact
Three levels of rules :
1. The restrictions we really want (intent)
2. The restrictions we describe (specifications)
3. The restrictions we implement (law)
•
•
The three never match perfectly, and a considerate
person will consider the intent instead of the law
Allow some rules to be bent
–
1-Jul-16
Always keep a log to check later
© Jeff Offutt, 2001-2014
9
(4) Audit, Don’t Edit
If it can’t be fixed …
Do we have to alert the users right now ?
• Missing data is often flagged as a data integrity error
• The missing data can sometimes be entered later
• Tell the users the data is missing with modeless feedback
– Modeless : feedback that they do not have to respond to
• Missing data can often be inferred from existing data – but
the programmers have to work instead of the users
1-Jul-16
© Jeff Offutt, 2001-2014
10
(4) Audit, Inform, and Postpone
Edits
• TurboTax has a separate “tax audit” phase where it looks
for data errors after all the data entry
– This does not interfere with the user’s flow
• Real-time spell checking unobtrusively tells you when a
word is mispelled
– Users can go back and check it later — if they want !
– Some “misspelled” words are okay … no dictionary is complete
and perfect (for example, they usually don’t include “Offutt”)
1-Jul-16
© Jeff Offutt, 2001-2014
11
Data Entry Summary
Protect the users from mistakes
Don’t prevent them from doing their jobs
Users are not the enemy
1-Jul-16
© Jeff Offutt, 2001-2014
12
Rethinking Data Storage
• Most non-engineers do not want to know the difference
between files and memory
• TODAY
• But second graders now understand the difference!
• The concept of saving files is based on a strange artifact of
computer hardware — the disk
– It is clearly implementation-model thinking
• The cloud and mobile devices are, thankfully, allowing us
to move away from this file storage nonsense
1-Jul-16
© Jeff Offutt, 2001-2014
13
“Save Changes?” Dialog box
Microsoft Powerpoint
X
Do you want to save the changes you made to “CooperCh13.ppt”?
Yes
No
Cancel
• The two choices are NOT equally likely
– “Yes” is chosen almost all the time
– Why does printing a document change it?
– What is the difference between “no” and “cancel”?
“no” responds to the question, “cancel” does not
• We use this is a major undo operation
• This requires understanding the implementation model
1-Jul-16
© Jeff Offutt, 2001-2014
14
Mental Model
• Users think there is only one document, and they own it
• Implementation model:
– Two documents, one on disk and one in memory
– The computer program owns it
• When I bring my laptop to class, I don’t have another,
“real” one at home …
• Users should not need to understand the file system!
• This is a user-centric view …
Outside-in design rather than inside-out
1-Jul-16
© Jeff Offutt, 2001-2014
15
Cooper’s Unified File Model
• User’s view: One copy of the file
• Users should be able to
–
–
–
–
–
–
–
–
Save documents automatically
Copy
Milestone copy (revision control)
Rename
Move
Change the format (Visio – vsd, jpg, eps, …)
Reverse changes
Abandon all changes
• We don’t need a “File” menu anymore …
1-Jul-16
© Jeff Offutt, 2001-2014
16
Rethinking Data Retrieval
• As search engines get more powerful, users find more
ways to use them
– In the 1990s I brought paper to class for the syllabus and
schedule
• Changes would require more paper …
– A few years ago we would all bookmark the course website
– Now we go to google and type in “swe 632”
• If we search within a particular website, we expect to get
exactly what we want, first time !
• Searching represents a new way to retrieve information
1-Jul-16
© Jeff Offutt, 2001-2014
17
Storing and Searching Files
• The windows file manager has a tree view of files
– Navigating a tree is hard work … up and down, up and down …
• Old windows (XP?) did not integrate
search into the file manager
– Start – Search – For files …
– Huge window …
– Didn’t know my
current context
(current directory)
– Confusing fields
– Folder didn’t
seem to work
1-Jul-16
© Jeff Offutt, 2001-2014
18
Storing and Searching Files
• The windows file manager was improved about 2008
– Windows 7 version
After clicking “All
files and folders”
Search pane
1-Jul-16
© Jeff Offutt, 2001-2014
19
Storing and Searching Files
• Unix has the concept of a “classpath”, which allows users to define
certain often-visited directories as special and the cd command will
look for those directories regardless of the current directory
• Unix find is very slow
• Ahh … the File Manager has a “Favorites” …
• Oops … this is connected to IE
… no favorites for File Manager
• In Unix, once we find the right
directory, we can type
grep Upsorn grades*
to find Upsorn’s grades in any class
• How could Windows work ?
• Type a folder name in the Address bar, and “jump” directly there
1-Jul-16
© Jeff Offutt, 2001-2014
20
Storage and Retrieval
• Generally, we need places to put our things
• And ways to find them when we need them
• Indexed retrieval works by creating an index of each thing
we store
• To get to a file on our disk, we have to remember where
it is !
– Directory (folder) and file name
1-Jul-16
© Jeff Offutt, 2001-2014
21
Finding Digital Documents
•
Three ways to find digital documents
1. Positional retrieval – remember where it is
2. Identity retrieval – remember its name
3. Associative (attribute-based) retrieval – remember something
about the file
•
•
•
1-Jul-16
Positional and identity retrievals impose a memory
burden on the user – hard with tens of thousands of
files!
Unix grep can be used as a primitive associative retrieval
A “find and grep” script is slightly more advanced …
© Jeff Offutt, 2001-2014
22
Attribute-Based Retrieval
• GUI systems still don’t have usable attribute-based
retrieval systems
• We’ll get there
• The rest of the chapter goes into details about what such
a system might look like
This is not all that hard …
Why we don’t have it, I do not know
1-Jul-16
© Jeff Offutt, 2001-2014
23
Outline
1. Rethinking Data Entry, Storage, and
Retrieval (ch 14)
2. Preventing Errors and Informing
Decisions (ch 15)
1-Jul-16
© Jeff Offutt, 2001-2014
24
(1) Be Specific
A message that has to be
explained has failed
• Users should not have to read a message twice
• Messages should be concise
• Messages should be brief, informative, and in
the users’ vocabulary
1-Jul-16
© Jeff Offutt, 2001-2014
25
(1) Be Specific
A useful message should state:
1.
2.
What error has been detected
Where the error is
and most importantly …
3. What corrective action to take
1-Jul-16
© Jeff Offutt, 2001-2014
26
(1) Be Specific
Examples
1-Jul-16
Non-specific
Specific
Invalid input
Invalid date
SYNTAX ERROR
Illegal entry
Error accessing
http://www.cs.gmu.edu:
SOCKET: Connection
refused
The id number must be 5 numeric digits
Format: MM/DD/YY
Unmatched left parenthesis
Type first letter: Send, Read, or Drop
www.cs.gmu.edu is busy, try again later
© Jeff Offutt, 2001-2014
27
(1) Be Specific
A note on beeping ...
Beeps are non-specific, and can be embarrassing
and annoying
1-Jul-16
© Jeff Offutt, 2001-2014
28
(2) Give Constructive Guidance
in a Positive Tone
• Meaningful messages
• Positive tone
• Not incriminating
• Blame system, not users
• State what should be there,
not what should not
1-Jul-16
© Jeff Offutt, 2001-2014
29
(2) Give Constructive Guidance in
a Positive Tone
Examples
Non-constructive
Illegal year!
Your id # has characters!
Part Code not numeric.
1-Jul-16
Constructive
The year must be between 1975 and 1995.
The id # must be numeric. Please re-enter.
Part Code must be 3 numeric digits.
© Jeff Offutt, 2001-2014
30
(2) Give Constructive Guidance in
a Positive Tone
Do not use hostile terminology:
•
•
•
•
•
•
1-Jul-16
Fatal error
Run aborted
Catastrophic error
Illegal error
Invalid
Bad
© Jeff Offutt, 2001-2014
31
(3) Use a User-Centered Style
Users should feel that they are in control
Messages should be :
• In the user’s vocabulary
• Courteous
• Not Imperative
1-Jul-16
© Jeff Offutt, 2001-2014
32
(3) Use a User-centered Style
Examples
Non-user-centered
ENTER DATA.
Ready!
1-Jul-16
User-centered
Ready for command:
Your turn :
© Jeff Offutt, 2001-2014
33
(4) Use an Appropriate Physical
Format
Messages should be neat, consistent, and
readable
•
•
•
•
•
•
1-Jul-16
Mostly mixed case (upper and lower)
All upper-case only for brief, serious warnings
Message placement should not interfere
Include white space around messages
Input and message on same screen
Highlight erroneous data fields
© Jeff Offutt, 2001-2014
34
Example
1-Jul-16
© Jeff Offutt, 2001-2014
35
Example
I did!
Maybe I need
50 cents …
50
1-Jul-16
© Jeff Offutt, 2001-2014
36
Example
Must enter 2
zeros (other
values not
allowed)
00
50
1-Jul-16
© Jeff Offutt, 2001-2014
37
Example
This modal dialog box
will not allow me to see
the message (with
crucial info!) while
editing the slides. I
have to respond before
editing.
1-Jul-16
© Jeff Offutt, 2001-2014
38
Examples
 ! HT ACCESS: Error accessing
“http://www.cs.gmu.edu/offutt.html”: “HTTP: File/directory does
not exist”
☺ The requested web page /offutt.html was not found on http:// ...
 !PrintMonitor is currently printing “Doc 1: Bad Examples” from
“WordPerfect 2.1”. If PrintMonitor quits now, “Doc 1: Bad
Examples" will be printed when the system is restarted with
MultiFinder. Do you want to finish printing before PrintMonitor
quits? (Windows 95)
☺ Currently printing. If shutdown occurs now, the document will
not be printed until MS Word restarts. You can still delay
shutdown until the document finishes printing.
Wait and shutdown after printing:
Shutdown now and cancel printing:
1-Jul-16
© Jeff Offutt, 2001-2014
39
Another Example
 http://www.inwarehouse.se/ : Microsoft OLE DB
Provider for ODBC Drivers error '80004005'
[Microsoft][ODBC SQL Server Driver][SQL
Server]Your transaction (process ID #85) was deadlocked
with another process and has been chosen as the
deadlock victim. Rerun your transaction.
/script/webkatalogen/pb.asp, line 221
☺Internal failure, please try again.
1-Jul-16
© Jeff Offutt, 2001-2014
40
More Examples
 Bus error, core dumped (Unix)
☺Access through a nil pointer in function GetNext()
 Terminating thread, due to a stack overflow problem. A
VxD, possibly recently installed, has consumed too muhc
stack space. Increase the setting of MinSPs in SYSTEM.INI
or remove recently installed VxDs. There are currently 5
SPs allocated. (Windows 2000)
☺???
1-Jul-16
© Jeff Offutt, 2001-2014
41
Yet Another Example
• From Lotus notes
• What does that mean ???
1-Jul-16
© Jeff Offutt, 2001-2014
42
A Confusing Example
This webpage has a redirect loop.
The webpage at
https://property.onesite.realpage.com/system/onlinepayments/default.asp
has resulted in too many redirects. Clearing your cookies for this
site may fix the problem. If not, it is possibly a server configuration
issue and not a problem with your computer.
Here are some suggestions:
Reload this web page later.
Learn more about this problem.
More information on this error
Below is the original error message
Error 310 (net::ERR_TOO_MANY_REDIRECTS): There were too
many redirects.
1-Jul-16
© Jeff Offutt, 2001-2014
43
Another Confusing Example
• The wording of this message makes it hard to know how
to answer
– “to view only” ?
• If I want to let it show me everything, should I answer
“Yes” or “No”?
• This message can only be understood by someone who
got an A in a logic class …
1-Jul-16
© Jeff Offutt, 2001-2014
44
Yeta Yet Another Example
• From an online bill payment system
• Is it legal to “abort” in this state?
1-Jul-16
© Jeff Offutt, 2001-2014
45
A Commonly Occurring Example
• Most browsers give a warning before submitting POST
data for the second time
– Avoid duplicate submissions and updates
– Avoid duplicate purchases
• Users should be very careful before overriding this
hesitation
• However … how many users understand “POSTDATA”?
1-Jul-16
© Jeff Offutt, 2001-2014
46
Last (Negative) Example
 Program Error: WINWORD.exe has generated errors
and will be closed by Windows. You will need to restart
this program. An error log is being created. (Word 2000)
 I got this message, intermittently, for several months before
diagnosing the problem
It occurred when I started MS Word (and PowerPoint) …
sometimes … and they immediately exited
 Restarting the computer did not work
 I took my computer to the support center, but they couldn’t
get the problem to repeat
☹ The actual problem ???
☺The default printer is a network printer and is currently
unavailable. Word is continuing, but you cannot print.
1-Jul-16
© Jeff Offutt, 2001-2014
47
An Outstanding Example
ERROR 403 - Forbidden
The server understood the request, but is refusing to fulfill it.
Authorization will not help and the request SHOULD NOT be
repeated. This status code is commonly used when the server does
not wish to reveal exactly why the request has been refused, or
when no other response is applicable.
Having trouble? Maybe one of these links will help you find what
you are looking for: Hardware, Software, Solutions, Storage
Systems Products.
Search:
1-Jul-16
© Jeff Offutt, 2001-2014
48
An Interesting Example
Command: Mail
To: fred
Subject:
No subject – Continue with message? (y/n) n ___
Interesting escape
A reminder that we should use subject lines
Intrusive or protection?
1-Jul-16
© Jeff Offutt, 2001-2014
49
A Stupid Example
1-Jul-16
© Jeff Offutt, 2001-2014
50
Another Stupid Example
1-Jul-16
© Jeff Offutt, 2001-2014
51
Philosophy of Designing for
Errors
•
•
•
•
Think of the user’s point of view
Assume every mistake will occur
Make every action reversible
Use syntactic constraints as much as possible
– Selection vs. typing
• Make the results of actions obvious
– If possible, make them obvious before actions are committed
1-Jul-16
© Jeff Offutt, 2001-2014
52
Undo and Redo
• Bet you thought undo was simple …
– Before you read the book
• Undo has multiple purposes
– Rescuing mistakes
– Exploration – finding out what functions do
– Hypothesizing – looking for the correct function
• When users make mistakes, they tend to blame it on the
software, computer, or UI
• UI should assume that everything the user does is
intentional
– “customer is always right”
1-Jul-16
© Jeff Offutt, 2001-2014
53
Types of Undo
• Procedural undo : Many undo operates on actions, not on
data
– Users are reverting to a previous state, but only programmers
think that way
• Exploratory undo : User does not know what action will
do, so tries it
1-Jul-16
© Jeff Offutt, 2001-2014
54
Types of Undo
Single vs. Multiple
• Most uses of undo is to go back one step
• Multiple undo is more expensive for programmer, but
important for user
• But … what if a user goes through 10 actions and the 3rd
one was wrong?
– Undo works on a LIFO queue
• Group multiple undo: Users can see a list of previous
operations and select any of them
– WordFormat (~1991), MS Word (~2003)
• Redo : After undoing, put it back
• Repeat : Apply the same command to next data
1-Jul-16
© Jeff Offutt, 2001-2014
55
Undo Summary
Original hypertext theorists thought a
back button was for correcting mistakes
nope
1-Jul-16
© Jeff Offutt, 2001-2014
56
Summary
Implementing user interfaces is easy
The hard parts are :
• Understanding the user’s perspective
• Designing interactions that satisfy their needs
rather than the needs of the designers
1-Jul-16
© Jeff Offutt, 2001-2014
57