Typo3 Barcamp Usability Gesetze

Embed Size (px)

Text of Typo3 Barcamp Usability Gesetze

  1. 1. Warum Usability? Einfache Nutzerfhrung an Praxisbeispielen
  2. 2. Kurz zu mir - Hi ich bin Chris! Christian Kleemann BBA Marketing / Winfo in Jena Berlin Userlutions / RapidUsertests Usability-Consultant Blogging Beatboxing & Gaming
  3. 3. Folgen schlechter Usability
  4. 4. 250 Mitarbeiter 27 Masken 220 Tage 18 Stunde
  5. 5. Was passiert bei 10 Sekunden Zeitersparnis pro Maske?
  6. 6. 74.000
  7. 7. Erhhte Kosten bei nachtrglicher Behebung von Usability-Problemen
  8. 8. 516.000
  9. 9. ! ! ! ! Motorischen Aufwand verringern ! ! ! ! ! ! ! Lernaufwand verringern ! ! ! ! ! ! ! Wichtiges hervorheben ! ! ! ! ! ! ! Komplexitt reduzieren ! ! !
  10. 10. ! ! ! ! Motorischen Aufwand verringern ! ! ! ! ! ! ! Lernaufwand verringern ! ! ! ! ! ! ! Wichtiges hervorheben ! ! ! ! ! ! ! Komplexitt reduzieren ! ! !
  11. 11. Make it simple, but signicant. Don Draper MAV
  12. 12. Die Dauer ein Ziel zu treffen, hngt von der Distanz und der Objektgre ab. MAV Fitts Law
  13. 13. Fitts LawMAV Wenn Elemente oft kurz nacheinander bedient werden, sollten diese dicht nebeneinander platziert werden.
  14. 14. Hohe Nutzungsqualitt zeigt sich wenig an der Oberche einer Software?
  15. 15. Hohe Nutzungsqualitt zeigt sich wenig an der Oberche einer Software!
  16. 16. Default-EinstellungenMAV
  17. 17. ! ! ! ! Motorischen Aufwand verringern ! ! ! ! ! ! ! Lernaufwand verringern ! ! ! ! ! ! ! Wichtiges hervorheben ! ! ! ! ! ! ! Komplexitt reduzieren ! ! !
  18. 18. Make it work! Tim Gunn LAV
  19. 19. LAV Metaphern schaffen
  20. 20. LAV Metaphern schaffen
  21. 21. LAV Metaphern schaffen Kill the Hamburger Icon?
  22. 22. Die wichtigste Konsistenz ist Konsistenz mit Nutzererwartungen. Konsistenz erzeugenLAV
  23. 23. Was erwartet Ihr? Konsistenz erzeugenLAV
  24. 24. Die wichtigste Konsistenz ist Konsistenz mit Nutzererwartungen! Konsistenz erzeugenLAV
  25. 25. Die wichtigste Konsistenz ist Konsistenz mit Nutzererwartungen. Konsistenz erzeugenLAV
  26. 26. Existierende Methodensets/ Konventionen nutzen. Konsistenz erzeugenLAV
  27. 27. Konventionen bercksichtigen Quelle: eResult Imagery III Erwartungskonforme Webseitengestaltung LAV
  28. 28. Konventionen leben Quelle: eResult Imagery VI Erwartungskonforme Webseitengestaltung LAV
  29. 29. ! ! ! ! Motorischen Aufwand verringern ! ! ! ! ! ! ! Lernaufwand verringern ! ! ! ! ! ! ! Wichtiges hervorheben ! ! ! ! ! ! ! Komplexitt reduzieren ! ! !
  30. 30. WH Don't just tell, show them.Jesse Marlow
  31. 31. WH Visuelle Hierarchie Zentrale Informationen hervorheben
  32. 32. Zentrale Informationen so hervorheben, dass sie automatisch wahrgenommen werden. WH Salienz
  33. 33. Aufmerksamkeitsverteilung am Bildschirm WH 40% 25% 20% 15% Salienz
  34. 34. Zentrale Informationen so hervorheben, dass sie automatisch wahrgenommen werden. WH Salienz
  35. 35. Objekte so gestalten, dass dem Nutzer klar ist, wie er sie zu bedienen hat. WH Affordance
  36. 36. Objekte so gestalten, dass dem Nutzer klar ist, wie er sie zu bedienen hat. WH Affordance
  37. 37. ! ! ! ! Motorischen Aufwand verringern ! ! ! ! ! ! ! Lernaufwand verringern ! ! ! ! ! ! ! Wichtiges hervorheben ! ! ! ! ! ! ! Komplexitt reduzieren ! ! !
  38. 38. KR
  39. 39. KR Layout-Komplexitt verringern 70
  40. 40. KR Layout-Komplexitt verringern
  41. 41. KR Layout-Komplexitt verringern
  42. 42. Wahrgenommene Komplexitt ist abhngig von den Zeilen und Spalten des Layouts. KR Layout-Komplexitt verringern
  43. 43. KR Layout-Komplexitt verringern
  44. 44. KR Gruppierungen verwenden
  45. 45. KR Gruppierungen verwenden
  46. 46. KR Gruppierungen verwenden
  47. 47. KR Gruppierungen verwenden
  48. 48. KR Schrittweises enthllen
  49. 49. KR Schrittweises enthllen 5Schritte
  50. 50. KR Schrittweises enthllenSchrittweises enthllen Quelle: Infograk Checkout Report l konversationskraft
  51. 51. KR Schrittweises enthllen
  52. 52. KR Schrittweises enthllen
  53. 53. KR Feedback geben 15% Quelle: Infograk Checkout Report l konversationskraft
  54. 54. KR Feedback geben - Passworteingabe
  55. 55. KR Feedback geben - Passworteingabe
  56. 56. KR Usabilityguy ! Feedback geben - Passworteingabe
  57. 57. KR Usabilityguy Fehlermeldung: Das Passwort muss mindestens 1 Zahl enthalten Feedback geben - Passworteingabe
  58. 58. KR Usabilityguy1 ! Feedback geben - Passworteingabe
  59. 59. KR Usabilityguy1 Fehlermeldung: Das Passwort muss mindestens 1 Sonderzeichen enthalten. Feedback geben - Passworteingabe
  60. 60. KR Usabilityguy1%! ! Feedback geben - Passworteingabe
  61. 61. KR Usabilityguy1%! Fehlermeldung: Keine Leerzeichen oder % oder ~ < >; Feedback geben - Passworteingabe
  62. 62. KR Usabilityguy123!!! ! Feedback geben - Passworteingabe
  63. 63. KR ! Usabilityguy123!!! Fehlermeldung: Das Passwort darf keine aufsteigende oder absteigende Buchstaben- bzw. Zahlenfolge enthalten. Feedback geben - Passworteingabe Quelle: Usability in Germany l www.mint.com
  64. 64. KR Feedback geben - Passworteingabe Regeln anzeigen Eingaben anzeigen Strkemesser anzeigen
  65. 65. Konzentrieren auf wesentliche Use-Cases KR Minimalismus
  66. 66. ! ! ! ! Motorischen Aufwand verringern ! ! ! ! ! ! ! Lernaufwand verringern ! ! ! ! ! ! ! Wichtiges hervorheben ! ! ! ! ! ! ! Komplexitt reduzieren ! ! ! Fazit
  67. 67. Gute Usability entsteht durch die richtigen Fragen, Einfhlungsvermgen und explorativem Ausprobieren. Christopher Mhle - Votum