Der ultimative Leitfaden für das Design von E-Commerce-Websites

Die E-Commerce-Umsätze in den USA erreichen auch 2018 neue Höhen. Weltweit wird der E-Commerce weiterhin solide Gewinne in Höhe von 2,3 Billionen US-Dollar verzeichnen. Aber was bringt eine E-Commerce-Site dazu, über eine andere zu triumphieren?

Mehrere Faktoren bestimmen den Gesamterfolg einer E-Commerce-Website, darunter Produktqualität, Markenbekanntheit, Versandkosten, Rückgaberichtlinien, Vertrauenswürdigkeit und Kundenservice. Ein durchdachtes User Experience Design ist jedoch auch der Schlüssel, um Kunden ein zufriedenstellendes, reibungsloses Erlebnis zu bieten. Es wird nicht nur potenzielle Klicks in tatsächliche E-Commerce-Transaktionen umwandeln, sondern Kunden dazu bringen, immer wieder zurückzukommen.

Hier ist ein umfassender eCommerce-UX-Designleitfaden zum Erstellen großartiger eCommerce-Websites mit Beispielen.

E-Commerce für Vertrauen und Sicherheit gestalten

In erster Linie ist es wichtig, eine Website zu gestalten, der die Käufer vertrauen können. Die meisten Käufer sind besorgt über den Datenschutz und ob die Website ihre persönlichen Daten schützt, indem sie eine sichere Transaktion bereitstellt. Wenn sich die Website nicht vertrauenswürdig anfühlt, werden sie sich einfach dafür entscheiden, woanders einzukaufen.

Hier sind einige Methoden, die Vertrauenswürdigkeit vermitteln:

• Fügen Sie einen Überblick über das Geschäft hinzu:

  • Geben Sie allgemeine Informationen an
  • Fotos von Menschen hinter dem Geschäft
  • Kontaktinformationen
  • Links zu sozialen Medien
  • Eine Seite mit häufig gestellten Fragen (FAQ).

• Veröffentlichen Sie Geschäftsrichtlinien und stellen Sie sicher, dass sie nicht zu schwer zu finden sind:

  • Versand- und Rückgaberichtlinien
  • Beschreiben Sie den Rückgabeprozess und welche Produkte zurückgegeben werden können
  • Bieten Sie einfachen Zugang zu einer Datenschutzrichtlinie, die die persönlichen und finanziellen Informationen der Käufer abdeckt (dies ist von entscheidender Bedeutung)

Schreiben Sie in einfacher Sprache und vermeiden Sie juristischen oder internen Fachjargon.

• Teilen Sie Produktbewertungen. Bieten Sie Produktbewertungen an, um Käufern zu helfen, mehr über das Produkt zu erfahren; Dies wird dazu beitragen, etwaige Bedenken zu zerstreuen und eine hervorragende eCommerce UX bereitzustellen. Gehen Sie noch einen Schritt weiter, indem Sie Produktbewertungen zusammen mit zusätzlichen Informationen über die Rezensenten anbieten oder die Bewertungen zusammenfassen. Dieser Schritt kann Käufern dabei helfen, den vollen Nutzen aus den Meinungen anderer zu ziehen.
• Verwenden Sie einen sicheren Server. Käufer erwarten, dass ihre persönlichen Daten sicher bleiben, während sie online einkaufen. SSL-Zertifikate (Secure Sockets Layer) authentifizieren die Identität einer Website und verschlüsseln Informationen, die sicher bleiben müssen. Es ist ein wesentliches Zeichen dafür, dass Kassen sicher sind. Versichern Sie den Käufern, dass ihre Daten geschützt sind, indem Sie SSL implementieren und SSL-Zertifikatsabzeichen anzeigen.

• Fügen Sie anerkannte Vertrauenssiegel hinzu. Ein Vertrauenssiegel bestätigt die Legitimität und Sicherheit einer Website. Einige Treuhandgesellschaften fügen sogar eine zusätzliche Schutzebene hinzu, indem sie eine Versicherung anbieten, falls sich die Transaktion als betrügerisch herausstellt. Die Verwendung anerkannter Vertrauenssiegel garantiert potenziellen Käufern einen sicheren Transaktionsprozess, der zu höheren Umsätzen führt und eine bessere eCommerce UX bietet.
• Zeigen Sie Liebe zum Detail. Sorgen Sie dafür, dass die Website seriös und professionell aussieht, indem Sie Tippfehler, fehlende Bilder, defekte Links, 404-Fehler (Seite nicht gefunden) oder andere Fehler vermeiden, die die Benutzerfreundlichkeit des E-Commerce beeinträchtigen.

