Design von Einkaufswagen: Muster für eine bessere Konversion

Der elektronische Handel ist heute ein wichtiger Bestandteil des Internets. Im Laufe der Zeit sind die Online-Shops in einem solchen Ausmaß gewachsen, dass sie einen festen Platz in unserem täglichen Leben eingenommen haben. Mit der zunehmenden Popularität des E-Commerce wächst jedoch auch der Wettbewerb.

Einzelhändler auf der ganzen Welt haben über die Kosten und Vorteile von Investitionen in die UX ihrer Online-Shops nachgedacht. Was braucht eine E-Commerce-Website, um eine gute UX zu bieten? Was macht ein gutes Online-Einkaufserlebnis aus? Und vor allem: Können wir überleben, wenn wir diese Investition nicht tätigen?

Der E-Commerce hat den Einzelhandel überrollt – es ist nun an der Zeit, dass die physischen Geschäfte untergehen oder schwimmen. Da Online-Händler ihr UI-Design auf der Suche nach guter Konversion und gesunden Umsätzen immer mehr optimieren, ist es jetzt an der Zeit, aufzuholen und relevant zu bleiben.

Und wo könnte man besser anfangen als beim klassischen Design des Einkaufswagens? Er ist ein Schlüsselelement des Einkaufserlebnisses und kann einen überraschend großen Einfluss auf die Schlüsselkennzahlen der Plattform haben. Es ist der typische Aspekt einer Website, der sich durch kleine Verbesserungen erheblich verbessern lässt – und das kann sich enorm auszahlen.

In diesem Beitrag besprechen wir die wichtigsten Muster für Einkaufswagen, einige großartige Beispiele und wie Sie sie mit Ihrem Prototyping-Tool umsetzen können.

Ein E-Commerce hat viele verschiedene Aspekte, die zusammenarbeiten müssen, um die Bedürfnisse des Benutzers zu erfüllen und ihn zum Kauf zu bewegen. Unter diesen Aspekten gibt es einige, die den Nutzern helfen sollen, die verfügbaren Artikel zu sehen und zu erkunden, wie z.B. die Navigation. Andere sollen den Nutzern helfen, die Eigenschaften eines bestimmten Artikels zu erfassen, wie z.B. die Produktseite.

Der Einkaufswagen spielt eine sehr wichtige Rolle im gesamten Tanz der Online-Verkäufe. Die Warenkorbseite ist nicht so sehr die letzte Station vor der Kasse, auch wenn die Benutzer die Artikel in ihrem Warenkorb durchgehen, bevor sie zur Kasse gehen. Der Grund dafür ist, dass der Benutzer den Einkaufswagen bei seiner Navigation und Erkundung erlebt – normalerweise als kleines Symbol oben rechts auf dem Bildschirm. Deshalb ist es so wichtig, die allgemeinen Grundsätze des UI-Designs zu beachten, um ein reibungsloses Erlebnis zu schaffen.

Der Hauptzweck des Warenkorbs besteht darin, dem Benutzer zu helfen, den Überblick über seine Bestellung und die Einzelheiten der Bestellung zu behalten. Außerdem hilft er dem Benutzer, in letzter Minute noch Änderungen vorzunehmen – z.B. zwei Hemden statt nur einem zu bestellen oder die Farbe des Hemdes zu ändern.

Der Einkaufswagen ist oft etwas, das Benutzer nicht aktiv untersuchen, aber sie werden sofort bemerken, wenn ein Einkaufswagen nicht den Erwartungen entspricht. Er soll einen kurzen Überblick über alle wichtigen Informationen bieten, wobei die Funktionalität im Vordergrund steht. Dies erfordert eine gute Informationsarchitektur, die es den Käufern ermöglicht, sich auf das Erlebnis zu konzentrieren.

Beim Design von Einkaufswagen geht es nicht darum, den Benutzer zum Kauf zu bewegen (obwohl das durchaus möglich ist). Es geht darum, es dem Benutzer so einfach wie möglich zu machen, die Bestellung aufzugeben, mit so wenig Reibung wie möglich. Es geht darum, alle Hindernisse aus dem Weg zu räumen und den Benutzer schnell zur Ziellinie zu bringen.

