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
![Page 1: How to Give Good UI!?](https://reader036.vdocuments.net/reader036/viewer/2022081505/56815a9a550346895dc81639/html5/thumbnails/1.jpg)
How to Give Good UI!?
Wayne Weibel
Interface/Web/Drupal DeveloperLII / Legal Information Institute
![Page 2: How to Give Good UI!?](https://reader036.vdocuments.net/reader036/viewer/2022081505/56815a9a550346895dc81639/html5/thumbnails/2.jpg)
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”
![Page 3: How to Give Good UI!?](https://reader036.vdocuments.net/reader036/viewer/2022081505/56815a9a550346895dc81639/html5/thumbnails/3.jpg)
Why Another Usability Talk?
•Debunk the Buzz Words
•UI vs. UX vs. Usability
![Page 4: How to Give Good UI!?](https://reader036.vdocuments.net/reader036/viewer/2022081505/56815a9a550346895dc81639/html5/thumbnails/4.jpg)
Why Another Usability Talk?
•Debunk the Buzz Words
•UI vs. UX vs. Usability
•Interface [ UI ]
![Page 5: How to Give Good UI!?](https://reader036.vdocuments.net/reader036/viewer/2022081505/56815a9a550346895dc81639/html5/thumbnails/5.jpg)
![Page 6: How to Give Good UI!?](https://reader036.vdocuments.net/reader036/viewer/2022081505/56815a9a550346895dc81639/html5/thumbnails/6.jpg)
![Page 7: How to Give Good UI!?](https://reader036.vdocuments.net/reader036/viewer/2022081505/56815a9a550346895dc81639/html5/thumbnails/7.jpg)
Why Another Usability Talk?
•Debunk the Buzz Words
•UI vs. UX vs. Usability
•Interface [ UI ]
•Experience [ UX ]
![Page 8: How to Give Good UI!?](https://reader036.vdocuments.net/reader036/viewer/2022081505/56815a9a550346895dc81639/html5/thumbnails/8.jpg)
theoatmeal.com
theoatmeal.com
![Page 9: How to Give Good UI!?](https://reader036.vdocuments.net/reader036/viewer/2022081505/56815a9a550346895dc81639/html5/thumbnails/9.jpg)
Jim Crow Museum
theoatmeal.com
theoatmeal.com
![Page 10: How to Give Good UI!?](https://reader036.vdocuments.net/reader036/viewer/2022081505/56815a9a550346895dc81639/html5/thumbnails/10.jpg)
Why Another Usability Talk?
•Debunk the Buzz Words
•UI vs. UX vs. Usability
•Interface [ UI ]
•Experience [ UX ]
•Usability
![Page 11: How to Give Good UI!?](https://reader036.vdocuments.net/reader036/viewer/2022081505/56815a9a550346895dc81639/html5/thumbnails/11.jpg)
Usability is NOT ...
•Design
![Page 12: How to Give Good UI!?](https://reader036.vdocuments.net/reader036/viewer/2022081505/56815a9a550346895dc81639/html5/thumbnails/12.jpg)
Usability is NOT ...
•Design
•Programming
![Page 13: How to Give Good UI!?](https://reader036.vdocuments.net/reader036/viewer/2022081505/56815a9a550346895dc81639/html5/thumbnails/13.jpg)
Usability is NOT ...
•Design
•Programming
•Accessibility}affectsUsability
![Page 14: How to Give Good UI!?](https://reader036.vdocuments.net/reader036/viewer/2022081505/56815a9a550346895dc81639/html5/thumbnails/14.jpg)
Usability is NOT ...
•Design
•Programming
•Accessibility
•Marketing
}affectsUsability
![Page 15: How to Give Good UI!?](https://reader036.vdocuments.net/reader036/viewer/2022081505/56815a9a550346895dc81639/html5/thumbnails/15.jpg)
Usability is NOT ...
•Design
•Programming
•Accessibility
•Marketing
•Marketing
}affectsUsability
![Page 16: How to Give Good UI!?](https://reader036.vdocuments.net/reader036/viewer/2022081505/56815a9a550346895dc81639/html5/thumbnails/16.jpg)
Usability is NOT ...
•Design
•Programming
•Accessibility
•Marketing
•Marketing
•did I mention ... Marketing
}affectsUsability
![Page 17: How to Give Good UI!?](https://reader036.vdocuments.net/reader036/viewer/2022081505/56815a9a550346895dc81639/html5/thumbnails/17.jpg)
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
![Page 18: How to Give Good UI!?](https://reader036.vdocuments.net/reader036/viewer/2022081505/56815a9a550346895dc81639/html5/thumbnails/18.jpg)
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
![Page 19: How to Give Good UI!?](https://reader036.vdocuments.net/reader036/viewer/2022081505/56815a9a550346895dc81639/html5/thumbnails/19.jpg)
How about some examples:
•University of Chicago - Flu VaccinationMalcolm Gladwell’s Tipping Point
•NASA Space Pen10 years and $12 Billion dollars
![Page 20: How to Give Good UI!?](https://reader036.vdocuments.net/reader036/viewer/2022081505/56815a9a550346895dc81639/html5/thumbnails/20.jpg)
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:
![Page 21: How to Give Good UI!?](https://reader036.vdocuments.net/reader036/viewer/2022081505/56815a9a550346895dc81639/html5/thumbnails/21.jpg)
theoatmeal.com
![Page 22: How to Give Good UI!?](https://reader036.vdocuments.net/reader036/viewer/2022081505/56815a9a550346895dc81639/html5/thumbnails/22.jpg)
Rules of Thumb
•Jakob Nielsen - useit.com
•Don Norman => Nielsen/Norman Group - nngroup.com
•10 Heuristics for Usability with Rolf Molich
![Page 23: How to Give Good UI!?](https://reader036.vdocuments.net/reader036/viewer/2022081505/56815a9a550346895dc81639/html5/thumbnails/23.jpg)
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
![Page 24: How to Give Good UI!?](https://reader036.vdocuments.net/reader036/viewer/2022081505/56815a9a550346895dc81639/html5/thumbnails/24.jpg)
![Page 25: How to Give Good UI!?](https://reader036.vdocuments.net/reader036/viewer/2022081505/56815a9a550346895dc81639/html5/thumbnails/25.jpg)
![Page 26: How to Give Good UI!?](https://reader036.vdocuments.net/reader036/viewer/2022081505/56815a9a550346895dc81639/html5/thumbnails/26.jpg)
![Page 27: How to Give Good UI!?](https://reader036.vdocuments.net/reader036/viewer/2022081505/56815a9a550346895dc81639/html5/thumbnails/27.jpg)
![Page 28: How to Give Good UI!?](https://reader036.vdocuments.net/reader036/viewer/2022081505/56815a9a550346895dc81639/html5/thumbnails/28.jpg)
![Page 29: How to Give Good UI!?](https://reader036.vdocuments.net/reader036/viewer/2022081505/56815a9a550346895dc81639/html5/thumbnails/29.jpg)
On The Internet
•Section 508
•Workforce Investment Act of 1998
•21st Century Communications and Video Accessibility Act of 2010
![Page 30: How to Give Good UI!?](https://reader036.vdocuments.net/reader036/viewer/2022081505/56815a9a550346895dc81639/html5/thumbnails/30.jpg)
![Page 31: How to Give Good UI!?](https://reader036.vdocuments.net/reader036/viewer/2022081505/56815a9a550346895dc81639/html5/thumbnails/31.jpg)
![Page 32: How to Give Good UI!?](https://reader036.vdocuments.net/reader036/viewer/2022081505/56815a9a550346895dc81639/html5/thumbnails/32.jpg)
![Page 33: How to Give Good UI!?](https://reader036.vdocuments.net/reader036/viewer/2022081505/56815a9a550346895dc81639/html5/thumbnails/33.jpg)
![Page 34: How to Give Good UI!?](https://reader036.vdocuments.net/reader036/viewer/2022081505/56815a9a550346895dc81639/html5/thumbnails/34.jpg)
![Page 35: How to Give Good UI!?](https://reader036.vdocuments.net/reader036/viewer/2022081505/56815a9a550346895dc81639/html5/thumbnails/35.jpg)
On The Internet
•Section 508 ...
•Guides (not rules)
•W3C Accessibility
•Web Content Accessibility Guidelines 2.0
•WebAIM (Accessibility In Mind)
![Page 36: How to Give Good UI!?](https://reader036.vdocuments.net/reader036/viewer/2022081505/56815a9a550346895dc81639/html5/thumbnails/36.jpg)
On The Internet
•Section 508 ...
•Guides ...
•Tools
•Visicheck (color blindness check)
![Page 37: How to Give Good UI!?](https://reader036.vdocuments.net/reader036/viewer/2022081505/56815a9a550346895dc81639/html5/thumbnails/37.jpg)
Color Blindness
• Protanopia/Deuteranopia= red/green
• Tritanopia= blue/yellow (rare)
• ~ 10% Males
• < 0.5% Females
how about some numbers
![Page 38: How to Give Good UI!?](https://reader036.vdocuments.net/reader036/viewer/2022081505/56815a9a550346895dc81639/html5/thumbnails/38.jpg)
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
![Page 39: How to Give Good UI!?](https://reader036.vdocuments.net/reader036/viewer/2022081505/56815a9a550346895dc81639/html5/thumbnails/39.jpg)
On The Internet
•Section 508 ...
•Guides ...
•Tools
•Visicheck (color blindness check)
•UI Patterns (examples and forum)
•Dead Link Checker (lots of em)
![Page 40: How to Give Good UI!?](https://reader036.vdocuments.net/reader036/viewer/2022081505/56815a9a550346895dc81639/html5/thumbnails/40.jpg)
Usability Artifacts
•Personas == Stakeholders / User Groups- primary, secondary, tertiary
![Page 41: How to Give Good UI!?](https://reader036.vdocuments.net/reader036/viewer/2022081505/56815a9a550346895dc81639/html5/thumbnails/41.jpg)
Usability Artifacts
•Personas == Stakeholders / User Groups- primary, secondary, tertiary
•use proper names
•give personal traits
•what reason to use interface
•scenario/schema of use
![Page 42: How to Give Good UI!?](https://reader036.vdocuments.net/reader036/viewer/2022081505/56815a9a550346895dc81639/html5/thumbnails/42.jpg)
Usability Artifacts
•Personas == Stakeholders / User Groups- primary, secondary, tertiary
•Wireframes- fancy word for sketches
![Page 43: How to Give Good UI!?](https://reader036.vdocuments.net/reader036/viewer/2022081505/56815a9a550346895dc81639/html5/thumbnails/43.jpg)
Usability Artifacts
•Personas == Stakeholders / User Groups- primary, secondary, tertiary
•Wireframes- fancy word for sketches
•Prototypes- even just glue and paper, stub out functions
![Page 44: How to Give Good UI!?](https://reader036.vdocuments.net/reader036/viewer/2022081505/56815a9a550346895dc81639/html5/thumbnails/44.jpg)
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
![Page 45: How to Give Good UI!?](https://reader036.vdocuments.net/reader036/viewer/2022081505/56815a9a550346895dc81639/html5/thumbnails/45.jpg)
![Page 46: How to Give Good UI!?](https://reader036.vdocuments.net/reader036/viewer/2022081505/56815a9a550346895dc81639/html5/thumbnails/46.jpg)
User Testing
•ANYone can do it (yes, even you!)
![Page 47: How to Give Good UI!?](https://reader036.vdocuments.net/reader036/viewer/2022081505/56815a9a550346895dc81639/html5/thumbnails/47.jpg)
User Testing
•ANYone can do it (yes, even you!)
•You set the cost (depending on data) *
![Page 48: How to Give Good UI!?](https://reader036.vdocuments.net/reader036/viewer/2022081505/56815a9a550346895dc81639/html5/thumbnails/48.jpg)
User Testing
•ANYone can do it (yes, even you!)
•You set the cost (depending on data) *
•30 - 60 min; more often == less time needed
![Page 49: How to Give Good UI!?](https://reader036.vdocuments.net/reader036/viewer/2022081505/56815a9a550346895dc81639/html5/thumbnails/49.jpg)
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
![Page 50: How to Give Good UI!?](https://reader036.vdocuments.net/reader036/viewer/2022081505/56815a9a550346895dc81639/html5/thumbnails/50.jpg)
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
![Page 51: How to Give Good UI!?](https://reader036.vdocuments.net/reader036/viewer/2022081505/56815a9a550346895dc81639/html5/thumbnails/51.jpg)
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 ...
![Page 52: How to Give Good UI!?](https://reader036.vdocuments.net/reader036/viewer/2022081505/56815a9a550346895dc81639/html5/thumbnails/52.jpg)
![Page 53: How to Give Good UI!?](https://reader036.vdocuments.net/reader036/viewer/2022081505/56815a9a550346895dc81639/html5/thumbnails/53.jpg)
![Page 54: How to Give Good UI!?](https://reader036.vdocuments.net/reader036/viewer/2022081505/56815a9a550346895dc81639/html5/thumbnails/54.jpg)
![Page 55: How to Give Good UI!?](https://reader036.vdocuments.net/reader036/viewer/2022081505/56815a9a550346895dc81639/html5/thumbnails/55.jpg)
![Page 56: How to Give Good UI!?](https://reader036.vdocuments.net/reader036/viewer/2022081505/56815a9a550346895dc81639/html5/thumbnails/56.jpg)
There Is No Spoon
•Usability is Highly Subjective
![Page 57: How to Give Good UI!?](https://reader036.vdocuments.net/reader036/viewer/2022081505/56815a9a550346895dc81639/html5/thumbnails/57.jpg)
There Is No Spoon
•Usability is Highly Subjective
•Decide who is your audience, then build to them
![Page 58: How to Give Good UI!?](https://reader036.vdocuments.net/reader036/viewer/2022081505/56815a9a550346895dc81639/html5/thumbnails/58.jpg)
There Is No Spoon
•Usability is Highly Subjective
•Decide who is your audience, then build to them
•Keep things familiar, but not identical
![Page 59: How to Give Good UI!?](https://reader036.vdocuments.net/reader036/viewer/2022081505/56815a9a550346895dc81639/html5/thumbnails/59.jpg)
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
![Page 60: How to Give Good UI!?](https://reader036.vdocuments.net/reader036/viewer/2022081505/56815a9a550346895dc81639/html5/thumbnails/60.jpg)
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
![Page 61: How to Give Good UI!?](https://reader036.vdocuments.net/reader036/viewer/2022081505/56815a9a550346895dc81639/html5/thumbnails/61.jpg)
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.”
![Page 62: How to Give Good UI!?](https://reader036.vdocuments.net/reader036/viewer/2022081505/56815a9a550346895dc81639/html5/thumbnails/62.jpg)