Überlegungen zum eCommerce-UI-Design

Das Erscheinungsbild einer Website ist der wichtigste Faktor für den ersten Eindruck. Die Forschung kommt zu dem Schluss, dass Menschen in nur 50 Millisekunden feststellen, ob ihnen eine Website gefällt oder nicht.

Hier sind einige wichtige Tipps für das Design von Benutzeroberflächen:

• Folgen Sie der Markenidentität. Das Branding sollte auf der gesamten Website sichtbar sein. Wählen Sie Farben, die die Marke widerspiegeln, und legen Sie den Stil fest, um deutlich zu machen, welche Art von Produkten verkauft werden. Stellen Sie sicher, dass das Markenerlebnis über alle Kanäle hinweg konsistent ist – ob online, im Geschäft oder auf einem Mobilgerät. Dies wird dazu beitragen, eine starke Marken-Kunden-Beziehung aufzubauen.
• Visuelle Hierarchie übernehmen. Die wichtigsten Inhalte sollten „above the fold“ angezeigt werden. In einigen Fällen ist es besser, weniger Leerraum zu verwenden, um Elemente näher zusammenzubringen, als wichtige Inhalte unter die Falte zu schieben.
• Nicht überdesignen. Beschränken Sie Schriftformate wie Schriftart, Größen und Farben. Wenn der Text zu sehr wie eine Grafik aussieht, wird er fälschlicherweise für eine Anzeige gehalten. Verwenden Sie kontrastreiche Text- und Hintergrundfarben, um den Inhalt so klar wie möglich zu machen.
• Halten Sie sich an bekannte Symbole. Verwenden Sie Symbole oder Symbole, die leicht zu identifizieren sind. Unbekannte Symbole verwirren die Käufer nur. Eine gute Möglichkeit, mögliche Verwirrung zu vermeiden, besteht darin, Beschriftungen für Symbole bereitzustellen.
• Vermeiden Sie Popup-Fenster. Popup-Fenster sind eine Ablenkung. Selbst wenn sie wertvolle Informationen enthalten, werden sie von Käufern höchstwahrscheinlich sofort verworfen – wenn sie einmal weg sind, ist es für Käufer schwierig, die Informationen wiederzufinden, selbst wenn sie es wollen.

Die Bedeutung einer reibungslosen eCommerce-Site-Navigation

Reibungsfrei ist angesagt. Bei der Navigation geht es darum, wie einfach es für Benutzer ist, sich auf der Website zu bewegen, zu finden, wonach sie suchen, und schließlich Maßnahmen zu ergreifen. Das E-Commerce-Einkaufserlebnis sollte nahtlos sein, damit Käufer nicht mitten im Prozess abbrechen.

Einige Schlüsselaspekte des E-Commerce-Website-Designs für eine einfache Navigation sind:

Gut definierte Produktkategorien

Die oberste Navigationsebene sollte die Kategorien anzeigen, die die Website anbietet. Gruppieren Sie Produkte in Kategorien und Unterkategorien, die sinnvoll sind. Kategoriebezeichnungen funktionieren am besten als einzelne Wörter, die die Produktpalette beschreiben, sodass Käufer sie durchblättern und sofort verstehen können, was sie darstellen. Es ist am besten, die Website-Navigation so oft wie möglich für eine großartige E-Commerce-UX zu testen, da dies ein wichtiges Make-or-Break-Feature der Website ist.

Produkt Suche

Einfach ausgedrückt, wenn Käufer das Produkt nicht finden können, können sie das Produkt nicht kaufen – erstellen Sie eine Suchfunktion, die ihnen hilft, das Gesuchte leicht zu finden:

• Machen Sie die Suche allgegenwärtig. Platzieren Sie das Suchfeld auf jeder Seite und an vertrauten Stellen. Die Box sollte sichtbar, schnell erkennbar und einfach zu bedienen sein. Standardpositionen zum Implementieren des Suchfelds sind oben rechts oder oben in der Mitte der Seiten oder im Hauptmenü.
• Unterstützt alle Arten von Abfragen. Suchen müssen alle Arten von Abfragen wie Produktnamen, Kategorien und Produktattribute sowie kundendienstbezogene Informationen unterstützen. Es ist eine gute Idee, eine Beispielsuchanfrage in das Eingabefeld aufzunehmen, um Käufern die Verwendung der verschiedenen Funktionen vorzuschlagen.
• Haben Sie eine Funktion zur automatischen Vervollständigung der Suche. Die Funktion zur automatischen Vervollständigung erleichtert es Käufern, das zu finden, wonach sie suchen, und erhöht das Verkaufspotenzial, indem sie Dinge in dem Bereich vorschlägt, in dem sie bereits suchen.
• Sortieren und Filtern von Ergebnissen zulassen. Lassen Sie Käufer die Suchergebnisse nach verschiedenen Kriterien sortieren (Bestseller, höchster oder niedrigster Preis, Produktbewertung, neueste Artikel usw.) und eliminieren Sie Artikel, die nicht in eine bestimmte Kategorie passen.