Ein wichtiger grundlegender Unterschied ist, dass die meisten Plattformen zwei Designs für den Einkaufswagen haben. Der erste ist der Navigationswagen, den die Benutzer beim Stöbern und Einkaufen sehen. Dabei handelt es sich in der Regel um ein Symbol, das in der Navigationsleiste zu finden ist und die Anzahl der darin enthaltenen Artikel anzeigt. Die zweite ist die Warenkorbseite, die sich nur mit dem Warenkorb und den darin enthaltenen Artikeln befasst.

Beide sind wichtig und können so gestaltet werden, dass sie unterschiedlichen Zwecken dienen. Das Einkaufswagen-Symbol zum Beispiel kann ein hilfreicher Verbündeter sein, wenn Sie die Benutzer dazu ermutigen möchten, mehr einzukaufen oder schnell zur Kasse zu gehen. Während der Benutzer durch die Website navigiert, kann das Symbol mit kurzen Animationen oder anderen visuellen Hinweisen versehen werden, die die Aufmerksamkeit auf das Symbol lenken und die Benutzer dazu bringen, schneller zur Kasse zu gehen.

Die Warenkorbseite ist von entscheidender Bedeutung, denn sie muss dem Benutzer eine Vielzahl von Informationen auf übersichtliche Weise bieten, damit er nicht überfordert wird. Außerdem ist diese Seite eine gute Gelegenheit, um Benutzer dazu zu bringen, größere Mengen derselben Artikel zu kaufen oder ein wenig Cross-Selling zu betreiben.

Die andere Möglichkeit, wie Designer diese Informationen nutzen können, besteht darin, bewusst gegen den Strom zu schwimmen. In dem Bewusstsein, dass die meisten Benutzer den Einkaufswagen oben rechts erwarten, können Designer etwas völlig anderes entwerfen. Dies ist in der Regel bei Websites der Fall, die einprägsam sein wollen und die Grenzen des konventionellen Designs überschreiten.

Dieser Weg kann knifflig sein, wie Ihnen die meisten Designer seufzend sagen werden. Einzigartig und innovativ zu sein ist toll, aber es birgt auch Risiken. Schließlich kann so viel schief gehen, wenn es um die Nutzererfahrung mit genialem Design geht. In diesem Fall führt die Vorstellung, dass die Benutzer den Einkaufswagen nicht an der erwarteten Stelle finden, zu einem noch größeren Bedürfnis, den Einkaufswagen zu finden, wo auch immer er sich befindet.

Es ist nichts falsch daran, den Benutzern eine brandneue Erfahrung zu bieten – aber wenn die Benutzer ihre Aufgabe, Artikel einzukaufen, nicht erfüllen können, dann war ihre Erfahrung nicht gut. Der Einkaufswagen ist etwas, das immer in Sichtweite sein sollte, etwas, auf das die Benutzer schnell zurückgreifen können. Er sollte sofort erkennbar sein.

Sie möchten etwas Neues kreieren? Warum probieren Sie nicht den trendigen neuen Stil namens Neumorphismus aus?

Immer mehr Websites bieten den Benutzern jetzt auch einen Mini-Warenkorb an. Dabei handelt es sich in der Praxis um eine größere Ansicht des Warenkorbsymbols, in dem der Benutzer die Details der Artikel sehen kann. Dies ist eine wunderbare Möglichkeit, dem Benutzer mehr Kontrolle über den Inhalt des Warenkorbs zu geben – zum Beispiel, um einen versehentlich hinzugefügten Regenschirm sofort zu korrigieren.

Es gibt jedoch einen wichtigen Unterschied zwischen diesem Mini-Warenkorb und dem Design eines ganzseitigen Warenkorbs. In Anbetracht des begrenzten Platzes möchten Sie den Benutzer nicht mit zu vielen Optionen überfordern. Dieser Mini-Warenkorb sollte ein kleines Quadrat oder Rechteck sein, das nur einen Bruchteil des gesamten Bildschirms einnimmt – was sollte er also enthalten?

Es sollte die vollständige Liste der Artikel im Einkaufswagen enthalten, zusammen mit der Option, den Artikel zu entfernen oder vielleicht die Anzahl der einzelnen Artikel in der Bestellung zu ändern. Dieses Design des Mini-Einkaufswagens sollte dem Benutzer zwei grundlegende CTAs bieten: die Alternative, direkt zur Kasse zu gehen oder zum Einkaufswagen zu gehen und sich alles genauer anzusehen.

