Produkt­vorschau!

Bei der Produktvorschau eines webbasierten Konfigurators gibt es nicht den einen besten technischen Lösungsansatz. Vielmehr gibt es hier verschiedene technische Möglichkeiten, die alle ihre Vor- und Nachteile haben. Bewertet wurde hier, ob die für den jeweiligen Produktkonfigurator optimale Technik ausgewählt und in welcher Qualität diese umgesetzt wurde. Im folgenden werden die verschiedenen technischen Lösungsansätze erläutert. Ein vermischen dieser Ansätze in einer Vorschau sollte möglichst vermieden werden, da dies ein unschöner Stilbruch wäre.

Fotocollage aus Produktfotos

Hier werden auf klassischem Wege Fotos von den Produkten gemacht. In diesem Fall müssen zwar nicht alle möglichen Kombinationen einzeln fotografiert werden. Es müssen jedoch von jeder Option Fotos aus jeder geplanten Perspektive gemacht werden. Mit einem Bildbearbeitungsprogramm werden anschließend per Hand die einzelnen Bestandteile getrennt und ggf. auch noch farblich verändert. Im Konfigurator wird anschließend die Fotocollage aus ihren einzelnen Bestandteilen zusammengesetzt.

Vorteile

• Es können absolut fotorealistische Produktbilder entstehen.
• Dies ist die technisch einfachste Lösung, wenn wenig konfigurierbare Optionen und Perspektiven benötigt werden.

Nachteile

• Der Aufwand steigt drastisch, sobald weitere konfigurierbare Optionen und Perspektiven hinzukommen.
• Wenn nachträglich neue Optionen oder Perspektiven hinzugefügt werden sollen, muss meist das komplette Shooting sowie dessen Nachbearbeitung wiederholt werden.
• Das Produkt muss aus festen, immer gleich großen Teilen bestehen, die lediglich ausgetauscht werden können. Stufenlose Änderungen einer Option sind nicht möglich.
• Die Nahtstellen zwischen zwei konfigurierbaren Optionen können unecht aussehen.
• Das Produkt muss für das Shooting mehrfach mit allen Optionen bereitstehen und immer aus der gleichen Perspektive fotografiert und ausgeleuchtet werden. Bei Schuhen ist dies wohl einfacher umzusetzen als bei Yachten.
• Die Szenerie kann nicht frei manipuliert werden. Oft ist es aber für den Benutzer wichtig zu sehen, wie die konfigurierten Objekte etwa in den eigenen vier Wänden aussehen würden.
• Der Benutzer kann die Perspektive und die Zoomstufe nicht frei wählen.
• (Farb)reflektionen von einer Option auf die Andere können nur schwer umgesetzt werden. Das Produkt wirkt daher manchmal etwas künstlich.

Serverseitig gerenderte 3D-Produktbilder

Bei diesem technischen Ansatz werden 3D-Modelle in einem 3D-Programm auf einem speziellen Server gerendert. Dieser Server muss möglichst viel Rechenleistung besitzen, da die Rechenzeit für ein Bild mehrere Sekunden oder sogar bis zu mehrere Stunden betragen kann. Um so komplexer die Szenerie und um so höher die Bildqualität, desto mehr Rechenzeit wird für ein Bild benötigt. Solche gerenderten 3D-Produktbilder können sehr hochwertig aussehen, wenn viel Arbeit in die gesamte Szenerie, das Setzen von Licht und die Wahl der optimalen Kameraperspektive investiert wurde. Hier gibt es nun zwei verschiedene technische Möglichkeiten:

Vorgerenderte 3D-Produktbilder

Wenn die Anzahl der Optionen und Perspektiven begrenzt ist, können die 3D-Bilder schon vorgerendert werden. Diese Bilder können dem Benutzer dann recht zügig angezeigt werden, so dass er nach dem Ändern einer Option ein schnelles visuelles Feedback bekommt. Der Konfigurator kann dann wie bei den Fotocollagen auch nur die Bereiche ersetzen, die sich geändert haben. Alternativ kann er auch das gesamte Bild nachladen. In diesem Fall müssen wesentlich mehr Bilder vorgerendert werden und der Benutzer muss länger warten, da nun das komplette Bild neu geladen werden muss. Der Vorteil ist aber, dass alle Spiegelungen (selbst die Reflektionen auf stumpfen Objekten) perfekt dargestellt werden.

Rendern auf dem Webserver

