Dos and Don'ts beim Design von mobilen Einkaufswagen: 6 praktische Teardowns (mCommerce In-Depth Guide)

Sie wissen bereits, dass Ihre Warenkorbseite ein wichtiges Zahnrad in Ihrem E-Commerce-Computer ist. Aber ziehen Ihre mobilen Warenkorbseiten – die Seitenbesucher sehen, bevor sie zur Kasse gehen – ihr Gewicht?

Bei Growcode stellen wir immer wieder fest, dass Warenkorbseiten einer der am meisten ignorierten Teile der Geschäfte unserer Kunden sind, insbesondere wenn es um Mobilgeräte geht. Und die Folgen sind erheblich und beeinträchtigen ihr Endergebnis ernsthaft.

Es wird erwartet, dass der Mobile-Commerce-Umsatz bis 2021 52,9% aller E-Commerce-Umsätze ausmachen wird. Im Jahr 2017 lag die durchschnittliche Abbruchrate von mobilen Einkaufswagen jedoch bei satten 85,65%.

Das bedeutet, dass von allen Kunden, die ein Produkt oder Produkte in den Warenkorb gelegt haben, fast 9 von 10 übrigbleiben, ohne den Kauf abzuschließen.

#Mobile Commerce-Umsätze werden bis 2021 voraussichtlich 52,9% aller E-Commerce-Umsätze ausmachen. #EcommerceStats Click To Tweet
Mobile Leads beim Verlassen des Einkaufswagens. Denken Sie daran, dass aggregierte Daten, wie in der obigen Grafik, keine großen Unterschiede zwischen den Branchen berücksichtigen. Quelle.
In diesem Beitrag werfen wir einen Blick auf sechs Beispiele für Warenkorb-Überprüfungsseiten. Die ersten drei verwenden solide Konstruktionspraktiken, die Sie replizieren sollten, während die verbleibenden Beispiele Elemente enthalten, die am besten vermieden werden.

Es ist auch erwähnenswert, dass wir uns zwar auf die Fehler bestimmter Einkaufswagendesigns konzentrieren, dies jedoch nicht bedeutet, dass sie insgesamt völlig schrecklich sind. Sehen wir uns die Best Practices für mobile Einkaufswagen an.

1. Tun: Amazon

Amazons Warenkorb für mobile Websites ist ein brillantes Beispiel für ein gelungenes mobiles Warenkorbdesign. Es ist nicht überfüllt, aber auch nicht zu minimal. Alle notwendigen Elemente sind enthalten, ohne die Aufmerksamkeit vom Haupt-CTA abzulenken. Es gibt auch eine Reihe von unauffälligen „Add-Ons“, die ausgewählt werden können, um den Bestellwert zu erhöhen, von Geschenkverpackungen bis hin zu verwandten Artikeln.
Amazons mobiler Warenkorb ux. Alle notwendigen Elemente sind enthalten.

Tipp #1: Ein klarer CTA oben auf der Seite in einer Kontrastfarbe. Wenn der Benutzer nach unten scrollt, schwebt dieser CTA weiterhin oben auf dem Bildschirm.

#Mobile #Warenkorb-Optimierungstipp: Lassen Sie oben auf der Seite einen klaren #CTA in einer kontrastierenden Farbe setzen. #E-Commerce #Optimierung Click To Tweet
Der CTA schwebt am oberen Bildschirmrand, wenn der Benutzer nach unten scrollt.
Tipp #2: Der CTA ist bildschirmbreit, sodass er sowohl für Links- als auch für Rechtshänder leicht zu tippen ist.
Tipp #3: Wiederholung des kostenlosen Versands oben auf der Seite, um alle Zweifel zu zerstreuen und den Deal zu versüßen.
Tipp 4: Produktbilder und -namen verlinken auf die Beschreibungsseite für diejenigen, die die Produktdetails erneut überprüfen möchten.
Tipp #5: Es gibt klare und leicht zu tippende Schaltflächen, um die Bestellmenge zu ändern, Artikel zu löschen und für später zu speichern.
Tipp 6: Die Benachrichtigung „In Stock“ versichert Kunden, dass sie nicht auf das Produkt warten müssen.
#Mobile #Warenkorb-Optimierungstipp: Die Benachrichtigung "Auf Lager" versichert #Kunden, dass sie nicht auf das Produkt warten müssen. #ecommerce Click To Tweet
Tipp 7: Amazon zeigt Produkte, die „für später gespeichert“ wurden, mit einem einfachen „In den Warenkorb“-Button darunter.
Für später gespeicherte Elemente sind deutlich sichtbar.
Tipp #8: Aufnahme von verwandten Produkten – „Kunden haben auch eingekauft“ – die in den Warenkorb gelegt werden können, ohne die Seite zu verlassen. Zusätzliches Plus für die Gestaltung dieses Elements, da das dritte Element nicht vollständig dargestellt ist und somit eine Wischbewegung suggeriert.
Tipp 9: Viel Weißraum und das Fehlen unnötiger „Füller“-Details. Amazon hat nur das Nötigste aufgenommen.
Tipp 10: Verlinken Sie auf den „Top of the Page“ in der Fußzeile.

