1 / 62

How to Give Good UI!?

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”

kenna
Download Presentation

How to Give Good UI!?

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. How to Give Good UI!? • Wayne Weibel • Interface/Web/Drupal Developer • LII / Legal Information Institute

  2. 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”

  3. Why Another Usability Talk? • Debunk the Buzz Words • UI vs. UX vs. Usability

  4. Why Another Usability Talk? • Debunk the Buzz Words • UI vs. UX vs. Usability • Interface [ UI ]

  5. Why Another Usability Talk? • Debunk the Buzz Words • UI vs. UX vs. Usability • Interface [ UI ] • Experience [ UX ]

  6. theoatmeal.com theoatmeal.com

  7. theoatmeal.com Jim Crow Museum theoatmeal.com

  8. Why Another Usability Talk? • Debunk the Buzz Words • UI vs. UX vs. Usability • Interface [ UI ] • Experience [ UX ] • Usability

  9. Usability is NOT ... • Design

  10. Usability is NOT ... • Design • Programming

  11. Usability is NOT ... } • Design • Programming • Accessibility affects Usability

  12. Usability is NOT ... } • Design • Programming • Accessibility • Marketing affects Usability

  13. Usability is NOT ... } • Design • Programming • Accessibility • Marketing • Marketing affects Usability

  14. Usability is NOT ... } • Design • Programming • Accessibility • Marketing • Marketing • did I mention ... Marketing affects Usability

  15. 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

  16. 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

  17. How about some examples: • University of Chicago - Flu VaccinationMalcolm Gladwell’s Tipping Point • NASA Space Pen10 years and $12 Billion dollars

  18. 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:

  19. theoatmeal.com

  20. Rules of Thumb • Jakob Nielsen - useit.com • Don Norman => Nielsen/Norman Group - nngroup.com • 10 Heuristics for Usability with Rolf Molich

  21. 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

  22. On The Internet • Section 508 • Workforce Investment Act of 1998 • 21st Century Communications and Video Accessibility Act of 2010

  23. On The Internet • Section 508 ... • Guides (not rules) • W3C Accessibility • Web Content Accessibility Guidelines 2.0 • WebAIM (Accessibility In Mind)

  24. On The Internet • Section 508 ... • Guides ... • Tools • Visicheck (color blindness check)

  25. Color Blindness how about some numbers • Protanopia/Deuteranopia= red/green • Tritanopia= blue/yellow (rare) • ~ 10% Males • < 0.5% Females

  26. Color Blindness how about some numbers • Protanopia/Deuteranopia= red/green • Tritanopia= blue/yellow (rare) • ~ 10% Males • < 0.5% Females • ~ 5% of populationor 1 in 20 • 1000 ~= 50 people

  27. On The Internet • Section 508 ... • Guides ... • Tools • Visicheck (color blindness check) • UI Patterns (examples and forum) • Dead Link Checker (lots of em)

  28. Usability Artifacts • Personas == Stakeholders / User Groups- primary, secondary, tertiary

  29. Usability Artifacts • Personas == Stakeholders / User Groups- primary, secondary, tertiary • use proper names • give personal traits • what reason to use interface • scenario/schema of use

  30. Usability Artifacts • Personas == Stakeholders / User Groups- primary, secondary, tertiary • Wireframes- fancy word for sketches

  31. Usability Artifacts • Personas == Stakeholders / User Groups- primary, secondary, tertiary • Wireframes- fancy word for sketches • Prototypes- even just glue and paper, stub out functions

  32. 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

  33. User Testing • ANYone can do it (yes, even you!)

  34. User Testing • ANYone can do it (yes, even you!) • You set the cost (depending on data) *

  35. User Testing • ANYone can do it (yes, even you!) • You set the cost (depending on data) * • 30 - 60 min; more often == less time needed

  36. 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

  37. 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

More Related