Typo3 Barcamp Usability Gesetze
-
Upload
chrisitan-kleemann -
Category
Internet
-
view
361 -
download
4
Transcript of Typo3 Barcamp Usability Gesetze
![Page 1: Typo3 Barcamp Usability Gesetze](https://reader034.fdocument.pub/reader034/viewer/2022042608/55c41605bb61eb26058b4604/html5/thumbnails/1.jpg)
Warum Usability?Einfache Nutzerführung an Praxisbeispielen
![Page 2: Typo3 Barcamp Usability Gesetze](https://reader034.fdocument.pub/reader034/viewer/2022042608/55c41605bb61eb26058b4604/html5/thumbnails/2.jpg)
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](https://reader034.fdocument.pub/reader034/viewer/2022042608/55c41605bb61eb26058b4604/html5/thumbnails/3.jpg)
Folgen schlechter Usability
![Page 4: Typo3 Barcamp Usability Gesetze](https://reader034.fdocument.pub/reader034/viewer/2022042608/55c41605bb61eb26058b4604/html5/thumbnails/4.jpg)
![Page 5: Typo3 Barcamp Usability Gesetze](https://reader034.fdocument.pub/reader034/viewer/2022042608/55c41605bb61eb26058b4604/html5/thumbnails/5.jpg)
250 Mitarbeiter
27 Masken
220 Tage
18€ Stunde
![Page 6: Typo3 Barcamp Usability Gesetze](https://reader034.fdocument.pub/reader034/viewer/2022042608/55c41605bb61eb26058b4604/html5/thumbnails/6.jpg)
Was passiert bei 10 Sekunden
Zeitersparnis pro Maske?
![Page 7: Typo3 Barcamp Usability Gesetze](https://reader034.fdocument.pub/reader034/viewer/2022042608/55c41605bb61eb26058b4604/html5/thumbnails/7.jpg)
74.000 €
![Page 8: Typo3 Barcamp Usability Gesetze](https://reader034.fdocument.pub/reader034/viewer/2022042608/55c41605bb61eb26058b4604/html5/thumbnails/8.jpg)
Erhöhte Kosten bei nachträglicher Behebung von Usability-Problemen
![Page 9: Typo3 Barcamp Usability Gesetze](https://reader034.fdocument.pub/reader034/viewer/2022042608/55c41605bb61eb26058b4604/html5/thumbnails/9.jpg)
516.000
![Page 10: Typo3 Barcamp Usability Gesetze](https://reader034.fdocument.pub/reader034/viewer/2022042608/55c41605bb61eb26058b4604/html5/thumbnails/10.jpg)
!!!!
Motorischen Aufwand verringern
!!!
!!!!
Lernaufwand verringern
!!!
!!!!
Wichtiges hervorheben
!!!
!!!!
Komplexität reduzieren
!!!
![Page 11: Typo3 Barcamp Usability Gesetze](https://reader034.fdocument.pub/reader034/viewer/2022042608/55c41605bb61eb26058b4604/html5/thumbnails/11.jpg)
!!!!
Motorischen Aufwand verringern
!!!
!!!!
Lernaufwand verringern
!!!
!!!!
Wichtiges hervorheben
!!!
!!!!
Komplexität reduzieren
!!!
![Page 12: Typo3 Barcamp Usability Gesetze](https://reader034.fdocument.pub/reader034/viewer/2022042608/55c41605bb61eb26058b4604/html5/thumbnails/12.jpg)
„Make it simple, but significant.“Don Draper
MAV
![Page 13: Typo3 Barcamp Usability Gesetze](https://reader034.fdocument.pub/reader034/viewer/2022042608/55c41605bb61eb26058b4604/html5/thumbnails/13.jpg)
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](https://reader034.fdocument.pub/reader034/viewer/2022042608/55c41605bb61eb26058b4604/html5/thumbnails/14.jpg)
Fitt’s LawMAV
Wenn Elemente oft kurz nacheinander bedient werden, sollten diese dicht nebeneinander platziert werden.
![Page 15: Typo3 Barcamp Usability Gesetze](https://reader034.fdocument.pub/reader034/viewer/2022042608/55c41605bb61eb26058b4604/html5/thumbnails/15.jpg)
![Page 16: Typo3 Barcamp Usability Gesetze](https://reader034.fdocument.pub/reader034/viewer/2022042608/55c41605bb61eb26058b4604/html5/thumbnails/16.jpg)
![Page 17: Typo3 Barcamp Usability Gesetze](https://reader034.fdocument.pub/reader034/viewer/2022042608/55c41605bb61eb26058b4604/html5/thumbnails/17.jpg)
![Page 18: Typo3 Barcamp Usability Gesetze](https://reader034.fdocument.pub/reader034/viewer/2022042608/55c41605bb61eb26058b4604/html5/thumbnails/18.jpg)
Hohe Nutzungsqualität zeigt sich wenig
an der Oberfläche einer Software?
![Page 19: Typo3 Barcamp Usability Gesetze](https://reader034.fdocument.pub/reader034/viewer/2022042608/55c41605bb61eb26058b4604/html5/thumbnails/19.jpg)
Hohe Nutzungsqualität zeigt sich wenig an der Oberfläche einer Software!
![Page 20: Typo3 Barcamp Usability Gesetze](https://reader034.fdocument.pub/reader034/viewer/2022042608/55c41605bb61eb26058b4604/html5/thumbnails/20.jpg)
Default-EinstellungenMAV
![Page 21: Typo3 Barcamp Usability Gesetze](https://reader034.fdocument.pub/reader034/viewer/2022042608/55c41605bb61eb26058b4604/html5/thumbnails/21.jpg)
!!!!
Motorischen Aufwand verringern
!!!
!!!!
Lernaufwand verringern
!!!
!!!!
Wichtiges hervorheben
!!!
!!!!
Komplexität reduzieren
!!!
![Page 22: Typo3 Barcamp Usability Gesetze](https://reader034.fdocument.pub/reader034/viewer/2022042608/55c41605bb61eb26058b4604/html5/thumbnails/22.jpg)
„Make it work!“Tim Gunn
LAV
![Page 23: Typo3 Barcamp Usability Gesetze](https://reader034.fdocument.pub/reader034/viewer/2022042608/55c41605bb61eb26058b4604/html5/thumbnails/23.jpg)
LAV Metaphern schaffen
![Page 24: Typo3 Barcamp Usability Gesetze](https://reader034.fdocument.pub/reader034/viewer/2022042608/55c41605bb61eb26058b4604/html5/thumbnails/24.jpg)
LAV Metaphern schaffen
![Page 25: Typo3 Barcamp Usability Gesetze](https://reader034.fdocument.pub/reader034/viewer/2022042608/55c41605bb61eb26058b4604/html5/thumbnails/25.jpg)
LAV Metaphern schaffen
Kill the Hamburger Icon?
![Page 26: Typo3 Barcamp Usability Gesetze](https://reader034.fdocument.pub/reader034/viewer/2022042608/55c41605bb61eb26058b4604/html5/thumbnails/26.jpg)
Die wichtigste Konsistenz ist Konsistenz mit Nutzererwartungen.
Konsistenz erzeugenLAV
![Page 27: Typo3 Barcamp Usability Gesetze](https://reader034.fdocument.pub/reader034/viewer/2022042608/55c41605bb61eb26058b4604/html5/thumbnails/27.jpg)
Was erwartet Ihr?
Konsistenz erzeugenLAV
![Page 28: Typo3 Barcamp Usability Gesetze](https://reader034.fdocument.pub/reader034/viewer/2022042608/55c41605bb61eb26058b4604/html5/thumbnails/28.jpg)
Die wichtigste Konsistenz ist Konsistenz mit Nutzererwartungen!
Konsistenz erzeugenLAV
![Page 29: Typo3 Barcamp Usability Gesetze](https://reader034.fdocument.pub/reader034/viewer/2022042608/55c41605bb61eb26058b4604/html5/thumbnails/29.jpg)
Die wichtigste Konsistenz ist Konsistenz mit Nutzererwartungen.
Konsistenz erzeugenLAV
![Page 30: Typo3 Barcamp Usability Gesetze](https://reader034.fdocument.pub/reader034/viewer/2022042608/55c41605bb61eb26058b4604/html5/thumbnails/30.jpg)
Existierende Methodensets/Konventionen nutzen.
Konsistenz erzeugenLAV
![Page 31: Typo3 Barcamp Usability Gesetze](https://reader034.fdocument.pub/reader034/viewer/2022042608/55c41605bb61eb26058b4604/html5/thumbnails/31.jpg)
Konventionen berücksichtigen
Quelle: eResult Imagery III Erwartungskonforme Webseitengestaltung
LAV
![Page 32: Typo3 Barcamp Usability Gesetze](https://reader034.fdocument.pub/reader034/viewer/2022042608/55c41605bb61eb26058b4604/html5/thumbnails/32.jpg)
Konventionen leben
Quelle: eResult Imagery VI Erwartungskonforme Webseitengestaltung
LAV
![Page 33: Typo3 Barcamp Usability Gesetze](https://reader034.fdocument.pub/reader034/viewer/2022042608/55c41605bb61eb26058b4604/html5/thumbnails/33.jpg)
!!!!
Motorischen Aufwand verringern
!!!
!!!!
Lernaufwand verringern
!!!
!!!!
Wichtiges hervorheben
!!!
!!!!
Komplexität reduzieren
!!!
![Page 34: Typo3 Barcamp Usability Gesetze](https://reader034.fdocument.pub/reader034/viewer/2022042608/55c41605bb61eb26058b4604/html5/thumbnails/34.jpg)
WH
„Don't just tell, show them.“Jesse Marlow
![Page 35: Typo3 Barcamp Usability Gesetze](https://reader034.fdocument.pub/reader034/viewer/2022042608/55c41605bb61eb26058b4604/html5/thumbnails/35.jpg)
WH Visuelle Hierarchie
Zentrale Informationen hervorheben
![Page 36: Typo3 Barcamp Usability Gesetze](https://reader034.fdocument.pub/reader034/viewer/2022042608/55c41605bb61eb26058b4604/html5/thumbnails/36.jpg)
Zentrale Informationen so hervorheben, dass sie automatisch wahrgenommen werden.
WH Salienz
![Page 37: Typo3 Barcamp Usability Gesetze](https://reader034.fdocument.pub/reader034/viewer/2022042608/55c41605bb61eb26058b4604/html5/thumbnails/37.jpg)
Aufmerksamkeitsverteilung am Bildschirm
WH
40%
25%
20%
15%
Salienz
![Page 38: Typo3 Barcamp Usability Gesetze](https://reader034.fdocument.pub/reader034/viewer/2022042608/55c41605bb61eb26058b4604/html5/thumbnails/38.jpg)
Zentrale Informationen so hervorheben, dass sie automatisch wahrgenommen werden.
WH Salienz
![Page 39: Typo3 Barcamp Usability Gesetze](https://reader034.fdocument.pub/reader034/viewer/2022042608/55c41605bb61eb26058b4604/html5/thumbnails/39.jpg)
Objekte so gestalten, dass dem Nutzer klar ist, wie er sie zu bedienen hat.
WH Affordance
![Page 40: Typo3 Barcamp Usability Gesetze](https://reader034.fdocument.pub/reader034/viewer/2022042608/55c41605bb61eb26058b4604/html5/thumbnails/40.jpg)
Objekte so gestalten, dass dem Nutzer klar ist, wie er sie zu bedienen hat.
WH Affordance
![Page 41: Typo3 Barcamp Usability Gesetze](https://reader034.fdocument.pub/reader034/viewer/2022042608/55c41605bb61eb26058b4604/html5/thumbnails/41.jpg)
!!!!
Motorischen Aufwand verringern
!!!
!!!!
Lernaufwand verringern
!!!
!!!!
Wichtiges hervorheben
!!!
!!!!
Komplexität reduzieren
!!!
![Page 42: Typo3 Barcamp Usability Gesetze](https://reader034.fdocument.pub/reader034/viewer/2022042608/55c41605bb61eb26058b4604/html5/thumbnails/42.jpg)
KR
![Page 43: Typo3 Barcamp Usability Gesetze](https://reader034.fdocument.pub/reader034/viewer/2022042608/55c41605bb61eb26058b4604/html5/thumbnails/43.jpg)
KR Layout-Komplexität verringern
70
![Page 44: Typo3 Barcamp Usability Gesetze](https://reader034.fdocument.pub/reader034/viewer/2022042608/55c41605bb61eb26058b4604/html5/thumbnails/44.jpg)
KR Layout-Komplexität verringern
![Page 45: Typo3 Barcamp Usability Gesetze](https://reader034.fdocument.pub/reader034/viewer/2022042608/55c41605bb61eb26058b4604/html5/thumbnails/45.jpg)
KR Layout-Komplexität verringern
![Page 46: Typo3 Barcamp Usability Gesetze](https://reader034.fdocument.pub/reader034/viewer/2022042608/55c41605bb61eb26058b4604/html5/thumbnails/46.jpg)
Wahrgenommene Komplexität ist abhängig von den Zeilen und Spalten des Layouts.
KR Layout-Komplexität verringern
![Page 47: Typo3 Barcamp Usability Gesetze](https://reader034.fdocument.pub/reader034/viewer/2022042608/55c41605bb61eb26058b4604/html5/thumbnails/47.jpg)
KR Layout-Komplexität verringern
![Page 48: Typo3 Barcamp Usability Gesetze](https://reader034.fdocument.pub/reader034/viewer/2022042608/55c41605bb61eb26058b4604/html5/thumbnails/48.jpg)
KR Gruppierungen verwenden
![Page 49: Typo3 Barcamp Usability Gesetze](https://reader034.fdocument.pub/reader034/viewer/2022042608/55c41605bb61eb26058b4604/html5/thumbnails/49.jpg)
KR Gruppierungen verwenden
![Page 50: Typo3 Barcamp Usability Gesetze](https://reader034.fdocument.pub/reader034/viewer/2022042608/55c41605bb61eb26058b4604/html5/thumbnails/50.jpg)
KR Gruppierungen verwenden
![Page 51: Typo3 Barcamp Usability Gesetze](https://reader034.fdocument.pub/reader034/viewer/2022042608/55c41605bb61eb26058b4604/html5/thumbnails/51.jpg)
KR Gruppierungen verwenden
![Page 52: Typo3 Barcamp Usability Gesetze](https://reader034.fdocument.pub/reader034/viewer/2022042608/55c41605bb61eb26058b4604/html5/thumbnails/52.jpg)
KR Schrittweises enthüllen
![Page 53: Typo3 Barcamp Usability Gesetze](https://reader034.fdocument.pub/reader034/viewer/2022042608/55c41605bb61eb26058b4604/html5/thumbnails/53.jpg)
KR Schrittweises enthüllen
5Schritte
![Page 54: Typo3 Barcamp Usability Gesetze](https://reader034.fdocument.pub/reader034/viewer/2022042608/55c41605bb61eb26058b4604/html5/thumbnails/54.jpg)
KR Schrittweises enthüllenSchrittweises enthüllen
Quelle: Infografik Checkout Report l konversationskraft
![Page 55: Typo3 Barcamp Usability Gesetze](https://reader034.fdocument.pub/reader034/viewer/2022042608/55c41605bb61eb26058b4604/html5/thumbnails/55.jpg)
KR Schrittweises enthüllen
![Page 56: Typo3 Barcamp Usability Gesetze](https://reader034.fdocument.pub/reader034/viewer/2022042608/55c41605bb61eb26058b4604/html5/thumbnails/56.jpg)
KR Schrittweises enthüllen
![Page 57: Typo3 Barcamp Usability Gesetze](https://reader034.fdocument.pub/reader034/viewer/2022042608/55c41605bb61eb26058b4604/html5/thumbnails/57.jpg)
KR Feedback geben
15%Quelle: Infografik Checkout Report l konversationskraft
![Page 58: Typo3 Barcamp Usability Gesetze](https://reader034.fdocument.pub/reader034/viewer/2022042608/55c41605bb61eb26058b4604/html5/thumbnails/58.jpg)
KR Feedback geben - Passworteingabe
![Page 59: Typo3 Barcamp Usability Gesetze](https://reader034.fdocument.pub/reader034/viewer/2022042608/55c41605bb61eb26058b4604/html5/thumbnails/59.jpg)
KR Feedback geben - Passworteingabe
![Page 60: Typo3 Barcamp Usability Gesetze](https://reader034.fdocument.pub/reader034/viewer/2022042608/55c41605bb61eb26058b4604/html5/thumbnails/60.jpg)
KR
Usabilityguy
!
Feedback geben - Passworteingabe
![Page 61: Typo3 Barcamp Usability Gesetze](https://reader034.fdocument.pub/reader034/viewer/2022042608/55c41605bb61eb26058b4604/html5/thumbnails/61.jpg)
KR
Usabilityguy
Fehlermeldung: „Das Passwort muss mindestens 1 Zahl enthalten“
Feedback geben - Passworteingabe
![Page 62: Typo3 Barcamp Usability Gesetze](https://reader034.fdocument.pub/reader034/viewer/2022042608/55c41605bb61eb26058b4604/html5/thumbnails/62.jpg)
KR
Usabilityguy1
!
Feedback geben - Passworteingabe
![Page 63: Typo3 Barcamp Usability Gesetze](https://reader034.fdocument.pub/reader034/viewer/2022042608/55c41605bb61eb26058b4604/html5/thumbnails/63.jpg)
KR
Usabilityguy1
Fehlermeldung: „Das Passwort muss mindestens 1 Sonderzeichen enthalten.“
Feedback geben - Passworteingabe
![Page 64: Typo3 Barcamp Usability Gesetze](https://reader034.fdocument.pub/reader034/viewer/2022042608/55c41605bb61eb26058b4604/html5/thumbnails/64.jpg)
KR
Usabilityguy1%!
!
Feedback geben - Passworteingabe
![Page 65: Typo3 Barcamp Usability Gesetze](https://reader034.fdocument.pub/reader034/viewer/2022042608/55c41605bb61eb26058b4604/html5/thumbnails/65.jpg)
KR
Usabilityguy1%!
Fehlermeldung: „Keine Leerzeichen oder % oder ~ < >;“
Feedback geben - Passworteingabe
![Page 66: Typo3 Barcamp Usability Gesetze](https://reader034.fdocument.pub/reader034/viewer/2022042608/55c41605bb61eb26058b4604/html5/thumbnails/66.jpg)
KR
Usabilityguy123!!!
!
Feedback geben - Passworteingabe
![Page 67: Typo3 Barcamp Usability Gesetze](https://reader034.fdocument.pub/reader034/viewer/2022042608/55c41605bb61eb26058b4604/html5/thumbnails/67.jpg)
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](https://reader034.fdocument.pub/reader034/viewer/2022042608/55c41605bb61eb26058b4604/html5/thumbnails/68.jpg)
KR Feedback geben - Passworteingabe
Regeln anzeigen Eingaben anzeigen
Stärkemesser anzeigen
![Page 69: Typo3 Barcamp Usability Gesetze](https://reader034.fdocument.pub/reader034/viewer/2022042608/55c41605bb61eb26058b4604/html5/thumbnails/69.jpg)
Konzentrieren auf wesentliche Use-Cases
KR Minimalismus
![Page 70: Typo3 Barcamp Usability Gesetze](https://reader034.fdocument.pub/reader034/viewer/2022042608/55c41605bb61eb26058b4604/html5/thumbnails/70.jpg)
!!!!
Motorischen Aufwand verringern
!!!
!!!!
Lernaufwand verringern
!!!
!!!!
Wichtiges hervorheben
!!!
!!!!
Komplexität reduzieren
!!!
Fazit
![Page 71: Typo3 Barcamp Usability Gesetze](https://reader034.fdocument.pub/reader034/viewer/2022042608/55c41605bb61eb26058b4604/html5/thumbnails/71.jpg)
„Gute Usability entsteht durch die richtigen Fragen, Einfühlungsvermögen und explorativem Ausprobieren.“
Christopher Möhle - Votum