Wenn die Zahl der Optionen unbegrenzt ist (etwa durch freies Setzen von Objekten in einem Raum) oder der User die Perspektive frei wählen können soll, dann kann man ihm auch ein hochwertig gerendertes Bild seiner Szenerie anbieten. Dazu muss das 3D-Programm auf dem Webserver laufen und auf genügend Rechenleistung zurückgreifen können. Ein flüssiges Schwenken der Kameraperspektive oder ein interaktives Manipulieren von Objekten kann dem Benutzer hier nicht ermöglicht werden, da die Berechnung des Bildes immer etwas Zeit beansprucht. Als Abschluss einer Konfiguration wäre dies aber ein absolutes Highlight.

Vorteile

• Es können sehr hochwertige Produktbilder in aufwändigen Szenerien dargestellt werden. Der Phantasie sind kaum Grenzen gesetzt.
• Der Aufwand steigt minimal, wenn weitere Perspektiven oder Optionen hinzukommen sollen.

Nachteile

• Die Umsetzung erfordert einen hohen technischen Aufwand, wenn eine große Anzahl von Bildern automatisch per Script berechnet werden soll.
• Komplizierte Texturen wie etwa Felle oder Wildleder können auf echten Fotos realistischer wirken.

Beispiel einer gelungenen Umsetzung

Amodoro Trauring-Konfigurator

Im Browser mit WebGL gerenderte Grafiken

Wenn man die 3D-Szenerie der selbst erstellten Konfiguration in dem Browser berechnen lassen möchte, muss man einige Abstriche machen. Zum einen kann der Benutzer nur auf die Rechenleistung des eigenen Endgerätes zurückgreifen. Gerade bei mobilen Geräten kann dies schon etwas ruckelig werden. Zum anderen muss der aktuell verwendete Browser WebGL unterstützen. Hier kann man grob geschätzt davon ausgehen, dass ca. 60% der verwendeten Browser alle Anforderungen und weitere 30% diese zumindest teilweise erfüllen. Da die Verbreitung stetig zunimmt, kann man für neue Projekte beruhigt auf diese Technologie setzen.

Aufgrund der begrenzten Rechenleistung können hier Schatten und Reflektionen gar nicht oder nur sehr reduziert berechnet werden, was dem Endbild den fotorealistischen Charakter nimmt. Der Schattenwurf lässt sich jedoch simulieren, indem man etwa auf Texturen feste Schattierungen darstellt.

Die Einschränkungen von WebGL werden jedoch oft und gerne in kauf genommen, denn durch die Benutzung dieser Technik kann dem Benutzer die Produktvorschau in Echtzeit berechnet und angezeigt werden. Somit kann er die Kameraperspektive frei wählen und direkt in der Produktvorschau interaktiv Objekte manipulieren.

Vorteile

• Der Benutzer kann die Kameraperspektive frei wählen.
• Eine interaktive Manipulation ist direkt in der Produktvorschau möglich.

Nachteile

• Es können keine hochwertigen 3D-Renderings mit perfekten Spiegelungen und Schattenwurf dargestellt werden.
• Es kann Performanceprobleme geben, wenn sehr viele detaillierte Objekte auf langsamen Endgeräten berechnet werden sollen.

Beispiel einer gelungenen Umsetzung

http://www.marcoreus.de/de/shoes

 

Im Browser gerenderte Vektorgrafiken

Diese Technik nutzt die Fähigkeit der Browser dynamische Vektorgrafiken selbst zu erstellen. Die so erzeugten Grafiken sehen zwar eher skizzenhaft als fotorealistisch aus, sind dafür aber enorm performant und ohne große 3D-Kenntnisse umsetzbar. Mit etwas Geschick lassen sich durch das Zeichnen von mehreren Ebenen und der Verwendung von Farbverläufen Schatten und Spiegelungen simulieren.

Vorteile

• Es können stufenlose Änderungen an Optionen problemlos dargestellt werden.
• Die Grafik kann beliebig nah herangezoomt werden, ohne unscharf zu werden.
• Aufgrund der hohen Performance werden Änderungen sofort und ohne Ruckeln dargestellt.

Nachteile

• Die Perspektive ist nicht frei wählbar.
• Der Charakter der Grafik ist eher skizzenhaft als fotorealistisch.

Beispiel einer gelungenen Umsetzung

Baumann Feder Kontaktelement-Konfigurator

Ziele

Höhere Verkaufsquote
→  mehr Umsatz
→ besseres Google Ranking → mehr Besucher  
Weniger Retouren (bedingt bei Indiv. Produkten)
Höhere Customer Lifetime Value
Höheres Marken Image
Hohe Aufmerksamkeit (Presse, Weiterempfehlung,...)
Hoher ROI

Techniken

• Stückliste ohne Bild
• Stückliste mit Bild
• Fotos/Videos von Basisprodukten
• Fotocollagen
• vorgerenderte 3D Grafiken/Videos
• Vektorzeichnungen mit Canvas
• 3D mit WebGL
• VR
• Augmented Reality

