how to give good ui!?
DESCRIPTION
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” - PowerPoint PPT PresentationTRANSCRIPT
How to Give Good UI!?
Wayne Weibel
Interface/Web/Drupal DeveloperLII / 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
Jim Crow Museum
theoatmeal.com
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}affectsUsability
Usability is NOT ...
•Design
•Programming
•Accessibility
•Marketing
}affectsUsability
Usability is NOT ...
•Design
•Programming
•Accessibility
•Marketing
•Marketing
}affectsUsability
Usability is NOT ...
•Design
•Programming
•Accessibility
•Marketing
•Marketing
•did I mention ... Marketing
}affectsUsability
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 VaccinationMalcolm Gladwell’s Tipping Point
•NASA Space Pen10 years and $12 Billion dollars
How about some examples:
•University of Chicago - Flu VaccinationMalcolm Gladwell’s Tipping Point
•NASA Space Pen10 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• Flexibility
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
• Protanopia/Deuteranopia= red/green
• Tritanopia= blue/yellow (rare)
• ~ 10% Males
• < 0.5% Females
how about some numbers
Color Blindness
• Protanopia/Deuteranopia= red/green
• Tritanopia= blue/yellow (rare)
• ~ 10% Males
• < 0.5% Females
• ~ 5% of populationor 1 in 20
• 1000 ~= 50 people
how about some numbers
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 watch
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.”