Neue Onlineshop Funktion – “Mich benachrichtigen” Produkte wieder auf Lager

alkima WEB & DESIGN betreut seit vielen Jahren einen der führenden Onlineshops in Deutschland für Outdoor-Freizeitbekleidung und -tools, den www.bw-online-shop.com. Gemeinsam haben wir den Onlineshop in den letzten Jahren stark weiterentwickelt und massiv skaliert.

In diesem Artikel möchten wir Ihnen ein neues Feature vorstellen, das zunächst wie ein kleines Feature erscheinen mag und von viele bereits als Standard Funktion gesehen wird, aber es doch technisch einiges zu beachten gibt und das nicht nur in der Programmierung, sondern vor allem auch in der Benutzbarkeit für den Nutzer.

Das neue Feature erlaubt es dem User, sich für eine Benachrichtigung anzumelden, die den User über die Wiederverfügbarkeit eines Produkts informiert. Wie bereits erwähnt scheint dieses Feature auf den ersten Blick wie eine einfache Funktion aussehen, allerdings handelt es sich aus technischer und UX-Design Sicht um ein relativ großes Feature. Die Schwierigkeit bestand nicht nur darin, die Logiken für diese Funktion in Zusammenhang mit den internen Prozessen beim Kunden zu entwickeln, sondern auch das UX-Design dafür zu erstellen. Im Wesentlichen mussten wir ein UX-Design entwickeln, das alle Produktvarianten des Onlineshops berücksichtigt.

Die Produktvarianten gehen über eine einfach faltbare Isomatte, einen Militärrucksack, der in verschiedenen Tarnfarben erhältlich ist und Outdoor-Jacken, die sowohl in verschiedenen Farben als auch in verschiedenen Größen verfügbar sind. Hierdurch hat der Onlineshop eine hohe Anzahl an unterschiedlichen Produktvarianten, was die Komplexität von Funktionen, die für Produkte entwickelt werden, stark erhöht.

Die Anzeige der Farboptionen für ein bestimmtes Produkt ist auf der Produktdetailseite zu finden. Wenn eine bestimmte Farbe nicht vorrätig ist, wird diese Option ausgegraut und kann nicht ausgewählt werden.

Um das Nutzererlebnis bzw. die Benutzbarkeit beim Einkaufen zu verbessern und das Verkaufspotenzial eines Produkts zu steigern, mussten wir diese Funktionalität entsprechend anpassen. Durch die Anpassungen sind nun nicht lieferbare Produktvarianten auswählbar und anstelle eines “In den Warenkorb” Buttons haben wir einen “Benachrichtigung” Button mit der neuen Funktionalität implementiert. Dies ist vermeintlich auch eine einfache Anpassung, allerdings sind bei der technischen Umsetzung unzählige Dinge zu beachten.

Nach vielen A/B-Tests wurde uns klar, dass die Verwendung einer primären Call-To-Action (CTA) keine Option ist. Die meisten Nutzer neigen dazu, den Unterschied der Funktion nicht zu bemerken, wenn die primäre CTA für andere Funktionen als dem Start des eigentlichen Kaufprozesses. Zudem sollte die primäre CTA natürlich auch in dieser Art genutzt werden.

Um die Benutzbarkeit und das Verständnis bei dem Nutzer zu verbessern, haben unsere UX-Designer eng mit unseren Frontend-Entwicklern zusammen gearbeitet und gemeinsam eine perfekte Lösung entwickelt - Eine sekundäre Call-to-Action.

Das war aber nur ein Teil der Herausforderung, da im Onlineshop noch Produkte mit mehr als einer Dimension für die Auswahl von Attributen existieren. Einige Produkte haben unterschiedliche Größen und Farben. Im Normalfall können Größen und zusätzliche Produktattribute einfach in einem Popup-Menü ausgewählt werden. Dies würde den Nutzer allerdings zwingen, jede Größe des Produkts durchzugehen, um den genauen Lagerstatus zu sehen. Das wäre natürlich für die Benutzbarkeit nicht zuträglich. Zwar könnte man argumentieren, dass eine Person weiß, welche Größe sie kaufen möchte. Dies wird evtl. auch so sein, allerdings konnten wir das nicht wirklich an den von uns gesammelten Daten eruieren. Darüber hinaus ist Größe nicht das einzige Attribut, das ausgewählt werden muss.

Es war auch keine Option, neben jeder ausverkauften Größe eine sekundäre CTA direkt in dem Pop-up einzufügen. Stellen Sie sich ein Szenario vor, in dem es ein Produkt mit 10 Größen gibt, von denen 9 ausverkauft sind. Also auch keine Lösung.

Der sichtbare Bereich wäre überfüllt mit roten „Out of stock“-Labels und einem großen roten Button neben jedem Produkt. Da unsere Auswahl begrenzt war, haben wir uns für tertiäre CTA entschieden. Manchmal ist Einfachheit der Schlüssel.

Heutzutage hat bei der Entwicklung eines Onlineshops für den B2C-Markt die mobile Benutzbarkeit oberste Priorität, da mittlerweile weit über 75% aller potenziellen Kunden mobil auf den Onlineshop zugreifen.

Für eine bessere mobile Benutzbarkeit nutzen wir normalerweise native Pop-ups, da diese für den Nutzer eindeutig sind.

Das Problem bei diesen Pop-Ups ist, dass sie nicht angepasst werden können, da das genutzte Betriebssystem wie z.B. Android oder IOS dieses vorgibt. Also mussten wir das native Pop-up doch ersetzen und einen Button integrieren mit der Information "Benachrichtigen, wenn wieder auf Lager".

Manchmal haben bestimmte Funktionen, die klein erscheinen mögen, einen erheblichen Einfluss auf den Umsatz eines Onlineshops. Wenn Sie auf der Suche nach einem zuverlässigen Partner sind, der alle Details im E-Commerce kennt, dann melden Sie sich bei alkima WEB & DESIGN!