Stückliste mit/ohne Bild

Vorteile

• wenig Aufwand
• einfach erweiterbar

Nachteile

• Endprodukt wird nicht gezeigt

Stückliste mit Bild

 

Beispiele
http://umdiewurst.de/bestellung_kat.php?kat=mx&id=48
https://www.iceguerilla.de/mixer#/eis
https://www.chocri.de/schokolade-selber-machen.html

Fotos/Videos von Basisprodukten

 

Vorteile

• Relativ wenig Aufwand
• einfach erweiterbar
• Kunde bekommt eine gute Vorstellung vom Produkt

Nachteile

• Endprodukt wird nicht gezeigt

Beispiele
https://www.amodoro.de/verlobungsring-konfigurator

Fotocollagen

Vorteile

• absolut fotorealistische Produktbilder möglich
• technisch einfachste Lösung, bei wenig Optionen und Perspektiven

Nachteile

• Aufwand steigt exponentiell mit weiteren Optionen und Perspektiven
• kein nachträgliches Hinzufügen von Optionen und Perspektiven
• stufenlose Änderungen einer Option nicht möglich
• Nahtstellen können unecht aussehen
• Produkt muss für das Shooting mehrfach mit allen Optionen bereitstehen
• Shooting Set muss immer einhundertprozentig identisch sein.
• Perspektive und die Zoomstufe nicht frei wählbar
  (Farb)reflektionen von einer Option auf die Andere (Spill) können nur schwer umgesetzt werden.
  (Produkt wirkt künstlich)

Beispiele
http://kipperkonfigurator.redhotmagma.de
http://schafkonfigurator.redhotmagma.de
https://www.timberland.de/treehouse/design-your-own.html

 

vorgerenderte 3D Grafiken/Videos

Vorteile

• Sehr hochwertige Produktbilder in aufwändigen Szenerien möglich
• Aufwand steigt minimal, bei weiteren Perspektiven oder Optionen (auch nachträglich)

Nachteile

• Umsetzung erfordert hohen technischen Aufwand
• komplizierte Texturen (Felle / Wildleder) können auf echten Fotos realistischer wirken
• hoher Speicherbedarf / Datentransfer

Beispiele
https://www.amodoro.de/trauring-konfigurator
https://www.easycarport.de/konfigurator/carport.html

Vektorzeichnungen mit Canvas

Vorteile

• stufenlose Änderungen an Optionen darstellbar
• Grafik bleibt scharf bei hohen Zoomstufen
• hohe Performance / kein Ruckeln
• Farbverläufe möglich

Nachteile

• feste Perspektive
• Grafik wirkt eher skizzenhaft als fotorealistisch

Beispiele
http://www.evofenster.com/fenster-konfigurator
https://www.springconfigurator.com/de/ce/configurator    

 

3D mit WebGL

 

Vorteile

• Kameraperspektive frei wählbar
• interaktive Manipulation kann ohne Nachladen sofort angezeigt werden

Nachteile

• kein perfekten Spiegelungen und Schattenwurf
• Ruckelig bei detaillierten Objekten / langsamen Devices

Virtual Reality

 

Vorteile

• Kameraperspektive frei wählbar
• hohes emotionales Erlebnis

Nachteile

• spezielle Hardware vorausgesetzt

Beispiele
https://www.kuechen-atlas.de/online-kuechenplanerjs/start/?planningId=5a6098eb-25d0-49a5-8ea6-60d75f8e4ee4

Augmented Reality

Vorteile

• Kameraperspektive frei wählbar
• hohes emotionales Erlebnis
• besonders realistische Einbindung des Produktes

Nachteile

• Kameraperspektive frei wählbar
• hohes emotionales Erlebnis
• hoher Aufwand

Beispiele
https://peruecken-meyer.de/virtuelle-anprobe/
https://www.misterspex.de/sonnenbrillen/mister-spex-collection-sienna-2019-003_f6660977.html
http://www.21diamonds.de/Online/Silberringe/Barbara-21Collection/Peridot/Diamant/Diamant/Sterlingsilber-925.html?ringSize=122
http://www.inotherm-tuer.de/konfigurator/?lang=de

 

schwer darstellbare Produkte

 

Dienstleistungen / Services

• nicht visuell (Parfum)
• kombinierbare Mischungen (z.B. Müsli / Tee)
• schwer darstellbar (organisch)
• sehr komplexe Produkte
• keine 3D Daten
• keine visuellen Unterschiede (z.B. Geschwindigkeit/PC)

kreative Lösungsansätze

mit Verpackung
https://www.mymuesli.com/mixer/

 

Branchen mit unterschiedlichen Lösungsansätzen

 

Zäune
Terrassen