Usability im
eCommerce
Der Nutzer im Mittelpunkt
Kurz zu mir
Christian Kleemann
BBA Marketing / Winfo in Jena
Berlin
Userlutions / RapidUsertests
Usability-Consultant
Blogging
Beatboxing & Gaming
516.000
Anzahl Onlineshops in
Deutschland
Quelle: Schätzung Internetworld
Folgen schlechter Usability
Interessante Produkte werden nur schwer/nicht gefunden
Nutzungsabbrüche während des Kaufvorgangs
Zuwachs Nutzerzahlen bleibt hinter Potential zurück
Weniger wiederkommende Besucher
Weniger Anmeldungen
Geringere Umsätze
Frustration beim Kunden
Mehr Supportaufwand (Telefon, Cat)
Erhöhte Kosten bei nachträglicher
Behebung von Usability-Problemen
„Make it simple,
but significant.“
Don Draper
!
!
!
!
Motorischen Aufwand
verringern
!
!
!
!
!
!
!
Lernaufwand
verringern
!
!
!
!
!
!
!
Wichtiges
hervorheben
!
!
!
!
!
!
!
Komplexität
reduzieren
!
!
!
!
!
!
!
Motorischen Aufwand
verringern
!
!
!
!
!
!
!
Lernaufwand
verringern
!
!
!
!
!
!
!
Wichtiges
hervorheben
!
!
!
!
!
!
!
Komplexität
reduzieren
!
!
!
„Design is not just
what it looks like and
feels like. Design is
how it works.“
MAV
Steve Jobs
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.
Default-EinstellungenMAV
Default-EinstellungenMAV
!
!
!
!
Motorischen Aufwand
verringern
!
!
!
!
!
!
!
Lernaufwand
verringern
!
!
!
!
!
!
!
Wichtiges
hervorheben
!
!
!
!
!
!
!
Komplexität
reduzieren
!
!
!
„Make it work!“
Tim Gunn
LAV
LAV Metaphern schaffen
LAV Metaphern schaffen
LAV Metaphern schaffen
LAV Metaphern schaffen
LAV Metaphern schaffen
Kill the Hamburger Icon?
zumeist ältere User (ü30)
sind nicht mit dem Icon
vertraut
Die wichtigste Konsistenz ist Konsistenz
mit Nutzererwartungen.
Konsistenz erzeugenLAV
Nutzer erwarten vom
Call-To-Action in
Slideshows eine
Weiterleitung
Die wichtigste Konsistenz ist Konsistenz
mit Nutzererwartungen.
Konsistenz erzeugenLAV
Keine Weiterleitung und
Anzeige des Fenstern
entspricht nicht den
gängigen Erwartungen
Konventionen berücksichtigen
Quelle: eResult Imagery III Erwartungskonforme Webseitengestaltung
LAV
eResult Studie, wo
Nutzer Funktionen
erwarten
Konventionen berücksichtigen
Quelle: eResult Imagery III Erwartungskonforme Webseitengestaltung
LAV
Konventionen berücksichtigenLAV
Konventionen berücksichtigenLAV
!
!
!
!
Motorischen Aufwand
verringern
!
!
!
!
!
!
!
Lernaufwand
verringern
!
!
!
!
!
!
!
Wichtiges
hervorheben
!
!
!
!
!
!
!
Komplexität
reduzieren
!
!
!
WH
„Don't just tell,
show them.“Jesse Marlow
Zentrale Informationen hervorheben
WH Visuelle Hierarchie
WH Visuelle Hierarchie
WH Visuelle Hierarchie
WH Visuelle Hierarchie
WH Visuelle Hierarchie
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
!
!
!
!
!
!
!
Komplexität
reduzieren
!
!
!
KR
KR Layout-Komplexität verringern
70Empfohlene Zeichenzahl
ohne Leerzeichen für
Texte pro Zeile
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
Logisch verknüpfte Informationen werden auch
visuell miteinander verknüpft.
KR Gruppierungen verwenden
sky detailseiten
KR Gruppierungen verwenden
KR Gruppierungen verwenden
KR Gruppierungen verwenden
KR Gruppierungen verwenden
KR Schrittweises enthüllen
KR Schrittweises enthüllen
KR Schrittweises enthüllen
5Schritte
Gängige Anzahl Schritte
im Checkout von der
Neukundenanmeldung
aus
KR Schrittweises enthüllenSchrittweises enthüllen
Quelle: Infografik Checkout Report l konversationskraft
KR Schrittweises enthüllen
KR Schrittweises enthüllen
KR Schrittweises enthüllen
KR Feedback geben
15%
Quelle: Infografik Checkout Report l konversationskraft
Anzahl Shops, die nach
Schritten im
Buchungsprozess
Feedback gibt
KR Inneren Dialog beachten
Informationen an relevanten Punkten geben und
innere Fragen abfangen.
KR Inneren Dialog beachten
Welche Informationen
sind für den Nutzer von
Bedeutung, wenn dieser
sich anmeldet?
KR Inneren Dialog beachten
Relevante Informationen
nicht suchen lassen,
sondern direkt zeigen
Konzentrieren auf wesentliche Use-Cases
KR Minimalismus
Geringe Anzahl an
Features stellt Großteil
der Nutzer schon
zufrieden. Auf
Kernfeatures und Usa-
Cases konzentrieren
!
!
!
!
Motorischen Aufwand
verringern
!
!
!
!
!
!
!
Lernaufwand
verringern
!
!
!
!
!
!
!
Wichtiges
hervorheben
!
!
!
!
!
!
!
Komplexität
reduzieren
!
!
!
Fazit
„Gute Web-Usability speist sich nicht aus fertigen,
tausendmal kopierten Konzepten, sondern
aus den richtigen Fragen, Einfühlungsvermögen und
explorativem Ausprobieren.“
Christopher Möhle - Votum

Usability im eCommerce