Möchten Sie mehr solcher Einblicke?

Erhalten Sie wöchentliche E-Commerce-Tipps, Strategien und führendes Branchenwissen.
Direkt in Ihren Posteingang geliefert.

am Ich habe die Datenschutzerklärung gelesen und akzeptiere die Newsletter-Bedingungen.

Bitte aktivieren Sie dieses Kontrollkästchen, um fortzufahren

Huhu! Sie haben sich gerade angemeldet. Überprüfen Sie Ihren Posteingang, um das Abonnement zu bestätigen.

2. Do: Heftklammern

Die Schönheit des Staples-Wagens ist seine Einfachheit. Produkte können in Sekundenschnelle überprüft werden. Das Ergebnis ist eine stärkere Betonung der enthaltenen Optionen.
Die Schönheit des Staples-Wagens ist seine Einfachheit. Einer der besten mobilen E-Commerce-Wagen.
Tipp #1: Sowohl oben auf der Seite als auch in der Zahlungsübersicht wird wie bei Amazon darauf hingewiesen, dass das Produkt versandkostenfrei versendet wird. Außerdem ist der Text grün, was die Benachrichtigung noch stärker hervorhebt. Das genaue Datum der „erwarteten Lieferung“ wird ebenfalls angezeigt.
Tipp #2: Das Design ist ultra-einfach und der weiße Raum wird hervorragend genutzt. Kunden können ihre Bestellungen schnell überprüfen, notwendige Änderungen vornehmen, ohne die Seite zu verlassen, und den Gesamtbetrag überprüfen.
Tipp #3: Das Feld „Gutscheine und Prämien“ ist unauffällig. Auch die wichtige Option „Abholen im Laden“ wird geboten, ohne die Aufmerksamkeit vom Haupt-CTA abzulenken.
Tipp #4: Das Wort „Sicher“ ist im Checkout-CTA enthalten.
Tipp #5: Die Fußzeile wurde entfernt.

Ist etwas falsch? Während Staples vieles richtig macht, ist ein Problem bei diesem Warenkorbdesign die Einfachheit der Kopfzeile, die kein erweiterbares Menü oder Suchformular enthält. Wenn ein Unternehmen nur ein Produkt verkauft, kann dies eine praktikable Lösung sein. Bei Websites mit mehreren Produkten lohnt es sich jedoch immer, Kunden die Möglichkeit zu geben, erneut zu browsen, wenn sie möchten.

3. Do: Sears

Sears bietet viele zusätzliche Optionen – einschließlich Zahlungsplänen, Abholung im Geschäft, Geschenkoptionen und Werbeaktionen. Ihr Warenkorb ist ein gutes Beispiel für Einzelhändler, die viele verschiedene Elemente auf einer Seite kombinieren möchten, ohne das Design zu ruinieren, das den mobilen Warenkorbabbruch verhindert.
Das Design des mobilen Wagens von Sears enthält viele Elemente, ist aber dennoch einfach.
Tipp #1: Ein CTA ist oben auf der Seite neben der Zwischensumme enthalten. Ein Schloss-Symbol stärkt das Vertrauen zusätzlich und die Möglichkeit, mit Paypal zur Kasse zu gehen, wird ebenfalls angeboten.
Tipp #2: Als High-Ticket-Artikel sind Zahlungspläne enthalten, um jegliches Zögern in dieser Phase zu zerstreuen.
Tipp #3: Einsparungen bei Sonderangeboten sind im Abschnitt mit der Bestellzusammenfassung rot dargestellt und ermutigen Kunden, sich zur Kasse durchzuklicken, indem sie sowohl die Dringlichkeit erhöhen als auch Zweifel abbauen.
Tipp #4: Ein Link zum Einloggen in das Treueprogramm ist ein weiterer Anreiz für Neukunden. Es ist wichtig zu beachten, dass dies kein Link zum Einrichten eines Store-Kontos ohne Vorteile ist, der besser in das Checkout-Formular integriert werden würde.
Tipp Nr. 5: Unten auf der Seite befindet sich ein Siegel für den sicheren Checkout.
Ist etwas falsch? Es ist nur ein bisschen zu viel, und der Effekt ist wahrscheinlich für einige Kunden verstreute Aufmerksamkeit. Es ist beispielsweise nicht erforderlich, Zeitschriften-Abonnements anzubieten und unten einen Link zum Treueprogramm.

