Die Hochzeitseinladungen mit hochwertigem Papier sowie die dazu passenden Kuverts, Sticker und weitere kleine Zusätze wurden dank Up-Selling und Cross-Selling in den Warenkorb gelegt und nun leiten wir unsere Besucher aber endgültig zum Warenkorb weiter. Oder?
Stellen wir uns kurz vor, das wäre auch im stationären Geschäft so: Wir legen ein Produkt physisch in den Einkaufswagen und eine Sekunde später stehen wir unerwartet an der Kasse – und das, obwohl wir vielleicht im Regal nebenan noch etwas Interessantes entdeckt haben, das wir uns eigentlich ansehen wollten. Um uns dies nun ansehen zu können, müssen wir den ganzen Weg zurück gehen.
Das wäre doch recht eigenartig und auch ein bisschen ärgerlich, oder? Vor allem angesichts der Tatsache, dass sich die digitale Welt doch wahnsinnig an der analogen, realen Welt orientiert – man denke einfach nur kurz darüber nach, dass wir auch in Onlineshops etwas in einen »Warenkorb« legen. Und anschließend »Zur Kasse« gehen.
Jedenfalls ist es genau das, was viele Onlineshops mit ihren Besuchern machen: Sie ohne zu zögern aus dem aktuellen Kontext der Produktseite reißen und ihnen eine Warenkorb-Übersicht präsentieren, die sie in den meisten Fällen in jenem Moment gar nicht sehen wollten.
So würden viele Besucher lieber einfach ihre gewünschten Produkte in ihren digitalen Warenkorb legen und dort weiterstöbern, wo sie gerade sind. Und wenn sie wollen, einen kurzen Blick hinein werfen, um zu überprüfen, was sie schon haben und was sie noch brauchen. Und das, ohne aus dem Kontext gerissen zu werden. Sehen wir uns an, wie wir eine diesen Gedanken entsprechende Lösung nutzerfreundlich umsetzen können.
Vor allem der begrenzte Platz auf Mobilgeräten stellt uns dabei vor Herausforderungen, denen wir uns schon zu Beginn unserer Überlegungen stellen sollten. Der Lösung der Warenkorb-Problematik nähern wir uns deshalb in diesem Unterkapitel mit dem Mobile-First-Ansatz. Eben dieser Ansatz gibt auch schon einen wichtigen Hinweis darauf, wo unser Warenkorb platziert sein sollte – nämlich in der Nähe des Daumens oder besser gesagt am unteren Rand des Bildschirms. Links, rechts oder mittig? Wieso nicht einfach über die komplette Länge? Welche Vorteile sich dadurch ergeben, sehen wir in den nächsten Schritten.
Zwei Anforderungen an unseren Warenkorb haben wir schon definiert: Eine Weiterleitung nach dem Hinzufügen eines neuen Produktes soll vermieden werden und wir sollen zu jedem Zeitpunkt schnell einen Blick hineinwerfen können, um gleich danach wieder weiter zu shoppen. Daraus ergibt sich die Notwendigkeit, dass der Warenkorb geöffnet werden kann, ohne die aktuelle Seite zu verlassen. Eine dritte Anforderung lautet, dass es zu jedem Zeitpunkt möglich sein soll, zur Kasse zu gehen, um die Waren anschließend zu bezahlen und damit die Bestellung abzuschließen.
Damit ergeben sich auf jeder Seite unseres Shops drei Warenkorb-Status. Erstens: So lange der Warenkorb leer ist, wird er schlichtweg nicht angezeigt. Zweitens: Wurde etwas in den Warenkorb gelegt, zeigt sich der Warenkorb am unteren Bildschirmrand und in ihm die Anzahl der Produkte, die Gesamtsumme sowie ein Button, mit dem man zur Kasse gehen kann. Im dritten Status ist der Warenkorb geöffnet und er zeigt alle Produkte mit den entsprechenden Bildern, Namen, Mengen und den Preisen. Der Warenkorb wird anhand eines kleinen »Griffs« geöffnet – ein Angebotscharakter, der durch mobile Betriebssysteme etabliert und bekannt wurde. Und dennoch selbstverständlich getestet werden sollte.
Einer der großen Vorteile, die sich durch diesen Ansatz ergeben, ist, dass kein Warenkorb-Icon im Menü untergebracht werden muss. Der Warenkorb erscheint einfach, sobald er gebraucht wird. Und sorgt damit nicht für ein noch volleres Menü.
Am Desktop ist von der Positionierung am unteren Bildschirmrand eher abzusehen. Stattdessen empfehle ich eine Sidebar auf der rechten Seite, die – wie auf Mobilgeräten – erst dann erscheint, sobald ein Produkt in den Warenkorb gelegt wurde. Abgesehen davon sind das Aussehen und die Funktionalitäten gleich, da durch die seitliche Positionierung das »Hochformat« des mobilen Menüs erhalten bleibt, was keine Umgestaltung erforderlich macht. Damit bleibt die Nutzererfahrung zudem geräteübergreifend konsistent.
Die Anforderungen an unseren Warenkorb gehen allerdings noch etwas weiter. Denn hinzugefügte Produkte müssen selbstverständlich auch wieder gelöscht werden können. Und die Menge sollte natürlich auch zu jedem Zeitpunkt veränderbar sein.
Für das Löschen von Elementen haben sich auf Mobilgeräten zwei Methoden bewährt. Einerseits klassisch mittels eines Icons oder eines Texts, andererseits mittels einer Wischgeste von rechts nach links – eben so, wie es sich bei mobilen Betriebssystemen etabliert hat (Świątkiewicz 2018).
Für die Auswahl beziehungsweise Abänderung der Menge ist in vielen Shops ein Dropdown-Menü zu sehen. Nach umfangreichen Usability-Tests diesbezüglich rät Li von der Nielsen Norman Group dringend davon ab. Stattdessen werden einfache Eingabefelder empfohlen, die mit Plus- und Minus-Buttons (Stepper) ausgestattet sind. Damit können Nutzer zum einen selbst Werte eintragen, zum anderen mit den Buttons rasch kleine Änderungen an der Menge vornehmen (Li 2017). Wichtig ist, dass auf Mobilgeräten die Tastatur mit ausschließlich Zahlen geöffnet wird, um die Eingaben zu erleichtern und Falscheingaben zu reduzieren.
Wird entgegen unseres Konzeptes doch ein Warenkorb angezeigt und kann dieser aufgerufen werden, obwohl der Nutzer noch kein Produkt in ihn gelegt hat, ist ein sogenannter Empty-State erforderlich. Dieser oft vernachlässigte Aspekt kann einen großen Beitrag zu einer deutlich besseren User-Experience in Onlineshops leisten, indem er zeigt, dass eine Nutzerinteraktion erforderlich ist, bevor hier etwas zu sehen ist.
Doch damit ist es nicht getan. Denn zeigen wir den Nutzern lediglich, dass hier nichts ist und sie etwas tun müssen, um etwas zu sehen, lassen wir sie etwas im Stich. Es ist also sehr zu empfehlen, nächste Schritte vorzuschlagen und diese mit einem Klick auf einen Button zu ermöglichen. So könnte es in einem leeren Warenkorb in unserem Shop beispielsweise einen Button geben, der ähnlich wie unser CTA-Button den Text »Jetzt Design wählen« beinhaltet und zur Produktübersicht weiterleitet.
Empty-State-Seiten bieten übrigens auch großartige Möglichkeiten, unsere Marke mittels Visual-Storytelling zu stärken und damit positive Emotionen zu erzeugen. So können liebevoll gestaltete, lustige Illustrationen oder gar Animationen mit etwas Humor die Nutzererfahrung auf neue Ebenen heben und zur Kundenbindung beitragen (Padala 2018).
