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 :)

1. Usability im
eCommerce
Der Nutzer im Mittelpunkt

2. Kurz zu mir
Christian Kleemann
BBA Marketing / Winfo in Jena
Berlin
Userlutions / RapidUsertests
Usability-Consultant
Blogging
Beatboxing & Gaming

3. 516.000
Anzahl Onlineshops in
Deutschland
Quelle: Schätzung Internetworld

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. Erhöhte Kosten bei nachträglicher
Behebung von Usability-Problemen

10. „Make it simple,
but significant.“
Don Draper

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

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

13. „Design is not just
what it looks like and
feels like. Design is
how it works.“
MAV
Steve Jobs

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

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

16. Default-EinstellungenMAV

17. Default-EinstellungenMAV

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

19. „Make it work!“
Tim Gunn
LAV

20. LAV Metaphern schaffen

21. LAV Metaphern schaffen

22. LAV Metaphern schaffen

23. LAV Metaphern schaffen

24. LAV Metaphern schaffen
Kill the Hamburger Icon?
zumeist ältere User (ü30)
sind nicht mit dem Icon
vertraut

25. Die wichtigste Konsistenz ist Konsistenz
mit Nutzererwartungen.
Konsistenz erzeugenLAV
Nutzer erwarten vom
Call-To-Action in
Slideshows eine
Weiterleitung

26. Die wichtigste Konsistenz ist Konsistenz
mit Nutzererwartungen.
Konsistenz erzeugenLAV
Keine Weiterleitung und
Anzeige des Fenstern
entspricht nicht den
gängigen Erwartungen

27. Konventionen berücksichtigen
Quelle: eResult Imagery III Erwartungskonforme Webseitengestaltung
LAV
eResult Studie, wo
Nutzer Funktionen
erwarten

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

29. Konventionen berücksichtigenLAV

30. Konventionen berücksichtigenLAV

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

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

33. Zentrale Informationen hervorheben
WH Visuelle Hierarchie

34. WH Visuelle Hierarchie

35. WH Visuelle Hierarchie

36. WH Visuelle Hierarchie

37. WH Visuelle Hierarchie

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
70Empfohlene Zeichenzahl
ohne Leerzeichen für
Texte pro Zeile

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. Logisch verknüpfte Informationen werden auch
visuell miteinander verknüpft.
KR Gruppierungen verwenden
sky detailseiten

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

54. KR Schrittweises enthüllen
5Schritte
Gängige Anzahl Schritte
im Checkout von der
Neukundenanmeldung
aus

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

56. KR Schrittweises enthüllen

57. KR Schrittweises enthüllen

58. KR Schrittweises enthüllen

59. KR Feedback geben
15%
Quelle: Infografik Checkout Report l konversationskraft
Anzahl Shops, die nach
Schritten im
Buchungsprozess
Feedback gibt

60. KR Inneren Dialog beachten
Informationen an relevanten Punkten geben und
innere Fragen abfangen.

61. KR Inneren Dialog beachten
Welche Informationen
sind für den Nutzer von
Bedeutung, wenn dieser
sich anmeldet?

62. KR Inneren Dialog beachten
Relevante Informationen
nicht suchen lassen,
sondern direkt zeigen

63. Konzentrieren auf wesentliche Use-Cases
KR Minimalismus
Geringe Anzahl an
Features stellt Großteil
der Nutzer schon
zufrieden. Auf
Kernfeatures und Usa-
Cases konzentrieren

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

65. „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