Produkte filtern

Je mehr Auswahlmöglichkeiten gegeben sind, desto schwieriger ist es, sich zu entscheiden. Helfen Sie Käufern, die richtigen Produkte zu finden, indem Sie Filter implementieren. Es wird ihnen helfen, ihre Auswahl einzugrenzen und direkt zu ihrem gewünschten Produktsortiment zu springen.

Produkt-Schnellansicht

Eine „Schnellansicht“ reduziert die Zeit, die Käufer benötigen, um das richtige Produkt zu finden, indem unnötiges Laden von Seiten vermieden wird. Typischerweise werden die Produktdetails in einem modalen Fenster über der angezeigten Seite angezeigt. Versuchen Sie nicht, alle Produktdetails anzuzeigen, sondern fügen Sie einen Link zur vollständigen Produktseite hinzu, um die vollständigen Details anzuzeigen. Stellen Sie außerdem sicher, dass Sie eine gut sichtbare Schaltfläche „In den Warenkorb“ sowie eine Funktion „Auf Wunschliste speichern“ einfügen.

Spezialangebot

Käufer suchen immer nach Sonderangeboten, Rabatten oder besten Angeboten. Machen Sie exklusive Angebote sichtbar, damit Käufer davon erfahren. Auch wenn die Preisunterschiede nicht so groß sind, schafft das psychologische Gefühl, etwas Geld zu sparen, die Illusion, die Oberhand zu haben.

E-Commerce-Produktseitendesign

Für herausragende eCommerce UX, wenn Käufer erfolgreich das gewünschte Produkt finden , lassen Sie sie sich über das Produkt informieren. Entwerfen Sie eine Produktseite, die ein Erlebnis schafft, das einem persönlichen Einkaufserlebnis so ähnlich wie möglich ist, indem Sie viele Bilder, detaillierte Beschreibungen und andere nützliche und verwandte Informationen über das Produkt einfügen. Sehen wir uns einmal genauer an, was das bedeutet.

Stellen Sie großartige Produktbilder bereit

Beim E-Commerce können Käufer das Produkt nicht berühren, fühlen oder ausprobieren. Stattdessen hängt alles davon ab, was sie online sehen. Aus diesem Grund ist die Bereitstellung von Produktbildern, die alle Aspekte des Produkts deutlich zeigen, von entscheidender Bedeutung. Hier ist eine Checkliste für perfekte Produktbilder:

• Verwenden Sie einen weißen Hintergrund. Der Hintergrund für Produktbilder sollte nicht vom Produkt selbst ablenken oder mit ihm in Konflikt geraten. Ein weißer Hintergrund funktioniert am besten, weil er das Produkt hervorheben lässt und mit fast jedem Stil oder Farbschema funktioniert.
• Verwenden Sie hochwertige, große Bilder. Gute Bilder verkaufen das Produkt. Hochwertige Bilder wecken das Interesse der Käufer und zeigen ihnen genau, was sie kaufen. Mit großen Bildern können Käufer heranzoomen und ein Produkt bis ins kleinste Detail untersuchen.

• Verwenden Sie eine Vielzahl von Bildern. Zeigen Sie das Produkt aus verschiedenen Blickwinkeln und schließen Sie Nahaufnahmen ein, um einen umfassenderen Eindruck des Produkts zu vermitteln. Eine 360-Grad-Ansicht, in der sie das Produkt bewegen können, ist eine gute Möglichkeit, ein Erlebnis zu bieten, das dem physischen Betreten des Geschäfts nahe kommt und sich damit beschäftigt. VR eCommerce ist die nächste Welle dieser Erfahrung.
• Videos verwenden. Videos haben die Fähigkeit, viele Informationen in kurzer Zeit zu liefern. Verwenden Sie ein Video, um das Produkt im Einsatz zu zeigen und so viele funktionale Informationen wie möglich bereitzustellen.
• Sei konsequent. Verwenden Sie Bilder, die über mehrere Seiten hinweg konsistent sind und auch zum Look and Feel des Rests der Website passen. So sieht alles sauber und aufgeräumt aus. Das Hauptproduktbild sollte in allen Bereichen der Website gleich sein, z. B. in den Produkthighlights oder im Abschnitt mit den vorgestellten Artikeln.

