design principles - department of computer...
TRANSCRIPT
Design Principles
Oct 21, 2016
Questions
Fall 2016 Comp 3020 2
Overview of Today’s Lecture
More design principles
Fall 2016 3Comp 3020
Design Principles
Generic “rules of thumb” that describe features of “usable” systems
Guidelines concerning what to include and what not to include in an interface
Derived from practice, theory, and research
Used later in heuristic evaluation and referred to then as usability principles
Conducted by experts (user involvement not required)
Very effective at catching design flaws early in design process
Fall 2016 Comp 3020 4
Design Principles
VisibilityConstraintsFeedbackMappingConsistencyAffordanceSimplicityMatchingMinimize memory loadDiagnose/recover from errorsControl and freedomFlexibilityProvide Help
Fall 2016 Comp 3020 5
Design Principle #7: Simplicity
“In anything at all, perfection is finally attained not when there is no longer anything to add, but when there is no longer anything to take away”
Antoine de Saint Exupery
Fall 2011 COMP 3020 6
Design Principle #7: Simplicity
Common tasks should be easy to performE.g., minimize the number of steps
Use the minimum amount of visual information to effectively communicate design goals
Simplicity leads to quickly recognized and understood functionality
Less information == less time to process
Simplicity also promotes memorability
Less to remember
Fall 2011 COMP 3020 7
Design Principle #7: Simplicity
Minimize number of controls and graphical elements
Include only those that are necessary
Eliminate, or relegate others to secondary windows, etc.
Minimize clutter
Clutter hides important information
Fall 2011 COMP 3020 8
Design Principle #7: Simplicity
Fall 2011 COMP 3020 9
VS
Design Principle #7: Simplicity
When possible, use simple but meaningful images rather than text to convey instructions/information
Fall 2011 COMP 3020 10
Design Principle #8: Matching
Match between system and real world
Speak the user’s language
Any terminology should be based on user’s language for the task
Fall 2011 COMP 3020 11
VS.
Design Principle #8: Matching
Use meaningful mnemonics, icons, and abbreviations
e.g. File/Save
Ctrl + S (abbreviation)
Alt FS (mnemonic for menu action)
Disk (icon)
How meaningful is this now?
Fall 2011 COMP 302012
Design Principle #9: Minimize Memory Load
Computers are good at remembering things, people aren’t!
Leverage what we know about human memory. E.g.,
Promoting recognition over recall
Use chunking to reduce short-term memory load
Fall 2011 COMP 3020 13
Design Principle #10: Diagnose/Recover from Errors
No matter how good your design is, users will make errors
Fall 2011 COMP 3020 14
Types of Errors
Mistakes: conscious deliberations that lead to an error instead of the correct solution
Slips: unconscious behavior that gets misdirected en route to satisfying a goal, e.g. drive to store, end up in the office
shows up frequently in skilled behavior
often arises from similarities of actions
Fall 2011 COMP 3020 15
Types of Slips
Capture error
Frequently done activity takes charge instead of one intended
occurs when common and rarer actions have same initial sequence
Telling someone your cell number when you intended to give your work number
Clicking “OK” in a delete file dialogue box when you don’t want to delete it
Fall 2011 COMP 3020 16
Types of Slips
Description error
Intended action has much in common with others that are possible
Usually occurs when right and wrong objects physically near each other
pour milk into bowl instead of glass
move file to trash instead of to folder
Fall 2011 COMP 3020 17
Types of Slips
Loss of activation
Forgetting what the goal is while undergoing the sequence of actions
start going to room and forget why you are going there
navigating menus/dialogs and can’t remember what you are looking for
but continue action to remember (or go back to beginning)
Fall 2011 COMP 3020 18
Types of Slips
Mode errors
People do actions in one mode thinking they are in another
refer to file that’s in a different directory
look for commands / menu options that are not relevant
Fall 2011 COMP 3020 19
Designing for Slips
General rules
Prevent slips before they occur
Detect and correct slips when they do occur
Allow for user correction through feedback and undo
Fall 2011 COMP 3020 20
Designing for Slips: Examples
mode errors
have as few modes as possible (preferably none)
make modes highly visible, e.g. edit/view modes
capture errors
on top of confirmations, make actions undoable
allows reconsideration of action by usere.g. Recycle bin can be opened and “deleted” file taken back out
Fall 2011 COMP 3020 21
Designing for Slips: Examples
loss of activation
if system knows goal, make it explicit
if not, allow person to see path taken
description errors
in icon-based interfaces, make sure icons are not too similar
check for reasonable input, etc.
Fall 2011 COMP 3020 22
Generic System Responses for Errors
Gag
deals with errors by preventing the user from continuing
E.g., can’t continue until correct password is entered
Warn
warn people that an unusual situation is occurring
when overused, becomes an irritant
Self-correct
system guesses legal action and does it instead
but incorrect guessing leads to trust issues
E.g., auto capitilization
Fall 2011 COMP 3020 23
Generic System Responses for Errors
Do nothingillegal action just doesn’t do anything
user must infer what happenedenter letter into a numeric-only field (key clicks ignored)
put a file icon on top of another file icon (returns it to original position)
Lets talk about itsystem initiates dialog with user to come up with solution to the problem
compile error brings up offending line in source code
Fall 2011 COMP 3020 24
Generic System Responses for Errors
Teach me
system asks user what the action was supposed to have meant
action then becomes a legal one
Learning systems
Fall 2011 COMP 3020 25
Error Messages
Be helpful with error messages
Fall 2011 COMP 3020 26
Error Messages
Fall 2011 COMP 3020 27
Error Messages
Shneiderman’s guidelines for error messages include:
Have a positive tone: avoid using terms like FATAL, INVALID, BAD
Be specific and address the problem in the user’s terms: avoid obscure internal codes
Put users in control: tell them what they should do to recover and continue
Use a consistent interface and comprehensible format
Audio warnings should not be embarrassing
Provide context-sensitive help, F1
Fall 2011 COMP 3020 28
Activity
Re-write the following common error messages using a friendlier language. The message should explain the cause and suggest a method for fixing the problem. For each message imagine a context in which the problem will occur:
– SYNTAX ERROR– INVALID FILE NAME– INVALID DATA– DRIVE ERROR: ABORT, RETRY OR FAIL?
Fall 2011 COMP 3020 29
Activity
There is a problem with the way you have written the command. Check for typos.
You cannot use ‘/’ or ‘?’ in a file name. Please choose another file name.
This field will only accept numeric data. Try again, checking that only numbers are used.
There is a problem with reading your disk. Try inserting it again.
Fall 2011 COMP 3020 30
Design Principle #11: Control and Freedom
Users don’t like to feel trapped by the computer
Should offer an easy way out of as many situations as possible
Strategies:
Cancel button (for dialogues waiting for user input)
Undo (can get back to previous state)
Interrupt (especially for lengthy operations)
Quit (for leaving the program at any time)
Defaults (for restoring a property sheet)
Ways to enable/disable automatic featurese.g., auto-correct
Fall 2011 COMP 3020 31
Design Principle #12: Flexibility
Shortcuts: Experienced users should be able to perform frequently used operations quickly
Strategies:
acceleratorsE.g., command completion, menu shortcuts, function keys
navigation jumpse.g., going to window/location/page directly, and avoiding intermediate nodes
type-ahead (entering input before the system is ready for it)
history systems WWW: ~60% of pages are revisits
Fall 2011 COMP 3020 32
Design Principle #12: Flexibility
If an application has a diverse user base, it is difficult (if not impossible) to design it to suit all needs
One solution: provide options for personalization
Application properties: font sizes, zoom settings, save locations
Interface control structures (e.g., toolbars)
Fall 2011 COMP 3020 33
Design Principle #13 –Provide Help
• Help is not a replacement for bad design
• Simple systems:
– walk up and use; minimal instructions required
• Most other systems:
– Feature rich
– Some users will want to become “experts” rather than “casual” users
– Intermediate users need reminding, plus a learning path
Fall 2011 COMP 3020 34
Types of Help
Tutorials and on-line tours
Short guides that typically describe how to complete specific tasks
People look for these online when they get “stuck” or want to expand their skill sets
Demonstrate very basic principles through working examples
Fall 2011 COMP 3020 35
Types of Help
Manuals
Used mostly for detailed lookup by experts
Rarely introduces concepts
Thematically arranged
Key features:
Search / find
Table of contents
Index
Fall 2011 COMP 3020 36
Types of Help
Reminders
E.g.,Tooltips (hints)
Text over graphical items indicates their meaning or purpose
Context-sensitive help
System provides help on the interface component the user is currently working with
Fall 2011 COMP 3020 37
Types of Help
Wizards
Walks user through typical tasks
But dangerous if user gets stuck or wants to deviate from the path
Tips
Migration path to learning system features
Also context-specific tips on being more efficient
Must be “smart”, otherwise boring and tedious
Fall 2011 COMP 3020 38
From Principles to GoalsDesign Guideline Usability Goal(s)
Visibility Efficiency, Learnability
Feedback Memorability
Constraints Efficiency, Safety
Mapping Effectiveness, Efficiency, Learnability, Memorability
Consistency Efficiency, Learnability, Memorability
Affordance Learnability
Simplicity Efficiency, Learnability, Memorability
Matching Efficiency, Learnability
Minimizing Memory Load Learnability, Memorability, Efficiency
Diagnose/Recover from Errors Safety
Control/Freedom Safety
Flexibility Efficiency, Memorability
Provide Help Safety, Efficiency, Learnability,
Fall 2011 COMP 3020 39