Den Weg zum Kauf ebnen – eCommerce UX Best Practices

Veröffentlicht: 2022-03-11

Die E-Commerce-Umsätze steigen weiter. Mobile Geräte machen den Großteil des E-Commerce-Verkehrs aus, Desktop-Websites weisen jedoch niedrigere Warenkorbabbruchraten und höhere durchschnittliche Kaufwerte auf. Mobiler E-Commerce ist die Zukunft, aber wenn Designer in der Gegenwart ihre Gewinne maximieren möchten, müssen sie Desktop-Websites mit Best Practices für E-Commerce-UX verbessern.

Das Potenzial ist überwältigend. Jahr für Jahr steigen die E-Commerce-Einnahmen höher. Offline-Verkäufe machen immer noch den Großteil der Einzelhandelsumsätze aus, aber der Aufwärtstrend des E-Commerce ist unbestreitbar. In diesem Jahr werden E-Commerce-Händler in den USA voraussichtlich einen Umsatz von 840 Milliarden US-Dollar erzielen, ein Niveau, das sie voraussichtlich nicht vor 2022 erreichen würden.

E-Commerce machte 2020 21 % aller Einzelhandelseinnahmen in den USA aus.
Quelle: Digital Commerce 360

In der statistischen Pracht wirbeln Proklamationen einer eCommerce-Zukunft herum, die von Mobilgeräten dominiert wird – und das aus gutem Grund. Mobile Geräte generieren weltweit den meisten Traffic und Einzelhandelsumsätze. Leider können mobile Websites zwei wichtige Kennzahlen nicht erfüllen: Mobile Websites weisen höhere Warenkorbabbruchraten und niedrigere durchschnittliche Kaufwerte auf als Desktop-Websites.

Desktop-E-Commerce-Websites weisen niedrigere Warenkorbabbruchraten auf als mobile Websites.
Quelle: Kaufmann Savvy

Ist das Schicksal des E-Commerce mobil? Zweifellos. Lässt sich durch die Optimierung von Desktop-Websites mit Best Practices für eCommerce UX viel Geld verdienen? Absolut.

Das E-Commerce-Erlebnis auf vier Seiten

Auf dem Desktop verlassen sich fast alle E-Commerce-Sites auf eine ähnliche Seitenfolge, um Käufer durch den Verkaufsprozess zu führen.

  • Übersichtliche Homepages mit unwiderstehlichen Wertversprechen
  • Gut organisierte Kategorieseiten , die einfach zu navigieren sind
  • Ausgefeilte Produktseiten , die Social Proof und überzeugende Inhalte kombinieren
  • Unkomplizierte Checkout-Seiten , die den Fortschritt anzeigen und Käufern ein sicheres Gefühl geben

Desktop-eCommerce-UX-Designmuster bestehen aus vier Hauptseiten: einer Homepage, einer Kategorieseite, einer Produktseite und einer Checkout-Seite.
Die vier häufigsten Seiten auf Desktop-E-Commerce-Sites sind Homepages, Kategorieseiten, Produktseiten und Checkout-Seiten. (Judy)

Das Layout, der Inhalt und die Navigation jeder Seite sollen den Käufern helfen, die gesuchten Informationen zu finden – und sie gleichzeitig dem Kauf näher bringen. Alle vier Seiten müssen zusammenarbeiten, um die nahtlosen E-Commerce-Erlebnisse zu schaffen, die sich Käufer wünschen. Alles beginnt mit der Homepage.

Übersichtliche Homepages

1. Machen Sie den Produktwert sofort sichtbar

Eine Homepage ist ein erster Eindruck. Käufer müssen in der Lage sein, den Wert eines Produkts schnell zu ermitteln. Nutzen Sie die Homepage nicht, um über technische Features zu schwadronieren. Helfen Sie Käufern, sich vorzustellen, wie Produkte ihre Probleme lösen und ihr Leben verbessern werden (das Jobs to Be Done-Framework ist ein nützlicher Ausgangspunkt).