Aber genau da sollte es aufhören. Vergessen Sie nie, dass dieses Design für einen sehr kleinen Raum gedacht ist und dass die Benutzer zwar Freiheit und Kontrolle wollen, aber leicht überfordert werden können. Sie können unseren Beitrag über das Paradoxon der Wahl für UX-Experten lesen, aber die Quintessenz ist, dass Benutzer lange brauchen können, um eine Entscheidung zu treffen. Wenn sich diese Zeit zu sehr in die Länge zieht, können Benutzer gelähmt werden und keinen Spaß mehr haben.

Damit die Benutzer die volle Kontrolle haben, müssen sie wissen, womit sie es zu tun haben. Sie dürfen nicht daran zweifeln, dass die letzte Aufgabe, die sie erledigt haben, erfolgreich abgeschlossen wurde – so kann man nicht einkaufen.

Für die Verbraucher ist die Benachrichtigung, dass ein neuer Artikel hinzugefügt wurde, eine Bestätigung des Erfolgs. Dadurch wird verhindert, dass Benutzer denselben Artikel mehrmals hinzufügen, weil sie sich nicht sicher waren, ob das System ihren Befehl verstanden hat. Das wiederum macht den Bestellvorgang einfacher und schneller, da die Benutzer nicht mehr jeden Artikel in ihrem Einkaufswagen noch einmal durchgehen müssen, um die Zahlen zu korrigieren.

• Die Möglichkeit, Gegenstände zu entfernen
• Die Möglichkeit, alles an den Artikeln zu ändern. Dazu gehört das Ändern von Mengen und anderen Angaben. Ein Dropdown-Menü ist eine gängige Wahl für diese Steuerelemente.
• Grundlegende Informationen zu jedem Artikel, einschließlich eines Bildes.
• Ein Link zur Produktseite des Artikels
• Geschätzter Gesamtbetrag des Kaufs, einschließlich zusätzlicher Gebühren wie Steuern oder Versandkosten
• Die Option, jeden beliebigen Artikel in ein Geschenk zu verwandeln: Dies kann ein einfaches Kontrollkästchen oder eine Optionsschaltfläche sein.
• Ein Feld zum Einfügen von Werbecodes oder Coupons, falls die Plattform damit arbeitet
• Zahlungsmöglichkeiten

Das sind die wichtigsten Dinge, die alle Einkaufswagenseiten enthalten müssen. Der Hauptgrund, warum es so viele sind, liegt darin, dass dies die letzte Überprüfung ist, die der Benutzer von seiner gesamten Bestellung macht. Daher muss das Design des Warenkorbs alle wichtigen Informationen enthalten, die der Benutzer benötigt, und ihm die Möglichkeit geben, seine Bestellung zu ändern.

Dazu gehört die klassische visuelle Hierarchie, z. B. die Gruppierung von Informationen, damit die Benutzer verstehen, dass es sich um ein und dasselbe Element handelt. Da dies ein sehr umfangreiches Thema ist, können Sie sich in unseren beiden Beiträgen zur visuellen Hierarchie und zur Informationsarchitektur über alle Einzelheiten informieren.

Viele Shops versuchen auch, das Design des Einkaufswagens optisch aufzuräumen, indem sie einige Elemente hinter Symbolen oder Schaltflächen verstecken, die Popups hervorrufen. Gutschein- und Rabattschlitze zum Beispiel können versteckt werden, so dass die Benutzer sie bei Bedarf anklicken können. Es ist jedoch immer wichtig, dass die Benutzer diese Schaltflächen finden und ihre Bedeutung verstehen, bevor sie darauf klicken.

In größerem Maßstab könnte das Design des Warenkorbs so gestaltet werden, dass jeder Artikel beim Hovern oder Klicken erweitert werden kann. Auf diese Weise können die Benutzer wählen, ob sie sich jeden Artikel genauer ansehen oder mit den grundlegenden Informationen weitermachen wollen, die sie erhalten haben. Die Möglichkeiten sind endlos!

Das Gleiche gilt für die Steuerelemente. Das Design eines Einkaufswagens muss dem Benutzer die Möglichkeit geben, den Einkauf zu ändern – aber all diese Steuerelemente, die jeder Artikel mit sich bringt, brauchen Platz. Sie müssen alle anklickbar sein, z.B. zum Erhöhen oder Verringern der Menge eines Artikels.

