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

Frontend-Layout

By Tobias GüntherEntwerfen & Designen5. Oktober 20196. Oktober 2019

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.

  1. Produktonfigurator.shop »
  2. Produktkonfigurator erstellen »
  3. Entwerfen & Designen »
  4. Frontend-Layout »

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.

Unterschied Desktop-Landscape und Mobile-Portrait Layout (nur bzgl. Proportion, nicht Größen-Maßstabsgerecht)

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.

Dreispaltiges Frontend-Layout mit Bedienkontrollen in der ersten Spalte
In diesem dreispaltiges Layout wird mehr Platz für das Produktbild bereitgestellt. In der mittleren Spalte sind die Parameter auswählbar und die rechte Spalte enthält eine vollständige Liste von Ausprägungen des jeweils aktiven Parameters.

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.

Die Preisangabe liegt bei diesem zwei-spaltigem Layout über dem Produktbild in einem nicht mehr so zentralen, deswegen wohl auch gut sichtbaren Bereich des Bildes. Nach der Wahl des Parameters klappen verfügbare Ausprägungen als vertikales Akkordeon zur Auswahl herunter.

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.

Der aktuell gewählte Parameter blendet seine Ausprägung über die gesamte untere Zeile ein. Das Produktbild hat ein extremes Landscape-Format.

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.

Drei- oder mehrspaltige Tabellen kommunizieren besonders gut die Unterschiede der jeweiligen Produkttemplates

Spalten-Grid Layout

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

Vordefinierte Templates befinden sich in einer Gridstruktur in der rechten Spalte und werden bei Auswahl links vergrößert dargestellt. Eventuell sind im vergrößerten Bild dann noch ein zwei weitere Parameter-Wahlmöglichkeiten integriert.

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.

Durch Pins werden hoverbare Positionen definiert, die sich bei Aktivierung „ausklappen“ und zugehörige Ausprägungen präsentieren. Nach erfolgter Auswahl verschwinden diese, das Produkt ist dann wieder vollständig sichtbar.

Tagged: Abhängigkeiten, Akkordeon, Anzeigen, Bildschirmbreite, Desktop-Landscape, Gitter-Struktur, Grid-Layout, Header, Icon, Mobile-Portrait, Navigation, One-Page-Layout, Preisangabe, soziale Elemente, Spalten-Layout, Templates, Zeilen-Layout

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