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.

Was macht das Design eines Einkaufswagens also wirklich funktional? Er muss wichtige Informationen bieten und gleichzeitig dem Benutzer die Möglichkeit geben, Änderungen vorzunehmen und ihm sagen, was ihn nach dem Kauf erwartet.

Logischerweise geht es dabei um viele grundlegende Fragen, z. B. darum, was als wichtige Information gilt. Sollen beispielsweise Informationen über den Versand im Warenkorb zu finden sein? Wenn das Hauptziel des Warenkorbs rein funktional ist, können wir dann versuchen, die Benutzer zu weiteren Käufen zu animieren? Lassen Sie es uns herausfinden.

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.

Da die Benutzer dieses Symbol auf so gut wie allen Bildschirmen der Plattform sehen werden, sollte es leicht zu finden sein. Es ist wichtig, dass es leicht zu erkennen ist, aber auch zum übrigen Design der Navigation auf der Plattform passt.

Es gibt einiges über die Position des Warenkorbs auf der Website zu sagen: Heutzutage wird er klassischerweise in der oberen rechten Ecke platziert (normalerweise innerhalb der Navigationsleiste). Das bedeutet, dass die meisten Benutzer, vor allem die jungen, die an Online-Shopping gewöhnt sind, erwarten, dass sie das Symbol für den Einkaufswagen dort finden.

Als Designer hinter einer brandneuen Plattform haben Sie zwei Möglichkeiten, diese Informationen zu Ihrem Vorteil zu nutzen.

Die erste besteht darin, sich die Vertrautheit der Nutzer mit der klassischen Position zunutze zu machen. Wenn die Benutzer das Einkaufswagen-Symbol bereits in der oberen rechten Ecke erwarten, haben Sie mehr Spielraum, um Ihren Einkaufswagen dezent zu gestalten und in das allgemeine Design der Navigation einzufügen. Dies kann der Optik Ihrer Website zugute kommen und schafft ein kohärenteres Erlebnis für die Benutzer.

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?

Das ist etwas, das viele große E-Commerce-Shops tun. Dem Benutzer mitzuteilen, wie viele Artikel sich im Einkaufswagen befinden, kann auf verschiedene Weise funktionieren. Manche Benutzer fühlen sich zum Beispiel ermutigt, mehr Artikel in einen leeren Einkaufswagen zu legen – und durch die Anzeige einer Null im Einkaufswagen-Symbol können wir das ändern. Der einzige Weg, um herauszufinden, was bei Ihren Benutzern funktioniert, ist, Ihre Theorie zu testen!

Der Hauptgrund für viele Designer, die Anzahl der Artikel im Warenkorb anzugeben, ist jedoch, dass dies dem Benutzer hilft, sich zu erinnern. Das hört sich recht einfach an und ist es auch – die Leute schauen gerne in ihren Warenkorb, um zu sehen, wie viele Artikel sie haben, während sie weiter einkaufen.

Es schafft eine Form der Rückmeldung, bei der der Benutzer sicher sein kann, dass der Artikel erfolgreich in den Warenkorb gelegt wurde. Dies kann dem Benutzer das Gefühl geben, mehr Kontrolle über das Erlebnis zu haben, was in der UX immer eine gute Sache ist.

Indem wir dem Einkaufswagen-Symbol eine Zahl hinzufügen, können wir es auch in eine Art CTA verwandeln. Die Zahl kann mit helleren Farben und einer Animation hervorstechen und versuchen, den Benutzer zu motivieren, zur Kasse zu gehen, bevor er die Suche abbricht.

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.

Dabei geht es auch darum, dass der Benutzer seinen Einkaufswagen nicht mehr überprüfen muss, um sicher zu sein, dass der Artikel hinzugefügt wurde. Denken Sie daran, dass das gesamte Einkaufserlebnis so wenig Reibung wie möglich haben sollte!

