Als ich das Layout für einen Modell-Coffeeshop in 2014 skizzierte, war es sinnvoll, Header, Startseite, Kategorie und Produktdetail fast wie Bausteine zu beschreiben: Logo links, Warenkorb rechts, Filter hier, Kaufen-Schaltfläche dort.
Die grundlegenden Erwartungen der Menschen haben sich kaum verändert. Der Kontext schon: Die meisten Designs müssen auf Mobilgeräten funktionieren, Angebote sind komplexer und jedes zusätzliche Skript konkurriert um Geschwindigkeit und Aufmerksamkeit. Deshalb empfehle ich heute nicht mehr, ein Layout blind zu kopieren. Ich empfehle, die Aufgaben der Kunden durchzugehen.
Der Header sollte Orientierung geben, nicht jede Option zeigen
Im Header suchen Menschen nach Marke, Navigation, Suche, Konto und Warenkorb. Diese Elemente müssen nicht alle gleich stark hervorgehoben werden. Die Priorität ändert sich je nach Katalog und Kaufphase.
- Das Logo führt zur Startseite und hat einen verständlichen Textnamen.
- Die Suche ist dort leicht erreichbar, wo Menschen ein Produkt oder einen Parameter kennen.
- Der Warenkorb zeigt seinen Status und verschwindet nicht, nachdem ein Artikel hinzugefügt wurde.
- Kontakt oder Hilfe sind auffindbar, ohne mit dem Kauf zu konkurrieren.
- Das Menü funktioniert per Touch, Tastatur und ohne präzises Zielen mit der Maus.
Ein ausziehbares Menü kann bei einem umfangreichen Katalog helfen. Bei zehn Kategorien ist es oft nur ein eindrucksvolles Hindernis. Google empfiehlt, Kategorien und Produkte über gewöhnliche Navigationslinks erreichbar zu machen; allein die Suche macht möglicherweise nicht den gesamten Katalog für Robots sichtbar. Die Prinzipien werden in der Dokumentation zur Struktur von E-Commerce-Websites beschrieben.
Die Startseite sollte Besucher verteilen, nicht den gesamten Katalog erzählen
Auf der Startseite muss ich schnell verstehen, was der Shop verkauft, für wen er gedacht ist und wo ich weitermachen kann. Statt eines automatischen Sliders bevorzuge ich eine klare Priorität und mehrere stabile Einstiege in die wichtigsten Kaufsituationen.
Bestseller können ebenso helfen wie saisonale Kategorien, Ratgeber oder ein Grund, dem Shop zu vertrauen. Jeder Block muss eine Aufgabe haben. „Damit die Seite nicht leer ist“ ist keine Aufgabe.
Eine Kategorie hilft, die Auswahl einzugrenzen
Eine Kategorie ist kein SEO-Text, der über ein Produkt-Raster geklebt wird. Sie ist ein Entscheidungstool. Ihr Name und die kurze Einführung definieren das Angebot, Filter grenzen es ein und die Sortierung hilft bei der jeweiligen Situation des Kunden.
- Benennen Sie Filter in der Sprache der Kunden, nicht mit internen Datenbankfeldern.
- Zeigen Sie aktive Auswahlmöglichkeiten nach dem Filtern an und machen Sie sie leicht entfernbar.
- Machen Sie wichtige Unterkategorien als Links sichtbar, nicht nur als Skriptwerte.
- Zeigen Sie die für den Vergleich benötigten Listendaten; den Rest platzieren Sie im Detail.
- Ein leeres Ergebnis sollte einen Weg zurück anbieten, keine Sackgasse sein.
Breadcrumbs helfen Menschen, ihre Position im Katalog zu verstehen, und können Suchmaschinen helfen, die Hierarchie zu erkennen. Wenn Sie strukturierte Daten verwenden, folgen Sie der aktuellen Dokumentation von Google zu Breadcrumbs.
Das Produktdetail muss Fragen vor und nach der Schaltfläche beantworten
Eine sichtbare „In den Warenkorb“-Schaltfläche ist die Grundlage, nicht das gesamte Detail. Vor der Entscheidung benötigen Menschen Name, Preis, Variante, Verfügbarkeit, Versand, Rückgabe, Fotos und Informationen, die dem Kaufrisiko angemessen sind.
Bei Kaffee sind Herkunft, Geschmack, Röstung, Gewicht und Zubereitung wichtig. Bei einer Bohrmaschine zählen Spezifikationen, Kompatibilität und Service stärker. Es gibt keine universelle Reihenfolge. Es gibt jedoch eine universelle Frage: Was muss der Kunde wissen, um die richtige Variante zu kaufen und sie später nicht zurückzusenden?
Bewertungen sollten glaubwürdig sein und sich auf das konkrete Produkt beziehen. Empfohlene Produkte sollten die Auswahl unterstützen, nicht jemanden von einem fast abgeschlossenen Kauf ablenken. Eine Social-Schaltfläche im Produktdetail hat weiterhin keine Priorität. Die Zeit, in der ein „Gefällt mir“-Button die Antwort auf alles war, sollten wir hinter uns gelassen haben.
Warenkorb und Checkout sollten Überraschungen vermeiden
Der Warenkorb muss Änderungen an Menge und Variante sowie das Entfernen von Artikeln ermöglichen. Zeigen Sie Gesamtpreis, Versand und Lieferdatum so früh wie möglich an, nicht erst nach dem dritten Schritt und der Registrierung.
Ein Gast-Checkout ist oft eine sinnvolle Standardeinstellung. Wenn ein Konto echten Mehrwert bietet, bieten Sie es nach der Bestellung an. Formulare benötigen korrekte Beschriftungen, Autofill und verständliche Fehlerhinweise. Touch-Ziele müssen groß genug sein; das aktuelle Kriterium wird in WCAG 2.2 unter Target Size beschrieben.
Messen Sie Aufgaben, nicht die Farbe einer Schaltfläche
A/B-Tests können helfen, wenn ein Unternehmen ausreichend Traffic, eine Hypothese und eine entscheidende Kennzahl hat. Wöchentliche Banneränderungen ohne ausreichende Stichprobe sind ein Spielplatz, aber keine verlässliche Schlussfolgerung.
Ich verfolge die Nutzung von Suche und Filtern, Warenkorb-Aktionen, Formularfehler, Abbrüche bei jedem Schritt, Rücksendungen und Supportfragen. Ich ergänze die Zahlen durch die Beobachtung von Menschen und ihren Fragen. Analytics zeigt, wo etwas passiert; ein Mensch erklärt oft, warum.
Die Grundlage der Messung steht in Google Analytics 4. Performance-Prüfungen bespreche ich in Wie Sie eine Website beschleunigen.
Ein Onlineshop muss nicht dadurch originell sein, wo sich sein Warenkorb befindet. Er muss überzeugend erklären, warum man dieses Produkt hier kaufen sollte.
Für Argumente auf Produkt- und Verkaufsseiten lesen Sie weiter mit Wichtige Elemente einer Verkaufsseite. Die vollständige Grundlage einer Website finden Sie in So starten Sie ein Webprojekt.