How to Give Good
UI!?
Wayne Weibel
Interface/Web/Drupal Developer
LII / Legal Information Institute
Why Another Usability Talk?
• Debunk the Buzz Words
• “This is not good enough: we need
the USP for the UX not the UI”
• “The user experience of the site is
increasing the usability of users to
interact through our interface”
Why Another Usability Talk?
• Debunk the Buzz Words
• UI vs. UX vs. Usability
Why Another Usability Talk?
• Debunk the Buzz Words
• UI vs. UX vs. Usability
• Interface [ UI ]
Why Another Usability Talk?
• Debunk the Buzz Words
• UI vs. UX vs. Usability
• Interface [ UI ]
• Experience [ UX ]
theoatmeal.com
theoatmeal.com
theoatmeal.com
Jim Crow Museum
theoatmeal.com
Why Another Usability Talk?
• Debunk the Buzz Words
• UI vs. UX vs. Usability
• Interface [ UI ]
• Experience [ UX ]
• Usability
Usability is NOT ...
• Design
Usability is NOT ...
• Design
• Programming
Usability is NOT ...
• Design
• Programming
• Accessibility
affects
Usability
Usability is NOT ...
• Design
• Programming
• Accessibility
• Marketing
affects
Usability
Usability is NOT ...
• Design
• Programming
• Accessibility
• Marketing
• Marketing
affects
Usability
Usability is NOT ...
• Design
affects
• Programming
Usability
• Accessibility
• Marketing
• Marketing
• did I mention ... Marketing
Usability IS ...
• “Make everything as simple as possible,
but not simpler” - Einstein
• “Whenever possible, substitute
constructions out of known entities for
inferences to unknown entities.” Bertrand Russel, Occam’s razor
• K.I.S.S
Usability IS ...
• “Make everything as simple as possible,
but not simpler” - Einstein
• “Whenever possible, substitute
constructions out of known entities for
inferences to unknown entities.” Bertrand Russel, Occam’s razor
• K.I.S.S = Keep It Simple Stupid
• ... optimizing a user’s ability to complete a
task
How about some examples:
• University of Chicago - Flu Vaccination
Malcolm Gladwell’s Tipping Point
• NASA Space Pen
10 years and $12 Billion dollars
How about some examples:
• University of Chicago - Flu Vaccination
Malcolm Gladwell’s Tipping Point
• NASA Space Pen
10 years and $12 Billion dollars
• The MOST usable interface:
theoatmeal.com
Rules of Thumb
• Jakob Nielsen - useit.com
• Don Norman
=> Nielsen/Norman Group nngroup.com
• 10 Heuristics for Usability with Rolf
Molich
Rules of Thumb
• Jakob Nielsen - useit.com
• Don Norman
=> Nielsen/Norman Group nngroup.com
• 10 Heuristics for Usability with Rolf
Molich
... boil down to 3 varieties:
•
•
Familiarity
Feedback
On The Internet
• Section 508
• Workforce Investment Act of 1998
• 21st Century Communications and
Video Accessibility Act of 2010
On The Internet
• Section 508 ...
• Guides (not rules)
• W3C Accessibility
• Web Content Accessibility Guidelines
2.0
• WebAIM (Accessibility In Mind)
On The Internet
• Section 508 ...
• Guides ...
• Tools
• Visicheck (color blindness check)
Color Blindness
how about some numbers
•
•
•
•
Protanopia/Deuteran
opia
= red/green
Tritanopia
= blue/yellow (rare)
~ 10% Males
< 0.5% Females
Color Blindness
how about some numbers
•
•
•
•
•
•
Protanopia/Deuteran
opia
= red/green
Tritanopia
= blue/yellow (rare)
~ 10% Males
< 0.5% Females
~ 5% of population
or 1 in 20
1000 ~= 50 people
On The Internet
• Section 508 ...
• Guides ...
• Tools
• Visicheck (color blindness check)
• UI Patterns (examples and forum)
• Dead Link Checker (lots of em)
Usability Artifacts
• Personas == Stakeholders / User Groups
- primary, secondary, tertiary
Usability Artifacts
• Personas == Stakeholders / User Groups
- primary, secondary, tertiary
• use proper names
• give personal traits
• what reason to use interface
• scenario/schema of use
Usability Artifacts
• Personas == Stakeholders / User Groups
- primary, secondary, tertiary
• Wireframes
- fancy word for sketches
Usability Artifacts
• Personas == Stakeholders / User Groups
- primary, secondary, tertiary
• Wireframes
- fancy word for sketches
• Prototypes
- even just glue and paper, stub out
functions
Usability Artifacts
• Personas
• Wireframes
• Prototypes
• Conceptual / Mental Models
• how the developer thinks it works
• how the system actually works
• how the user thinks it works
User Testing
• ANYone can do it (yes, even you!)
User Testing
• ANYone can do it (yes, even you!)
• You set the cost (depending on data) *
User Testing
• ANYone can do it (yes, even you!)
• You set the cost (depending on data) *
• 30 - 60 min; more often == less time
needed
User Testing
• ANYone can do it (yes, even you!)
• You set the cost (depending on data) *
• 30 - 60 min; more often == less time
needed
• One Catch - must have specific
tasks/features
User Testing
• ANYone can do it (yes, even you!)
• You set the cost (depending on data) *
• 30 - 60 min; more often == less time
needed
• One Catch - must have specific
tasks/features
• During Testing:
• Have designers and programmers
User Testing
•
•
•
•
•
•
ANYone can do it (yes, even you!)
You set the cost (depending on data) *
30 - 60 min; more often == less time needed
One Catch - must have specific tasks/features
During Testing:
•
•
Have designers and programmers watch
Encourage user to think out loud
* for you researchers ...
There Is No Spoon
• Usability is Highly Subjective
There Is No Spoon
• Usability is Highly Subjective
• Decide who is your audience, then build
to them
There Is No Spoon
• Usability is Highly Subjective
• Decide who is your audience, then build
to them
• Keep things familiar, but not identical
There Is No Spoon
• Usability is Highly Subjective
• Decide who is your audience, then build
to them
• Keep things familiar, but not identical
• Know when to break the design
There Is No Spoon
• Usability is Highly Subjective
• Decide who is your audience, then build
to them
• Keep things familiar, but not identical
• Know when to break the design
• Test Often
There Is No Spoon
• Usability is Highly Subjective
• Decide who is your audience, then build
to them
• Keep things familiar, but not identical
• Know when to break the design
• Test Often
“If you meet a Usability Expert, kill
him.”