Alle Elemente des Produktkonfigurators werden in verschiedenen Positionen, Reihenfolgen und Größen „ausgelegt“. Durch das Weglassen von Farben, Bildern, Icons und inhaltlich gestalteten Texten kann sich der Designer voll auf das Layout konzentrieren. Denn dieses bildet nicht nur das Gerüst an dem die Gestaltung aufgehängt ist, sondern ist auch fundamental wichtig für Usability und User-Experience.

Desktop-Landscape oder Mobile-Portrait? Für Produktkonfiguratoren muss immer gelten: Beides. Für den Layout-Designer bedeutet das die Erstellung zweier fast vollständig verschiedener Layouts, die ganz anderen grafischen Gesetzmäßigkeiten folgen. Das eine hat viel Platz in der Breite und kann selbst kleinste Details abbilden, das andere ist hochkant und man hat besondere Anforderungen bei allem, was kleiner ist als 1-Euro-Stück und größer ist als eine DVD-Hülle.

Inhaltselemente – der Content

Alle Produktkonfiguroren-Frontends müssen mehr oder weniger die folgenden Elemente beherbergen:

• Header der Webseite mit Icon, Markenname, Seitenmenü und Warenkorb-Icon
• Preisbereich zur Anzeige des Preises, MwSt., Lieferdetails
• Anzeige von Produktdetails in Textform
• Produktname und aktiver Parameter
• Icons, Namen oder Vorschaubilder von Parameterausprägungen
• Navigationselemente des Konfigurators (bei Step-by-Step Konfiguratoren)
• soziale Interaktiv-Elemente, wie Chat-Button, oder Speicher-Button (zum Posten der erstellten Konfiguration)
• und natürlich die Produktvisualisierung

Im folgenden werden die grundsätzlich verwendeten Layout-Typen besprochen. Diese Aufzählung ist nicht erschöpfend und Mischformen sind dazu auch noch reichlich vorhanden. Die oben genannten Inhaltselemente werden nachfolgend abstrahiert, bzw. zum Wohle der Übersichtlichkeit nicht eingezeichnet.

Spalten-Layout

Bei Desktop-Landscape-Layouts dominiert aus ästhetischen Gründen eine Gitter-Struktur mit 3-spaltigem Layout, bei dem die Anordnung der Elemente in horizontal nebenstehenden Spalten organisiert ist (man hat ja horizontal viel Platz). Die Belegung der Spalten variiert stark zwischen den Konfiguratoren.

Noch mehr Platz für das Produktbild bieten zwei-spaltige Layouts. Da aber immer noch Parameter und dann für den aktuellen Parameter die Ausprägungen gewählt werden müssen, ist man auf integrative Layouts angewiesen, bei denen die räumliche Trennung zwischen Ausprägungen und Parameter-Kontrollen aufgehoben ist.

Zeilen-Layout

Bei besonders langen Produkten, die auch noch viele Details kommunizieren müssen, wird die ganze Bildschirmbreite benötigt. Die Kontrollelemente wandern dazu in die untere Zeile und haben dafür aber auch die komplette Bereite zur Verfügung.

Tabellen-Layout

Ist die Auswahl von Parametern eingeschränkt, weil z.B. zu viele Abhängigkeiten die Parameterauswahl stark einschränken, werden oft durch den Hersteller zusammengestellte Templates benutzt, d.h. getestete und für gut befundene Konfigurationen. Der Nutzer hat dann nur noch die Auswahl zwischen den Templates selbst, aber nicht mehr unbedingt in der Wahl der Parameterausprägungen. Hier steht dann die Vergleichbarkeit im Fokus, wofür optimal ein Tabellen-Layout verwendet werden kann.

Spalten-Grid Layout

Auch bei problematischen Parameterabhängigkeiten wird gerne eine Kombination aus Spalten- und Grid-Layout verwendet.

Ganz-Seiten-Layout

Ist man bereit nahezu vollständig auf Layout und Textinhalte zu verzichten und möchte das Produktbild maximal groß wirken lassen, gibt es nur eine Antwort: das Ganz-Seiten-Layout. Das sich die wählbaren Parameter nun irgendwie bemerkbar machen müssen, platziert man diese zwangsläufig über dem Produktbild. Hierfür muss dann die Fotografie- und Render-Abteilung eng mit der Screen-Layoutern zusammenarbeiten, damit die Positionen zueinander passen und bei Ansichtswechsel bzw. Proportionswechsel wieder die korrekte Position eingenommen wird.