Bedienkonzept

Es entscheidet über Erfolg oder Verderben des Konfigurators. Hohe Usability und User-Experience gilt es hier in möglichst vollendeter Perfektion zu erreichen. Auch Omas und Opas sollen Spaß haben beim Zusammenstellen von Produkten.

[breadcrumb]

Anhand von ausgesuchten Beispielen, die einst Vitaly Friedman zusammengestellt hat, beschäftigen wir uns mit dem Bedien- und Interaction-Konzept von Produktkonfiguratoren. Die Navigation als Grundlage der Bedienungsführung wird den Anfang machen, danach gehts in technischere Details der Parameterauswahl und Parameterskalen. Zum Abschluss sprechen wir über angebotene Templates und den Initialzustand eines Produktkonfigurators.

Hier wird man erstmal etwas ausgebremst und muss sich klar machen, dass es zwei Arten von Produktkonfiguratoren gibt. Zum einen die Builder- und Customizer (Typ Customizer) und zum anderen die Konfiguratoren zum explorieren und inspirieren (Typ Explorer).

Bei den Explorer Typen steht die Bekanntmachung mit dem Produkt im Vordergrund. Der Konfigurator soll mit Freude relevante Produktdetails vermitteln und Vertrauen in den Herstellung und das Produkt wecken. Das Bedienkonzept nimmt darauf Rücksicht, indem es auf keinen Fall technisch überfrachtet, sondern eher verspielt, leichtgewichtig daherkommt. Am ansprechendsten sind hier Bedienfelder die mit der Produktvisualisierung verschmelzen und sich geräuschlos verbergen, sobald sie nicht im Fokus stehen.

Über Pins sind nur die wichtigsten für den Nutzer interessanten Parameter auswählbar und verschmelzen mit dem Produktbild, um die Session-Erfahrung nicht zu stören.
Auch hier ist die Präsentation der Marke und des Produktes reinste Sahne und die eigentlichen technischen Details treten erstmal in den Hintergrund, können bei Bedarf über Klicks abgefragt werden.

Für Customizer-Typen weht ein etwas anderer Wind. Hier haben wir es mit Kunden zu tun, die im AIDA-Prozess schon weiter gekommen sind. Diese Nutzer stehen kurz davor das Produkt zu kaufen und möchten nun ihre Wunschzusammenstellung mit dem Produktkonfigurator erstellen. Und so regnet es also Details über Details. Damit man nicht ertrinkt muss Ordnung und Struktur her, eine Schritt-für-Schritt-Navigation kommt hier oft zum Einsatz. Der Vorteil: es wird nichts vergessen. Um dem User trotzdem noch Freiheit zu gewähren, bietet es sich an, die Schritte nicht in einer Zwangsreihenfolge zu absolvieren, sondern auch Vor- und Rücksprünge zuzulassen. Die Navigation wird dann in der Form von Tabs, Bild-Icons oder aufklappbaren Modal-Dialogen umgesetzt.

Hier ist schon deutlich mehr „Stuff“ auf der Bühne unterwegs im Vergleich zu den obigen Beispielen. Abgeschlossene und noch offene Schritte werden zur besseren Orientierung im Parameter-Jungle visuell markiert.

Bei einigen Produkten ist die Kombinierbarkeit von Parmetern-Ausprägungen stark aus baulichen oder herstellungsbedingten Gründen eingeschränkt. Der Konfigurator trägt dem Rechnung und stellt eher Ausbauoptionen statt Parameter-Controls bereit, die als Cards implementiert werden.

Die Optionen erscheinen hier untereinander angeordnet als Cards mit Angabe von Icon, Name, Preis und Hinweistext.

Ganz sachlich geht es zu, wenn die Freiheitsgrade so eingeschränkt sind, dass eigentlich nur Spezialisten die Produktparameter zusammenstellen können. Dann „schrumpft“ der Produktkonfigurator zu einer Tabellenform mit dem Fokus auf die Vergleichbarkeit der Optionen.

Hier können nicht beliebige Motoren mit beliebigen Chassis kombiniert werden. Daher die Vorauswahl, die in einer Tabelle präsentiert wird. Jede Spalte ist eine Kaufoption mit eigenen, von Profis abgestimmtem Parameterausprägungen.

Die Auswahl der Parameter & Ausprägungen

Hat sich der User erstmal orientiert, kann es mit der Konfiguration des Produktes losgehen. Während es nur unter dem Aspekt des Explorierens (siehe oben) sinnvoll erscheint Ausprägungen komplett zu verstecken, sollten die verfügbaren Varianten gut sichtbar platziert sein, um den User zum Ausprobieren einzuladen und das Engagement zu steigern.

Für den Parameter Farbe stehen viele Ausprägungen zum Klicken bereit. Weitere können per Slider erreicht werden.
Auch hier sind viele Ausprägungen des Parameters „Armband“ auf einmal zu sehen. Dem User wird die Produktvielfalt „lecker“ serviert.
Farben, Materialien und Stoffe, laden ein zum An- und Auswählen.

Parameterskalen

Mindestens einer, maximal 10 Parameter sollten Produktkonfiguratoren zum Customizen anbieten. Warum nicht mehr? Angenommen jeder Parameter hat 10 Wahlmöglichkeiten (genannt Parameterausprägungen), dann muss sich der Nutzer theoretisch schon mit 100 Entscheidungen herumschlagen. Es wird noch Schlimmer: einige Parameter haben sogar Tausende oder Millionen Ausprägungen. Um da nicht unterzugehen und komplett den Spass zu verlieren, ist viel UX-Magie und gute Bedienelemente vonnöten.

