Usability im
eCommerce
Der Nutzer im Mittelpunkt
Kurz zu mir
Christian Kleemann
BBA Marketing / Winfo in Jena
Berlin
Userlutions / RapidUsertests
Usability-Consultant
Blog...
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 Kaufvorgan...
Erhöhte Kosten bei nachträglicher
Behebung von Usability-Problemen
„Make it simple,
but significant.“
Don Draper
!
!
!
!
Motorischen Aufwand
verringern
!
!
!
!
!
!
!
Lernaufwand
verringern
!
!
!
!
!
!
!
Wichtiges
hervorheben
!
!
!
!
!
...
!
!
!
!
Motorischen Aufwand
verringern
!
!
!
!
!
!
!
Lernaufwand
verringern
!
!
!
!
!
!
!
Wichtiges
hervorheben
!
!
!
!
!
...
„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
!
!
!
!
!
...
„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 ...
Die wichtigste Konsistenz ist Konsistenz
mit Nutzererwartungen.
Konsistenz erzeugenLAV
Keine Weiterleitung und
Anzeige des...
Konventionen berücksichtigen
Quelle: eResult Imagery III Erwartungskonforme Webseitengestaltung
LAV
eResult Studie, wo
Nut...
Konventionen berücksichtigen
Quelle: eResult Imagery III Erwartungskonforme Webseitengestaltung
LAV
Konventionen berücksichtigenLAV
Konventionen berücksichtigenLAV
!
!
!
!
Motorischen Aufwand
verringern
!
!
!
!
!
!
!
Lernaufwand
verringern
!
!
!
!
!
!
!
Wichtiges
hervorheben
!
!
!
!
!
...
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
!
!
!
!
!
...
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
Buchungsp...
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
zufrie...
!
!
!
!
Motorischen Aufwand
verringern
!
!
!
!
!
!
!
Lernaufwand
verringern
!
!
!
!
!
!
!
Wichtiges
hervorheben
!
!
!
!
!
...
„Gute Web-Usability speist sich nicht aus fertigen,
tausendmal kopierten Konzepten, sondern
aus den richtigen Fragen, Einf...
Usability im eCommerce
Usability im eCommerce
Usability im eCommerce
Usability im eCommerce
Nächste SlideShare
Wird geladen in …5
×

Usability im eCommerce

1.055 Aufrufe

Veröffentlicht am

Usability Basics im eCommerce

Praxisbeispiele und Grundregeln für eine nutzerfreundliche Website-Gestaltung. Vorgetragen auf dem eCommerce Camp Jena 03/2015

Viele der Beispiele sind Untersuchungen aus meinen Nutzeranalysen bei userlutions.com unter Verwendung unseres Crowd-Testing-Tools rapidusertests.com

Ich habe die Folien mit ein paar Comments für mehr Input versehen. Bei Fragen könnt ihr mir auch gerne schreiben :)

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

