eCommerce UX – Wesentliche Designstrategien und -prinzipien

Da sich die gesamte Einzelhandelslandschaft weiter entwickelt und stationäre Ketten kämpfen, ist der E-Commerce-Markt auf Wachstum eingestellt. Bis 2021 soll der weltweite E-Commerce-Umsatz auf über 4,48 Billionen Dollar wachsen, was mehr als doppelt so viel ist wie im Jahr 2017.

E-Commerce-Händler und -Designer, die der Benutzererfahrung große Aufmerksamkeit schenken und sich an einen Standardsatz von E-Commerce-UX-Designprinzipien für den Einkaufsfluss der Kunden halten, können von diesem Marktwachstum profitieren und greifbare finanzielle Erträge erzielen.

Der Einkaufsfluss ist eine allgemeine Benutzerreise, die bei richtiger Implementierung zu mehr Impulskäufen, weniger Warenkorbabbrüchen und einer höheren Gesamtkonversion führt.

Die User Journey umfasst:

• Website-Erkennung
• Produktsuche und Stöbern
• Produktseite
• Wagen
• Kasse
• Bestätigung

Dieser Artikel behandelt diese Schlüsselpunkte der User Journey und wie E-Commerce-Designer das Kundenerlebnis angenehm, unkompliziert und problemlos gestalten können.

Website-Erkennung

Die Marke klar positionieren

Besucher machen den ersten Eindruck einer Website in nur 50 Millisekunden. Eine E-Commerce-Website muss die Aufmerksamkeit des Benutzers auf sich ziehen, indem sie klar und schnell zeigt, was sie verkauft und wo sie in den Gesamtmarkt passt.

Beispielsweise würde die Website eines Luxusschmuckhändlers wahrscheinlich ganz anders aussehen und sich anders anfühlen als die Website eines preisbewussten großen Ladens. Der High-End-Elektronikhändler Bang & Olufsen vermittelt seine Markenqualität durch die Verwendung eleganter Schriftarten, einer raffinierten Farbpalette und eleganter Produktbilder.

Relevante Calls-to-Action anzeigen

Wenn der Benutzer auf der Startseite ankommt, begrüßen Sie ihn mit zeitgemäßen Inhalten und spezifischen Handlungsaufforderungen (CTAs). Ein großes Bannerbild, das der aktuellen Saison oder einem bestimmten Event entspricht, zusammen mit einem passenden CTA, hilft dem Benutzer, zum nächsten Schritt im Einkaufsprozess zu gelangen. Vermeiden Sie bei der Erstellung von CTAs generische Ausdrücke wie „erste Schritte“, die dem Benutzer nicht klar sagen, was als Nächstes kommt.

Polaroid hat während der Weihnachtszeit einen effektiven CTA erstellt, indem es Benutzern beim Einkaufen von Geschenken geholfen hat. Anstatt einen allgemeinen Ausdruck zu verwenden, verwendete Polaroid „Shop Gifts“, um deutlich zu machen, dass der Benutzer zu einem Bereich auf der Website mit Geschenkvorschlägen weitergeleitet würde.

Passen Sie Landing Pages für SEO an

Indem die Suchbegriffe des Benutzers von Suchmaschinen wie Google mit bestimmten Zielseiten verknüpft werden, können E-Commerce-Händler Benutzer erfassen, die auf der Suche nach einem bestimmten Produkt sind.

Wenn ein Benutzer nach etwas sucht, besteht eine gute Chance, dass er es kaufen möchte. Das Erstellen einer benutzerdefinierten Zielseite für häufig verwendete Produktsuchbegriffe erhöht die Chance eines Einzelhändlers, einen Verkauf (und möglicherweise einen neuen Kunden) zu ergattern. Das Schreibwarenunternehmen Papier macht dies gut mit einer Seite, die speziell für Hochzeitseinladungen erstellt wurde und in den Google-Suchergebnissen erscheint.

Produktsuche und Stöbern

