Formale und funktionale Gestaltung des Warenkorbeinstiegs im Header

Vor kurzem habe ich 35 Beispiele zu Header-Gestaltung vorgestellt. Heute geht es weiter ins Detail. Ich zeige euch die 3 üblichen Gestaltungsarten, wie der Warenkorb formal und funktional im Header eines Online-Shops eingebunden ist.

Formale Gestaltung recht identisch

Der Einstieg zum Warenkorb ist fast überall für den Nutzer erwartungskonform oben rechts positioniert. Als optischer Anker kommt zudem ein Icon – Warenkorb, Einkaufswagen oder Einkauftasche – zum Einsatz. Bei dem Nutzer sofort wissen was damit gemeint ist.

Bei der Informationsvermittlung gibt es zwei grundsätzliche Unterschiede:

  • Entweder es wird die Anzahl der Produkte im Warenkorb angezeigt,
  • Oder neben der Produktanzahl ist den Nutzern zusätzlich noch der Gesamtwert des Warenkorbs ersichtlich.

Funktionale Gestaltung auf 3 Wegen

Soweit zur inhaltlichen Gestaltung. Bei der funktionalen Gestaltung des Warenkorbeinstiegs gibt es 3 unterschiedliche Arten:

  • Einblendung eines Layers per Mouseover
  • Einblendeng eines Layers per Klick
  • Keine weiteren Informationen, lediglich Zugang zum Warenkorb

Zusätzliche Informationen für den Nutzer

Ein Warenkorb-Layer ermöglicht es den Nutzern schnell einen Blick auf die bereits abgelegten Produkte zu werfen – egal ob dieser nun per Mouseover oder per Klick eingeblendet wird.

Nutzer sehen noch einmal eine kleine Produktabbildung, wichtige Produktmerkmale (z.B. Größe, Farbe usw.) sowie die Anzahl und den Preis. Ebenso kann der Nutzer bereits an dieser Stelle über die anfallenden Versandkosten informiert werden.

Beispiele für Layer per Mouseover

Mousover-Layer gerryweber.de

gerryweber.de: Einblendung Warenkorb-Layer per Mouseover; Inhalt: Bild, Titel, Merkmale sowie Anzahl und Preis je abgelegtem Produkt. Zudem Angabe der Versandkosten.

Mousover-Layer otto-office.de

otto-office.de: Einblendung Warenkorb-Layer per Mouseover; Inhalt: Bild, Bestellnummer und Titel.

Mouseover-Layer galeria-kaufhof.de

galeria-kaufhof.de: Einblendung Warenkorb-Layer per Mouseover; Inhalt: Titel, Beschreibung und Preis.

Onclick-Layer misterspexx.de

misterspex.de: Einblendung Warenkorb-Layer per Klick; Inhalt: Bild, Titel, Anzahl, Preis sowie Hinweis auf Versandkosten.

Onclick-Layer elegance.de

elegance.de: Einblendung Warenkorb-Layer per Klick; Inhalt: Bild, Merkmale, Bestellnummer, Anzahl und Preis je Produkt + Hinweis auf Versandkosten.

Onclick-Layer mydays.de

mydays.de: Einblendung Warenkorb-Layer per Klick; Inhalt: Titel, Anzahl und Preis.

Bei der 3. Variante – keine Einblendung – ist der Nutzer gezwungen den Warenkorb aufzurufen um sich noch einmal über die bereits abgelegten Produkte zu informieren.

Aus Expertensicht – und mit dem Nutzer im Hinterkopf – präferiere ich die zusätzliche Informationsvermittlung über einen Layer. Mein Favorit wäre eine Layer-Einblendung per Klick.
Die hat zwei Gründe:

  • Nutzer können selbst entscheiden, ob sie den Layer sehen möchten oder nicht. Es kommt nicht zu einer ggf. irritierenden Einblendung per Mouseover, was nicht jedem gefällt.
  • Zudem ist dieses Verhalten auch auf Tablets möglich.

Welche der 3 Varianten präferieren Sie persönlich?

Haben Sie Interesse an weiteren Good Practices? Auch zu anderen Themen und Anwendungen? Mit den eResult Themenjournalen und Trendnewslettern bekommen Sie jeden Monat Inspiration für Ihre eigene Arbeit.

Schreibe einen Kommentar

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