top 5 usability principles
DESCRIPTION
A presentation that defines usability, the nature of users, and 5 high-level principles for guiding your software design.TRANSCRIPT
Top 5:
Usability Principles
1
PrinciplesErik Ralston
BIS BoF
April 15, 2010
What is Usability?
A subjective evaluation of how easily users achieve goals
Minimize user error and maximize user satisfaction
Learning in the short-term and efficiency in the long-termLearning in the short-term and efficiency in the long-term
2
What is Usability?
Communicated by user’s emotional response
Users either “love” or “hate” the application
“Mental Model” – A User’s internal understanding and expectations on how the system worksexpectations on how the system works
Often very different than the real system internals
“Intuitive” – Resonant with a user’s mental model
Easy to Learn
Familiar to Users
3
Understanding the User
“Intuition” is built from emotionally rooted expectations and beliefs (biases resulting from previous experiences)
Intuition is considered before reason
Everyone's intuition is different; you must ask the user!Everyone's intuition is different; you must ask the user!
Humans with neurologically hindered emotions often suffer from indecision and lack of motivation (Aboulia)
Not evoking emotion makes the user unmotivated
4
Understanding the User
Spock uses only
Vulcan logic
5
Understanding the User
Stephen uses only his gut
6
Understanding Errors
“Slip” – A temporary malfunction of the user
Typing an extra letter
Missing a click
“Mistake” – A mismatch between user’s mental model “Mistake” – A mismatch between user’s mental model and the real behavior of the system
Gulf of Execution
Gulf of Evaluation
More a continuum than absolute categories
Misspelling a word can be caused by either
7
Understanding Errors
8
Gulf of Execution
“I don’t know what to do???”
User can’t connect their goal to a decision in the interface
Users are unaware of a decision that affects their goal
9
Gulf of Evaluation
“What does that mean???”
“What did I just do???”, “Where am I???”
User can’t match current state to mental model
User can’t connect a previous decision with a new state
User was unaware they just made a decision that changed stateUser was unaware they just made a decision that changed state
The user just feels…
10
Gulf of Evaluation
11
What is an interface really?
An abstraction of the system for user interaction
Enables user to act on the system
Provides feedback from the system to the user
A purposeful barrier between the user and the systemA purposeful barrier between the user and the system
Protects user from complexity
Obfuscates even simple aspects of system
12
What is an interface really?
Decisions – Actions the user may perform on the system
Information – System data relevant to user
Instructions – Description of decisions or informationInstructions – Description of decisions or information
13
What is an interface really?
14
What is an interface really?
15
Engineering “Intuitive”
Suggestions for connecting interface to mental models
Managing presentation of information, decisions, and instructions
NOT infallible laws or requirements
Embody the fundamentals of all good designEmbody the fundamentals of all good design
Simplicity
Consistency
Clarity
Principles extend to some everyday items as well
16
#5: Progressive Disclosure
Maintain user focus by initially showing simple and relevant items; hiding advanced and rarely used items.items; hiding advanced and rarely used items.
17
Recognition
18
Recognition
19
Recognition
20
Recognition
21
Progressive Disclosure
22
Progressive Disclosure
Show the most common items and hide the rest
20% of the interface provides 80% of the functionality
Users can only read in a small radius; think 1 inch
If an item is uncommon or very complicated, hide it
Show users “their” information first (personalization)
If a task is recent, then show it first
23
#4: No Dead Ends(or Death Traps)
At no time should a conspicuously valid decision lead to At no time should a conspicuously valid decision lead to obstruction of the user goal, or even worse harm
24
No Dead Ends
25
No Dead Ends
26
No Dead Ends
27
No Dead Ends
28
No Dead Ends In Detail
If a user decision would cause a system error or invalid state, then that decision should be inaccessible
Hidden or disabled
If a user decision is ambiguous, then accept ambiguityIf a user decision is ambiguous, then accept ambiguity
Error messages should guide the users on how to re-establish a path to their goals
29
#3: Recognition Over Recall
Economize user memory by offering options instead of Economize user memory by offering options instead of forcing recall of previous information
30
Recognition Over Recall
Miller’s Law – Working memory is 7± 2 Items
31
Recognition Over Recall In Detail
If the user must remember something to make a decision, then provide them options to choose amongst
Essay or multiple choice?
If it’s a small idea, connect it to a large idea (Hierarchy!)If it’s a small idea, connect it to a large idea (Hierarchy!)
If it’s the same idea, give it the same name everywhere
32
#2: Fitt’s LawEase of reaching a goal is a function of size and distance
33
Fitt’s Law
34
Fitt’s Law in Detail
Size implies importance
If it’s used often, it should be big
Proximity implies relationships
If two elements are related, they should be close together
If two elements are unrelated, they should be far apart
Related elements elements should be adjacentRelated elements elements should be adjacent
Order implies path
Think about a visual and logical “path” for the user to follow
If a user must make a series of decisions, then they must be in a predictable order (ex: left-to-right or top-to-bottom)
35
#1: AffordanceThe possible actions for an object should be presented
obviously and consistentlyobviously and consistently
36
Affordance
Very Non-Standard Buttons
Interaction that is really distraction
Buttons that hide their destinationButtons that hide their destination
37
Affordance In Detail
Different combinations between possibility and reality
“Perceptible” visible and implemented decisions
“Hidden” invisible and implemented decisions
“False” visible and unimplemented decisions
Do not require interaction to understand the possibilities
Hovering shouldn’t be necessary, but perhaps clarifying
If it looks the same, it should behave the same
If it looks different, it should behave differently
38
Top 5 Usability Principles
#5: Progressive Disclosure – 80-20 Rule for Interfaces
#4: No Dead Ends – Remove invalid decisions
#3: Recognition Over Recall – Choice not memory#3: Recognition Over Recall – Choice not memory
#2: Fitt’s Law – Ease of use is distance and size
#1: Affordance – Action possibilities
39
#0: Ask the User!None of the principles are more useful than user opinion
Usability is about making the user happy
Only the user can decide when they are happy
You can’t make them happy if you don’t ask themYou can’t make them happy if you don’t ask them
Use the principles to guide the user
They can’t understand code, but they understand Usability
Use the principles to take the lead and most users will follow
40
Your Principles?
41
Other Places of Insight
Usability.gov
The guide to making government website “usable & useful”
OK/Cancel
A blog/web-comic on usability designA blog/web-comic on usability design
Windows User Experience Interaction Guidelines
Microsoft’s wisdom on User Experience
42
Questions?
43
Thank You!
44