Keine Downloads
Aufrufe
Aufrufe insgesamt
1.055
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
48
Aktionen
Geteilt
0
Downloads
9
Kommentare
0
Gefällt mir
2
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Usability im eCommerce

  1. 1. Usability im eCommerce Der Nutzer im Mittelpunkt
  2. 2. Kurz zu mir Christian Kleemann BBA Marketing / Winfo in Jena Berlin Userlutions / RapidUsertests Usability-Consultant Blogging Beatboxing & Gaming
  3. 3. 516.000 Anzahl Onlineshops in Deutschland Quelle: Schätzung Internetworld
  4. 4. 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)
  5. 5. Erhöhte Kosten bei nachträglicher Behebung von Usability-Problemen
  6. 6. „Make it simple, but significant.“ Don Draper
  7. 7. ! ! ! ! Motorischen Aufwand verringern ! ! ! ! ! ! ! Lernaufwand verringern ! ! ! ! ! ! ! Wichtiges hervorheben ! ! ! ! ! ! ! Komplexität reduzieren ! ! !
  8. 8. ! ! ! ! Motorischen Aufwand verringern ! ! ! ! ! ! ! Lernaufwand verringern ! ! ! ! ! ! ! Wichtiges hervorheben ! ! ! ! ! ! ! Komplexität reduzieren ! ! !
  9. 9. „Design is not just what it looks like and feels like. Design is how it works.“ MAV Steve Jobs
  10. 10. Die Dauer ein Ziel zu treffen, hängt von der Distanz und der Objektgröße ab. MAV Fitt’s Law
  11. 11. Fitt’s LawMAV Wenn Elemente oft kurz nacheinander bedient werden, sollten diese dicht nebeneinander platziert werden.
  12. 12. Default-EinstellungenMAV
  13. 13. Default-EinstellungenMAV
  14. 14. ! ! ! ! Motorischen Aufwand verringern ! ! ! ! ! ! ! Lernaufwand verringern ! ! ! ! ! ! ! Wichtiges hervorheben ! ! ! ! ! ! ! Komplexität reduzieren ! ! !
  15. 15. „Make it work!“ Tim Gunn LAV
  16. 16. LAV Metaphern schaffen
  17. 17. LAV Metaphern schaffen
  18. 18. LAV Metaphern schaffen
  19. 19. LAV Metaphern schaffen
  20. 20. LAV Metaphern schaffen Kill the Hamburger Icon? zumeist ältere User (ü30) sind nicht mit dem Icon vertraut
  21. 21. Die wichtigste Konsistenz ist Konsistenz mit Nutzererwartungen. Konsistenz erzeugenLAV Nutzer erwarten vom Call-To-Action in Slideshows eine Weiterleitung
  22. 22. Die wichtigste Konsistenz ist Konsistenz mit Nutzererwartungen. Konsistenz erzeugenLAV Keine Weiterleitung und Anzeige des Fenstern entspricht nicht den gängigen Erwartungen
  23. 23. Konventionen berücksichtigen Quelle: eResult Imagery III Erwartungskonforme Webseitengestaltung LAV eResult Studie, wo Nutzer Funktionen erwarten
  24. 24. Konventionen berücksichtigen Quelle: eResult Imagery III Erwartungskonforme Webseitengestaltung LAV
  25. 25. Konventionen berücksichtigenLAV
  26. 26. Konventionen berücksichtigenLAV
  27. 27. ! ! ! ! Motorischen Aufwand verringern ! ! ! ! ! ! ! Lernaufwand verringern ! ! ! ! ! ! ! Wichtiges hervorheben ! ! ! ! ! ! ! Komplexität reduzieren ! ! !
  28. 28. WH „Don't just tell, show them.“Jesse Marlow
  29. 29. Zentrale Informationen hervorheben WH Visuelle Hierarchie
  30. 30. WH Visuelle Hierarchie
  31. 31. WH Visuelle Hierarchie
  32. 32. WH Visuelle Hierarchie
  33. 33. WH Visuelle Hierarchie
  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 70Empfohlene Zeichenzahl ohne Leerzeichen für Texte pro Zeile
  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. Logisch verknüpfte Informationen werden auch visuell miteinander verknüpft. KR Gruppierungen verwenden sky detailseiten
  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
  50. 50. KR Schrittweises enthüllen 5Schritte Gängige Anzahl Schritte im Checkout von der Neukundenanmeldung aus
  51. 51. KR Schrittweises enthüllenSchrittweises enthüllen Quelle: Infografik Checkout Report l konversationskraft
  52. 52. KR Schrittweises enthüllen
  53. 53. KR Schrittweises enthüllen
  54. 54. KR Schrittweises enthüllen
  55. 55. KR Feedback geben 15% Quelle: Infografik Checkout Report l konversationskraft Anzahl Shops, die nach Schritten im Buchungsprozess Feedback gibt
  56. 56. KR Inneren Dialog beachten Informationen an relevanten Punkten geben und innere Fragen abfangen.
  57. 57. KR Inneren Dialog beachten Welche Informationen sind für den Nutzer von Bedeutung, wenn dieser sich anmeldet?
  58. 58. KR Inneren Dialog beachten Relevante Informationen nicht suchen lassen, sondern direkt zeigen
  59. 59. Konzentrieren auf wesentliche Use-Cases KR Minimalismus Geringe Anzahl an Features stellt Großteil der Nutzer schon zufrieden. Auf Kernfeatures und Usa- Cases konzentrieren
  60. 60. ! ! ! ! Motorischen Aufwand verringern ! ! ! ! ! ! ! Lernaufwand verringern ! ! ! ! ! ! ! Wichtiges hervorheben ! ! ! ! ! ! ! Komplexität reduzieren ! ! ! Fazit
  61. 61. „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

×