Auf dem Weg zum guten Shop-Layout

Sind wir mal ehrlich: der ewige Benchmark aller Shops, Amazon, ist in die Jahre gekommen. Auf der einen Seite gibt es immer mehr Kategorien und Produkte, auf der anderen Seite kaum noch optische und funktionale Innovationen. Und dennoch: der Shop funktioniert. Und andere noch viel hässlichere und vor allem schlechter nutzbare Shops als Amazon machen hervorragende Umsätze. Das führt dann häufig zur Annahme, dass es auf das Layout ja sowieso nicht ankommt.

Dass das ein Irrglaube ist, wird klar, wenn man sich einmal die verschiedenen Käufergruppen vor Augen hält oder im Rahmen eines Usability-Tests sogar selbst in Augenschein nimmt: da sind die Leute, die vor allem an ganz bestimmten Produkten interessiert sind. Außerdem gibt es natürlich die Preisbewussten aus dem "Geiz ist geil"-Zeitalter. Alle Käufer aus diesen Gruppen suchen sehr gezielt, kaufen entschlossen und stören sich selten am Layout.

Wer dagegen nicht direkt auf der Suche ist, sondern nur stöbern möchte, wird sich viel eher über einen hässlichen Shop aufregen. Und wer den Produktnamen nicht genau im Kopf hat, der benötigt eine verständnisvolle Suche. Optische Verbesserungen in einem Shop haben vor allem ein Ziel: sie sollen die Effizienz erhöhen, sprich, möglichst viele Besucher sollen zu Käufern werden. Diese Effizienz können und sollten Sie messen. Dazu reicht eine einfache Statistikauswertung wie sie jeder Hoster oder auch Google Analytics bietet. Setzen Sie hier die Besucher im Verhältnis zum Käufer und messen Sie vor und nach Verbesserungen.

Sie sollten allerdings einen längeren Zeitraum zu Grunde legen und jahreszeitliche Besonderheiten beachten, um repräsentative Ergebnisse und Trends zu erhalten.

Anfänge

Ein gutes Shop-Layout beginnt nicht beim Verteilen von Farben. Sie sollten sich zuerst einen Überblick über die verschiedenen Bestandteile des Shops machen. Viele Abläufe in einem Shop haben sich über die Jahre etabliert, der Nutzer hat sie gelernt. So ist zum Beispiel der Warenkorb als Vorstufe zur Bestellung zu einem gängigen Begriff geworden. Hier fängt auch die Frage nach der Nutzbarkeit, der Usability, eines Shops an.

Nutzbarkeit bedeutet nicht unbedingt den absolut gesehen einfachsten Weg zu definieren, sondern den Weg zu wählen, der der Gewohnheit der meisten Nutzer entspricht. Das heißt also, wenn Ihnen ein tolles Alternativkonzept zum Warenkorb einfällt, sollten Sie sich gut überlegen, ob Sie Ihren Nutzern den Lernaufwand zumuten möchten. Eine gefährliche Sache sind bestehende Styleguides. Viele Unternehmen haben eine Corporate Identity mit vordefiniertem Logo, Schriftarten, Bildsprache, Farben etc. Oft ist diese auch schon für den Webauftritt adaptiert.

Die Übernahme in den Shop ist aber oft nicht ganz so einfach, da ein Shop spezielle Anforderungen stellt. In einem Shop muss der Warenkorb und müssen alle Schaltflächen oder Symbole zum Bestellen klar hervorgehoben werden - Ziel eines Shops ist schließlich das Verkaufen. Eine entsprechende Farbe oder gar eine Icon-Welt ist im Styleguide zu 99 % nicht festgelegt.

Hier sollte man sich bewusst in den speziellen Shop-Funktionen eher vom Styleguide abkoppeln, und den Shop als für den Kunden eigenes Nutzungserlebnis betrachten. Ein Extrembeispiel für die Abkopplung eines Online-Shops von der CI finden Sie unter https://shop.mediamarkt.de/. Die Subdomain verweist auf www.mediaonline.de. Früher gab es hier noch Anlehnungen an den Media Markt, heute sind Farbe und Aufmachung komplett unterschiedlich.

In den folgenden Abschnitten erläutern wir Ihnen die einzelnen Shopbestandteile, zeigen Layout-Möglichkeiten, gängige Konventionen und grobe Fehler. Bei den Fehlern geht es uns nicht darum, mit dem Finger auf jemanden zu zeigen. Dazu sind Shops zu komplexe Software mit zu individuellen Funktionen. Es gibt keinen Shop, der in Sachen Optik und Usability überhaupt nicht optimiert werden könnte.

