Größenauswahl: Dropdowns vs. Buttons – K.O.-Sieg für die Buttons

Bevor ein Nutzer ein Produkt (Kleidungsstück) in den Warenkorb legen kann ist neben der Farbauswahl auch immer noch die Größenauswahl nötig. Diese war früher immer bzw. ist auch heutzutage noch oft über Auswahlfelder (Dropdowns) gelöst. Für Nutzer ist erst nach dem Öffnen des Auswahlfelds ersichtlich, welche Größen angeboten werden.

Exakt diese Information kann durch Größenbuttons anschaulicher und gehaltvoller auf einen Blick an die Nutzer kommuniziert werden. Dies zeigen auch die drei nachfolgenden Good Practices.

cunda-Größenauswahl per eingefärbten Button

Abb. 1: C&A – Aussagekräftige Farbcodierung mit Legende bei der Größenauswahl.

Auf den Produktdetailseiten im Online-Shop von C&A erfolgt die Darstellung der Größenauswahl mit Hilfe von Buttons. Über eine aussagekräftige Farbcodierung der Buttonbeschriftung wird die Verfügbarkeit der einzelnen Größen sofort ersichtlich. Es wird unterschieden zwischen…

  • verfügbar (grün),
  • fast ausverkauft (orange) und
  • ausverkauft (rotes X, nicht klickbar).

Zudem werden die drei möglichen Ausprägungen noch einmal direkt unterhalb der Größenbuttons in einer Legende erläutert.

Elégance – Verfügbarkeitsmatrix mit Mouseover

elegance Größenenauswahl lieferbar

Abb. 2: Elégance – Verfügbarkeitsmatrix (Farbe & Größe) mit Mouseover-Status: lieferbar.

elegance Größenauswahl solange vorrätig snippet

Abb. 3: Elégance – Verfügbarkeitsmatrix mit Mouseover-Status: solange vorrätig.

elegance Größenauswahl ausverkauft snippet

Abb. 4: Elégance – Verfügbarkeitsmatrix mit Mouseover-Status: ausverkauft.

Im Online-Shop von Elégance erhält der Nutzer auf der Produktdetailseite eine Verfügbarkeitsmatrix mit den beiden Dimensionen Farbe und Größe. Nutzer haben sofort einen kompletten Überblick darüber welche Größen bei den einzelnen Farben …

  • verfügbar (grünes Häkchen),
  • solange vorrätig (Uhr-Icon) oder
  • ausverkauft (graue Fläche) sind.

Zudem ist jeder Knoten mit einem Mouseover versehen und eine textuelle Visualisierung erfolgt unterhalb der Matrix.

Als weitere Besonderheit ist eine Mehrfachauswahl bei der Größenauswahl möglich, d.h. Nutzer können gleichzeitig Kleidungsstücke in mehrere Größen oder verschiedene Farben in den Warenkorb legen.

elegance Größenauswahl Mehrfachauswahl

Abb. 5: Elegance – Mehrfachauswahl von Größen.

Bonprix – Benachrichtigungsfunktion für ausverkaufte Größen

Im Online-Shop von Bonprix werden die erhältlichen Größen und deren Verfügbarkeit auch über Buttons kommuniziert. Im Gegensatz zu anderen Online-Shops können hier jedoch auch die nicht mehr erhältlichen Größen angeklickt werden. Klickt ein Nutzer eine solche Größe an, verändert sich die Beschriftung des Warenkorb-Buttons in „E-Mail Benachrichtigung“ und entsprechend auch die dahinterstehende Funktion. Nutzern ist es möglich, sich per E-Mail informieren zu lassen, wenn ein Kleidungsstück in der gewünschten Größe wieder verfügbar ist.

bonprix Größenabfrage per Button

Abb. 6: Bonprix – Produktdetailseite, wenn Größe verfügbar ist.

bonprix Größenabfrage E-Mail bei bald verfügbar

Abb. 7: Bonprix – Produktdetailseite, wenn Größe aktuell nicht verfügbar ist.

Größerer Informationsgehalt dank Buttons

Die Größenauswahl per Buttons ermöglicht es Nutzern auf einen Blick zu verdeutlichen, in welchen Größen ein Produkt erhältlich ist. Zudem kann die Darstellung durch die Anzeige der Verfügbarkeit mit weiteren wichtigen Informationen angereichter werden.
Im Idealfall sieht der Nutzer beim bloßen betrachten der Seite bereits welche Größen verfügbar sind. Ohne einen einziges Mal geklickt zu haben.

Portraitfoto: Steffen Heim

Steffen Heim

Projektleiter User Centered Design

Baur Versand GmbH & Co KG

Bisher veröffentlichte Beiträge: 91

6 Kommentare

Schreibe einen Kommentar

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