Schreiben Sie Ihre Texte kurz und auf den Punkt. Verwenden Sie Fotos, die die Produktvorteile veranschaulichen. Wenn Käufer viel lesen, viel scrollen oder langatmige Erklärvideos ansehen müssen, um den Wert zu verstehen, dann ist der Wert nicht sofort ersichtlich.

Text und Bild müssen Wertversprechen sichtbar machen.
Auf eCommerce-Homepages müssen Text und Bild Wertversprechen sofort sichtbar machen. (Myro)

2. Aktivieren Sie die Suche von überall

E-Commerce-Websites, die nur wenige Artikel verkaufen, benötigen möglicherweise keine Suchleisten, aber mit zunehmendem Angebot wird die Suche zu einem wesentlichen Weg für Kunden, Produkte gemäß ihren mentalen Modellen zu finden. Feste Suchleisten stellen sicher, dass die Suche überall auf jeder Seite verfügbar ist, aber es ist am besten, die Suche aus Gründen der Konvertierung von den Checkout-Seiten zu entfernen .

Integrieren Sie eine feste Suchleiste auf E-Commerce-Websites mit mehreren Produktkategorien.
Es ist ratsam, dass Websites mit mehreren Produktkategorien eine feste Suchleiste enthalten, damit Käufer schneller finden, wonach sie suchen. (Native Union)

3. Geben Sie Produkten Namen, die für Käufer sinnvoll sind

Produktnamen, die intern Sinn machen, können Käufer verwirren. Entscheidungskontext bereitstellen. Namen, die auf Modellnummern oder zugrunde liegender Technologie basieren, laufen Gefahr, den Laien abzuschrecken. Das Gleiche gilt für allzu niedliche oder kreative Titel. Wählen Sie Produktnamen, die den Nutzen oder Wert aus der Sicht des Käufers anzeigen.

Schreiben Sie E-Commerce-Produktnamen, die für Käufer sinnvoll sind.
Bacca stellt Holzständer für Laptops und Instrumente her. Die Produktnamen sind einfach, weisen jedoch auf ihren Verwendungszweck hin.

4. Heben Sie Angebote und Werbeaktionen hervor

Käufer kommen mit bestimmten Produkten auf E-Commerce-Websites. Wenn sich Angebote und Werbeaktionen in Homepages einfügen, bleiben sie unbemerkt. Rufen Sie Angebote mit leuchtenden Farben, fettgedrucktem Text und ganzseitigen Fotos auf.

Wenn ein Verkauf von untergeordneter Bedeutung ist, sollte er auffallen, aber nicht mit dem primären Wertversprechen der Homepage konkurrieren. Wenn eine Werbeaktion das Wichtigste ist, worüber Käufer Bescheid wissen müssen, stellen Sie sie ins Rampenlicht.

Verkäufe und Deals sollten auf E-Commerce-Homepages auffallen.
Verkäufe, Angebote und Werbeaktionen sollten auf E-Commerce-Homepages auffallen. (Paketfrei)

Gut organisierte Kategorieseiten

1. Präsentieren Sie Produkte in Rastern

Der Platz, den Desktop-Bildschirme bieten, ist perfekt für Produktraster. Raster richten sich nach dem Scannen von F-Mustern aus und ermöglichen es Käufern, mehrere Produkte schnell zu vergleichen. Sie eignen sich besonders gut für Gegenstände, die in Bildern leicht zu erklären sind. Um den Nutzen von Rastern zu maximieren, versuchen Sie, die Anzahl der Elemente pro Zeile zwischen zwei und vier zu halten. Bei fünf oder mehr Produkten werden Gitter deutlich schwieriger zu scannen.

Bonus: Listenansichten funktionieren, aber sie eignen sich am besten für Produkte, die ausführlichere Erklärungen erfordern.

Ordnen Sie für die beste E-Commerce-Benutzererfahrung Produkte in Rasteransichten auf Desktop-Sites an.
Auf Desktop-Sites suchen Käufer lieber nach Produkten, die in Rastern als in Listen angeordnet sind. (Wayfair)

