Produktkonfigurator im Shop-Einsatz
0621 586 799 21
Produktkonfigurator im Shop-Einsatz MENU   ≡ ╳
  • Leistungsangebot
    • Produktkonfigurator
    • Angebotskonfigurator
    • Produktvisualisierung
    • Visuelle Konfiguration
    • Vertrieb & Angebot
    • Verwalten & Organisieren
    • Preisberechnung & Checkout
  • Services
    • Beratung
    • Entwurf
    • Finanzierung
    • Werkschau
    • Referenzen
  • Learning
    • Getting Started
    • Nutzen von Produktkonfiguratoren
    • Arten von Produktkonfiguratoren
    • Mass Customization
  • Design
    • Design Prinzipien
    • Frontend-Design
    • UX-Design
    • User Feedback messen
  • Programmierung
    • Implementierung
    • Prototyping
    • Shop-Produktkonfigurator
    • Ablauf
Skip to content

Bedienkonzept

By Tobias GüntherEntwerfen & Designen2. Oktober 201922. Januar 2020

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.

  1. Produktonfigurator.shop »
  2. Produktkonfigurator erstellen »
  3. Entwerfen & Designen »
  4. Bedienkonzept »

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.

Die Navigation

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.

Tagged: AIDA, Ausprobieren, Bedienkonzept, Bedienungsführung, Bekanntmachung, Builder, Button, Customizer, Engagement, Entscheidung, explorieren, Icon, inspirieren, Interaction Design, Modal-Dialog, Navigation, Ordnung, Parameter, Parameterausprägung, Produktbild, Reihenfolge, Schritt-für-Schritt-Navigation, Skala, Slider, Step-by-Step, Struktur, Switch, Tab, Template, Usability, User Experience

SERVICES

  • Beratung
  • Finanzierung
  • Entwurf
  • Prototyping
  • Implementierung
  • Werkschau
  • Referenzen

TOPICS

AIDA AIDA-Modell Alleinstellungsmerkmal Amazon Angebot Builder Corporate Design CRM Customizer design E-Commerce emotionale Ansprache Emotionalität Empfehlungen Endgerät Foto Frontend GUI Icon Informieren Kaufabschluss Kombinationsregel Kosten Layout Lead Lean back Logo Maßanfertigung Navigation One-Page-Layout Ordnung PDF Preiskampf Produktbild Produktdarstellung Produktdetail Produktvariante Schatten Slider soziale Netzwerke Tab Usability Variantenmanagement Verkaufen Vertrieb

LEISTUNGSANGEBOT

  • Produktkonfigurator
  • Visuelle Konfiguratoren
  • Produktvisualisierung
  • Angebotskonfigurator
  • CPQ configure price quote
  • Variantenmanagement
  • Vertriebskonfigurator
  • Checkout

LEARNING

  • Mass Customization
  • Nutzen von Produktkonfiguratoren
  • Arten von Produktkonfiguratoren
  • User Feedback messen
  • Getting started

KONTAKT

Kundenberater & Geschäftsführer
Dr. Tobias Günther

tobias.guenther@elaspix.de
0621 586 799 21

Copyright © ELASPIX 2023 IMPRESSUM DATENSCHUTZ
Diese Webseite nutzt Cookies. Sie können die Cookies hier deaktivieren. Cookie settingsACCEPT
Privacy & Cookies Policy

Privacy Overview

Wir nutzen Cookies von Dritten, namentlich von Google Analytics um Informationen zu sammeln, welche unserer Themenseiten betrachtet werden. Hierdurch wird uns ermöglicht das Informationsangebot sinnvoll auszubauen. Sind Sie nicht einverstanden, müssen wir sie leider bitten, diese Webseite nicht zu nutzen. Weitere Informationen und die Kontaktadresse des Datenschutzbeauftragten finden Sie auf der Datenschutz-Seite.
Necessary
immer aktiv
Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.
Non-necessary
Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.
SPEICHERN & AKZEPTIEREN