Teil 2: Auf dem Weg zum guten Shop-Layout

Warenkorb, Einkaufswagen, Einkaufskorb, die Begriffe für die Vorstufe zur Bestellung sind vielfältig. Ein halbwegs erfahrener Webnutzer kommt mit allen dreien zurecht. Dennoch sollten Sie Ihre Begriffswahl genau analysieren: wenn nämlich etwas Einkaufskorb genannt wird, aber Rollen hat, ist es halt ein Einkaufswagen. Der Warenkorb ist dagegen ein dem Internet stärker zugeordneter Begriff - hier ist es nicht mehr ganz so falsch, wenn das Symbol auch die Rollen zeigt.

Bei anderen Dingen ist die Wortwahl noch wesentlich wichtiger: Händler stören sich beispielsweise nicht daran, Aufträge oder Bestellungen anzulegen, Nutzer wollen dagegen möglichst nur "Zur Kasse" oder schnell "Bestellen" und "Bezahlen". Auch beim Durchgehen der Bestellschritte ist "Weiter" eindeutig technischen Begriffen wie "Speichern" vorzuziehen. Allein im Zusammenhang mit Kreditkarten sollte man jedoch mit Ausdrücken wie "Speichern", "Senden" etc. sehr vorsichtig sein.

Produktdetails

Grundsätzlich gilt bei Produktdetails je mehr, desto besser. Nutzer, die zielgerichtet nach einem Produkt und dem zugehörigen Preis suchen, benötigen diese Informationen natürlich nicht. Sie können auch schon in der Produktübersicht bestellen. Wer aber stöbert, möchte informiert werden und auch wissen, was er sich kauft.

Wichtig ist vor allem, ähnlich klingende Produkte voneinander klar abzugrenzen. Je mehr Produktinformationen aber auf einer Seite unterzubringen sind, desto schwieriger wird das Layout. Kommen dann noch Funktionen wie "ähnliche Produkte" oder Nutzerkommentare hinzu, wird die Informationsmenge oft erdrückend. Hierfür gibt es zwei Layout-Lösungen: Informationsgliederung und Informationsauslagerung.

Informationsgliederung bedeutet, dass Sie die Informationen optisch gliedern. Gängige Mittel sind dafür Abstände, horizontale Linien, Schriftgrößen, farbliche Auszeichnungen und fette Hervorhebungen. Empfohlene Verkaufspreise werden gerne durchgestrichen und Links unterstrichen. Amazon setzt sehr stark auf diese Methoden zur Informationsgliederung. Allerdings gilt es, einige Fallstricke zu beachten:

1. Zu viel Formatierung sorgt für Unruhe. Amazon wandelt hier schon an der Grenze.

2. Die Formatierung funktioniert nur, wenn sie bei allen Produkten gleich ist - sprich, gleiche Reihenfolge und gleiche logische Auszeichnungen.

3. Rahmen und Farbflächen sollten Sie vorsichtig einsetzen, da sich der Inhalt gut genug von den umliegenden Modulen und Shop-Funktionen wie dem Warenkorb abheben muss.

Die Informationsauslagerung geschieht auf mehrere Arten: Sie können Informationen in Pop-ups packen - mit dem Nachteil, an restriktiven Pop-up-Blockern hängenzubleiben. Sie können auch mit JavaScript Register in der Seite anbieten, die die verschiedenen Inhalte anzeigen. Wichtig ist auch hier die Position. Sie sollte bei allen Produkten möglichst gleich sein. Auch die Reihenfolge der Register oder Links muss übereinstimmen.

Suchfunktion

Wer über sein Layout nachdenkt, denkt automatisch auch an die Suche. Der Suche kommt in einem Shop eine große Bedeutung zu. Zwar gehen die meisten Nutzer zuerst über die Shop-Navigation, werden sie aber nicht fündig, ist die Suche die nächste Anlaufstelle. Bei der Suche sind zwei Dinge relevant: die Suche richtig zu positionieren und keine Usability-Fehler zu machen.

Die Suche wird heute oft im oberen Bereich positioniert. Dies hilft beim schnellen Zugriff. Ob die genaue Position dann oben links, in der Mitte oder oben rechts ist, sei dahingestellt. Der Bereich rechts oben wird oft für den Warenkorb verwendet, allerdings kann auch dort die Suche mit eingebunden werden. Wichtig ist, dass sie in dem Bereich ist, der auch bei kleineren Auflösungen ohne Scrollen sichtbar ist.

Und nun zu den Usability-Fehlern in der Suche: eine Suche sollte natürlich gute und interessante Ergebnisse liefern. Hier merkt man oft, dass Suchen von Herstellern oder technisch orientierten Firmen am Bedürfnis vom Nutzer vorbeigehen. Teilweise gibt es auch verschiedene Suchen: Produktsuche, Kennnummersuche etc. Das artet für den Nutzer in eine Copy-and-Paste-Orgie aus, wenn er sich die Mühe überhaupt gibt.