Navigation

Herzstück eines Shops ist die Navigation: Usability-Tests zeigen, dass die meisten Nutzer zuerst über die Navigation suchen, bevor sie zur eigentlichen Suche greifen. Das heißt natürlich auch, dass die Benennung der Produktkategorien und -unterkategorien entscheidend ist. Nur, wenn die Benennung absolut logisch ist, findet sich der Nutzer zurecht. "Spiele" können zum Beispiel Computerspiele oder Brettspiele sein.

Nehmen wir an, ein Shop führt beides und besitzt die Navigation "Spiele", "Technik" und dort als Unterpunkt nochmal "Spiele". Hier wird auf der ersten Ebene nicht klar, ob sich hinter "Spiele" Brettspiele oder Computerspiele verbergen. Klickt der Nutzer auf der Suche nach dem neuesten Egoshooter in der ersten Ebene auf "Spiele" statt auf "Technik", verliert er eventuell die Orientierung oder braucht etwas länger. Ist das schlimm? Ja, jedes Frustrationserlebnis kann zum Abbruch des Einkaufs führen. Zwar werden die meisten Kunden diese Hürde bewältigen, aber auch geringe Verluste führen schon zu unangenehmen Gewinneinbußen.

Die bisher angesprochene Navigation ist die klassische hierarchische Navigation. Sie wird im Layout meist auf der linken Seite abgehandelt. Für die Hauptkategorien haben sich auch die Register in der oberen Navigation eingebürgert. Vor allem große Shops wie Amazon mit sehr unterschiedlichen Produktkategorien setzen auf diese zusätzliche obere Navigation.

Layout-technisch schwieriger umzusetzen sind Navigationen, die nicht nur eine Hierarchie bieten, sondern mehrere Zugänge enthalten sollen. Greifen wir dazu das vorangegangene Beispiel auf: Computerspiele werden oft nach Betriebssystemen bzw. Konsolen unterteilt. Wenn aber jemand Eigentümer eines PCs und einer Konsole ist, interessiert ihn das Genre vielleicht mehr. Das heißt, hier gibt es zwei sinnvolle Zugriffsformen auf interessante Spiele. Die meisten Shops lösen das mit einer klassischen hierarchischen Navigation, die eindeutig erst nach Betriebssystem und Konsole unterteilt und dann erst nach Genre. Die Genres werden dann z.B. in einem eigenen Modul noch einmal gezeigt.

Teaser

In manchen Shops ist die hierarchische Navigation, die meist dahinter steht, kaum noch zu erkennen, weil die Teaser das Regiment übernehmen. Teaser sind beispielsweise Produkte zu sehr guten Preisen, die auf der ersten Seite erscheinen. Auch die Bestseller (oder Topseller) gehören dazu. Die Layout-Entscheidung ist hier meist, welche Informationen zum Produkt geliefert werden müssen, wie groß das Produktfoto erscheint und wo und in welcher Form der Preis eingeblendet wird.

Tendenziell gilt die Regel, dass das Produkt wirken muss - lieber kündigen Sie weniger Produkte an und diese größer. Sie können in vielen Shops auch die Topseller aus einer Auswahl wechseln lassen, sodass jeder Nutzer per Zufall nur eine Auswahl aus Ihren wichtigsten Produkten erhält.

Eine andere Form des Blickfangs erinnert ein wenig an den Web 2.0-Stil. Innerhalb von Navigationslinks zeigen Sie Icons oder Hinweise, dass beispielsweise eine Produktkategorie neu ist oder Sie deuten mit einem Prozentsymbol eine Rabattaktion an.

Icons

Ein weiterer wichtiger Bestandteil des Shop-Layouts sind die Icons und Schaltflächen für die Standard-Shopfunktionen. Zentrales Icon ist das Warenkorb-Symbol. Das Symbol mit dem Einkaufswagen kennt jeder Webnutzer. Die folgenden Beispiele zeigen wie unterschiedlich man es ausgestalten und einsetzen kann und geben damit ein paar Anregungen für die eigene Gestaltung.

Prinzipiell gilt, dass die Kombination aus Icon und Text in Tests am stärksten abschneidet. Allerdings zeigen einige der Beispiele hier, dass es auch nur mit einem geht. Wichtig ist nur, dass die Bestellschaltfläche sich klar vom Rest abhebt. Dadurch muss sich der Nutzer beim Bestellen nicht zwischen zwei Bereichen entscheiden, wird nicht abgelenkt und unter Umständen in seiner Kaufentscheidung bestärkt.