Post on 20-Nov-2014
description
Usability 101Philip Jones
USABILITY 101
You Are Not The User.Be Consistent.Communicate System Status.Design Information.Handle Errors.
YOU ARE NOT THE USER.
Who?Tasks, not ToolsTerminology
You Are Not The User
Users are not programmers.
Customers might not be users.
Tasks, Not Tools
“Techies” use tools.
Everyone else does tasks.
Understand Your User
MentalImplementati
onModel
Understand Your User
UserSystemEfficiency
Terminology
Fam
iliar
Words Phrases ConceptsJargon
YOU ARE NOT THE USER.
Who?Tasks, not ToolsTerminology
RECAP
BE CONSISTENT.
ExpectationsReal WorldPlatform
Expectations
Same = sameDifferent = different
Real World
Existing expertiseNatural,
logical order
Real World
PlatformHuman Interface Guidelines
–FAA Human Factors Design Standard
–GNOME/KDE Human Interface Guidelines
–Windows User Experience Interaction Guidelines
–Apple Human Interface Guidelines
Platform
Platform
BE CONSISTENT.
ExpectationsReal WorldPlatform
RECAP
COMMUNICATE SYSTEM STATUS.
Timely feedbackUser empowerment Visually obvious
Feedback
Action Reaction
Acknowledge Input
Time (sec)
UI Feels...
0.1 Instantaneous
1 Responsive
10 Slow
Source: http://www.useit.com/papers/responsetime.ht
ml
Acknowledge Input
Time (sec)
UI Feels...
0.1 Instantaneous
1 Responsive
10 Slow
Source: http://www.useit.com/papers/responsetime.ht
ml
Acknowledge Input
Time (sec)
UI Feels...
0.1 Instantaneous
1 Responsive
10 Slow
Source: http://www.useit.com/papers/responsetime.ht
ml
Feel In Control
Hide latencyEmpower the user
Visually Apparent
Avoid invisible navigation
Visually Apparent
COMMUNICATE SYSTEM STATUS.
Timely feedbackUser empowermentVisually obvious
RECAP
DESIGN INFORMATION.
ReadabilityAestheticsCustomization
THIS IS AN EXAMPLE OF
HOW DIFFICULT IT IS TO SCAN
CENTERED TEXT IN ALL CAPS
Readability
Legibility–Font style–Font size–Body text
What to show...
Legibility–Font style–Font size–Body text
What to show...
SerifSans serif
MonospaceDecorative
Readability
Aesthetic Design
OrganizedMinimalist
Leave it out
Color
Color is infoRed vs. green
Vischeck.com
Color
Color is infoRed vs. green
Vischeck.com
Color
Color is infoRed vs. green
Vischeck.com
Customization
User profilesDesign decisions
Allowed?
DESIGN INFORMATION.
ReadabilityAestheticsCustomization
RECAP
HANDLE ERRORS.
UnderstandableReversibleForgiving
Understandable
ComprehensiblePlain language
Understandable
ComprehensiblePlain language
Reversible
FixableFamiliar path
Reversible
InspireExploration
Forgiving
Don’t lose workProtect their feet
Design for user errors
HANDLE ERRORS.
UnderstandableReversibleForgiving
RECAP
USABILITY 101
You Are Not The User.Be Consistent.Communicate System Status.Design Information.Handle Errors.
RECAP
QUESTIONS?Thanks!