of 71 /71
Warum Usability? Einfache Nutzerführung an Praxisbeispielen

Typo3 Barcamp Usability Gesetze

Embed Size (px)

Citation preview

Page 1: Typo3 Barcamp Usability Gesetze

Warum Usability?Einfache Nutzerführung an Praxisbeispielen

Page 2: Typo3 Barcamp Usability Gesetze

Kurz zu mir - „Hi ich bin Chris!“

Christian Kleemann BBA Marketing / Winfo in Jena Berlin Userlutions / RapidUsertests Usability-Consultant Blogging Beatboxing & Gaming

Page 3: Typo3 Barcamp Usability Gesetze

Folgen schlechter Usability

Page 4: Typo3 Barcamp Usability Gesetze
Page 5: Typo3 Barcamp Usability Gesetze

250 Mitarbeiter

27 Masken

220 Tage

18€ Stunde

Page 6: Typo3 Barcamp Usability Gesetze

Was passiert bei 10 Sekunden

Zeitersparnis pro Maske?

Page 7: Typo3 Barcamp Usability Gesetze

74.000 €

Page 8: Typo3 Barcamp Usability Gesetze

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

Page 9: Typo3 Barcamp Usability Gesetze

516.000

Page 10: Typo3 Barcamp Usability Gesetze

!!!!

Motorischen Aufwand verringern

!!!

!!!!

Lernaufwand verringern

!!!

!!!!

Wichtiges hervorheben

!!!

!!!!

Komplexität reduzieren

!!!

Page 11: Typo3 Barcamp Usability Gesetze

!!!!

Motorischen Aufwand verringern

!!!

!!!!

Lernaufwand verringern

!!!

!!!!

Wichtiges hervorheben

!!!

!!!!

Komplexität reduzieren

!!!

Page 12: Typo3 Barcamp Usability Gesetze

„Make it simple, but significant.“Don Draper

MAV

Page 13: Typo3 Barcamp Usability Gesetze

Die Dauer ein Ziel zu treffen, hängt von der Distanz und der Objektgröße ab.

MAV Fitt’s Law

Page 14: Typo3 Barcamp Usability Gesetze

Fitt’s LawMAV

Wenn Elemente oft kurz nacheinander bedient werden, sollten diese dicht nebeneinander platziert werden.

Page 15: Typo3 Barcamp Usability Gesetze
Page 16: Typo3 Barcamp Usability Gesetze
Page 17: Typo3 Barcamp Usability Gesetze
Page 18: Typo3 Barcamp Usability Gesetze

Hohe Nutzungsqualität zeigt sich wenig

an der Oberfläche einer Software?

Page 19: Typo3 Barcamp Usability Gesetze

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

Page 20: Typo3 Barcamp Usability Gesetze

Default-EinstellungenMAV

Page 21: Typo3 Barcamp Usability Gesetze

!!!!

Motorischen Aufwand verringern

!!!

!!!!

Lernaufwand verringern

!!!

!!!!

Wichtiges hervorheben

!!!

!!!!

Komplexität reduzieren

!!!

Page 22: Typo3 Barcamp Usability Gesetze

„Make it work!“Tim Gunn

LAV

Page 23: Typo3 Barcamp Usability Gesetze

LAV Metaphern schaffen

Page 24: Typo3 Barcamp Usability Gesetze

LAV Metaphern schaffen

Page 25: Typo3 Barcamp Usability Gesetze

LAV Metaphern schaffen

Kill the Hamburger Icon?

Page 26: Typo3 Barcamp Usability Gesetze

Die wichtigste Konsistenz ist Konsistenz mit Nutzererwartungen.

Konsistenz erzeugenLAV

Page 27: Typo3 Barcamp Usability Gesetze

Was erwartet Ihr?

Konsistenz erzeugenLAV

Page 28: Typo3 Barcamp Usability Gesetze

Die wichtigste Konsistenz ist Konsistenz mit Nutzererwartungen!

Konsistenz erzeugenLAV

Page 29: Typo3 Barcamp Usability Gesetze

Die wichtigste Konsistenz ist Konsistenz mit Nutzererwartungen.

Konsistenz erzeugenLAV

Page 30: Typo3 Barcamp Usability Gesetze

Existierende Methodensets/Konventionen nutzen.

Konsistenz erzeugenLAV

Page 33: Typo3 Barcamp Usability Gesetze

!!!!

Motorischen Aufwand verringern

!!!

!!!!

Lernaufwand verringern

!!!

!!!!

Wichtiges hervorheben

!!!

!!!!

Komplexität reduzieren

!!!

Page 34: Typo3 Barcamp Usability Gesetze

WH

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

Page 35: Typo3 Barcamp Usability Gesetze

WH Visuelle Hierarchie

Zentrale Informationen hervorheben

Page 36: Typo3 Barcamp Usability Gesetze

Zentrale Informationen so hervorheben, dass sie automatisch wahrgenommen werden.