4. Nicht: Vitacost

Obwohl Vitacost viele der oben beschriebenen Elemente verwendet, ist ihre Implementierung oft fehlerhaft. Das Ergebnis ist eine schlecht gestaltete Warenkorbseite, die mit ein paar kleinen Optimierungen wahrscheinlich zu einer Steigerung der Warenkorbumwandlungen führen würde.
Vitacost verwendet viele der oben beschriebenen Elemente, aber ihre Implementierung ist oft fehlerhaft.
Fehler Nr. 1: Einfügen einer aufdringlichen Suchleiste, die die Leute von der Warenkorbseite wegführt. Es ist eine gute Idee, ein Suchleistensymbol (wie im Amazon-Beispiel) für Personen einzufügen, die weiter surfen möchten. Aber mach es nicht zu groß.

#Mobile #Warenkorb-Optimierungstipp: Fügen Sie keine aufdringliche Suchleiste ein, die die Leute vom Warenkorb wegführt. #ecommerce Click To Tweet
Fehler Nr. 2: Automatische Aufnahme eines unklaren „BOGO“-Produkts (kaufen Sie eines, erhalten Sie den halben Preis), das Kunden verwirren oder ärgern kann.
Fehler Nr. 3: Aufdringlicher Aktionscode- Balken. Dies lenkt die Aufmerksamkeit vom Haupt-CTA ab und ermutigt Kunden, den Warenkorb zu verlassen, um online nach Werbeaktionen zu suchen. Promo-Boxen sollten sichtbar sein, aber nicht zu stark. Sie sollten auf jeden Fall nach einem CTA sein.
Fehler Nr. 4: Die Versandkosten werden als „TBD“ festgelegt, was Zweifel aufkommen lässt (allgemein sollten Sie Abkürzungen vermeiden)
Fehler Nr. 5: Die Fußzeile ist zu groß. Möchte Vitacost, dass Kunden den Kauf abschließen oder die App herunterladen?
Fehler Nr. 6: Produktoptionen – zum Entfernen oder Erhöhen von Artikeln – sind viel zu klein und schwer zu tippen.
Fehler #7: Die schwebende Leiste, die direkt am unteren Rand des Screenshots zu sehen ist, nimmt auf kleineren Telefonen zu viel Platz auf dem Bildschirm ein.

5. Don't: Lonely Planet

Wo die Staples-Seite effektiv ein minimales Design verwendet, schließt Lonely Planet zu viele Elemente aus. Es gibt keine Funktionen, die das Zögern abbauen und Vertrauen aufbauen, keine Empfehlungen oder Produktvorschläge, um den Kaufwert zu steigern, und viele der Schaltflächen sind schwer anzuklicken.
Lonely Planet schließt zu viele Elemente aus. Ihnen bleibt viel Platz, der verwendet werden könnte, um die Cart-UX zu verbessern.
Fehler Nr. 1: Speicherplatz wird schlecht genutzt. Es wäre besser, wenn der Warenkorb die gesamte Seite ausfüllt und Leerraum verwendet, anstatt den aktuellen Inhalt zu überblenden.
Fehler #2: Es sind keine Informationen zu Lieferung, Rabatten oder Zahlungsmöglichkeiten enthalten. Diese würden wahrscheinlich die Zweifel und Ängste unsicherer Kunden abbauen.
Fehler Nr. 3: Es gibt keine entsprechenden Produktvorschläge.
Fehler Nr. 4: Die Schaltflächen zum Erhöhen oder Reduzieren der Produktanzahl sind so klein, dass sie praktisch nicht anklickbar sind.
Fehler #5: Der CTA – „Zur Kasse gehen“ – sieht nicht wie ein Button aus.
Fehler #6: Das Pop-Out-Format macht es schwierig, den CTA von links anzutippen. Lassen Sie Kunden beide Daumen verwenden!