Wenn es darum geht, welche Art von Benachrichtigung E-Commerce-Websites am häufigsten verwenden, stellen wir fest, dass Overlay-Modale eine gängige Methode sind, um Benutzer über einen neuen Artikel in ihrem Warenkorb zu informieren. Hier finden Sie einige hilfreiche Links zu Overlay-Modals:

• 5 bewährte Verfahren für modale Fenster
• Prototyping von interaktiven Dialogen und Popups

Auf diese Weise können Sie sicherstellen, dass der Benutzer die Informationen über das neue Element sieht, ohne dass er von der aktuellen Seite weg navigiert. Indem wir dieses Fenster erstellen, stellen wir außerdem sicher, dass der Benutzer durch nichts von den neuen Informationen abgelenkt wird.

Die Seite mit dem Einkaufswagen ist oft die letzte Station vor dem Checkout. Zu diesem Zeitpunkt gehen die Benutzer auch die Artikel in ihrem Einkaufswagen durch und treffen die Entscheidung, ob sie etwas behalten, etwas entfernen oder den gesamten Einkaufsprozess abbrechen möchten.

Diese Seite ist für jede E-Commerce-Plattform sehr wichtig. Bei der Gestaltung dieser Seite müssen Sie alle wichtigen Informationen einbeziehen und gleichzeitig den Benutzern die Freiheit und Kontrolle über den Warenkorb geben. Hier sind einige grundlegende Aspekte, die das Design des Warenkorbs berücksichtigen muss:

• 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.

Ein zusätzliches Element, das Designer einbauen können, ist eine Bestellübersicht, die die gesamte Bestellung vereinfacht und nur das Endergebnis anzeigt: die Kosten der Artikel plus alle zusätzlichen Kosten oder Rabatte. So können sich die Benutzer mit dem Gesamtbetrag ihrer Bestellung vertraut machen und erleben keine Überraschungen, wenn es an der Zeit ist, die Zahlung vorzunehmen.

Wie können wir all diese Elemente auf einer einzigen Seite unterbringen, ohne dass es zu einer Überfrachtung kommt? Es stimmt, dass die Einkaufswagenseite viele Informationen enthalten muss, aber sie muss sich trotzdem wie eine einfache Einkaufsliste lesen. Sie sollte sich für den Benutzer einfach und überschaubar anfühlen.

Der Schlüssel zur Schaffung dieses Gefühls der Einfachheit sind die Informationsarchitektur und die visuelle Hierarchie. Sie möchten, dass sich die einzelnen Elemente klar voneinander abheben. Die Informationen sollten miteinander harmonieren und nicht um die Aufmerksamkeit konkurrieren, damit der Benutzer sofort begreift, was vor sich geht.

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!

Jetzt, da wir die klassischen Merkmale eines guten Designs für Einkaufswagen kennen, wollen wir uns ansehen, was sich beim Design für mobile Geräte ändert.

Das mag hart klingen, aber ein schwebender CTA kann für die Nutzer einen großen Unterschied machen. Der Designer muss dem Benutzer die Möglichkeit geben, die Artikel in Ruhe zu prüfen, aber es ihm so einfach wie möglich machen, zur Kasse zu gehen.

Ein wichtiger Punkt bei der Schaltfläche für die Kasse ist, dass sie mehr als nur sichtbar sein muss. Sie muss anklickbar sein – und das berührt mehrere Aspekte des Designs von Schaltflächen.

Design by Kohutpiotr.

Die Designer müssen darauf achten, dass die Schaltfläche groß genug ist, damit die Benutzer nicht mühsam und präzise klicken müssen. Die Wahl der Farben muss einen ausreichenden Kontrast gegen Sonnenblendung oder für Kunden mit einer Sehschwäche gewährleisten. Wenn Sie sich Sorgen machen, dass sehbehinderte Menschen Ihr Produkt benutzen könnten, lesen Sie unseren Leitfaden für Zugänglichkeitstests.

