Warum Usability?
Einfache Nutzerführung an Praxisbeispielen
Kurz zu mir - „Hi ich bin Chris!“
Christian Kleemann
BBA Marketing / Winfo in Jena
Berlin
Userlutions / RapidUsertests
Usa...
Folgen schlechter Usability
250
Mitarbeiter
27
Masken
220
Tage
18€
Stunde
Was passiert bei
10 Sekunden
Zeitersparnis pro
Maske?
74.000 €
Erhöhte Kosten bei nachträglicher
Behebung von Usability-Problemen
516.000
!
!
!
!
Motorischen Aufwand
verringern
!
!
!
!
!
!
!
Lernaufwand
verringern
!
!
!
!
!
!
!
Wichtiges
hervorheben
!
!
!
!
!
...
!
!
!
!
Motorischen Aufwand
verringern
!
!
!
!
!
!
!
Lernaufwand
verringern
!
!
!
!
!
!
!
Wichtiges
hervorheben
!
!
!
!
!
...
„Make it simple,
but significant.“
Don Draper
MAV
Die Dauer ein Ziel zu treffen, hängt von
der Distanz und der Objektgröße ab.
MAV Fitt’s Law
Fitt’s LawMAV
Wenn Elemente oft kurz nacheinander bedient werden,
sollten diese dicht nebeneinander platziert werden.
Hohe
Nutzungsqualität
zeigt sich wenig
an der Oberfläche
einer Software?
Hohe Nutzungsqualität zeigt sich wenig
an der Oberfläche einer Software!
Default-EinstellungenMAV
!
!
!
!
Motorischen Aufwand
verringern
!
!
!
!
!
!
!
Lernaufwand
verringern
!
!
!
!
!
!
!
Wichtiges
hervorheben
!
!
!
!
!
...
„Make it work!“
Tim Gunn
LAV
LAV Metaphern schaffen
LAV Metaphern schaffen
LAV Metaphern schaffen
Kill the Hamburger Icon?
Die wichtigste Konsistenz ist Konsistenz
mit Nutzererwartungen.
Konsistenz erzeugenLAV
Was erwartet Ihr?
Konsistenz erzeugenLAV
Die wichtigste Konsistenz ist Konsistenz
mit Nutzererwartungen!
Konsistenz erzeugenLAV
Die wichtigste Konsistenz ist Konsistenz
mit Nutzererwartungen.
Konsistenz erzeugenLAV
Existierende Methodensets/
Konventionen nutzen.
Konsistenz erzeugenLAV
Konventionen berücksichtigen
Quelle: eResult Imagery III Erwartungskonforme Webseitengestaltung
LAV
Konventionen leben
Quelle: eResult Imagery VI Erwartungskonforme Webseitengestaltung
LAV
!
!
!
!
Motorischen Aufwand
verringern
!
!
!
!
!
!
!
Lernaufwand
verringern
!
!
!
!
!
!
!
Wichtiges
hervorheben
!
!
!
!
!
...
WH
„Don't just tell,
show them.“Jesse Marlow
WH Visuelle Hierarchie
Zentrale Informationen hervorheben
Zentrale Informationen so hervorheben, dass sie
automatisch wahrgenommen werden.
WH Salienz
Aufmerksamkeitsverteilung am Bildschirm
WH
40%
25%
20%
15%
Salienz
Zentrale Informationen so hervorheben, dass sie
automatisch wahrgenommen werden.
WH Salienz
Objekte so gestalten, dass dem Nutzer klar ist,
wie er sie zu bedienen hat.
WH Affordance
Objekte so gestalten, dass dem Nutzer klar ist,
wie er sie zu bedienen hat.
WH Affordance
!
!
!
!
Motorischen Aufwand
verringern
!
!
!
!
!
!
!
Lernaufwand
verringern
!
!
!
!
!
!
!
Wichtiges
hervorheben
!
!
!
!
!
...
KR
KR Layout-Komplexität verringern
70
KR Layout-Komplexität verringern
KR Layout-Komplexität verringern
Wahrgenommene Komplexität ist abhängig von
den Zeilen und Spalten des Layouts.
KR Layout-Komplexität verringern
KR Layout-Komplexität verringern
KR Gruppierungen verwenden
KR Gruppierungen verwenden
KR Gruppierungen verwenden
KR Gruppierungen verwenden
KR Schrittweises enthüllen
KR Schrittweises enthüllen
5Schritte
KR Schrittweises enthüllenSchrittweises enthüllen
Quelle: Infografik Checkout Report l konversationskraft
KR Schrittweises enthüllen
KR Schrittweises enthüllen
KR Feedback geben
15%
Quelle: Infografik Checkout Report l konversationskraft
KR Feedback geben - Passworteingabe
KR Feedback geben - Passworteingabe
KR
Usabilityguy
!
Feedback geben - Passworteingabe
KR
Usabilityguy
Fehlermeldung: „Das Passwort muss
mindestens 1 Zahl enthalten“
Feedback geben - Passworteingabe
KR
Usabilityguy1
!
Feedback geben - Passworteingabe
KR
Usabilityguy1
Fehlermeldung: „Das Passwort muss
mindestens 1 Sonderzeichen enthalten.“
Feedback geben - Passworteingabe
KR
Usabilityguy1%!
!
Feedback geben - Passworteingabe
KR
Usabilityguy1%!
Fehlermeldung: „Keine Leerzeichen oder %
oder ~ < >;“
Feedback geben - Passworteingabe
KR
Usabilityguy123!!!
!
Feedback geben - Passworteingabe
KR
!
Usabilityguy123!!!
Fehlermeldung: „Das Passwort darf keine
aufsteigende oder absteigende Buchstaben-
bzw. Zahlenfolge...
KR Feedback geben - Passworteingabe
Regeln anzeigen
Eingaben anzeigen
Stärkemesser anzeigen
Konzentrieren auf wesentliche Use-Cases
KR Minimalismus
!
!
!
!
Motorischen Aufwand
verringern
!
!
!
!
!
!
!
Lernaufwand
verringern
!
!
!
!
!
!
!
Wichtiges
hervorheben
!
!
!
!
!
...
„Gute Usability entsteht durch die richtigen Fragen,
Einfühlungsvermögen und explorativem Ausprobieren.“
Christopher Möhle...
Typo3 Barcamp Usability Gesetze
Typo3 Barcamp Usability Gesetze
Typo3 Barcamp Usability Gesetze
Typo3 Barcamp Usability Gesetze
Nächste SlideShare
Wird geladen in …5
×