2. Sorgen Sie für mühelose Navigation

Die Navigation muss intuitiv sein. Käufer sollten keine Mühe haben, zwischen Kategorieseiten zu wechseln oder Produktfilter zu aktivieren. Websites mit einer großen Anzahl von Produkten in einer einzigen Kategorie sollten die Navigation in der linken Spalte verwenden, damit Käufer Produkte nach verschiedenen Attributen sortieren können (facettierte Suche).

Die Navigation auf Kategorieseiten muss intuitiv und übersichtlich sein, um das optimale E-Commerce-Erlebnis zu erzielen.
Die Navigation auf der Kategorieseite muss intuitiv, übersichtlich und einfach zu bedienen sein. (TRUE Linkswear)

3. Bestseller präsentieren

Markieren Sie Bestseller-Artikel mit einzigartigen Symbolen oder platzieren Sie sie in Bestseller-Bereichen. Warum? Bestseller sind eine Form von Social Proof. Wenn Menschen unsicher sind, schauen sie auf die Handlungen anderer, um ihre eigenen zu bestimmen. Dies gilt insbesondere für neue Käufer.

Ein ähnliches Prinzip gilt für neu eingeführte Produkte. Die Präsentation neuer und verbesserter Artikel ist mehr als nur eine einmalige Verkaufstaktik; Auf diese Weise können Käufer dazu verleitet werden, in Zukunft für Updates zurückzukehren.

Zeigen Sie Käufern Bestseller und Neuheiten auf E-Commerce-Produktseiten.
Great Jones hält seine heimelige Markenpersönlichkeit aufrecht, indem es Bestseller mit einem Ofenhandschuh markiert.

Polierte Produktseiten

1. Locken Sie mit Social Proof

Social Proof flößt Käufern Vertrauen ein. Bewertungen und Rezensionen haben einen tiefgreifenden Einfluss auf Kaufentscheidungen, aber Desktop-Websites sind groß genug, um auch andere Formen von Social Proof zu handhaben:

  • Von Kunden aufgenommene Produktfotos
  • Empfehlungen von Prominenten und Influencern
  • Zitate von Experten
  • Anerkennungsabzeichen von unabhängigen Bewertungsseiten

Das Ziel von Social Proof ist es, Käufern das Gefühl zu geben, fundierte Entscheidungen zu treffen, die sich an den positiven Erfahrungen anderer Personen orientieren.

Social Proof ist eine überzeugende E-Commerce-Verkaufstaktik.
Bewertungen, Rezensionen und Kundenfotos sind starke Motivatoren. (Etsy)

2. Verwenden Sie Text und Bilder, um das gute Leben zu zeigen

E-Commerce-Inhalte sollten informativ sein, aber es geht um mehr Überzeugungsarbeit als um Fakten und Funktionslisten. Verwenden Sie Text und Bilder, um den Käufern zu helfen, sich das gute Leben vorzustellen, das sie nach dem Bezahlvorgang erwartet.

Auch hier sind Desktop-Größen von Vorteil. Es gibt keinen Grund, keine kolossalen Fotos und Videos zu verwenden oder Produkte aus mehreren Blickwinkeln zu zeigen. Dasselbe gilt für Kopien. Zögern Sie nicht, Überschriften riesig zu gestalten und Textblöcke mit großzügigen Leerzeichen zu umgeben.

eCommerce UX Best Practice: Produktseitentexte und Bilder sollten den Wert beleuchten.
Der Text und die Bilder auf den Produktseiten von Allbirds helfen Käufern, sich ihre ideale Zukunft vorzustellen.

3. Verdienen Sie mehr mit Upsells und verwandten Produkten

Wenn Käufer mit dem, was sie auf den Produktseiten sehen, nicht zufrieden sind, sollten sie nicht zu den Kategorieseiten zurückkehren müssen, um andere Optionen zu finden. Zeigen Sie ihnen stattdessen alternative Produkte zu ähnlichen Preisen oder teurere Optionen mit besseren Funktionen, Bewertungen oder Markenbekanntheit.

