Produkt­konfiguration im Web

Moderne Webshops verfügen oftmals über einen Konfigurator, mit welchem ein Produkt nach den eigenen Bedürfnissen zusammengestellt und individualisiert werden kann. Aber was macht einen guten Konfigurator aus?

Autor:
Ueli Schmalz

Datum: 1. Juni 2023
Lesezeit: ca. 3min

Vom Müesli über Turnschuhe bis hin zum Auto - heute gibt es für beinahe jedes Produkt einen Shop, bei dem man das Produkt auf die eigenen Wünsche anpassen und selbst zusammenstellen kann. Wir haben für dich die wichtigsten Merkmale eines guten Produktkonfigurators gesammelt.

Bedienung

Einfacher Zugang

Der Konfigurator sollte möglichst einfach und direkt auf der Webseite zugänglich sein. Deshalb sollten für die Nutzung des Konfigurators möglichst wenige Voraussetzungen erfüllt werden müssen. Eine Anpassung der Einstellungen oder ein zusätzlicher App-Download sind negative Beispiele dafür.

Weniger ist mehr

Zu viele Möglichkeiten können schnell überfordern. Deshalb sollte genau überlegt werden, welche Komponenten angepasst werden können. Wenn jedes kleinste Detail verändert werden kann, wird es zudem relativ schnell unübersichtlich. Optimalerweise gibt man eine Basis vor, welche verändert und angepasst werden kann. Wenn es mehrere Ausgangspunkte gibt, kann der optimale Ausgangspunkt auch mit Hilfe von einigen Fragen ausfindig gemacht werden.

Navigation

Damit sich die Nutzer:innen gut zurechtfinden, sollte es eine gut durchdachte und intuitiv zu bedienende Navigation geben. Diese kann entweder durch eine Unterteilung in mehrere Konfigurationsschritte strukturiert sein oder es gibt in einer visuellen Vorschau Links, mit denen die einzelnen Komponenten angepasst werden können. Bei einer visuellen Vorschau sollte generell darauf geachtet werden, dass sich die Komponenten anklicken lassen und man so direkt zu den Einstellungen für diese Komponente gelangt. Falls es am Schluss des Prozesses eine Übersichtsseite mit den Informationen zum erstellten Produkt gibt, sollten sich alle Einstellungen auch von dieser Seite aus vornehmen lassen, damit man sich nicht wieder durch den ganzen Prozess klicken muss, um eine Kleinigkeit anzupassen.

Datensicherung

Bei der Konzeption eines Konfigurators sollte man sich auch Gedanken über den Datenfluss machen. Was passiert, wenn Nutzer:innen während dem Zusammenstellen plötzlich keine Internetverbindung mehr haben oder das Browserfenster geschlossen wird? Für diesen Fall sollten die Daten in einer geeigneten Weise abgespeichert werden, damit nicht der ganze Fortschritt verloren ist.

Reset-Funktion

Wenn etwas zusammengestellt wird, kann es vorkommen, dass man nochmals komplett neu beginnen möchte. Für diesen Fall sollte es immer eine Funktion geben, mit welcher der komplette Fortschritt zurückgesetzt werden kann. Wenn es sich um einen komplexen Konfigurator handelt, ist es mühsam, wenn alle Einstellungen einzeln zurückgestellt werden müssen.

Design

Responsive Design

Bei einem Konfigurator sollte besonders früh an die Darstellung auf mobilen Geräten gedacht werden. Es gibt in der Regel eine Menge Bedienelemente, welche auf den kleinen Bildschirmen irgendwo untergebracht werden müssen. Oftmals ist es einfacher, zuerst das Design für kleine Bildschirmgrössen zu erstellen und dieses anschliessend für grössere Bildschirme zu optimieren, als umgekehrt.

Navigation

Die Navigation ist optimalerweise so gestaltet, dass immer sichtbar ist, welche Schritte schon erledigt wurden und welche Schritte noch bevorstehen. Ein Fortschrittsbalken ist ein zusätzliches Hilfsmittel um den aktuellen Status zu visualisieren.

Preisübersicht

Falls der Preis je nach ausgewählten Komponenten variieren kann, sollte der aktuelle Preis immer sichtbar sein. Zudem sollte bei den einzelnen Komponenten klar sein, wie sie sich auf den Gesamtpreis auswirken und welche Zusatzkosten generiert werden, wenn sie ausgewählt werden.

Microinteractions

Mit kleinen Reaktionen des Konfigurators auf die Eingaben, kann das Erlebnis stark verbessert werden. So kann zum Beispiel ein kleiner animierter Indikator anzeigen, welche Option gerade ausgewählt ist. Eine weitere beliebte Funktionalität aus diesem Bereich ist auch, dass das Produkt in der Vorschau direkt mit der Option dargestellt wird, sobald mit dem Mauszeiger über die Option gefahren wird.

Spezial­funktionen

Bei einem massgeschneiderten Konfigurator ist beinahe alles möglich. Zwei coole Ideen stellen wir dir gerne etwas genauer vor:

Anpassen von bestehenden Produkten

Wenn vorkonfigurierte, fertige Produkte verkauft werden, gibt es die Möglichkeit, den Shop so zu gestalten, dass diese Produkte als Vorlage in den Konfigurator geladen werden können und nicht das ganze Produkt von Grund auf zusammengestellt werden muss. Wenn es einen physischen Verkaufspunkt für diese Produkte gibt, ist es auch denkbar, einen QR-Code bei den Produkten zu platzieren. So erhalten die Nutzer:innen die Möglichkeit, das Produkt, welches sie in den Händen halten direkt auf ihre Bedürfnisse abzustimmen.

Erkennen von Konflikten

Bei komplexeren Produkten kann es vorkommen, dass sich gewisse Optionen nicht kombinieren lassen. Ein guter Konfigurator warnt in diesem Fall davor, dass diese Auswahl nicht getätigt werden kann und verhindert fehlerhafte Bestellungen.

Inspiration

Für Konfiguratoren gibt es viele unterschiedliche Anwendungsbereiche. Wenn du dich dafür interessiert, für welche Anwendungsfälle es bereits Konfiguratoren gibt, findest du unter dem folgenden Link eine Sammlung der unterschiedlichsten Konfiguratoren:

https://www.configurator-database.com/configurators#/

Hast du selbst eine Idee, wie du auf deiner Webseite einen Konfigurator einsetzen möchtest? Gerne tauschen wir uns mit dir bei einem Kaffee darüber aus!

Weitere aktuelle Blogposts