Wie gestalte ich die customX Konfiguration für mein Variantenprodukt?

von Thomas Seibel
1. August 2019

Die Einführung eines Produktkonfigurators ist nicht nur mit technischen sondern auch mit zahlreichen strategischen und gestalterischen Fragen und Aufgaben verbunden.

Der Kontakt zum Nutzer wird über eine Oberfläche hergestellt, die unser Produktkonfigurator via Web zur Verfügung stellt. In diesem Artikel möchten wir Ihnen daher einige Tipps für die Gestaltung des Web-Auftritts Ihres Konfigurators geben. Er stellt die zentrale Schnittstelle zwischen Mensch und Maschine dar und spielt damit eine wesentliche Rolle für die Zufriedenheit Ihrer Kunden und Mitarbeiter.

Mit der Veröffentlichung unseres aktuellen Release vor einem Jahr haben wir Ihnen vielfältige Möglichkeiten gegeben, diese Schnittstelle nach Ihren Wünschen zu gestalten. Doch wie kommt man zum optimalen Frontend? Dazu beginnen Sie zunächst mit einigen grundlegenden Überlegungen:

  • Zielsetzung
  • Nutzergruppe
  • Usability und UX
  • Art der Veröffentlichung des Konfigurators
  • Technische Voraussetzungen
  • Tipps zum Grafikdesign

Zielsetzung

 

Welches Design der oben dargestellten Oberflächen ist besser? Vermutlich wird den meisten die linke - die optisch ansprechendere Variante - am besten gefallen. Aber ist schöneres Design gleichbedeutend mit einer besseren Oberfläche? Da dies jedoch sehr stark von Ihrer individuellen Zielsetzung und der angestrebten Nutzergruppe abhängt, kann diese Frage nicht pauschal beantwortet werden.

Um später den Erfolg des Konfigurators messen zu können, beginnen Sie immer mit einer nutzerorientierten Betrachtung und der Bestimmung von Ziel und Zweck.

Es gibt einige typische Ziele, die mit der Einführung eines Konfigurators erreicht werden sollen. Die folgende Liste erhebt allerdings keinen Anspruch auf Vollständigkeit, da je nach Unternehmenssituation auch ganz andere Ziele im Vordergrund stehen können.

  • Mass customization erreichen - Variantenprodukte wie Massenware behandeln
  • Variantenvielfalt beherrschen ohne sie einzuschränken
  • Prozesse beschleunigen, Durchlaufzeiten verringern
  • Prozesse optimieren, Kosten senken
  • Umsatzsteigerung durch attraktives, individuelles Angebot
  • Fachkräftemangel ausgleichen

Um diese Ziele zu erreichen, kann der Konfigurator auf unterschiedliche Weise eingerichtet werden. Bedenken Sie daher bitte, welchen Zweck der Produktkonfigurator erfüllen soll:

  • Interesse wecken
  • Über die Möglichkeiten des Produktes informieren
  • Angebote erstellen
  • Downloadmöglichkeit für BIM Daten bereitstellen
  • Direkte Kaufentscheidung/Bestellung erreichen

In der Regel steht der Zweck in sehr engem Zusammenhang mit der Zielgruppe, so dass wir die konkreten Gestaltungstipps in diesem Abschnitt darstellen werden.

Zielgruppe - Wer sind die Nutzer des Produktkonfigurators?

Überlegen Sie sich genau, wer die Nutzer Ihres Konfigurators sein werden - für wen Sie also das Frontend gestalten. Dies hängt natürlich stark von den definierten Zielen bzw. dem Zweck ab.

Typische Nutzergruppen sind:

  • Mitarbeiter einer technischen Abteilung (Konstruktion, Arbeitsvorbereitung)
  • Vertriebsmitarbeiter
  • Händler
  • Kunden
  • Potentielle Kunden / Interessenten

Beachten Sie, dass das Expertenwissen um Ihr Produkt üblicherweise im Verlauf der Liste abnimmt. Dementsprechend können Sie eigenen Mitarbeitern wesentlich komplexere Oberflächen und mehr Einstellmöglichkeiten zumuten als einem potentiellen Kunden, der meist als Laie angesehen werden muss.

Sie können natürlich auch einen Konfigurator für mehrere Nutzergruppen anbieten. Wenn Sie dies möchten oder später eventuell erweitern wollen, achten Sie bei Ihrer Entscheidung für eine Software unbedingt auf die Möglichkeit, unterschiedliche Nutzergruppen einzurichten, unterschiedliche Rechte zu vergeben und gegebenenfalls Mehrsprachigkeit zu verwalten.

Mann sitzt im Büro vor Zeichnungen

Mitarbeiter technischer Abteilungen