Stellen Sie die Suche vor Ort bereit

Obwohl es ziemlich einfach erscheinen mag, bieten viele Websites immer noch keine allgemeine Website-weite Suche an, oder wenn doch, ist sie nicht richtig optimiert. Die Suche vor Ort ist jedoch von grundlegender Bedeutung für ein solides Einkaufserlebnis im E-Commerce.

Laut Invesp sind 60 % der Online-Käufe nicht impulsiv. Die Leute wissen oft, wonach sie suchen, und die Eingabe ihrer Suchanfrage in eine Suchleiste auf einer E-Commerce-Website – beispielsweise einen Produktnamen oder eine Modellnummer – ist viel schneller als das Durchsuchen von Menüoptionen.

Zusätzliche Funktionen wie die vorausschauende Suche oder die automatische Vervollständigung helfen Benutzern, Optionen schnell zu sehen. Apple verwendet diese Taktik mit einem Suchfeld, das dynamisch mit schnellen Links zu Produkten und beliebten Suchvorschlägen aktualisiert wird.

Begeistern Sie Besucher im Entdeckungsmodus

Während viele Käufer einen bestimmten Artikel zum Kauf im Sinn haben, sind sich nicht alle Besucher so sicher. Laut Nielsen Norman gibt es fünf Arten von E-Commerce-Shoppern, von denen einer der „Browser“ ist. Browser suchen nicht unbedingt nach etwas Bestimmtem. Vielmehr schauen sie sich gemächlich um, um zu sehen, ob sie etwas Interessantes finden.

E- Commerce-Websites können den Käufer im Entdeckungsmodus unterstützen, indem sie ihm neue oder meistverkaufte Produkte zeigen und es ihm ermöglichen, Produktkategorien einfach und schnell zu sehen.

Etsy spricht Browser an, indem es ihnen zeigt, was gerade beliebt ist, sowie die allgemeinen Produktkategorien sowohl in der Navigation als auch im Inhalt der Startseite klar darstellt.

Verwenden Sie Filter und facettierte Suche

Die facettierte Suche verwendet Filter und geht noch einen Schritt weiter, indem sie Benutzern ermöglicht, mehrere Attribute gleichzeitig auszuwählen.

Wenn Sie Filter erstellen, anstatt die Optionen auf allgemeine Kriterien wie Größe, Farbe oder Preis zu beschränken, fügen Sie spezifische Filter für Kategorien hinzu, die für die verkauften Produkte spezifisch sind. Diese Filter können Dinge wie Passform oder Stoff für Kleidung, Schriftarten oder Anlass für Einladungen und Bildschirmgröße oder Prozessor für Gadgets sein.

Sobald ein Benutzer Filter anwendet, sollte auf der Benutzeroberfläche sofort ersichtlich sein, welche Filter angewendet wurden. Der Benutzer sollte auch in der Lage sein, angewendete Filter einfach zu entfernen.

ASOS zeigt eine detaillierte Auswahl an Filtern für jede Kategorie und zeigt deutlich, welche Filter angewendet wurden.

Produktseite

Präsentieren Sie primäre Aktionen prominent

Der Benutzer sollte sich nie fragen, wie er etwas Wichtiges tun kann, wie z. B. ein Produkt in seinen Einkaufswagen zu legen. Zeigen Sie primäre Aktionen wie „In den Warenkorb“ oder „Jetzt kaufen“ als Schaltflächen an und platzieren Sie sie an prominenter Stelle auf dem Bildschirm im Verhältnis zum Rest des Inhalts.

Der Baumarkthändler Lowe's informiert den Benutzer über einen großen, grünen Button als eines der auffälligsten Dinge auf der Seite, wie er ein Produkt in seinen Einkaufswagen legt.

Geben Sie detaillierte Produktinformationen an

Zeigen Sie hochwertige, professionelle Fotos und detaillierte Beschreibungen, damit Käufer das Produkt besser verstehen.

