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
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
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
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
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
Ein Website-Test liefert Optimierungs-Empfehlungen zu Design und Usability des Webshops Website-Test für die Seite www.naschlabor.de! 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 1. 2. 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
1. Das Ziel stets im Blick Usability Bild: Digitalstock Case Study "naschlabor" Berlin 15. November 2012 Bild: Microsoft Seite 7
Der Erstkontakt entscheidet: Bleiben oder gehen? Eine gewohnte Seitenstruktur vermittelt Sicherheit Usability Case Study "naschlabor" Berlin 15. November 2012 Seite 8
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
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
2. Ein guter Lotse sein Usability Case Study "naschlabor" Berlin 15. November 2012 Bild: Digitalstock Seite 11
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
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
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
Der Produktauswahl-Mechanismus erschließt sich nicht intuitiv Usability Case Study "naschlabor" Berlin 15. November 2012 Seite 15
Usability Case Study "naschlabor" Berlin 15. November 2012 Seite 17
Usability Case Study "naschlabor" Berlin 15. November 2012 Seite 18
Usability Case Study "naschlabor" Berlin 15. November 2012 Seite 19
Usability Case Study "naschlabor" Berlin 15. November 2012 Seite 20
Usability Case Study "naschlabor" Berlin 15. November 2012 Seite 21
Usability Case Study "naschlabor" Berlin 15. November 2012 Seite 22
Usability Case Study "naschlabor" Berlin 15. November 2012 Seite 23
Usability Case Study "naschlabor" Berlin 15. November 2012 Seite 24
Usability Case Study "naschlabor" Berlin 15. November 2012 Seite 25
Usability Case Study "naschlabor" Berlin 15. November 2012 Seite 26
Usability Case Study "naschlabor" Berlin 15. November 2012 Seite 27
Usability Case Study "naschlabor" Berlin 15. November 2012 Seite 28
Usability Case Study "naschlabor" Berlin 15. November 2012 Seite 29
Usability Case Study "naschlabor" Berlin 15. November 2012 Seite 30
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
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
3. Das Redesign Usability Case Study "naschlabor" Berlin 15. November 2012 Bild: Microsoft Seite 33
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
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
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
Ihre Fragen Usability Case Study "naschlabor" Berlin 15. November 2012 Seite 37
Vielen Dank für Ihre Aufmerksamkeit! Ihre Ansprechpartner: Laura Lamieri Senior Consultant Dialog Research & Consulting Telefon: 06174-2017-51 Email: l.lamieri@sv-institut.de Christopher Müller Geschäftsführer naschlabor Telefon: 0515-50461188 Email: c.mueller@naschlabor.de Usability Case Study "naschlabor" Berlin 15. November 2012 Seite 38