Für die eigenen technischen Mitarbeiter wird die Funktion des Konfigurators im Vordergrund stehen - sie erwarten umfassende Einstellmöglichkeiten. Das Design spielt hier eine eher untergeordnete Rolle - die Oberfläche muss vor allen Dingen praktisch, d.h. mit wenigen Klicks zu bedienen sein. Auch für diese Nutzergruppe gilt allerdings, dass eine schöne Oberfläche sich positiv auf die Freude an der Arbeit auswirkt.

Der Zweck ist einfach die Vereinfachung des Arbeitsablaufs, der Auftrag ist in der Regel schon erfolgt. Auch aus diesem Grund spielt das Design eine untergeordnete Rolle.

Vertriebsmitarbeiter / Händler

Vertriebsmitarbeiter und Händler möchten im Gespräch mit dem Kunden ein komplettes Produkt konfigurieren, benötigen also entsprechend umfassende Einstellmöglichkeiten in einer Oberfläche, die der Kunde nachvollziehen kann. Eine wesentliche Rolle spielt hier auch eine überzeugende 3D-Darstellung des individuellen Produktes in einer ansprechenden Umgebung.

In der Regel sind Vertriebsmitarbeiter intensiver mit dem Produkt vertraut als Händler und sind daher in der Lage, mehr und kompliziertere Eingaben korrekt vorzunehmen.

Beide Zielgruppen möchten am Ende ein fertiges Angebot erhalten oder - noch besser - direkt eine Bestellung. Das Design muss also den Kunden ansprechen und überzeugen. Alle wichtigen Punkte müssen dargestellt sein.

Männer besprechen ein customX Angebot
Pixabay 718411_1920

Kunden

Kunden, die den Konfigurator selbst bedienen und daraus direkt auch bestellen sollen, haben normalerweise weniger tiefe Produktkenntnisse. Sie werden in der Regel mehr nach Funktionen als nach Merkmalen konfigurieren. Bei der Beschriftung der Felder muss also direkt klar werden, wie sich welche Änderungen auf die Funktion auswirken. Beschränken Sie die Anzahl der Auswahlfelder auf das notwendige Maß.

Auch hier ist eine 3D-Darstellung wichtig, damit die Kunden sich direkt ein Bild von ihrem individuellen Produkt machen können.

Wenn der Kunde am Ende der Konfiguration direkt entscheiden soll, braucht er Sicherheit, dass sein konfiguriertes Produkt das richtige ist. Auch daher sollte auf keinen Fall die Grafik fehlen. Natürlich muss auch ein entsprechender Button für die Bestellung vorhanden sein. Weitere Sicherheit gibt ihm die Möglichkeit, Hilfe zu erhalten.

Interessenten

Interessenten wissen in der Regel noch recht wenig über Ihr Produkt. Hier gilt es, mit dem Konfigurator echtes Interesse zu wecken und den Kunden im besten Fall von Ihrem Produkt zu überzeugen. Dafür stellen Sie sich die Frage: Was erwarten potentielle Kunden? Meist wird diese Gruppe erst einmal im Konfigurator "spielen" und verschiedene Varianten ausprobieren. Zeigen Sie, was Sie können, beschränken Sie sich aber auf wichtige Aspekte und beschriften Sie alle Felder absolut eindeutig. Idealerweise erläutern Sie die einzelnen Einstellmöglichkeiten, indem Sie unter dem Konfigurator noch eine Art Prospekt anbieten. Wie das gelingt, lesen Sie unter Art der Veröffentlichung.

Interessenten sollen gerne wiederkommen oder sogar direkt Kontakt aufnehmen - dafür ist natürlich ein entsprechender Button zwingend notwendig.

Happy man using smartphone at modern coffee shop, he chatting Online Messaging on mobile phone.

Usability und User Experience

Wie gestalte ich das Frontend im Web für Konfiguratoren?

Die Usability sollte eine Selbstverständlichkeit für das Frontend Ihre Konfigurators sein. Es sollte also für die Zielgruppe einfach sein, die nötigen Eingaben zu machen und am Ende das gewünschte Ziel zu erreichen.

Doch die Nutzer erwarten heute mehr. Die User Experience spielt eine immer größere Rolle bei der Beurteilung der Zufriedenheit. Eine grundlegende Überlegung bei der Entwicklung des Frontends sollte demnach sein, wie die Nutzung für den User zu einem positiven Erlebnis werden kann, so dass es Spaß macht, ein neues Produkt zu konfigurieren - dies wird neben der Funktionalität und dem Preis des Produktes wesentlichen Einfluss auf die Kaufentscheidung haben.

Sie müssen Ihre Nutzer begeistern - dies kann aber nur im Gesamtzusammenhang geschehen, wenn alle Aspekte des Kontaktes zum Kunden beachtet werden wie Erwartungen des Nutzers, Kontakte nach Nutzung des Konfigurators, Lieferzeiten, Produktqualität etc.

Natürlich werden die unterschiedlichen Nutzergruppen auch unterschiedliche Anforderungen an eine Oberfläche bezüglich Usability und User Experience stellen. Es ist also einmal mehr wichtig, die Zielgruppe möglichst genau zu definieren.