Verwenden Sie progressive Offenlegung und visuelle Hierarchie, um dem Benutzer die richtige Menge an Informationen zu geben, wenn er sie benötigt. Geben Sie ihnen sofort die wichtigsten Informationen und fügen Sie dann weiter unten auf der Seite Details für Benutzer hinzu, die mehr erfahren möchten.

Teilen Sie lange Beschreibungen in Abschnitte auf; B. Übersicht, Größen/Abmessungen, detaillierte Funktionen und Versandinformationen. Die Verwendung der Erweiterungs-/Reduzierungsnavigation für zusätzliche Abschnitte, wie es Myprotein tut, trägt dazu bei, dass sich der Benutzer nicht überfordert fühlt.

Bauen Sie Kundenvertrauen auf

Vermeiden Sie es, Kunden über Versandoptionen, Produktverfügbarkeit und Rückgaberichtlinien im Unklaren zu lassen. Stellen Sie sicher, dass alle diese Informationen leicht verfügbar sind, was das Vertrauen der Kunden aufbaut und dazu beitragen kann, einen unsicheren Kunden zu einem Kauf zu bewegen. Zu wissen, ob und wie sie etwas zurückgeben können, hilft ihnen, fundiertere Entscheidungen zu treffen.

ASOS zeigt wichtige Versand- und Rücksendeinformationen auf jeder Produktseite mit einem Modal an, auf das über einen Link unter jedem Produktnamen zugegriffen werden kann.

Social Proof hinzufügen

Sozialer Beweis ist ein Konzept, das bedeutet, dass Menschen durch das Verhalten anderer beeinflusst werden. Das Konzept ist Teil der Überzeugungsprinzipien von Dr. Robert Cialdini (einem führenden Forscher auf dem Gebiet der Einflusswissenschaft) und hat sich als wirksam erwiesen.

E-Commerce-Händler können das Vertrauen der Käufer mit Social Proof stärken, indem sie Kundenbewertungen, Rezensionen und Kommentare hinzufügen. Produkte auf Amazon haben oft Tausende von Bewertungen, und Benutzer können sie nach Sternbewertungsstufe sortieren.

Einkaufswagen

Zeigen Sie eine übersichtliche Bestellzusammenfassung an

Bevor der Käufer seinen Kauf abschließt, zeigen Sie ihm eine klare und präzise Bestellzusammenfassung, die die gekauften Artikel, die Menge und den Preis jedes Artikels sowie die Gesamtsumme der Bestellung enthält. Ermöglichen Sie dem Benutzer, alle Artikel zu bearbeiten, die er aktualisieren oder löschen möchte, und vermeiden Sie Überraschungen bei den Versandkosten, indem Sie eine Versandzusammenfassung hinzufügen.

Der Modist zeigt sowohl eine übersichtliche Bestellübersicht als auch eine Quittung an. Der Benutzer kann Artikel, die er ausgewählt hat, einfach verwalten (zur Wunschliste verschieben, entfernen, Menge ändern) und sowohl eine Zusammenfassung als auch eine detaillierte Aufschlüsselung von Versand und Steuern anzeigen.

Kasse

Lassen Sie Benutzer als Gäste auschecken

Impulskäufe machen fast 40 % aller im E-Commerce ausgegebenen Gelder aus. Beseitigen Sie die zusätzliche Hürde, ein Konto zu erstellen oder sich anzumelden, indem Sie Käufern erlauben, als Gäste auszuchecken. Während des Check-out-als-Gast-Prozesses kann eine einfache Integration zum Erstellen eines Kontos einige Gäste in Kontobenutzer umwandeln.

Aesop ermöglicht Benutzern das einfache Auschecken als Gast und bietet gleichzeitig die Möglichkeit, sich anzumelden oder zu registrieren. Die Bereitstellung mehrerer Optionen in einem einzigen Formular beseitigt potenzielle Kaufblocker für diejenigen, die schnell zur Kasse gehen möchten, gibt aber auch Benutzern, die sich anmelden möchten, die Möglichkeit, dies zu tun.

