Realisierung Produktkonfiguration im eCommerce

[rythms]

Hallo.
Mir stellte sich letztlich folgendes allgemeines Problem, bei der Umsetzung eines Onlineshops.
Sobald man Artikel hat, die mehrere Farben und Größen haben, und diese voneinander abhängig sind, wird es kompliziert.
Allgemein gilt:

1. Artikel können Farben haben
2. Artikel können versch. Größen haben
3. Größen sind von Farben abhängig (Lagerbestand).

Momentan stellen wir jede Farbe einzeln in die Datenbank und fügen dann die jeweils möglichen Größen der Farbe hinzu.

Das eigentliche Problem besteht nicht in der Datenstruktur.
Wie aber, ermögliche ich es dem Benutzer, eine Auswahl aus zwei voneinander abhängigen Listen zu machen?

Möglichkeit 1:
Farben-Select ändert mittels onchange mit Javascript die Inhalte des zweiten Auswahlfeldes für die Größen.
Problem: Keine Alternative Möglichkeit (siehe Möglichkeit 2). Benutzer ohne Javascript sehen weiterhin alle Größen, obwohl es zu ihrer aktuell ausgewählten Farbe einen Artikel in ihrer gewünschten Größe möglicherweise garnicht mehr gibt.

Möglichkeit 2:
Ich zeige dem Benutzer nur ein Auswahlfeld (Farben) und einen Submit-Button.
Nach dem Auswählen der Farbe wird das Größenauswahlfeld anhand der übermittelten Daten erstellt.
Problem: Meines Erachtens nach schlechte Benutzerinteraktion. Man muß insgesamt zweimal ein Formular abschicken, um einen Artikel nur in den Warenkorb zu legen.
Möglichkeit 2 liesse sich als alternative für Möglichkeit 1 anbieten.

Möglichkeit 3:
Ich zeige dem Benutzer nur ein Auswahlfeld, in dem alle Farb-/Größenkombinationen aufgelistet sind.
Also:
Blau / M
Blau / L
Blau / XL
Rot / M
Rot / L
etc
Problem: Meines Erachtens nach auch Benutzerunfreundlich, da man sich aus einer möglicherweise recht großen Liste die Einträge aussuchen muss.

Beispiele: Frontlineshop: Automatischer Reload beim Select-change. Keine Alternative ohne Javascript.
Neckermann: scheinbar keine Abhängigkeit, trotzdem Javascript.
Ohne Javascript werden die Auswahlmöglichkeiten erst garnicht geladen.

Allgemein also sehr unzufriedenstellende Lösungen bei den "großen" Shops.

Was denkt ihr?

 

[Tobias Menzel]

Hi,

wie wärs mit Möglichkeit 2 als Standard und bei aktiviertem JS ein "Umbau" (oder Weiterleitung) zu Möglichkeit 1 (vielleicht zusätzlich mit AJAX)?

Bei einer Webanwendung wirst Du ab einem bestimmten Punkt hohe Benutzerfreundlichkeit nur durch den Einsatz clientseitiger Techniken garantieren können - oder, anders ausgedrückt: Barrierefreiheit und Konfort können sich manchmal ausschließen.

Du könntest statt Auswahlboxen vielleicht auch eine tabellenartige Anordnung der verschiedenen Kombinationen anbieten (Möglichkeit 3, aber u.U. übersichtlicher), über Links oder submit-Inputs.

Gruß

P.S.: Wenn es um Clientseitige Geschichten geht, wäre da natürlich auch noch Flash ...
.

 

[Andreas Gaisbauer]

Hi,

1) Flash finde ich gar nicht mal schlecht als alternative
2) Ich würde es so angehen:

Pro Farbe ein <select> Feld mit den aktuell verfügbaren Größen (oder umgekehrt, jenachdem wovon ihr mehr habt - also Größen oder Farben). Das sollte immer Funktionieren und übersichtlich bleiben. Wenn ein Benutzer mit Javascript kommt, würde ich ein hierarchisches Select bauen, indem man im ersten Schritt die Größe auswählt und im zweiten die Farbe...

Grün           Blau           Rot
+-------+-+    +-------+-+    +-------+-+
|   XXL | |    |   XXL | |    |     L | |
|    XL | |    |    XL | |    |     S | |
|     L | |    |     L | |    |       | |
|     M | |    |       | |    |       | |
+-------+-+    +-------+-+    +-------+-+

Schwarz        Gelb           
+-------+-+    +-------+-+
|   XXL | |    |   XXL | |
|    XL | |    |    XL | |
|     M | |    |     M | |
|       | |    |       | |
+-------+-+    +-------+-+

bye

 

[rythms]

Danke für die Antworten erstmal.

AJAX finde ich bei diesem Beispiel nicht ganz richtig am Platz, da man:
a) Die Daten sofort haben möchte
b) Es sich nicht lohnt für einen solch kleinen Satz an Daten eine Extraabfrage zu machen. Das würde ich direkt mitladen. Vielleicht bin ich aber auch zu faul und wähle die einfachere Implementierung über AJAX

Flash zählt bei mir nicht wirklich als Alternative für Javascript. Viele Benutzer die Javascript ausgeschaltet haben, haben auch kein Flash-Plugin.

Mehr als zwei Auswahlfelder zu haben wollte ich eigentlich vermeiden.
Dies führt meines Erachtens nach nur zu Verwirrung beim Benutzer, wie handhabe ich es dann wenn er z.b. pro Farbe jeweils eine Größe auswählt?
Der Ansatz erscheint mir auch zu extraordinär - Benutzerfreundlichkeit bedeutet auch eine bestimmte, dem Benutzer möglicherweise bekannte Methode etwas zu bearbeiten, nicht durch eine Andere zu ersetzen, die ihn möglicherweise irritiert.
Bei dem Gedanken fällt mir noch etwas ein:
Ihr kennt sicherlich die Reiseziel-Auswahlfelder bei einer Flugbuchung.
Dort sind ja oft auch Flughäfen nach Ländern gruppiert (Länder fett, Flughäfen mit "-" eingerückt). Dies sollte also auch eine Möglicherweise bekannte Methode sein und bietet auch die nötige Übersicht - wäre also auch eine Überlegung wert.

Möglichkeit 1 und als Alternative Möglichkeit 2 zu kombinieren erscheint mir momentan jedoch am Sinnigsten, da relativ einfach umzusetzen und dem Benutzer auf jeden Fall bekannt. Aber vielleicht kommen wir ja noch auf eine andere Möglichkeit oder entdecken weitere Vorteile/Nachteile.

 

[Tobias Menzel]

Hi,

naja, was ich alternativ meinte, war eher eine html-Tabelle mit Hyperlinks, keine Selectboxen (siehe Skizze). Nimmt natürlich etwas mehr Platz weg.

Gruß
.