Geben Sie genau die richtige Menge an Produktinformationen an

Geben Sie Käufern detaillierte Informationen über das Produkt, damit sie eine fundierte Kaufentscheidung treffen können. Zeigen Sie Verfügbarkeit, Optionen für verschiedene Größen oder Farben, Abmessungen, eine Größentabelle, verwendete Materialien, Gesamtkosten, Garantien und mehr an. Je weniger verbleibende Fragen sie zu einem Produkt haben, desto wahrscheinlicher ist es, dass sie einen Kauf tätigen.

Setzen Sie überzeugendes Design ein

Nach dem Knappheitsprinzip messen die Menschen einem knappen Objekt einen höheren Wert bei, und einem geringeren Wert, wenn es reichlich vorhanden ist. Schaffen Sie ein Gefühl der Dringlichkeit im Verkaufsprozess, indem Sie die Knappheit anzeigen – zeigen Sie an, wie viele Produkte noch übrig sind, grauen Sie Größen aus, die nicht vorrätig sind, oder zeigen Sie Verkaufsfristen an. Knappheit wird potenzielle Käufer zum Handeln motivieren.

Unternehmen nutzen zunehmend fortschrittliche psychologische Forschung und haben, um mehr Engagement und Käufe zu fördern, das, was früher eine Kunst war, zu einer Wissenschaft gemacht. Überzeugendes Design im E-Commerce ist ein sehr effektiver Weg, um mehr Käufe zu erzielen.

Verwandte und empfohlene Produkte anzeigen

Präsentieren Sie ähnliche Produkte, die den Käufern gefallen könnten und die gut zum aktuellen Produkt oder zu Produkten passen, die andere gekauft haben. Dies kann auf einer Produktdetailseite oder im Einkaufswagen angezeigt werden und hilft Käufern, die Produkte zu finden, die ihren Bedürfnissen entsprechen, und ermutigt sie möglicherweise, weiter einzukaufen – eine großartige Möglichkeit, verwandte Produkte zu verkaufen.

Warenkorb-Design

Der Warenkorb ist unerlässlich, da Käufer hier ihre ausgewählten Produkte überprüfen, die endgültige Entscheidung treffen und zur Kasse gehen. Das Hauptziel des Einkaufswagens ist es, Käufer zur Kasse zu führen. Im Folgenden finden Sie Tipps zur Gestaltung eines benutzerfreundlichen Einkaufswagens, der Käufer zum Weiterkauf animiert.

• Verwenden Sie einen klaren Call-to-Action (CTA). Der primäre Call-to-Action auf der Warenkorbseite sollte der Checkout-Button sein. Verwenden Sie leuchtende Farben, viele anklickbare Bereiche und eine einfache Sprache, um den Checkout-Button sichtbar, unkompliziert und benutzerfreundlich zu gestalten.
• Geben Sie angemessenes Feedback. Stellen Sie sicher, dass das Hinzufügen eines Produkts in den Warenkorb sofort und eindeutig bestätigt wird. Käufer werden durch unzureichendes Feedback verwirrt, z. B. durch das Anzeigen eines unauffälligen Bestätigungstexts. Eine gute Idee ist die Verwendung von Animationen, da Bewegung das menschliche Auge anzieht.
• Verwenden Sie ein Mini-Warenkorb-Widget. Ermöglichen Sie Käufern, Produkte in ihren Warenkorb zu legen, ohne die Seite zu verlassen, auf der sie sich befinden, indem Sie einen Mini-Warenkorb verwenden. Außerdem können sie navigieren, entdecken und weitere Produkte hinzufügen. Mini-Warenkorb-Widgets sollten immer auf den ganzseitigen Warenkorb verlinken.

• Produktdetails anzeigen. Die Anzeige von Details wie Produktnamen, Bildern, Größen, Farben und Preisen im Warenkorb hilft den Käufern, sich an jedes Produkt zu erinnern und Produkte zu vergleichen. Verlinken Sie Produkte im Warenkorb zurück zu ihren vollständigen Produktseiten, damit Käufer bei Bedarf weitere Details überprüfen können.
• Machen Sie den Warenkorb leicht bearbeitbar. Die Möglichkeit, Details wie Größe, Farbe oder Menge zu entfernen, für später zu speichern oder zu ändern, sollte leicht zugänglich sein.
• Vermeiden Sie Überraschungen durch unerwartete Versandkosten und Steuern. Unerwartete Versandkosten sind einer der Hauptgründe, warum Käufer ihren Einkaufswagen verlassen. Geben Sie Versandoptionen und Steuern mit einer genauen Berechnung der Kosten und einem voraussichtlichen Liefertermin im Voraus an.