Es ist auch möglich, verwandte Artikel vorzuschlagen, die die Produktseite ergänzen. Schuhe kaufen? Warum nicht auch Schnürsenkel und Fußgewölbestützen besorgen? Um die Reibung zu verringern, stellen Sie sicher, dass verwandte Artikel die Option „In den Warenkorb“ haben.

Verdienen Sie mehr Umsatz auf E-Commerce-Produktseiten, indem Sie Upsells und Cross-Sells einbeziehen.
Die Desktop-Oberfläche von Amazon ist vollgepackt mit Möglichkeiten für Upsells, Cross-Sells und Impulskäufe.

4. Entwerfen Sie große und auffällige „In den Einkaufswagen“-Schaltflächen

Wenn es um Produktseiten geht, müssen die Schaltflächen „In den Warenkorb“ auffallen. Machen Sie sie groß, kontrastreich und einfach anzuklicken. Widerstehen Sie dem Drang, witzig zu sein, und schreiben Sie einen Call-to-Action-Text, der eindeutig und handlungsorientiert ist.

Käufer müssen visuelles Feedback erhalten, wenn sie Artikel in ihren Einkaufswagen legen. Viele Desktop-Websites tun dies mit Einkaufswagenzusammenfassungs-Overlays, die kurzzeitig von der Seite des Bildschirms eingeblendet werden (eine kreative Möglichkeit, Käufern zu ermöglichen, zur Kasse zu wechseln oder weiter zu surfen).

Die Schaltfläche „In den Warenkorb“ sollte leicht zu finden und anzuklicken sein, um das beste E-Commerce-Erlebnis zu erzielen.
Entwerfen Sie „In den Warenkorb“-Schaltflächen, die leicht zu erkennen und anzuklicken sind. (Kin Euphorie)

Unkomplizierte Checkout-Seiten

1. Zeigen Sie dem Käufer den Checkout-Fortschritt an

E-Commerce-Käufer verbringen viel Zeit und Energie damit, online nach Produkten zu suchen. Wenn sie zum Kauf bereit sind, brauchen sie die Gewissheit, dass das Ende des Prozesses in Sicht ist. Ein Fortschrittsbalken ist eine einfache Möglichkeit, Käufern zu zeigen, wo sie sich während jeder Phase des Bezahlvorgangs befinden.

Für die beste Checkout-UX informieren Checkout-Fortschrittsbalken die Käufer darüber, wie nah sie der Ziellinie sind.
Checkout-Fortschrittsbalken helfen Käufern, das Licht am Ende des Verkaufstrichters zu sehen. (Maulbeere)

2. Akzeptieren Sie mehrere Zahlungsarten

Bequemlichkeit und Sicherheit sind die Hauptanliegen der Käufer, wenn sie Zahlungs-Gateways erreichen, und sie sind zwei der Hauptgründe für den Abbruch des Einkaufswagens. Glücklicherweise gibt es eine wachsende Zahl von Online-Zahlungsoptionen, die Sicherheitsbedenken zerstreuen und den Bezahlvorgang beschleunigen. Zahlungsoptionen von Drittanbietern, die von vertrauenswürdigen Unternehmen (wie Amazon und Apple) unterstützt werden, können für Käufer attraktiver sein als die Eingabe von Kreditkarteninformationen.

Es lohnt sich auch, „Jetzt kaufen, später bezahlen“-Optionen (BNPL) wie Paypal Credit und Klarna in Betracht zu ziehen. BNPL ist eine Form von Point-of-Sale-Krediten, mit denen Kunden Produkte im Laufe der Zeit nach Erhalt der Ware bezahlen können.

Akzeptieren Sie mehrere Zahlungsformulare, um den Checkout im E-Commerce zu vereinfachen.
Durch die Akzeptanz anderer Zahlungsformen als Kreditkarten erleichtern E-Commerce-Websites das Einkaufen und erhöhen das wahrgenommene Sicherheitsniveau. (Azteca-Fußball)

3. Betrachten Sie die Gastkasse