Typo3 Barcamp Usability Gesetze

1.144 Aufrufe

Veröffentlicht am

Warum Usability? Einfach Nutzerführung an Praxisbeispielen.
Best practices und bad practices. An einfachen Richtlinien zeige ich, wie man Nutzer bei der Bedienung unterstützen kann.
Bei Frage oder wenn ihr nähere Informationen braucht, dann schreibt mir gerne :)!
https://about.me/chriscloverman

Veröffentlicht in: Internet
0 Kommentare
2 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
1.144
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
73
Aktionen
Geteilt
0
Downloads
2
Kommentare
0
Gefällt mir
2
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Typo3 Barcamp Usability Gesetze

  1. 1. Warum Usability? Einfache Nutzerführung 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. Erhöhte Kosten bei nachträglicher Behebung von Usability-Problemen
  8. 8. 516.000
  9. 9. ! ! ! ! Motorischen Aufwand verringern ! ! ! ! ! ! ! Lernaufwand verringern ! ! ! ! ! ! ! Wichtiges hervorheben ! ! ! ! ! ! ! Komplexität reduzieren ! ! !
  10. 10. ! ! ! ! Motorischen Aufwand verringern ! ! ! ! ! ! ! Lernaufwand verringern ! ! ! ! ! ! ! Wichtiges hervorheben ! ! ! ! ! ! ! Komplexität reduzieren ! ! !
  11. 11. „Make it simple, but significant.“ Don Draper MAV
  12. 12. Die Dauer ein Ziel zu treffen, hängt von der Distanz und der Objektgröße ab. MAV Fitt’s Law
  13. 13. Fitt’s LawMAV Wenn Elemente oft kurz nacheinander bedient werden, sollten diese dicht nebeneinander platziert werden.
  14. 14. Hohe Nutzungsqualität zeigt sich wenig an der Oberfläche einer Software?
  15. 15. Hohe Nutzungsqualität zeigt sich wenig an der Oberfläche einer Software!
  16. 16. Default-EinstellungenMAV
  17. 17. ! ! ! ! Motorischen Aufwand verringern ! ! ! ! ! ! ! Lernaufwand verringern ! ! ! ! ! ! ! Wichtiges hervorheben ! ! ! ! ! ! ! Komplexität 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 berücksichtigen 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 ! ! ! ! ! ! ! Komplexität 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 ! ! ! ! ! ! ! Komplexität reduzieren ! ! !
  38. 38. KR
  39. 39. KR Layout-Komplexität verringern 70
  40. 40. KR Layout-Komplexität verringern
  41. 41. KR Layout-Komplexität verringern
  42. 42. Wahrgenommene Komplexität ist abhängig von den Zeilen und Spalten des Layouts. KR Layout-Komplexität verringern
  43. 43. KR Layout-Komplexität 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 enthüllen
  49. 49. KR Schrittweises enthüllen 5Schritte
  50. 50. KR Schrittweises enthüllenSchrittweises enthüllen Quelle: Infografik Checkout Report l konversationskraft
  51. 51. KR Schrittweises enthüllen
  52. 52. KR Schrittweises enthüllen
  53. 53. KR Feedback geben 15% Quelle: Infografik 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 Stärkemesser anzeigen
  65. 65. Konzentrieren auf wesentliche Use-Cases KR Minimalismus
  66. 66. ! ! ! ! Motorischen Aufwand verringern ! ! ! ! ! ! ! Lernaufwand verringern ! ! ! ! ! ! ! Wichtiges hervorheben ! ! ! ! ! ! ! Komplexität reduzieren ! ! ! Fazit
  67. 67. „Gute Usability entsteht durch die richtigen Fragen, Einfühlungsvermögen und explorativem Ausprobieren.“ Christopher Möhle - Votum

×