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

1. Warum Usability?
Einfache Nutzerführung an Praxisbeispielen

2. Kurz zu mir - „Hi ich bin Chris!“
Christian Kleemann
BBA Marketing / Winfo in Jena
Berlin
Userlutions / RapidUsertests
Usability-Consultant
Blogging
Beatboxing & Gaming

3. Folgen schlechter Usability

5. 250
Mitarbeiter
27
Masken
220
Tage
18€
Stunde

6. Was passiert bei
10 Sekunden
Zeitersparnis pro
Maske?

7. 74.000 €

8. Erhöhte Kosten bei nachträglicher
Behebung von Usability-Problemen

9. 516.000

10. !
!
!
!
Motorischen Aufwand
verringern
!
!
!
!
!
!
!
Lernaufwand
verringern
!
!
!
!
!
!
!
Wichtiges
hervorheben
!
!
!
!
!
!
!
Komplexität
reduzieren
!
!
!

11. !
!
!
!
Motorischen Aufwand
verringern
!
!
!
!
!
!
!
Lernaufwand
verringern
!
!
!
!
!
!
!
Wichtiges
hervorheben
!
!
!
!
!
!
!
Komplexität
reduzieren
!
!
!

12. „Make it simple,
but significant.“
Don Draper
MAV

13. Die Dauer ein Ziel zu treffen, hängt von
der Distanz und der Objektgröße ab.
MAV Fitt’s Law

14. Fitt’s LawMAV
Wenn Elemente oft kurz nacheinander bedient werden,
sollten diese dicht nebeneinander platziert werden.

18. Hohe
Nutzungsqualität
zeigt sich wenig
an der Oberfläche
einer Software?

19. Hohe Nutzungsqualität zeigt sich wenig
an der Oberfläche einer Software!

20. Default-EinstellungenMAV

21. !
!
!
!
Motorischen Aufwand
verringern
!
!
!
!
!
!
!
Lernaufwand
verringern
!
!
!
!
!
!
!
Wichtiges
hervorheben
!
!
!
!
!
!
!
Komplexität
reduzieren
!
!
!

22. „Make it work!“
Tim Gunn
LAV

23. LAV Metaphern schaffen

24. LAV Metaphern schaffen

25. LAV Metaphern schaffen
Kill the Hamburger Icon?

26. Die wichtigste Konsistenz ist Konsistenz
mit Nutzererwartungen.
Konsistenz erzeugenLAV

27. Was erwartet Ihr?
Konsistenz erzeugenLAV

28. Die wichtigste Konsistenz ist Konsistenz
mit Nutzererwartungen!
Konsistenz erzeugenLAV

29. Die wichtigste Konsistenz ist Konsistenz
mit Nutzererwartungen.
Konsistenz erzeugenLAV

30. Existierende Methodensets/
Konventionen nutzen.
Konsistenz erzeugenLAV

31. Konventionen berücksichtigen
Quelle: eResult Imagery III Erwartungskonforme Webseitengestaltung
LAV

32. Konventionen leben
Quelle: eResult Imagery VI Erwartungskonforme Webseitengestaltung
LAV

33. !
!
!
!
Motorischen Aufwand
verringern
!
!
!
!
!
!
!
Lernaufwand
verringern
!
!
!
!
!
!
!
Wichtiges
hervorheben
!
!
!
!
!
!
!
Komplexität
reduzieren
!
!
!

34. WH
„Don't just tell,
show them.“Jesse Marlow

35. WH Visuelle Hierarchie
Zentrale Informationen hervorheben

36. Zentrale Informationen so hervorheben, dass sie
automatisch wahrgenommen werden.
WH Salienz

37. Aufmerksamkeitsverteilung am Bildschirm
WH
40%
25%
20%
15%
Salienz

38. Zentrale Informationen so hervorheben, dass sie
automatisch wahrgenommen werden.
WH Salienz

39. Objekte so gestalten, dass dem Nutzer klar ist,
wie er sie zu bedienen hat.
WH Affordance

40. Objekte so gestalten, dass dem Nutzer klar ist,
wie er sie zu bedienen hat.
WH Affordance

41. !
!
!
!
Motorischen Aufwand
verringern
!
!
!
!
!
!
!
Lernaufwand
verringern
!
!
!
!
!
!
!
Wichtiges
hervorheben
!
!
!
!
!
!
!
Komplexität
reduzieren
!
!
!

42. KR

43. KR Layout-Komplexität verringern
70

44. KR Layout-Komplexität verringern

45. KR Layout-Komplexität verringern

46. Wahrgenommene Komplexität ist abhängig von
den Zeilen und Spalten des Layouts.
KR Layout-Komplexität verringern

47. KR Layout-Komplexität verringern

48. KR Gruppierungen verwenden

49. KR Gruppierungen verwenden

50. KR Gruppierungen verwenden

51. KR Gruppierungen verwenden

52. KR Schrittweises enthüllen

53. KR Schrittweises enthüllen
5Schritte

54. KR Schrittweises enthüllenSchrittweises enthüllen
Quelle: Infografik Checkout Report l konversationskraft

55. KR Schrittweises enthüllen

56. KR Schrittweises enthüllen

57. KR Feedback geben
15%
Quelle: Infografik Checkout Report l konversationskraft

58. KR Feedback geben - Passworteingabe

59. KR Feedback geben - Passworteingabe

60. KR
Usabilityguy
!
Feedback geben - Passworteingabe

61. KR
Usabilityguy
Fehlermeldung: „Das Passwort muss
mindestens 1 Zahl enthalten“
Feedback geben - Passworteingabe

62. KR
Usabilityguy1
!
Feedback geben - Passworteingabe

63. KR
Usabilityguy1
Fehlermeldung: „Das Passwort muss
mindestens 1 Sonderzeichen enthalten.“
Feedback geben - Passworteingabe

64. KR
Usabilityguy1%!
!
Feedback geben - Passworteingabe

65. KR
Usabilityguy1%!
Fehlermeldung: „Keine Leerzeichen oder %
oder ~ < >;“
Feedback geben - Passworteingabe

66. KR
Usabilityguy123!!!
!
Feedback geben - Passworteingabe

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

68. KR Feedback geben - Passworteingabe
Regeln anzeigen
Eingaben anzeigen
Stärkemesser anzeigen

69. Konzentrieren auf wesentliche Use-Cases
KR Minimalismus

70. !
!
!
!
Motorischen Aufwand
verringern
!
!
!
!
!
!
!
Lernaufwand
verringern
!
!
!
!
!
!
!
Wichtiges
hervorheben
!
!
!
!
!
!
!
Komplexität
reduzieren
!
!
!
Fazit

71. „Gute Usability entsteht durch die richtigen Fragen,
Einfühlungsvermögen und explorativem Ausprobieren.“
Christopher Möhle - Votum