Der Gast-Checkout ist möglicherweise nicht für alle E-Commerce-Händler geeignet, insbesondere für diejenigen, deren Geschäftsstrategien sich auf die Generierung von Kundenkonten konzentrieren. Es beschleunigt jedoch nachweislich den Checkout, beugt Ermüdung bei der Kontoerstellung vor und reduziert das Abbrechen von Warenkörben.

Eine Alternative besteht darin, E-Mails für die Auftragsbestätigung zu verlangen und dann die Angebote in Versand- und Liefernachrichten zu verfolgen.

Für die beste Checkout-UX bieten Sie einen Gast-Checkout an, um die Aufgabe des Einkaufswagens zu reduzieren.
Two Chimps ist ein Kaffee-Abo-Service, der es Käufern jedoch ermöglicht, einzelne Einkäufe als Gast zu tätigen.

4. Geben Sie eine klare Bestellzusammenfassung an

Dieser ist obligatorisch. Geben Sie Käufern kurze Bestellzusammenfassungen, die Folgendes beinhalten:

  • Produktdetails und Mengen
  • Eine Aufschlüsselung aller Gebühren
  • Versand- und Rechnungsinformationen

Es ist auch klug, Produktbilder zu zeigen, aber stellen Sie sicher, dass die Attribute mit der Auswahl des Kunden übereinstimmen (Farbe, Größe, Ausführung usw.).

Um eine hervorragende E-Commerce-Benutzererfahrung zu gewährleisten, sind Bestellzusammenfassungen ein Muss.
Bestellzusammenfassungen sind ein obligatorischer Bestandteil des E-Commerce-Kaufvorgangs. (Vipp)

5. Steigern Sie das Vertrauen mit Sicherheitsabzeichen und Kundensupport

Geben Sie Käufern Vertrauen, indem Sie Sicherheitsabzeichen und Empfehlungen von Drittanbietern anzeigen. Checkout ist ein großartiger Ort, um Käufer an verifizierte Rankings und Bewertungen zu erinnern.

Schließen Sie in der Nähe Supportfunktionen wie Chatbots, Rückgaberichtlinien, Links zu häufig gestellten Fragen und Kundensupport ein. Käufer verwenden diese Ressourcen möglicherweise nicht an der Kasse, aber sie können sich darauf verlassen, dass sie existieren.

Sicherheitsabzeichen und verifizierte Bewertungen erhöhen das Vertrauen der Käufer.
Neben der Anzeige von Sicherheitsabzeichen stärkt Physiq Apparel das Vertrauen, indem es die Käufer daran erinnert, dass die Website Tausende von positiven Bewertungen hat.

Beachten Sie Best Practices für eCommerce UX

Einkaufen ist haptisch. Das Gewicht eines Objekts, seine Winkel und Kanten, seine Passform und Haptik – diese Dinge sind wichtig. In Abwesenheit von Präsenz sind Vertrautheit und Displaygröße entscheidend. Desktop bietet beides. Es ist ein komfortables Paradigma, bei dem Bildschirme geräumig sind, die Navigation unkompliziert ist und Bilder und Videos lebensechter sind.

Trotz seiner Mängel ist der mobile Einzelhandel ein relativ neues Feld. Es gibt Knicke zu entwirren, aber es bleibt die Zukunft des Online-Shoppings. Bis dahin sollten Designer von der Gegenwart profitieren, indem sie Desktop-Sites mit Best Practices für eCommerce UX optimieren.


Lassen Sie uns wissen, was Sie denken! Bitte hinterlassen Sie unten Ihre Gedanken, Kommentare und Ihr Feedback.

• • •

Weiterführende Literatur im Toptal Design Blog:

  • eCommerce UX – Best Practices im Überblick (mit Infografik)
  • Der ultimative Leitfaden für das Design von E-Commerce-Websites
  • eCommerce 101: Warenkorbabbruch verstehen (mit Infografik)
  • eCommerce UX – Wesentliche Designstrategien und -prinzipien
  • Prominente E-Commerce-Trends und ihr Einfluss auf das Design (mit Infografik)