Mobile Benutzer benötigen immer noch alle wichtigen Informationen: Der reduzierte Platz schließt nicht aus, dass Sie wissen müssen, ob der Versand kostenlos oder kostenpflichtig ist. Wenn überhaupt, dann wird es durch das Design für mobile Endgeräte noch schwieriger, all diese Informationen unterzubringen, ohne den Bildschirm und den Benutzer zu erdrücken.

Es stimmt allerdings, dass das Design für das Web Ihnen einen großen Spielraum für die Gestaltung der Elemente auf der Seite bietet. Viele E-Commerce-Plattformen betreiben Cross-Selling auf ihren Websites, verzichten aber auf den mobilen Bildschirm.

Der Grund dafür ist, dass Benutzer leicht durch etwas verwirrt werden, das auf dem Bildschirm ihres Telefons fehl am Platz aussieht und den Bestellvorgang erschwert. Die Benutzer werden sich die Seite genauer ansehen und verstehen, dass diese Artikel angeboten werden und nicht zur Bestellung gehören – aber dieses genauere Hinsehen kostet Mühe. Das erhöht die Kosten für die Interaktion auf der Seite. Wenn überhaupt, dann sollte sich der gesamte Bezahlvorgang mühelos anfühlen.

Das allgemeine Ziel ist es, alles zu entfernen, was verwirren oder ablenken könnte. Für viele Geschäfte würde das bedeuten, dass sie alle Anzeigen, Werbeaktionen und Cross-Selling entfernen. Es bedeutet auch, Anreize für Upselling zu entfernen, wie z.B. die Banner „Kostenloser Versand für Bestellungen über 50 $“.

Dieser Kampf gilt für jedes mobile Design, nicht nur für das Design von Einkaufswagen. Durch den kleineren Bildschirm wird alles komprimierter, und Elemente wie Text können zu einem Problem werden. Ein weiteres Problem ist nicht nur, dass Benutzer kleine Buchstaben lesen, sondern auch, dass sie auf zu kleine Elemente klicken und tippen.

Zum Beispiel funktioniert die Schriftgröße normalerweise, um anzuzeigen, dass bestimmte Informationen zu einem Artikel im Design des Einkaufswagens gehören. Auf einem mobilen Gerät ist der Spielraum, den Designer für eine akzeptable Schriftgröße haben, jedoch viel kleiner. Das wiederum macht es schwieriger, die visuelle Hierarchie des Einkaufswagendesigns zu organisieren.

Check out our prototype examples.

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.

Der Einkaufswagen erscheint oft wie ein einfacher Teil der E-Commerce-Plattform, was dazu verleitet, die Prototyping-Phase des Prozesses zu überspringen. Das ist ein Fehler, der zu Warenkörben mit miserabler Benutzerfreundlichkeit führen wird, was für jede E-Commerce-Plattform zum Verhängnis werden kann.

Es gibt zwar viele kreative Gründe, die für einen Prototyping-Prozess für den Einkaufswagen sprechen, aber man darf nie die geschäftlichen Gründe vergessen. Schließlich hat eine E-Commerce-Plattform ein ganz klares Ziel: Verkaufen. Ähnlich wie bei anderen klassischen Bereichen des UX-Designs geht es beim Verkaufen darum, die Sprache des Benutzers zu sprechen.

Es kann überraschend schwierig sein, etwas aus der Sicht des Benutzers zu designen. Das Einfühlungsvermögen, das erforderlich ist, um genau das zu schaffen, was der Benutzer braucht oder will, ist geradezu übermenschlich – keiner von uns Normalsterblichen kann es beim ersten Mal richtig machen. Benutzer haben ihren eigenen Kopf, und das Designteam muss viele Schichten des Benutzerverhaltens aufdecken, um zu entscheiden, wo es langgeht.

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.