Eher zu den kosmetischen Fehlern gehören Beschriftung, Schaltfläche und Vorausfüllung für die Suche. Die Schaltfläche sollte dem Suchfeld immer klar zugeordnet werden. "Los" ist prinzipiell gegenüber "Suchen" die schlechtere Wortwahl. Praktisch ist es, wenn die Suche auch mit Enter gestartet werden kann. Auch eine Einschränkung auf bestimmte Produktbereiche macht Sinn - aber nur, wenn es eine Komplettsuche auch gibt.

Das Suchfeld braucht meist keine eigene Beschriftung. Die ist, vor allem bei begrenztem Platz, optisch oft eher störend. Sie können aber das Suchfeld z.B. mit dem Begriff "Produktsuche" vorausfüllen. Hier lauert allerdings eine kleine Usability-Falle: wenn der Nutzer das Feld anklickt, sollte es per Java Script geleert werden.

Sonst muss der Nutzer den Text erst umständlich auswählen und löschen. Unerfahrene Nutzer tippen den Suchtext dann oft auch hinter den ersten Begriff und erhalten so kein Suchergebnis.

Bestellprozess

Ausgangspunkt für den Bestellprozess ist der Warenkorb. Wie man in den Warenkorb gelangt, ist oft unterschiedlich gelöst. Manche Shops, z.B. der von Kaufhof, wechseln direkt in den Warenkorb, wenn der Nutzer ein Produkt wählt. Moderner ist der dynamische Warenkorb, der sich bei jeder Bestellung aktualisiert und als Modul auf jeder Seite integriert ist. Von dort gelangt man dann zur Warenkorbübersicht, in der der Nutzer noch einmal Produkte auswählen und löschen kann. Hier wartet auf den Layouter noch einmal eine heikle Aufgabe: Zum einen muss er die Liste mit Produkten gestalten. Denken Sie hier beim Testen an volle Warenkörbe und Warenkörbe mit nur einem Produkt. Beide sollten übersichtlich aussehen.

Zum anderen müssen Produkte in der Liste noch bearbeitet werden können. Eingebürgert haben sich eine Mengenänderung und eine Löschmöglichkeit. Zur Mengenänderung wird meist ein Textfeld verwendet. Häufig gibt es dann eine einzige Schaltfläche, die "Aktualisieren" heißt und gerade bei vielen Produkten weit entfernt vom Ort der Änderung ist. Das hat sich in Tests als etwas problematisch herausgestellt. Zusätzlich handelt es sich bei "Aktualisieren" um einen eher technischen Begriff. "Menge aktualisieren" oder "Menge ändern" erscheint hier besser.

Schlecker geht noch einen anderen Weg: hier erhält jedes Element eine Schaltfläche "Ändern". Das ist eine sehr schöne Lösung, wenn es nicht viele Nutzer gibt, die für mehrere Produkte die Menge erhöhen müssen. Ebenfalls Vorsicht ist beim Löschen der Produkte angesagt: bei Schlecker gefällt hier das Papierkorbsymbol mit zusätzlicher Beschriftung - diese Kombination ist in Tests meist stärker als nur eines von beiden. Allerdings liegt das Symbol etwas zu nah an der Ändern-Schaltfläche. Mit der Maus ist das zwar kein Problem, am Touchscreen, mit Stiftsteuerung oder anderen Eingabeformen kann das aber unangenehme Folgen für den Nutzer haben.

Ist der Warenkorb so wie er sein soll, startet der Kunde idealerweise den Bestellprozess mit einer ausreichend auffallenden Schaltfläche. Der Prozess besteht je nach Anforderung aus unterschiedlich vielen Schritten. Entscheidend ist, dass diese Schritte im Prozess transparent werden. Hier gilt prinzipiell "weniger ist mehr".

Man sollte alle überflüssigen Informationen vermeiden und den Nutzer klar an die Hand nehmen. Sie erkennen sehr gut an den Aufrufzahlen der einzelnen Bestellprozessseiten, ob Sie hier viele Abbrüche zu verzeichnen haben. Diese Abbrüche sind am unangenehmsten, da die Nutzer eigentlich schon entschlossen waren, bei Ihnen zu kaufen. Eine Gradwanderung sind Teaser im Warenkorb. Vor allem ähnliche Produkte verkaufen sich hier natürlich gut. Auf der anderen Seite ist die Abgrenzung schwierig und wenn die Grenzen verschwimmen, werden unerfahrene Nutzer leicht verunsichert.

Außerdem sieht die Seite schnell wie eine Ramschkiste aus und der Nutzer fühlt sich ein wenig wie beim Supermarkt an der Kasse. Im übrigen Bestellprozess sind solche Ablenkungen dann tabu. Erst nach erfolgreicher Bestätigung der Bestellung sollten dann wieder interessante Produkte gezeigt werden.