E-Commerce-Checkout-Design

Ein stilvolles und trendiges Design bestimmt weder eine erfolgreiche E-Commerce-Website noch bietet es unbedingt eine großartige E-Commerce-UX. Der eCommerce-Erfolg wird nur an der Anzahl der abgeschlossenen Käufe gemessen. Hier sind einige Möglichkeiten, eine gut gestaltete Checkout-Seite zu erstellen, die zu einer erfolgreichen Conversion beiträgt:

• Bieten Sie verschiedene Zahlungsmöglichkeiten an. Verschiedene Käufer haben unterschiedliche Vorlieben, wenn es um Zahlungen geht. Sorgen Sie für so viele Zahlungsoptionen wie möglich (abhängig von der Zielgruppe), um den Kundenstamm zu erweitern und es den Käufern zu erleichtern, ihre Bestellung abzuschließen.
• Halte es einfach. Minimieren Sie die Anzahl der Felder und Schritte, um den Kauf abzuschließen. Die standardmäßige Verwendung der Lieferadresse als Rechnungsadresse ist eine gute Möglichkeit, die Anzahl der Felder zu minimieren – entwerfen Sie idealerweise einen Checkout auf einer einzigen Seite, wo Käufer ihren Warenkorb anzeigen und Liefer- und Zahlungsinformationen eingeben können.

• Machen Sie die Registrierung optional. Käufer dazu zu zwingen, vor ihrem ersten Einkauf ein Konto zu erstellen, wird die Käufer vertreiben. Geben Sie ihnen die Möglichkeit, sich nach Abschluss des Kaufs zu registrieren, und heben Sie die Vorteile der Registrierung hervor, wenn Sie sie zur Registrierung auffordern. Zu den Vorteilen gehören ein schnellerer Checkout dank persönlicher Informationen wie gespeicherter Lieferadresse oder Zahlungsinformationen und der Zugriff auf exklusive Angebote, die nur registrierten Mitgliedern zur Verfügung stehen.
• Verwenden Sie eindeutige Fehleranzeigen. Es gibt nichts Frustrierenderes, als nicht in der Lage zu sein, einen Kauf zu tätigen oder herauszufinden, warum. Anstatt die Fehler nach dem Absenden eines Formulars anzuzeigen, lassen Sie Fehlerbenachrichtigungen in Echtzeit erscheinen. Platzieren Sie klare und prägnante Fehlermeldungen direkt über oder neben dem Artikel, der korrigiert werden muss, damit Käufer sie bemerken und verstehen.

• Halten Sie die Leute auf Kurs. Wenn Sie eine mehrseitige Kaufabwicklung verwenden, fügen Sie einen Fortschrittsbalken hinzu, der anzeigt, wie viele weitere Schritte noch verbleiben, um den Kauf abzuschließen. Dadurch werden alle Unklarheiten beseitigt und den Käufern versichert, dass sie auf dem richtigen Weg sind. Wenn der Kauf abgeschlossen ist, zeigen Sie eine Bestellbestätigung und den Bestellstatus mit Sendungsverfolgung an.
• Bieten Sie Unterstützung an. Fügen Sie während des gesamten Bestellvorgangs einen Live-Chat oder eine Kontaktnummer hinzu, damit Käufer bei Fragen schnell Antworten erhalten, anstatt die Website verlassen und woanders hingehen zu müssen.

Zusammenfassung

Online-Käufer erwarten reibungslose Erlebnisse, egal was passiert. Bei der Gestaltung einer E-Commerce-Website geht es nicht nur darum, eine Website zu erstellen, sondern ein Online-Einkaufserlebnis zu schaffen, das passive Käufer in zahlende Kunden umwandelt.

Hoffentlich hilft Ihnen dieser Leitfaden zum Design von E-Commerce-Websites dabei, grundlegende Designentscheidungen zu treffen, um eine großartige E-Commerce-UX zu erstellen, die professionell, attraktiv und benutzerfreundlich ist und Käufer dazu bringt, immer wieder zurückzukommen. Schnelles Wachstum und ein relativ geringer Marktanteil bedeuten, dass es immer noch enorme Möglichkeiten für neue Akteure gibt, traditionelle Branchenführer zu überflügeln.

Weiterführende Literatur im Toptal Design Blog:

• eCommerce UX – Wesentliche Designstrategien und -prinzipien
• eCommerce UX für das mobile Erlebnis
• Wie man E-Commerce-Käufer durch UX-Design fesselt
• eCommerce neu gestaltet: Wie kleine Änderungen zu großen UX-Verbesserungen führten