Technische Anforderungen

Pixabay technology-2468063_1920

In den Nutzergruppen kommen unterschiedliche Endgeräte zum Einsatz, die die technischen Anforderungen an die Web-Auftritt des Konfigurators bestimmen. Hierzu zählen:

  • Gerätekategorie des Endgeräts (Desktop, Tablet, Mobil)
  • Bildschirmauflösung
  • Betriebssystem
  • Browser

Ermitteln Sie unbedingt, welche Geräte Ihre Zielgruppe nutzt, damit der Konfigurator optimal nutzbar wird und die User das Nutzungserlebnis positiv bewerten.

Fragen Sie sich nun, auf welche Geräte Sie optimieren sollen?

Fangen wir mit dem einfachsten Fall an. Sie nutzen Ihren Konfigurator für interne Zwecke in der Konstruktion oder Arbeitsvorbereitung zur Auftragsabwicklung oder Projektunterstützung. Schauen Sie sich um. In der Regel werden Desktop-Geräte mit einem Full-HD oder 4K-Monitor genutzt. In diesen Abteilungen sollte Windows das übliche Betriebssystem sein und ein gängiger Browser wie Chrome, Firefox, Internet Explorer oder Edge zum Einsatz kommen.

In allen anderen Nutzergruppen werden verstärkt mobile Endgeräte zum Einsatz kommen - der Vertrieb arbeitet häufig mit Tablets, die Kunden und vor allem Interessenten nutzen oft auch Smartphones, mit denen sie in ruhigen Situationen, z.B. während Geschäftsreisen oder in Pausen im Netz unterwegs sind.

Art der Veröffentlichung

Auch die Frage, wie der Konfigurator veröffentlicht werden soll, wird sehr stark von der Zielgruppe beeinflusst, die den Konfigurator nutzen soll. Grundsätzlich gibt es zwei Arten der Veröffentlichung - beide nutzen das Internet.

Zum einen ist eine Stand-Allone-Lösung denkbar, bei der auf der entsprechenden Seite im Web nur der Konfigurator gezeigt wird. Diese Lösung ist sicher für Ihre Mitarbeiter in der Technik sowie Vertriebsmitarbeiter optimal, da sie nicht durch das Drumherum abgelenkt werden.

Zum anderen können Sie Ihren Konfigurator natürlich auch in die Website über ein iframe einbinden. Bei dieser Lösung haben Sie die Möglichkeit, zusätzliche Informationen und Interaktionsmöglichkeiten auf derselben Seite anzubieten. Beispielsweise können Sie im oberen Bereich den Konfigurator zeigen und weiter unten Erläuterungen zu den einzelnen auszuwählenden Punkten ähnlich einem Prospekt. Diese Art der Einbindung ist dann optimal, wenn Sie Ihre Kunden direkt ansprechen und Ihnen den Konfigurator zur Verfügung stellen. So hat jeder die Möglichkeit, sich die Einstellmöglichkeiten erläutern zu lassen.

Gestaltung eines Frontends

Frontend Vertrieb Raumsysteme

Beim Aufbau des Frontends gibt es neben den technischen Anforderungen selbstverständlich auch einige gestalterische Aspekte zu beachten. Darüber, dass es sich in Farbgebung, Schriftart und ähnlichen Merkmalen nahtlos in Ihr Corporate Design einfügen sollte, brauchen wir sicherlich nicht zu sprechen.

Aber einige Grundsätze gelten zusätzlich:

  • Klare Struktur der Seite und eindeutige Beschriftung der Eingabefelder (nicht nur im Feld selbst sondern auch davor)
  • Logo oben links - als Seiteneinstieg bei typischem Leseverhalten
  • Dunkle Schrift auf hellem Untergrund ist leichter lesbar als umgekehrt
  • Klare Icons nutzen (Wenn Sie über kein eigenes Grafik-Design verfügen, können Sie sich Sets von Icons von verschiedenen Websites zum Teil sogar kostenlos herunterladen, z.B. iconfinder.com, icons8.de, freepik.com, icon-icons.com etc. - Bitte beachten Sie immer die rechtlichen Bestimmungen der einzelnen Anbieter). Achten Sie immer auf einen durchgängigen Stil der Icons!
  • Rechtliche Vorgaben nicht vergessen (Impressum / Datenschutz)
  • Responsive Design - Überlegen Sie, welche Flächen sich im sofort sichtbaren Bereich bei unterschiedlichen Geräten befinden sollen
  • Vorschau mit schönen, deutlichen Bildern zur sofortigen Veranschaulichung der Eingaben

 

Bei customX lösen wir die Frontend-Gestaltung so, dass jeder Web-Designer diese einfach umsetzen kann. Das Frontend wird immer als Webpage aufgebaut - egal für welche Art der Veröffentlichung Sie sich entscheiden. Dazu nutzen Sie wie gewohnt HTML5 mit den gleichen Tags.