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.

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

  1. Lovely Lauri

    Der Artikel hat mich inspiriert. Bei uns gibt es noch die verstaubte Lösung mit dem Drop Down. Aus Sicht des Kunden ist eine Lösung mit Buttons bestimmt besser. Vor allem die Lösung von C&A gefällt mir gut

    Antworten
  2. Pingback: Links der Woche: e-Commerce Marktplätze im Vergleich, Neckermann Insolvenz-Verbraucherrechte, eBay schränkt Verkäuferkonto ein. Was tun? » Take-me-to-auction

  3. Karsten

    Diese Variante ist schon ganz gut gedacht und gerade für Multitouch-Oberflächen interessant. Besser finde ich aber, den Kunden nur das zu zeigen was auch zur Verfügung steht. Hat man nicht den nötigen Platz oder will man seine Oberfläche nicht total überladen, hat die Drop-Down-Box dann doch seine Daseinsberechtigung.

    Antworten
  4. Steffen Heim Beitragsautor

    @Karsten: Klar der nötige Platz sollte vorhanden sein. Generell können die Buttons für nicht mehr verfügbare Größen auch ausgeblendet werden. Ok nicht bei der Elegance-Variante, bei den anderen beiden schon. So sieht der Nutzer auch nur noch das, was er bestellen kann.
    Gegenüber Dropdowns hätte dies immernnoch den Vorteil, dass Nutzer sofort sehen was noch vorrätig ist. Bei Dropdowns muss der Nutzer erst selbst aktiv werden.

    Antworten
  5. Karsten

    @Steffen: Wenn ich eine Vorauswahl der Größe treffen kann, sehe ich den gesamten Shopinhalt in meiner mir passenden Größe und zwar nur Artikel die auch lieferbar sind. Alles was ich sehen kann, kann ich auch bestellen und es wird mir auf jeden Fall passen. So werde ich nicht enttäuscht, sollte der Artikel nicht in meiner Größe verfügbar sein. Außerdem wird mir weniger Zeit genommen.
    Natürlich setzt dies voraus, dass der Kunde dem Shop-Sortiment vertraut und keine Auswahlartikel (verschiedene Größen des selben Artikels) bestellt. Sollte diese Strategie ins Auge gefasst werden, sehe ich klare Vorteile bei der hier gezeigten Variante. Mit einem Drop-Down geht dies zwar auch, aber eben nicht so elegant.

    Antworten
  6. Pingback: Was erwartet uns 2013? Was waren die Trends 2012? Und womit hebt sich ein Online-Shop sinnvoll ab? Linktipps zum Jahreswechsel von Anja Weitemeyer | Usabilityblog.de

Schreibe einen Kommentar

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