6. Nicht: Nike

Das Hauptproblem bei Nikes Seite ist die Art und Weise, wie verschiedene Elemente zufällig eingefügt wurden, ohne dass offensichtlich darüber nachgedacht wurde, wie sie funktionieren könnten, wenn sie zusammen oder an verschiedenen Stellen auf der Seite platziert werden. Auch beim CTA herrscht Verwirrung.
Auf der Seite von Nike wurden nach dem Zufallsprinzip verschiedene Elemente eingefügt.
Fehler Nr. 1: Versandrabatte sind nur für Mitglieder verfügbar. Dies führt zu unnötigen Reibungsverlusten und wirkt wahrscheinlich abschreckend auf Kunden, die nicht beitreten möchten, da sie denken, dass sie Verlierer sind. Bieten Sie Kunden die Möglichkeit, sich an der Kasse anzumelden, zusammen mit der Möglichkeit, sich für neue Kunden anzumelden. Die Warenkorbseite sollte ausschließlich zur Überprüfung von Bestellungen dienen.

Fehler #2: Die Verwendung von zwei CTAs. Es ist fast immer besser, einen CTA auf Warenkorbseiten zu haben, da Sie eine bestimmte Vorgehensweise suchen. Der einzige Grund, mehrere CTAs anzubieten, besteht darin, Kunden die Möglichkeit zu geben, zwischen verschiedenen Checkout-Optionen zu wählen. Es wäre besser, ein geeignetes Formular (entweder ein Anmeldeformular oder ein Adressformular) anzuzeigen, nachdem ein Benutzer Ihnen seine E-Mail-Adresse mitgeteilt hat.

Fehler Nr. 3: „Akzeptierte Zahlungsarten“ werden nicht in der Nähe des Checkout-CTAs aufgeführt. Es ist eine gute Idee, diese Abzeichen in Ihre Warenkorbseite aufzunehmen, insbesondere wenn Sie nicht so bekannt sind wie Nike, aber die Fußzeile ist nicht der richtige Ort dafür.

Fehler Nr. 4: Der Begriff „Gast“ kann zu Verwirrung führen, wenn sich Kunden nicht auf diese Weise identifizieren (können Sie Mitglied werden, wenn Sie als Gast einkaufen?)

Zusammenfassung des mobilen Einkaufswagen-Designs

Die meisten leistungsstärksten Warenkorbseiten haben ein klares und einfaches Design, das aber auch die richtige Art und Menge an Informationen bietet. Denken Sie bei der Neugestaltung Ihrer eigenen Warenkorbseiten daran, dass Käufer ihre Bestellung überprüfen und bestätigen, unnötige Artikel entfernen und ähnliche Produkte hinzufügen können. Alle anderen gewünschten Aktionen, wie das Einloggen in ihr Konto oder die Registrierung, können für die Checkout-Seite belassen werden. Denken Sie also an diese Best Practices für mobile Einkaufswagen und andere Techniken zur Einkaufswagenoptimierung.

Und denken Sie daran, Split-Testing ist der Schlüssel! Verwenden Sie die hier beschriebene Taktik, um Ihre eigenen Tests zu erstellen und sich dazu zu verpflichten, Elemente langfristig zu optimieren. Wenn Sie dies tun, werden Sie mit ziemlicher Sicherheit einen stetigen Anstieg Ihrer Conversions feststellen.

Holen Sie sich die 115-Punkte-Checkliste zur E-Commerce-Optimierung

Basierend auf acht Jahren Erfahrung haben wir alle unsere wichtigsten Erkenntnisse in einem Buch zusammengefasst: Die E-Commerce-Optimierungs-Checkliste eines 7+ Figure Online Stores. Wenn Sie die Performance all Ihrer Seiten – von der Startseite bis zur Kasse – steigern möchten, holen Sie sich hier Ihr Exemplar.