Usability in E-Commerce Stores – mehr User zum Kaufabschluss bringen

Startseite

Die Startseite Ihrer E-Commerce Plattform sollte Folgendes beinhalten:

• Hero Image mit aktueller Kampagne oder Produktsortiment
• Navigation: leicht auffindbar, gut strukturiert und nicht überladen
• Suchfunktion: prominent dargestellt
• Login & Warenkorb Icon (falls relevant)
• Informationen über Lieferbedingungen
• Vorteile Ihrer Plattform (Warum soll ein User hier kaufen?)
• Aktuelle Angebote/Neuheiten im Sortiment
• Anmeldung zum Vorteilsclub oder Newsletter (soweit vorhanden)

Wichtig ist dabei vor allem, sich darüber Gedanken zu machen, welche Elemente above the fold angezeigt werden. Das sind also jene Elemente, die User sofort nach Aufrufen Ihrer Startseite sehen ohne zu scrollen.

Ein Beispiel für eine gute Kommunikation auf der Startseite bietet zum Beispiel Zalando. Auffällig ist hier die prominente Kommunikation der Lieferbedingungen und des Rückgaberechtes (USP von Zalando). Der große Hero Shot räumt die Startseite auf, die Kategorien sind minimalistisch gehalten.

Footer

Die Notwendigkeit eines gut strukturierten und optimiert gestalteten Footers wird sehr häufig unterschätzt. Klick- und Scrollmaps zeigen aber, dass User dem Footer durchaus Aufmerksamkeit schenken und während der Journey auf Ihrer Website relativ häufig mit dem Footer interagieren. Verwenden Sie dieses Element also, um die User gut durch Ihre Seite zu führen und Vertrauen zu schaffen.

Folgende Elemente sollte ein Footer beinhalten:

• Kontaktinformationen
• Trust Elemente:  Logos von Zahlungsdienstleistern oder externen Zertifiziern
• Quicklinks zu den meistgeklickten Produktkategorien
• Rechtlich verpflichtende Angaben ( Datenschutzerklärung, Impressum etc.)
• Quicklinks zu Rücksendeinformationen, Liefer- und Zahlungsbedingungen
• Quicklink zu Service FAQs
• Quicklink zu einer Beschreibung Ihres Unternehmens (“Über uns”)

Auch kann im Footer jedenfalls die Anmeldung zum Newsletter platziert werden. Stellt man etwa Usern in einem Usability Test die Aufgabe, sich auf einer ihnen unbekannten Seite zum Newsletter anzumelden, scrollen sie instinktiv nach unten. Das bedeutet, dass sich User bereits an die Platzierung der Newsletter Anmeldung im Footer gewöhnt haben und sie dort erwarten. Machen Sie sich diese Gewohnheit zu Nutze.

Als Best Practice können wir hier den Baumarkt Obi anführen. Obi hat etwa am Ende der Seite noch einmal die Vorteile der Plattform wiederholt und setzt im Footer im oberen Bereich vollkommen auf Trust Elemente.

Kategorieseite

Die Kategorieseite dient dazu, Usern einen Überblick über Ihre Produkte in der gewählten Kategorie zu geben. Vor allem aber dient sie dazu, den Usern die Auswahl eines Produktes zu erleichtern und sie in Richtung “add2cart” zu nudgen. Am besten gelingt dies mit Störern, die etwa auf die Beliebtheit eines Produktes sowie Vorteile oder Rabatte hinweisen.

Weiteres sollten Sie auf Ihrer Kategorieseite möglichst große und cleane Bilder verwenden. Aus Session Recordings ist beispielsweise ersichtlich, dass User oft recht schnell durch Kategorie Seiten scrollen. Das bedeutet, dass sie sich bei der Auswahl eines Produktes hauptsächlich an den Bildern orientieren. Eine optimierte Headline sowie Bewertungen und kurze Produktbeschreibungen sollten auf Ihrer Kategorie Seite natürlich auch nicht fehlen.

Amazon veranschaulicht dies am besten, indem sie auf ihren Kategorieseiten etwa auf aktuelle Angebote bzw. Prime Vorteile hinweisen und manche Produkte als “Amazon’s Choice” markieren.

Das wichtigste Element auf Ihrer Kategorie Seite ist jedoch der Filter. 2017 haben die Psychologen Sheena Iyengar und Mark Lepper im “Jam Experiment” gezeigt, dass KonsumentInnen, die mit einer größeren Auswahl an Produkten konfrontiert sind, wesentlich weniger kaufen als jene, die einer begrenzten Auswahl an Produkten ausgesetzt sind. Die Filter auf Ihrer Produktseite ermöglichen es Usern also, die Auswahl an angezeigten Produkten auf ihre Vorlieben hin zu begrenzen. Achten Sie dabei unbedingt darauf, dass die Filter einfach zu bedienen sind und die Kategorien dem entsprechen, was User eingrenzen möchten. Wir helfen Ihnen gerne dabei!

Produktseite

Klickmaps in E-Commerce Stores zeigen, dass User auf Produktseiten sehr stark mit den Bildern interagieren. Stellen Sie also sicher, dass Sie gute Packshots auf Ihren Produktseiten platzieren. Zeigen Sie die Produkte außerdem aus unterschiedlichen Winkeln und bei der Verwendung. Je besser sich die User ein reales Bild des Produktes machen können, desto eher werden sie sich für den Kauf entscheiden.

Weiteres sollte Ihre Produktseite folgende Elemente enthalten:

• Produktbeschreibung
• Vorteile/ USP des Produktes
• Bewertungen
• Klaren und auffälligen Call-To-Action (zum Warenkorb hinzufügen)
• Weitere Details zum Produkt
• Informationen zu Versandkosten, Versandoptionen und -dauer
• Informationen zu Zahlungsbedingungen
• Eventuell Produktempfehlungen
• Eventuell Trust Elemente