Das wahre Geheimnis hinter dem erfolgreichen Testen Ihres Warenkorbs liegt in der Konvertierung. Bevor Sie mit dem Testen beginnen können, müssen Sie entscheiden, wo Ihre Standards liegen. Was hoffen Sie, mit dieser Version des Designs zu erreichen? Wir empfehlen, immer eine klare Linie zu haben, ein Ziel, das Sie mit dem Design erreichen wollen.

Die Idee ist, dass Ihnen bei jedem Test kleine Dinge auffallen, die negative Reaktionen bei den Benutzern hervorrufen. Dabei kann es sich um einen kleinen Text handeln, der die Nutzer dazu veranlasst, diesen Abschnitt noch einmal zu lesen, oder um eine visuelle Animation, die die Nutzer ein wenig verwirrt. Denken Sie daran, dass kein Design eines Einkaufswagens perfekt ist – und eine Optimierung ist immer möglich.

Sie sollten genau darauf achten, wie schnell die Benutzer das Design des Warenkorbs verstehen und ob es Zweifel an den Details der Bestellung gibt. Das ultimative Ziel ist, dass die Benutzer alles, was sie brauchen, auf diesem einen Bildschirm sehen – und hoffentlich zur Kasse gehen.

Das Design des Einkaufswagens von Victoria’s Secret ist innovativ und profitiert von dem Unerwarteten. Wenn der Benutzer auf das Einkaufswagen-Symbol oben rechts klickt, wird er nicht zu einem anderen Bildschirm weitergeleitet, sondern der Einkaufswagen öffnet sich auf der rechten Seite des Bildschirms.

Dieses vertikale Design bietet Platz für eine weitere vertikale Leiste, in der das Unternehmen andere Artikel quer verkauft. Uns gefällt auch, dass der Warenkorb einen Link „Bearbeiten“ enthält, der zu einem Overlay-Modal führt, in dem der Benutzer den bestellten Artikel vollständig ändern kann – ohne das Design des Warenkorbs zu überladen.

Das Einzige, was wir uns in diesem Warenkorb gewünscht hätten, wäre eine geschätzte Gesamtsumme mit Steuern und Versandkosten – aber kein Design ist perfekt!

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.

Der Warenkorb selbst ist einfach gehalten und lenkt nur wenig vom Kauf ab. Wir können die klare Unterteilung des Bildschirms sehen, die für eine großartige Informationsarchitektur sorgt.

Die Benutzer finden alle Informationen, die sie benötigen, einschließlich einer Bestellübersicht. Walmart hat sich dafür entschieden, einige Cross-Selling-Angebote unterhalb der Informationen zu platzieren, so dass sie zwar sichtbar sind, aber nicht stören, wenn Sie die Informationen lesen.

Etsy ist ein interessantes Beispiel für das Design eines Einkaufswagens. Wie viele andere Plattformen, die Artikel von einzelnen Verkäufern anbieten, sorgt Etsy dafür, dass die Benutzer für Artikel desselben Verkäufers auf einmal bezahlen. Das bedeutet, dass der Benutzer beim Kauf von zwei Artikeln von verschiedenen Verkäufern zweimal zur Kasse gehen muss.

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.

Der Einkaufswagen ist ein wichtiger Bestandteil jeder E-Commerce-Plattform. Es kann leicht passieren, dass man diese Seite aufgrund anderer großer Teile des Projekts übersieht, wie es normalerweise beim Design der Navigation der Fall ist. Das Design des Warenkorbs mag zwar nicht so aufregend sein, ist aber dennoch wichtig für das korrekte Funktionieren der Plattform.

Wenn Sie sich für das Design eines Einkaufswagens entscheiden, sollten Sie unbedingt daran denken, dass Menschen Kontrolle, Freiheit und Informationen brauchen. Dies ist der Punkt, an dem die Benutzer ihre Artikel durchgehen und wirklich entscheiden, was sie kaufen wollen – es liegt an Ihnen, diese Entscheidung zu erleichtern!