von Florian Schneider
1. Klassischer, gelernter Grundaufbau
Die wichtigste Regel zur Nutzerfreundlichkeit ist, dass die Shopgestaltung dem klassischen, gelernten Grundaufbau folgt. Denn die richtige Platzierung aller Elemente stellt die Basis für einen funktionierenden Online-Shop dar. Müssen Nutzer eine bestimmte Funktion oder einen wichtigen Einstieg erst suchen, empfinden sie dies als störend. Ist jedoch alles Funktionelle so angeordnet, wie der Nutzer es erwartet beziehungsweise wie er es gelernt hat, bewegt er sich wesentlich souveräner und intuitiver durch den Online-Shop. Dadurch beschäftigt er sich mehr mit den Inhalten und Produkten als mit der Bedienung der Seite – mit unmittelbar positiven Auswirkungen auf die Konversionsrate. Hier einige Beispiele: Während die Suche prominent mittig unter dem Headerbereich platziert werden sollte, erwarten die Besucher den Warenkorb – immer sichtbar – rechts oben auf den Shopseiten. An dieser Stelle sollten sich auch die Buttons „Login“, „Mein Konto“ und „Ausloggen“ befinden. Wichtig ist es beispielsweise auch, dass Angaben zu Preis, Verfügbarkeit, Bestellmenge sowie die Warenkorbfunktion eine optische Einheit bilden – alles andere irritiert die Nutzer (User).
2. Inhalte begrenzen, Übersicht bieten
Das menschliche Gehirn ist nicht in der Lage, eine unbegrenzte Anzahl an Objekten wahrzunehmen. Überladene Online-Angebote können deswegen schnell zu Unzufriedenheit bei Besuchern oder sogar zum Abbruch führen. Handelten Shopbetreiber lange Zeit nach der Maxime möglichst viele, selbst ausgewählte Inhalte und Artikel auf die Startseite zu bringen, empfiehlt sich aus Usability-Sicht inzwischen ein anderer Ansatz – weniger Elemente, die dafür aber aus Nutzersicht interessanter und relevanter sind. Möglich ist dies etwa durch Personalisierung: Auf Basis der Aufzeichnung und Auswertung des Nutzungsverhaltens wird automatisch eine auf den einzelnen Nutzer und seine Bedürfnisse zugeschnittene Version des Online-Shops generiert. Ein anderer Weg ist die Customization: der Nutzer definiert selbst, was ihn interessiert und wie er sich durch das Angebot bewegen möchte – am besten ohne dass er es überhaupt merkt. Ein gutes Beispiel dafür ist die sogenannte Filtersuche. Über unterschiedliche Filter wie Kategorie, Farbe oder Größe kann sich der Nutzer das Angebot mit wenigen Klicks intuitiv erschließen.
3. Intuitive und visuelle Nutzerführung
Das Nutzungsverhalten ist in den vergangenen Jahren wesentlich visueller geworden. Die Nutzer möchten sehen, erleben und intuitiv geführt werden. Eine Funktion sollte deswegen direkt gezeigt und nicht hinter einer Beschreibung und einem Link versteckt werden. Vorreiter auf diesem Gebiet ist Amazon – Features wie etwa Bewertungen und Nutzerkommentare sind sehr schnell funktionell identifizierbar.
4. Stringenz
Der Mensch hat ein Bedürfnis nach einer gelernten und verlässlichen Nutzerführung. Neben der immer gleichen Platzierung bestimmter Elemente wie beispielsweise dem Warenkorb sollten auch Farbgebung und vor allem Funktionen im gesamten Shop stringent eingesetzt werden. Ein gutes Beispiel bei der Farbgebung ist eine einheitliche Linkfarbe. Was die Funktionen betrifft, sollte beispielsweise der Klick auf ein Bild immer denselben Effekt haben – beispielsweise zu einer Vergrößerung führen.
5. Priorisierung der Elemente
Beim klassischen Screendesign wird auf ein besonders homogenes und in sich stimmiges Design geachtet – kein einzelnes Element sollte besonders hervorstechen. Im E-Commerce-Design dagegen ist es für eine gute Nutzerführung unabdingbar, die Elemente insbesondere visuell zu priorisieren. Eine sinnvolle Priorisierung könnte beim Thema „Call to Actions“ wie folgt aussehen: am prominentesten werden Buttons wie „In den Warenkorb“ oder „Zur Kasse“ dargestellt, gefolgt von Aktionen wie „Wunschzettel“ oder „Weiterempfehlen“ und normalen Links, die am wenigsten prominent auftreten. Es ist allerdings nicht empfehlenswert, mehr als drei Ebenen einzuführen, da der Nutzer sonst schnell den Überblick verliert.
6. Unterschiedliche Einstiege bieten
Shopbetreiber sollten auf jeden Fall mehrere Einstiegsmöglichkeiten in ihren Shop bieten. Denn zum einen unterscheiden sich Bedienungsvorlieben der Nutzer – einige bewegen sich am liebsten über die Navigation, andere nutzen grundsätzlich die Suchfunktion und wieder andere lassen sich gerne von Teasern inspirieren. Zum anderen gibt es beim Online-Shopping unterschiedliche Use-Cases: Nutzer präferieren einen anderen Einstieg, je nachdem in welcher Nutzungs-Situation sie sich befinden – ob sie einfach nur ein bisschen stöbern möchten, einen konkreten Bedarf haben, vor der Kaufentscheidung allerdings noch etwas Beratung benötigen, oder bereits genau wissen, was sie möchten und nur noch Preise vergleichen. Hinzu kommt, dass der Einstieg über soziale Module immer bedeutender wird: was haben andere gekauft, wie haben sie es bewertet und was empfehlen sie? Wichtig ist, dass die jeweiligen Einstiege immer adäquat dargestellt werden: Ein zum Stöbern anregender Teaser sollte zum Beispiel visuell und inspirierend gestaltet sein, ein Beratungs-Teaser eher etwas toolig und die Suche prominent und klassisch.
7. Orientierung
Die klassische Usability-Regel, Orientierung zu bieten, gewinnt im E-Commerce noch an Bedeutung. Der Nutzer sollte zu jedem Zeitpunkt klar sehen, wo er sich gerade befindet und wohin er sich innerhalb seines Use-Cases weiterbewegen kann. Ganz besonders wichtig ist dies innerhalb des Checkout-Prozesses. Hier muss über eine prominente und transparente Schritt-Navigation stets ersichtlich sein, welchen Schritt der Nutzer gerade absolviert, welche er schon gemeistert hat und welche noch ausstehen.
8. Erwartungskonformität
Wordings sollten generell so präzise sein, dass der Nutzer genau weiß, wohin er klicken muss, um zu den gewünschten Inhalten zu gelangen. Gerade bei der Kategorisierung müssen die Begriffe so aussagekräftig wie möglich sein. Ein schlechtes Beispiel ist das Wording „Unsere besten Produkte“. Denn es wird nicht klar, warum es sich um die besten Produkte handelt. Deutlich aussagekräftiger sind Wordings wie „am besten bewertet“ oder „meistgekauft“.
9. Farbe funktional einsetzen
Bei der visuellen Nutzerführung spielen Farben und ihre jeweilige Bedeutung eine große Rolle. Rot ist als aufmerksamkeitsstärkste Farbe besonders für Rabattpreise, Fehlermeldungen und Warnhinweise geeignet und etabliert. Grün wird mit dem Status „alles in Ordnung“ assoziiert und eignet sich deswegen besonders für die Vorteilskommunikation sowie für Bestätigungs-Icons in Formularen. Gelb ist wie die Farbe Rot ebenfalls sehr aufmerksamkeitsstark und damit beispielsweise eine gute Farbe für Störer. Blau hingegen strahlt Verlässlichkeit und Qualität aus und wird gerne als Auszeichnungs- und Linkfarbe verwendet, während Grau für inaktive Elemente steht. In vielen Fällen kommen noch spezielle Corporate Identification (CI)-Farben dazu. Auch diese müssen adäquat eingesetzt werden, beispielsweise als Auszeichnungs- oder Schmuckfarbe.
10. Intelligente Formulare
Viele Nutzer haben schon die nervige Erfahrung gemacht, ein langes Formular mehrmals ausfüllen zu müssen. Intelligente Formulare mit direktem Feedback schaffen hier Abhilfe: Ein Häkchen bestätigt unmittelbar das korrekte Ausfüllen, ein Warnhinweis macht auf falsche oder fehlende Angaben aufmerksam. Hilfestellung und Tipps werden zudem direkt am entsprechenden Feld angezeigt. Auch wenn es sich beim intelligenten Formular nur um ein Detail handelt, es verbessert die Usability ungemein. Und das gilt letztlich für viele Optimierungsmaßnahmen.
Über den Autor:
Florian Schneider ist Creative Director und Managing Partner bei der Netz 98 New Media GmbH. Bei der Agentur ist der Social Media- und Usability-Experte zudem in der Beratung sowie im Bereich Marketing und Sales tätig.