Geben Sie während des Bestellvorgangs visuelles Feedback

Das Einfügen eines Fortschrittsbalkens hilft Kunden zu verstehen, wo sie sich im Bezahlvorgang befinden und wie viel sie noch abschließen müssen.

Apple zeigt dem Benutzer jeden Schritt im Prozess und ermöglicht es ihm, mithilfe der Fortschrittslinks zwischen den Schritten zu navigieren. Der Fortschritt wird gespeichert, sodass der Benutzer beim Wechseln zwischen den Schritten nichts verliert.

Verwenden Sie gängige Zahlungsmethoden

Neben der Möglichkeit der Zahlung mit gängigen Kreditkarten kann das Hinzufügen anderer beliebter Zahlungsmethoden wie PayPal die Conversion für Käufer erhöhen, die ihre Kreditkarteninformationen nicht preisgeben möchten.

In den Niederlanden wird iDEAL häufig für E-Commerce-Transaktionen verwendet, und 60 % der niederländischen Verbraucher haben es kürzlich bei einem Kauf verwendet. Der Bekleidungseinzelhändler Scotch & Soda ermöglicht es Käufern, mit iDEAL und PayPal zu bezahlen.

Bestellbestätigung

Zeigen Sie nach dem Kauf eine detaillierte Bestellbestätigung an

Nachdem der Kunde den Kauf abgeschlossen hat, geben Sie ihm eine Bestätigung, die eine erfolgreiche Zahlungsabwicklung und Lieferdetails wie Adresse, Liefermethode und voraussichtliches Lieferdatum enthält.

Dieses Konzept einer Bestätigungs-E-Mail für Amazon zeigt die Bestellnummer, gibt einen Überblick über gekaufte Artikel und gibt ein Versanddatum und einige Empfehlungen für zukünftige Einkäufe.

Senden Sie Bestell- und Versandaktualisierungen per E-Mail

Zusätzlich zum Bestätigungsbildschirm hilft das Senden einer Bestätigungs-E-Mail, den Benutzer über den Status seines Kaufs auf dem Laufenden zu halten. Obwohl alle Kunden eine E-Mail-Bestätigung erhalten sollten, ist dies besonders hilfreich in Fällen, in denen Benutzer als Gäste ausgecheckt haben und kein Konto auf der Website haben, um ihre vergangenen Bestellungen zu überprüfen.

Wenn sich etwas an der Bestellung ändert, wie z. B. eine Lieferverzögerung, senden Sie eine Aktualisierung. Senden Sie nach dem Versand des Artikels ein E-Mail-Update mit der Tracking-Nummer.

Zusammenfassung

Die Prinzipien in diesem Artikel bieten eine Basislinie für Berührungspunkte der Benutzerreise, die jeder E-Commerce-Designer befolgen sollte, aber das ist erst der Anfang. Weitere Einzelheiten zu mobiler eCommerce-UX finden Sie unter eCommerce for the Mobile Experience oder lesen Sie mehr über Landingpage-Design So gestalten Sie effektive Landingpages.

Der wachsende E-Commerce-Markt bietet viele Möglichkeiten für Einzelhändler. Diejenigen, die die Bedeutung von UX erkennen und Best Practices für die E-Commerce-Benutzerreise befolgen, können wettbewerbsfähig bleiben und ihr Endergebnis positiv beeinflussen.

• • •

Weiterführende Literatur im Toptal Design Blog:

• Prominente E-Commerce-Trends und ihr Einfluss auf das Design (mit Infografik)
• eCommerce UX für das mobile Erlebnis
• eCommerce UX – Best Practices im Überblick (mit Infografik)
• Der ultimative Leitfaden für das Design von E-Commerce-Websites
• eCommerce neu gestaltet: Wie kleine Änderungen zu großen UX-Verbesserungen führten