H&M bietet ein gutes Beispiel für eine gelungene Produktseite. Above the Fold sieht man das Produkt in allen Varianten. Über einen sticky Banner ermöglicht H&M den Zugang zu weiteren Produktdetails, Bewertungen sowie Liefer- und Zahlungsbedingungen.

Warenkorb

Soweit so gut – User haben Ihr Produkt in den Warenkorb gelegt. Leider nicht, denn die Warenkorbabbruch-Rate über alle Branchen und Industrien hinweg beträgt im online Handel aktuell circa 70%, und mobil sogar 86%. Die Optimierung Ihrer Warenkorbseite ist daher unumgänglich, wenn es darum geht, Ihre E-Commerce Conversion Rate zu steigern. Alle User möchten wissen, was sie die Bestellung insgesamt kosten wird. Kommunizieren Sie also genau das klar, transparent und gut strukturiert auf der Warenkorbseite.

Achten Sie bei der Gestaltung der Warenkorbseite also auf folgende Elemente:

• Bestellsumme: Auflistung aller relevanten Kosten
• Gewählte Lieferoption, Lieferkosten und Lieferzeit
• Zahlungsoptionen
• Trust Elemente/ Bewertungen
• Cheering: den User dazu ermutigen, in den Checkout einzusteigen (z.B. “Nur noch 3 Schritte und Sie surfen mit Highspeed Internet”)
• Klarer und auffälliger CTA
• Anpassung der Menge bzw. das Hinzufügen/Löschen von Produkten im Warenkorb unkompliziert ermöglichen

Als Best Practice Warenkorbseite können wir hier erneut Zalando anführen. Zalando setzt auf ein cleanes und strukturiertes Design der Warenkorbseite, wobei dem User alle wichtigen Angaben zum Produkt sowie den Liefer- und Zahlungsbedingungen klar kommuniziert werden.

Checkout

Die größte Hürde ist geschafft: die User sind in Ihren Checkout Prozess eingestiegen. Wieder nicht ganz richtig. Generell ist zu sagen: je weiter User im Checkout Prozess kommen, desto eher schließen sie den Kauf auch ab. Typischerweise sieht man also hohe Absprungraten eher zu Beginn des Checkouts oder beim Übergang vom Warenkorb in den Checkout Prozess. Trotzdem erleben User im Checkout oft einige Hürden, die zu Ausstiegen bei einzelnen Checkout Schritten führen können.

Das Wichtigste zuerst: erlauben Sie den Usern die Transaktion als Gast abzuschließen. Es gibt für die meisten User nichts Nervtötenderes, als sich vor dem Kauf einem langen Registrierungsprozess unterziehen zu müssen. Auch sehen wir in Klickmaps und Session Recordings, dass User beim LogIn typischerweise Probleme haben, weil sie etwa ihr Passwort nicht parat haben oder den Benutzernamen mobil falsch eingeben etc. Bieten Sie den Usern daher auf jeden Fall die Option als Gast fortzufahren. Nachdem die User ihre Daten im Bestellvorgang eingegeben haben, können Sie ihnen per Checkbox noch einmal die Möglichkeit geben sich zu registrieren. Haken die User diese Checkbox an können Sie dynamisch ein Feld für die Vergabe eines Passwortes einblenden und schon haben Sie eine neue Registrierung.

Weitere Punkte, die im Checkout zu beachten sind:

• Bestellsumme, Liefer- und Zahlungsbedingungen sollten für die User an jeder Stelle im Checkout ersichtlich sein
• Teilen Sie den Checkout Prozess auf mehrere Schritte auf und zeigen Sie Usern, in welchem Schritt sie sich gerade befinden
• Ermöglichen Sie eine einfache Navigation zwischen den Schritten (vor und zurück)
• Extrahieren Sie den Checkout Prozess, sodass User nicht von der Navigation oder Suchfunktion abgelenkt werden
• Reduzieren Sie Formulare auf Pflichtangaben: je kürzer das Formular, desto mehr Abschlüsse

Ein Beispiel für einen gelungenen Checkout Prozess bietet der schweizer Mobilfunkanbieter Wingo. Der Prozess ist in einzelne Schritte aufgeteilt, wobei die Warenkorb-Zusammenfassung in jedem Schritt ersichtlich ist. Was besonders positiv heraussticht, ist die Art und Weise, wie Wingo die Formulare spielerisch gestaltet (zum Beispiel mit der Frage nach der Anrede) und, dass die Felder kurz und knackig gehalten sind.

A/B Testing

Wer entscheidet, welche Elemente auf der Startseite zuerst gezeigt werden sollen, welche Filteroptionen auf der Kategorieseite sinnvoll sind und wo der CTA im Warenkorb platziert wird? Wir empfehlen, die User entscheiden zu lassen! Mit A/B Testing ermitteln Sie schrittweise jene Gestaltung von Elementen auf Ihrer Seite, die die meisten User zum Kaufabschluss bringt. Dadurch stellen Sie sicher, dass die User Experience Ihrer E-Commerce Plattform optimal an das User Verhalten angepasst wird.

Benötigen Sie Hilfe?

Wir machen einen Audit der User Experience in Ihrem E-Commerce Store und erarbeiten Optimierungsvorschläge. Wir führen Usability Tests durch und generieren so Insights, die die User Experience auf Ihrer Plattform nachhaltig verbessern können, und wir beraten Sie außerdem gerne im Bereich A/B Testing. Senden Sie uns dazu einfach eine unverbindliche Kontaktanfrage an: kontakt@e-dialog.group