WH Salienz

Page 37: Typo3 Barcamp Usability Gesetze

Aufmerksamkeitsverteilung am Bildschirm

WH

40%

25%

20%

15%

Salienz

Page 38: Typo3 Barcamp Usability Gesetze

Zentrale Informationen so hervorheben, dass sie automatisch wahrgenommen werden.

WH Salienz

Page 39: Typo3 Barcamp Usability Gesetze

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

WH Affordance

Page 40: Typo3 Barcamp Usability Gesetze

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

WH Affordance

Page 41: Typo3 Barcamp Usability Gesetze

!!!!

Motorischen Aufwand verringern

!!!

!!!!

Lernaufwand verringern

!!!

!!!!

Wichtiges hervorheben

!!!

!!!!

Komplexität reduzieren

!!!

Page 42: Typo3 Barcamp Usability Gesetze

KR

Page 43: Typo3 Barcamp Usability Gesetze

KR Layout-Komplexität verringern

70

Page 44: Typo3 Barcamp Usability Gesetze

KR Layout-Komplexität verringern

Page 45: Typo3 Barcamp Usability Gesetze

KR Layout-Komplexität verringern

Page 46: Typo3 Barcamp Usability Gesetze

Wahrgenommene Komplexität ist abhängig von den Zeilen und Spalten des Layouts.

KR Layout-Komplexität verringern

Page 47: Typo3 Barcamp Usability Gesetze

KR Layout-Komplexität verringern

Page 48: Typo3 Barcamp Usability Gesetze

KR Gruppierungen verwenden

Page 49: Typo3 Barcamp Usability Gesetze

KR Gruppierungen verwenden

Page 50: Typo3 Barcamp Usability Gesetze

KR Gruppierungen verwenden

Page 51: Typo3 Barcamp Usability Gesetze

KR Gruppierungen verwenden

Page 52: Typo3 Barcamp Usability Gesetze

KR Schrittweises enthüllen

Page 53: Typo3 Barcamp Usability Gesetze

KR Schrittweises enthüllen

5Schritte

Page 54: Typo3 Barcamp Usability Gesetze

KR Schrittweises enthüllenSchrittweises enthüllen

Quelle: Infografik Checkout Report l konversationskraft

Page 55: Typo3 Barcamp Usability Gesetze

KR Schrittweises enthüllen

Page 56: Typo3 Barcamp Usability Gesetze

KR Schrittweises enthüllen

Page 57: Typo3 Barcamp Usability Gesetze

KR Feedback geben

15%Quelle: Infografik Checkout Report l konversationskraft

Page 58: Typo3 Barcamp Usability Gesetze

KR Feedback geben - Passworteingabe

Page 59: Typo3 Barcamp Usability Gesetze

KR Feedback geben - Passworteingabe

Page 60: Typo3 Barcamp Usability Gesetze

KR

Usabilityguy

!

Feedback geben - Passworteingabe

Page 61: Typo3 Barcamp Usability Gesetze

KR

Usabilityguy

Fehlermeldung: „Das Passwort muss mindestens 1 Zahl enthalten“

Feedback geben - Passworteingabe

Page 62: Typo3 Barcamp Usability Gesetze

KR

Usabilityguy1

!

Feedback geben - Passworteingabe

Page 63: Typo3 Barcamp Usability Gesetze

KR

Usabilityguy1

Fehlermeldung: „Das Passwort muss mindestens 1 Sonderzeichen enthalten.“

Feedback geben - Passworteingabe

Page 64: Typo3 Barcamp Usability Gesetze

KR

Usabilityguy1%!

!

Feedback geben - Passworteingabe

Page 65: Typo3 Barcamp Usability Gesetze

KR

Usabilityguy1%!

Fehlermeldung: „Keine Leerzeichen oder % oder ~ < >;“

Feedback geben - Passworteingabe

Page 66: Typo3 Barcamp Usability Gesetze

KR

Usabilityguy123!!!

!

Feedback geben - Passworteingabe

Page 67: Typo3 Barcamp Usability Gesetze

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

Page 68: Typo3 Barcamp Usability Gesetze

KR Feedback geben - Passworteingabe

Regeln anzeigen Eingaben anzeigen

Stärkemesser anzeigen

Page 69: Typo3 Barcamp Usability Gesetze

Konzentrieren auf wesentliche Use-Cases

KR Minimalismus

Page 70: Typo3 Barcamp Usability Gesetze

!!!!

Motorischen Aufwand verringern

!!!

!!!!

Lernaufwand verringern

!!!

!!!!

Wichtiges hervorheben

!!!

!!!!

Komplexität reduzieren

!!!

Fazit

Page 71: Typo3 Barcamp Usability Gesetze

„Gute Usability entsteht durch die richtigen Fragen, Einfühlungsvermögen und explorativem Ausprobieren.“

Christopher Möhle - Votum