Dieser Regalkonfigurator hat nahezu unendliche viele Einstellmöglichkeiten (kontinuierliche Skala) für Breite und Höhe. Mit dem Slider als GUI-Element hat man das aber gut im Griff. Binäre Skalen (Tür ja oder nein über dem Warenkorb-Button) werden über GUI-Switches realisiert.

Slider sind optimal geeignet für kontinuierliche Skalen. Diskrete Parameterskalen wie z.B. Materialien werden mittels Buttons oder Drop-Down-Menüs abgedeckt. Letzere sind aus Sicht der UX allerdings nicht sehr gut geeignet, da sie die Wahlmöglichkeiten erst nach einem Klick präsentieren.

Hier wurde eine eigentlich kontinuierliche Skala die mittels eines Sliders oder direkt verschiebarem Handle (gestrichelte Linie mit 20″ Markierung links) handhabbar wäre über großflächige Kachel-Buttons abgebildet. Der Grund erschließt sich mir nicht, da die Kacheln die Hälfte der Bühne verdecken.

Einige Produktkonfiguratoren-Designer erfinden mutig ganz neue Bedienfelder, da Standardelemente zu umständlich für die Umsetzung wären.

Die mehrdimensionale Platzierung und Positionierung der Lampen-Gelenke wäre schwer mit Slidern & Co. abdeckbar. Das Bedienfeld links wurde eigens für die Definition des Lampenständers erfunden.

Templates & Initialzustand

Für den User überraschend und sehr einladend wirken Produktkonfiguratoren, die als „weißes Blatt“ starten, d.h. hier ist das Feld noch nicht bestellt und der User hat selbst die Wahl, wie es losgehen soll.

Nicht gewählte Parameter sind nur als Aufrißzeichnung im Hintergrund erahnbar. Der User kann hier seinem viel zu lange schon unterdrücktem Spieltrieb nachgehen.
Auch visuell spannend, wenn das eigentliche Produkt gerade nur zu erahnen ist. Die Neugier wird viele Kunden dazu verleiten zu schauen, welches Fahrrad da wohl noch entstehen mag.

Am anderen Ende stehen komplett auskonfigurierte Starteinstellungen. Diese nehmen zwar schon vieles vorweg, können aber dafür die Sicherheit geben, dass die Zusammenstellung der Parameter gut ankommt und von vielen schon so bestellt wurde.

Über den Reiter „limited editions“ kann mit komplett vor-ausgestatten Produktvarianten gestartet werden.

Ähnliche Beiträge

  • Typographie

    Die Schriftart vermittelt Emotionen durch Form und Schwung der Buchstaben und wird dementsprechend sorgfältig zum Thema passend ausgewählt. Informationen werden nicht nur durch den lexikographischen kargen Text selbst vermittelt, sondern auch die Zeichnung, der Steg-Verlauf, die Serifen und die Ausrichtung von Buchstaben in einer Schriftart kommunizieren Infos und erzeugen Stimmungen. Abhängig vom Thema der Webseite…

  • Farben

    Das Google Mateiral Design definiert einen Farbkatalog und klassifiziert Helligkeitsstufen, damit Hintergrundfarben (auch Primärfarbe genannt) mit Vordergrundfarben (auch Akzentfarbe genannt) nahezu beliebig kombiniert werden können. Primärfarben werden mit einer mittleren Helligkeit angelegt (Stufe 500), während Akzentfarben stark gesättigt und hell sind (Stufe A100 bis A300). Primärfarbe Hintergrundfarben nehmen flächenmäßig einen großen Raum ein. Diese sind…

  • Navigation

    Woher kommt der User, was ist aktuell zu tun und wo geht es danach hin. Navigationselemente beantworten diese Fragen auf einen Blick. Breadcrumbs Mit Breadcrumbs (Brotkrumen) ist der Pfad zum aktuellen Dialog sichtbar und sie ermöglichen das Zurückspringen zu einer höheren Seite. Besonders relevant ist der Breadcrumb, wenn User von außen auf die Seiten kommen…

  • Grid Raster

    Ordnung ist das halbe Leben. Mit Raster & Bündigkeit wird sogar ein ganzes Daraus. Nicht eingezeichnete Ordnungsstrukturen werden unbewusst erkannt, wenn alle Elemente innerhalb eines regelmäßigen Grids (Raster) angeordnet sind. Unbewusst wird diese gerasterte Ordnung positiv vom User wahrgenommen. Das Raster besteht aus gleichbreiten bzw. gleichhohen Reihen und Spalten mit einem gleichbleibenden Abstand (engl. Gutter)…

  • Mass Customization

    Der Begriff „Mass Customization“ wurde von Stanley M. Davis 1987 in seinem Buch „Future Perfect“ erstmalig beschrieben als ein Trend bei dem Firmen auf mikrosegmentierten Märkten individualisierbare Produkte in Kleinstauflagen bis zur Losgröße „1 Stück“ anbieten. Der erste Teil „Mass“ bezieht sich auf das durchaus große Volumen der zusammengezählten Sonderanfertigungen jener individuell angepassten (engl. „custom“)…