Einige Designs für mobile Einkaufswagen umgehen dieses Problem der Benutzerfreundlichkeit, indem sie eine einzige Schaltfläche für Änderungen an den Artikeln haben. Diese Schaltfläche führt zu einem anderen Bildschirm oder zu einem Overlay-Modal mit weiteren Optionen.

Und das ist die Quintessenz, warum E-Commerce-Plattformen ohne Prototypen für das Design des Einkaufswagens nicht auskommen: Testen. Ein bloßes Konzept lässt sich nicht testen. Das Team braucht einen physischen Prototyp, den es den Benutzern vorsetzen und ihre Reaktion testen kann.

Designer haben oft eine klare Vorstellung davon, was im Design gut und schlecht ist – aber das Verhalten des Benutzers ist das Einzige, was einen Erfolg von einem Misserfolg trennt.

Es ist also an der Zeit, dass das Designteam all seine Ideen auf den Prüfstand stellt. Mit einem professionellen Prototyping-Tool sollten Sie mehrere erste Prototypen erstellen und sich dann hocharbeiten. Im Laufe des Projekts wird der Prototyp immer detaillierter – bis er zu einer High-Fidelity-Darstellung wird, die genau wie der echte Wagen aussieht.

Viele betrachten dies als den Moment der Wahrheit. Der Moment, in dem wir herausfinden, ob das Design ein Erfolg wird oder ob es an der Zeit ist, sich auf das Zeichenbrett zurückzuziehen. Das Problem an dieser Vorstellung ist, dass das Testen kein einzelner Moment ist. Es handelt sich um eine Reihe von Momenten, die während des gesamten Entwicklungsprozesses stattfinden.

Ähnlich wie beim Design-Thinking-Prozess glauben wir hier bei Justinmind fest an frühzeitiges und häufiges Testen. Das Design Ihres Warenkorbs muss mehrmals getestet werden, während Sie es weiterentwickeln und ausbauen.

Walmart ist ein großer Name im Einzelhandel – und seine Aufholjagd bei den E-Commerce-Plattformen ist eine interessante Geschichte, die wir verfolgen können. Anhand des Designs des Einkaufswagens können wir erahnen, wie viel Zeit sie in ihre Online-Präsenz investiert haben.

Uns gefällt, dass die Warenkorb-Informationen alle relevanten Informationen anzeigen, zwei getrennte Felder für die Bestellzusammenfassung enthalten und trotzdem eine übersichtliche Benutzeroberfläche haben. Das kann nicht einfach gewesen sein!

Die Nutzer werden auch zu schätzen wissen, dass sie Gutscheine verwenden können, wenn die Verkäufer sie akzeptieren, Artikel verschenken und sogar eine kostenlose Geschenknachricht hinterlassen können. Uns gefällt auch, dass die CTAs zusammenhängend sind, aber nicht in Konkurrenz zueinander stehen. Wie toll!

Diese App hat ein wunderbares Design von Abinash Mohanty. Es nutzt den Platz intelligent aus, wobei die visuelle Hierarchie die Hauptrolle auf dem Bildschirm einnimmt. Wir alle wissen, dass mobile Bildschirme eine echte Herausforderung für Designer sein können – deshalb ist dieses Design auch so großartig.

Es nimmt all die überflüssigen Informationen weg und zeigt dem Benutzer dennoch alle wichtigen Informationen an – einschließlich der Rechnungsadresse, der Versandkosten, der vollständigen Liste der Artikel und der Gesamtsumme. Besonders gut gefällt uns, dass die Steuerelemente zum Ändern der Reihenfolge der Bücher benutzbar sind, im Gegensatz zu den winzigen Symbolen, mit denen die meisten von uns nicht zurechtkommen würden.

Diese App von Shojol Islam verwendet eine klare Benutzeroberfläche mit einer intelligenten Informationsarchitektur, die alles logisch und nützlich macht. Wir mögen die Proportionen der UI-Komponenten, die ein bequemes Tippen ermöglichen – und auch den ausreichenden Abstand zwischen den Steuerelementen, um Fehler zu vermeiden.

Das Übersichtsfeld unterhalb der Artikelliste ist ein großer Vorteil dieses Designs. Der Benutzer kann die Artikel durchgehen und ändern, was er möchte, und sieht dann die gesamten Kosten der Bestellung aufgeschlüsselt. Die Navigation darunter ist nur die Kirsche auf dem Sahnehäubchen einer wunderbaren Benutzerfreundlichkeit.