Webchance 2013
Ihr Webshop mit den Augen des Kunden betrachtet: User Experience Optimierung am Beispiel von naschlabor
Siegfried Vögele Institut
Internationale Gesellschaft für Dialogmarketing mbH
Laura Lamieri
Senior Consultant
Das Blog der Messe Frankfurt zur Digitalisierung des Geschäftslebens:
http://connected.messefrankfurt.com/de/
Wieviel Internet braucht der inhabergeführte Handel?
User Experience Optimierung
1. Ihr Webshop mit den Augen des Kunden betrachtet:
User Experience Optimierung am Beispiel von
Laura Lamieri
Webchance, Frankfurt, 25. August 2013
SVI Dialog Research & Consulting
Forschung, Training und Beratung für Ihren Kunden-Dialog
2. Das Siegfried Vögele Institut
■ Gegründet 2002
■ 100 %-Tochter der Deutschen
Post AG
■ Das Beratungsunternehmen
für Dialogmarketing und
-kommunikation
3. Das SVI bietet umfassende Trainings- und Consulting-
Leistungen an
Training & Management Center Dialog Research & Consulting
Zwei Kernleistungsfelder des Siegfried Vögele Instituts Königstein
Fort- und Weiterbildung für
Fach- und Führungskräfte
Researchgestützte
Beratung und Coaching zu
Zielgruppe, Medien und
Gestaltung
Ihr Webshop mit den Augen des Kunden betrachtet | Frankfurt | 25.08.2013
4. Kundenstimmen
„Vielen Dank an das Siegfried Vögele Institutfür die sehrprofessionelle
Beratung,wir setzen die Erkenntnisse aktuell an kaufentscheidenden
Stellen aufunserem Online-Marktplatzum.“
Christian Metzner, Leiter MeinPaket.de
„Wir sind durch die sorgfältige und gutstrukturierte
AnalyseunsererWebsite sehrgutberaten worden.Das
Preis-/Leistungsverhältnisistwirklich gut."
Thomas Nünning, Leiter Marketing und Vertrieb, Niessing Manufaktur GmbH & Co. KG
Ihr Webshop mit den Augen des Kunden betrachtet | Frankfurt | 25.08.2013
5. Inhalt
Ihr Webshop mit den Augen des Kunden betrachtet | Frankfurt | 25.08.2013
Einleitung: Der Case
Handlungsfelder aus dem Usability-Test
Das Ziel stets im Blick
Ein guter Lotse sein
Das Re-Design: Next Steps
Ihre Fragen
6. Wieso das Ganze?
Ihr Webshop mit den Augen des Kunden betrachtet | Frankfurt | 25.08.2013
Vertrauen
aufbauen
Studie:
87% höhere
Conversion-Rate
durch Usability-
Optimierung*
Abbruchrisiken
erkennen!
Warenkorb-
Wert
erhöhen!
Kommen meine
User auf der
Seite zurecht?
Image
Relaunch
Agentur-
Konzepte
vergleichen
*Quelle: Nielsen (2008)
7. Ihr Webshop mit den Augen des Kunden betrachtet | Frankfurt | 25.08.2013
Ein Website-Test liefert Optimierungs-Empfehlungen
zu Design und Usability des Webshops
Website-Test für die Seite www.naschlabor.de
Freies Surfen und Lösen von Aufgaben
Wie wird der Webshop wahrgenommen und beurteilt?
Wie funktionieren Produktsuche, -auswahl und -bestellung?
Wie können Gestaltung und Usability optimiert werden?
1. 2.
Bewertung: Wirkung und Bedienungsfreundlichkeit
20 Probanden
25 bis 55 Jahre alt
Face-to-Face-Interviews
Lösung: SVI Website-Test zur Optimierung der UX
Eye Tracking
8. Ihr Webshop mit den Augen des Kunden betrachtet | Frankfurt | 25.08.2013 Bild:Microsoft
1. Das Ziel stets im Blick
Bild: Digitalstock
9. Der Erstkontakt entscheidet: Bleiben oder gehen? Eine
gewohnte Seitenstruktur vermittelt Sicherheit
Ihr Webshop mit den Augen des Kunden betrachtet | Frankfurt | 25.08.2013
11. Den User gezielt an denjenigen Stellen aktivieren, an
denen sein Interesse geweckt wird
Ihr Webshop mit den Augen des Kunden betrachtet | Frankfurt | 25.08.2013
Empfehlungen:
Textnoch stärkerstrukturierendurch Fettdruck und Aufzählungszeichen
Gezielte Verlinkung
ZusätzlicheAktivierung und gezielte Userführung durchCall-to-Action-Buttons
im Content-Bereich
12. Ihr Webshop mit den Augen des Kunden betrachtet | Frankfurt | 25.08.2013
2. Ein guter Lotse sein
Bild: Digitalstock
13. Die Userführung im Bestellprozess sollte klarer sein
Ihr Webshop mit den Augen des Kunden betrachtet | Frankfurt | 25.08.2013
„Unnötige“ Klicks,
ohne Funktion im
aktuellen Prozess-
Schritt
„Korrekte“ Klicks
zum Fortfahren im
Bestell-Prozess
„Korrekte“ Klicks,
zur Auswahl der
Glasgröße
14. Empfehlung: Prozess-Schritteoptisch deutlicher
kennzeichnen
Kennzeichnungdes aktuellenSchrittes,z. B. mittels Reiter-Design
Abschwächungdes sehrdominantenSchrittes „In den Warenkorb“
Klare Handlungs-Anweisung
Optional:Pfeile zurVerdeutlichung derProzess-Schritte
Bestellprozess
Ihr Webshop mit den Augen des Kunden betrachtet | Frankfurt | 25.08.2013
Empfehlungen:
17. Ihr Webshop mit den Augen des Kunden betrachtet | Frankfurt | 25.08.2013
18. Ihr Webshop mit den Augen des Kunden betrachtet | Frankfurt | 25.08.2013
19. Ihr Webshop mit den Augen des Kunden betrachtet | Frankfurt | 25.08.2013
20. Ihr Webshop mit den Augen des Kunden betrachtet | Frankfurt | 25.08.2013
21. Ihr Webshop mit den Augen des Kunden betrachtet | Frankfurt | 25.08.2013
22. Ihr Webshop mit den Augen des Kunden betrachtet | Frankfurt | 25.08.2013
23. Ihr Webshop mit den Augen des Kunden betrachtet | Frankfurt | 25.08.2013
24. Ihr Webshop mit den Augen des Kunden betrachtet | Frankfurt | 25.08.2013
25. Ihr Webshop mit den Augen des Kunden betrachtet | Frankfurt | 25.08.2013
26. Ihr Webshop mit den Augen des Kunden betrachtet | Frankfurt | 25.08.2013
27. Ihr Webshop mit den Augen des Kunden betrachtet | Frankfurt | 25.08.2013
28. Ihr Webshop mit den Augen des Kunden betrachtet | Frankfurt | 25.08.2013
29. Ihr Webshop mit den Augen des Kunden betrachtet | Frankfurt | 25.08.2013
30. Ihr Webshop mit den Augen des Kunden betrachtet | Frankfurt | 25.08.2013
31. Optisch stärkere Auswahl-Buttons ermöglichen eine
einfachere Produktauswahl
Produktauswahl
Ihr Webshop mit den Augen des Kunden betrachtet | Frankfurt | 25.08.2013
Deutliche Platzierungder„+“ und „-“
Buttons beim Produktnamen und/oder
unterdem Produktbild
Stärkung derMengen-Felder
Empfehlung:
32. Zusammenfassung und Praxis-Tipps
Ihr Webshop mit den Augen des Kunden betrachtet | Frankfurt | 25.08.2013
Bilder: Digitalstock
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.
33. Ihr Webshop mit den Augen des Kunden betrachtet | Frankfurt | 25.08.2013
3. Das Redesign
Bild: Microsoft
34. Call-to-Action-Buttons im Content-Bereich ziehen die
Aufmerksamkeit auf sich und aktivieren die User
Ihr Webshop mit den Augen des Kunden betrachtet | Frankfurt | 25.08.2013
Text-Strukturierung für
bessere Lesbarkeit
Auffällige Buttons im
Content-Bereich animieren
zum Einkauf
Entwurf
35. Die Stufen im Bestellprozess sind eindeutig als Abfolge
erkennbar, Hinweise führen den User zusätzlich
Ihr Webshop mit den Augen des Kunden betrachtet | Frankfurt | 25.08.2013
Deutliche Standort-Anzeige
Hinweis-Text zur erforderlichen Handlung
Pfeile machen Prozesscharakter deutlich
Stufe „In den Warenkorb“ ist optisch abgeschwächt
Entwurf
36. Die Auswahl-Buttons sind optisch hervorgehoben und
entsprechen durch ihre Platzierung dem Blickverlauf
Ihr Webshop mit den Augen des Kunden betrachtet | Frankfurt | 25.08.2013
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
Entwurf
38. Ihr Webshop mit den Augen des Kunden betrachtet | Frankfurt | 25.08.2013
Vielen Dank für Ihre Aufmerksamkeit!
Ihre Ansprechpartnerin:
Laura Lamieri
Senior Consultant
Dialog Research & Consulting
Telefon: 06174-2017-51
Email: l.lamieri@sv-institut.de