Webshop-Optimierung: Usability Case Study naschlabor

Transkript

1 SVI Dialog Research & Consulting Webshop-Optimierung: Usability Case Study naschlabor Laura Lamieri, Christopher Müller E-Commerce-Tag, Berlin, 15. November 2012 Forschung, Training und Beratung für Ihren Kunden-Dialog

2 Das SVI bietet umfassende Trainings- und Consulting- Leistungen an Zwei Kernleistungsfelder des Siegfried Vögele Instituts Königstein Training & Management Center Dialog Research & Consulting Fort- und Weiterbildung für Fach- und Führungskräfte Researchgestützte Beratung und Coaching zu Zielgruppe, Medien und Gestaltung Usability Case Study "naschlabor" Berlin 15. November 2012 Seite 2

3 Inhalt! Einleitung: Der Case! Handlungsfelder aus dem Usability-Test! Das Ziel stets im Blick! Ein guter Lotse sein! Das Re-Design: Next Steps! Ihre Fragen Usability Case Study "naschlabor" Berlin 15. November 2012 Seite 3

4 Wieso das Ganze? Studie:( 87%(höhere( Conversion4Rate( durch(usability4 Optimierung*( Abbruchrisiken erkennen! Relaunch Image Web-Analytics verstehen Warenkorb- Wert erhöhen! Agentur- Konzepte vergleichen Kommen meine User auf der Seite zurecht? Vertrauen aufbauen *Quelle: Nielsen (2008) Usability Case Study "naschlabor" Berlin 15. November 2012 Seite 4

5 Das Naschlabor Das Naschlabor! Innovativer Onlineshop für ausgefallene Süßigkeiten! Gegründet von 4 Absolventen! Launch November 2011 Naschlabor für Privatkunden! Über 50 Süßigkeitensorten individuell kombinierbar! Hochwertige Gläser in 3 verschiedenen Größen! Auswahl aus über 15 kreativen Etiketten Naschlabor für B2B Kunden! Attraktive Firmenkonditionen! Individuelle grafische Gestaltung von Etiketten! Firmenspezifische Auswahl der Süßigkeiten und der Verpackung Naschlabor 2012 / 2013! Launch eines B2B Kundenbereichs! Relaunch der Privatkunden Homepage! Ausweitung des Produktangebotes (Süßigkeiten, Etiketten & Verpackung) Usability Case Study "naschlabor" Berlin 15. November 2012 Seite 5

6 Ein Website-Test liefert Optimierungs-Empfehlungen zu Design und Usability des Webshops Website-Test für die Seite Wie wird der Webshop wahrgenommen und beurteilt?! Wie funktionieren Produktsuche, -auswahl und -bestellung?! Wie können Gestaltung und Usability optimiert werden? Lösung: SVI Website-Test! 20 Probanden! 25 bis 55 Jahre alt Eye Tracking Face-to-Face-Interviews Freies Surfen und Lösen von Aufgaben Bewertung: Wirkung und Bedienungsfreundlichkeit Usability Case Study "naschlabor" Berlin 15. November 2012 Seite 6

7 1. Das Ziel stets im Blick Usability Bild: Digitalstock Case Study "naschlabor" Berlin 15. November 2012 Bild: Microsoft Seite 7

8 Der Erstkontakt entscheidet: Bleiben oder gehen? Eine gewohnte Seitenstruktur vermittelt Sicherheit Usability Case Study "naschlabor" Berlin 15. November 2012 Seite 8

9 Gehen die User dorthin, wo Sie es von Ihnen erwarten? Erste Surf-Pfade nach Erstbesuch der Startseite Unsere Besten (n=10) Mischlabor (n=6) Home (n=20) Das Laborteam (n=4) Usability Case Study "naschlabor" Berlin 15. November 2012 Seite 9

10 Den User gezielt an denjenigen Stellen aktivieren, an denen sein Interesse geweckt wird Empfehlungen:! Text noch stärker strukturieren durch Fettdruck und Aufzählungszeichen! Gezielte Verlinkung! Zusätzliche Aktivierung und gezielte Userführung durch Call-to-Action-Buttons im Content-Bereich Usability Case Study "naschlabor" Berlin 15. November 2012 Seite 10

11 2. Ein guter Lotse sein Usability Case Study "naschlabor" Berlin 15. November 2012 Bild: Digitalstock Seite 11

12 Der Kaufprozess: Definierte, lineare Schritte und eine Schritt deutliche 2: 3: 4: 1: Etikett In Userführung Glasgröße den füllen wählen Warenkorb auswählen sind zentral legen Usability Case Study "naschlabor" Berlin 15. November 2012 Seite 12

13 Die Userführung im Bestellprozess sollte klarer sein Unnötige Klicks, ohne Funktion im aktuellen Prozess- Schritt Korrekte Klicks zum Fortfahren im Bestell-Prozess Korrekte Klicks, zur Auswahl der Glasgröße Usability Case Study "naschlabor" Berlin 15. November 2012 Seite 13

14 Empfehlung: Prozess-Schritte optisch deutlicher kennzeichnen Bestellprozess Empfehlungen:! Kennzeichnung des aktuellen Schrittes, z. B. mittels Reiter-Design! Abschwächung des sehr dominanten Schrittes In den Warenkorb! Klare Handlungs-Anweisung! Optional: Pfeile zur Verdeutlichung der Prozess-Schritte Usability Case Study "naschlabor" Berlin 15. November 2012 Seite 14

15 Der Produktauswahl-Mechanismus erschließt sich nicht intuitiv Usability Case Study "naschlabor" Berlin 15. November 2012 Seite 15

16

17 Usability Case Study "naschlabor" Berlin 15. November 2012 Seite 17

18 Usability Case Study "naschlabor" Berlin 15. November 2012 Seite 18

19 Usability Case Study "naschlabor" Berlin 15. November 2012 Seite 19

20 Usability Case Study "naschlabor" Berlin 15. November 2012 Seite 20

21 Usability Case Study "naschlabor" Berlin 15. November 2012 Seite 21

22 Usability Case Study "naschlabor" Berlin 15. November 2012 Seite 22

23 Usability Case Study "naschlabor" Berlin 15. November 2012 Seite 23

24 Usability Case Study "naschlabor" Berlin 15. November 2012 Seite 24

25 Usability Case Study "naschlabor" Berlin 15. November 2012 Seite 25

26 Usability Case Study "naschlabor" Berlin 15. November 2012 Seite 26

27 Usability Case Study "naschlabor" Berlin 15. November 2012 Seite 27

28 Usability Case Study "naschlabor" Berlin 15. November 2012 Seite 28

29 Usability Case Study "naschlabor" Berlin 15. November 2012 Seite 29

30 Usability Case Study "naschlabor" Berlin 15. November 2012 Seite 30

31 Optisch stärkere Auswahl-Buttons ermöglichen eine einfachere Produktauswahl Produktauswahl Empfehlung:! Deutliche Platzierung der + und - Buttons beim Produktnamen und unter dem Produktbild! Stärkung der Mengen-Felder Usability Case Study "naschlabor" Berlin 15. November 2012 Seite 31

32 Zusammenfassung und Praxis-Tipps! Was ist die wichtigste Botschaft (Angebot) der Website? Diese sollte nicht mit anderen Botschaften (Angeboten) konkurrieren.! Dem Auge Halt über Absätze, Icons, Bullet Points geben.! Auffällige Call-for-Action-Elemente dort platzieren, wo das Interesse des Users geweckt wird! Den User-Flow der Zielgruppe kennenlernen und adäquat unterstützen.! Gut sichtbare Hilfe anbieten, um Abbruchraten zu verringern.! Reihenfolge-Effekte bei der Platzierung von Produkten und Angeboten berücksichtigen und nutzen. Bilder: Digitalstock Usability Case Study "naschlabor" Berlin 15. November 2012 Seite 32

33 3. Das Redesign Usability Case Study "naschlabor" Berlin 15. November 2012 Bild: Microsoft Seite 33

34 Call-to-Action-Buttons im Content-Bereich ziehen die Aufmerksamkeit auf sich und aktivieren die User! Text-Strukturierung für bessere Lesbarkeit! Auffällige Buttons im Content-Bereich animieren zum Einkauf Usability Case Study "naschlabor" Berlin 15. November 2012 Seite 34

35 Die Stufen im Bestellprozess sind eindeutig als Abfolge erkennbar, Hinweise führen den User zusätzlich! Deutliche Standort-Anzeige! Hinweis-Text zur erforderlichen Handlung! Pfeile machen Prozesscharakter deutlich! Stufe In den Warenkorb ist optisch abgeschwächt Usability Case Study "naschlabor" Berlin 15. November 2012 Seite 35

36 Die Auswahl-Buttons sind optisch hervorgehoben und entsprechen durch ihre Platzierung dem Blickverlauf! Auffällige Auswahl-Buttons sind leicht erkennbar! Blickregie optimiert: Überschrift Bild Auswahl-Button! Mengen-Feld in der Mitte im thematischen Context der Auswahl-Buttons platziert Usability Case Study "naschlabor" Berlin 15. November 2012 Seite 36

37 Ihre Fragen Usability Case Study "naschlabor" Berlin 15. November 2012 Seite 37

38 Vielen Dank für Ihre Aufmerksamkeit! Ihre Ansprechpartner: Laura Lamieri Senior Consultant Dialog Research & Consulting Telefon: Christopher Müller Geschäftsführer naschlabor Telefon: Usability Case Study "naschlabor" Berlin 15. November 2012 Seite 38