Als letztes bleibt die Frage: „Vorsprung durch Technik“ oder doch lieber „for life“?

Einkaufen im Internet ist heute alltäglich.

Jeder beliebige Shop hat 24/7 geöffnet und es gibt eine schier unfassbare Anbieter- und Produktauswahl. Nutzer können sich ausgiebig über gewünschte Produkte informieren und ihre Kaufentscheidung treffen. Egal ob es sich um eher einfache Produkte – z.B. Kleidung, Schuhe, Nahrung – oder komplexe Produkte – die selbst konfigurierbar sind – handelt.

Speziell hierzu habe ich mir verschiedene Auto-Konfiguratoren angesehen. Jeder Autohersteller bietet einen solchen Konfigurator an. Ziel hierbei ist es den Nutzer möglichst leicht zum Traumauto zu verhelfen. Aber genau hierin liegt die Schwierigkeit. Nicht jeder schafft es den Konfigurationsprozess optisch ansprechend und vor allem verständlich im Web abzubilden.

Wie also sollten komplexe Konfigurationsprozesse im Web dargestellt werden?

Dies möchte ich ihnen anhand der Konfiguratoren von Audi und Volvo zeigen. Beide überzeugen durch ihr Gestaltung und die Führung durch den Konfigurationsprozess, der aufgrund durchdachter Auswahlmechanismen schnell zum Traumauto führt. Die sich auch auf andere Prozesse im Web übertragen lassen.

Gut visualisierte Modell-/Grundauswahl

Die Modellauswahl erfolgt nicht einfach nur per schnöden Textlinks, sondern wird durch eine beispielhafte Abbildung des Modells optisch überstützt. Zudem erhalten Nutzer beim Überfahren der Modelle mit der Maus bereits weitere Informationen.

Audi Modellauswahl

Modellauswahl über Abbildungen mit Mouseover und alternativer Radiobuttonauswahl.

Volvo Modellauswahl

Modellauswahl über Abbildungen mit Highlighting bei Mouseover.

Bei Audi ist diese Auswahlprozess aufgrund der vielen Varianten je Modell noch weiter untergliedert. Nach der Modellreihe muss zunächst die Karosserie und dann das Modell bzw. Modelllinie gewählt werden. Mit Hilfe der Radiobutton-Auswahl unterhalb der dargestellten Fahrzeuge können auch alternative Wege eingeschlagen werden, so kann beispielsweise auch SUV oder direkt das gewünschte Modell ausgewählt werden um den Prozess zu verkürzen.

Die einfache Bedienung setzt sich auch bei der Motorisierung fort. Je nach getroffener Auswahl werden nicht mehr wählbare Eigenschaften dynamisch ausgeblendet (Audi) oder deaktiviert (Volvo). Was Fehleingaben, die in eine Sackgasse führen, unmöglich macht.

Audi Motorisierung

Motorenauswahl mit reduzierender auf mögliche Auswahlen.

Volvo Motorisierung

Motorenauswahl mit Deaktivierung nichtmehr möglicher Auswahlen.

Geführte Detailauswahl mit Optimierungspotential

Die weitere Auswahl von Ausstattungsdetails wird bei beiden auch recht gut gelöst. Nutzer werden geführt und erhalten bei Bedarf zu den verschiedenen Elementen weitere Informationen.

Einblendung weiterführender Informationen

Audi blendet diese Informationen nach Klick auf das Info-Icon mittig zentriert in einem Layer ein, der Rest der Seite wird leicht ausgegraut. Volvo hingegen hat dies per Mouseover gelöst. Die Informationen erscheinen in einem kleinen Layer direkt neben dem Info-Icon.

Audi Infovermittlung

Info-Einblendung mittig im Layer mit Ausgrauung der restlichen Seite.

Volvo Infovermittlung

Info-Einblendung rechts neben Info-Icon; klein und fummelig.

Meiner Ansicht nach, hat Audi hier die bessere Art der Informationsdarstellung gewählt. Die komplette Seitenbreite kann zur Darstellung der Informationen genutzt werde. Bei Volvo hingegen wird es bei vielen Informationen in dem kleinen Layer sehr unübersichtlich und fummelig.

Auswahl von Interieur und Exterieur

Bei der Auswahl von Interieur und Exterieur hat Volvo die Nase vorn. Die Auswahl ist etwas interaktiver als bei Audi, da mehr mit Visualisierungen gearbeitet wird – beispielsweise bei der Farbauswahl.

Audi Farbwahl

Standardmäßige Farbwahl mit sofortiger Anpassung der Abbildung.

Volvo Farbwahl

Interaktive Farbwahl mit sofortiger Anpassung der großen Abbildung.

Sehr schön ist es, dass sich die Fahrzeugabbildung sofort nach der Auswahl einer Eigenschaft aktualisiert und das Gewählte visualisiert. Speziell das gewählte Exterieur kann mit Hilfe der 3D-Außenansicht optimal betrachtet werden. Hier gefällt mir die Ansicht bei Volvo etwas besser, da das Fahrzeug deutlich größer dargestellt wird und mehr zu erkennen ist.

Audi Lesbarkeit-Kontrast

Erschwerte Lesbarkeit; geringe Schriftgröße; zu wenig Kontrast

Volvo 360-Ansicht

Große Abbildung; 360° drehbar.

Ein Punkt der mich beim Audi-Konfigurator zudem noch etwas stört: Die recht kleine Schrift und fehlender Kontrast zum Hintergrund. Dies erschwert das Lesen der Texte merklich.

Auswahl weitere (Sonder-)Ausstattungen

Nicht optimal ist die Auswahl weitere Ausstattungsmöglichkeiten gelöst.
Bei Volvo ist dies wieder in einem kleinen eingeblendeten Layer – bereits bemängelt – gelöst. Weitere Informationen zu einzelnen Sonderausstattungen gibt es nicht.
Audi löst die Auswahl durch Strukturbaum mit 10 Einstiegspunkten und weiteren Unterpunkten. Informationen zu einzelnen Ausstattungen gibt es hier immer. Jedoch wirkt das Ganze recht komplex und fummelig.

Audi Sonderausstattung

Strukturbaum zur Auswahl weiterer Sonderausstattung.

Volvo Sonderausstattung

Layer-Einblendung zur Auswahl weitere Sonderausstattung.

Was haben wir nun gelernt?

Komplexe Produkte können auch im Web einfach und verständlich zugänglich gemacht werden. Es braucht lediglich die richtigen Bedien- und Interaktionsmechanismen.
Hört sich einfach an, es steckt aber viel Arbeit dahinter bis Konfiguratoren (geführte Prozesse) so gut zu bedienen ist wie die Audi und Volvo.

Bei eigenen geführten Prozessen, sollte auf folgendes geachtet werden:

  • Klare Prozessdarstellung
  • Sinnvolle Visualisierung von Auswahloptionen bzw. des Produkts
  • Interaktivität der Auswahl-/Einstellungsmöglichkeiten
  • Informationen zu einzelnen Auswahl-/Einstellungsmöglichkeiten anbieten
  • Attraktives stimmiges Design – Farbe, Schrift, Kontrast – wählen
  • Rücksprünge und Abkürzungen – speziell für Power-User – einbauen

Aber das Wichtigste ist:
Der abzubildende Prozess muss im eigenen Kopf verinnerlicht sein; jedes Detail muss überdacht und berücksichtigt werden. Zudem ist es wichtig zu wissen, für welche Zielgruppe der Prozess realisiert wird.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.