Für Online-Händler

Die 10 wichtigsten Regeln für erfolgreiche Webshops

Datum:22.10.2010

Viele Online-Händler beklagen sich, dass sie über ihre Webshops zu wenig absetzen. 10 Tipps, wie diesem Missstand, abzuhelfen ist.

Viele Online-Händler¹ beklagen sich, dass sie über ihre Webshops zu wenig absetzen. Dabei springen viele potentielle Kunden ab, weil sie sich in dem Online-Laden nicht zurechtfinden. Es geht um die so genannte "Usability", also die Benutzerfreundlichkeit im Webshop².

Denn eine hohe Usability ist im E-Commerce³ ein wichtiger Erfolgsfaktor - das ist unbestritten: Hohe Usability wirkt sich positiv auf Konversionsraten, auf die Größe des Warenkorbs und letztlich auch auf den Umsatz aus. Aber wo sollen Shop-Betreiber bei der Usability⁴-Optimierung anfangen? Florian Schneider, Creative Director und Managing Partner bei netz98⁵, liefert Ansatzpunkte für einen höhere Benutzerfreundlichkeit und stellt die zehn wichtigsten Usability-Regeln für erfolgreiche Webshops vor.

[Hinweis auf Bildergalerie: Usability-Tipps für Webshops] ^gal1

1. Klassischer Grundaufbau der Navigation

Die wichtigste Usability-Regel im E-Commerce⁶ ist, dass die Shopgestaltung⁷ dem klassischen, gelernten (dem User bereits gewohnten) 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 für sinnvolle Navigation⁸: Während die Suche prominent mittig unter dem "Header"-Bereich 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 User.

[Hinweis auf Bildergalerie: Usability-Tipps für Webshops] ^gal2

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 den 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 zum Beispiel 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.

[Hinweis auf Bildergalerie: Usability-Tipps für Webshops] ^gal3

3. Intuitive und visuelle Nutzerführung

Das Nutzungsverhalten ist in den letzten 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 Funkionen betrifft, sollte beispielsweise der Klick auf ein Bild immer denselben Effekt haben - beispielsweise zu einer Vergrößerung führen.

[Hinweis auf Bildergalerie: Usability-Tipps für Webshops] ^gal4

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 die 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.

[Hinweis auf Bildergalerie: Usability-Tipps für Webshops] ^gal5

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 CI-Farben dazu. Auch diese müssen adäquat eingesetzt werden, beispielsweise als Auszeichnungs- oder Schmuckfarbe.

[Hinweis auf Bildergalerie: Usability-Tipps für Webshops] ^gal6

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. (rw)

Links im Artikel:

¹ https://www.channelpartner.de/handel/ecommerce/297095/index.html
² https://www.channelpartner.de/handel/ecommerce/296449/index.html
³ https://www.channelpartner.de/handel/ecommerce/
⁴ https://www.channelpartner.de/handel/ecommerce/296576/index.html
⁵ http://www.netz98.de/
⁶ https://www.channelpartner.de/handel/ecommerce/296354/index.html
⁷ https://www.channelpartner.de/handel/ecommerce/296001/index.html
⁸ https://www.channelpartner.de/handel/ecommerce/295645/index.html
⁹ https://www.channelpartner.de/handel/ecommerce/294815/index.html
¹⁰ https://www.channelpartner.de/news/294332/index.html
¹¹ https://www.channelpartner.de/handel/ecommerce/292902/index.html
¹² https://www.channelpartner.de/knowledgecenter/ecommerce/289427/index.html
¹³ https://www.channelpartner.de/handel/ecommerce/291267/index.html
¹⁴ https://www.channelpartner.de/handel/ecommerce/292886/index.html
¹⁵ https://www.channelpartner.de/knowledgecenter/ecommerce/289348/index.html
¹⁶ https://www.channelpartner.de/knowledgecenter/recht/wettbewerb/287244/index.html
¹⁷ https://www.channelpartner.de/news/288483/index.html
¹⁸ https://www.channelpartner.de/knowledgecenter/ecommerce/286789/index.html
¹⁹ https://www.channelpartner.de/knowledgecenter/ecommerce/288469/index.html
²⁰ https://www.channelpartner.de/knowledgecenter/ecommerce/288226/index.html
²¹ https://www.channelpartner.de/knowledgecenter/ecommerce/2223403/index.html
²² https://www.channelpartner.de/knowledgecenter/mobilecomputing/287944/index.html
²³ https://www.channelpartner.de/knowledgecenter/ecommerce/287606/index.html
²⁴ https://www.channelpartner.de/knowledgecenter/ecommerce/287455/index.html
²⁵ https://www.channelpartner.de/knowledgecenter/ecommerce/286042/index.html
²⁶ https://www.channelpartner.de/cebit2010/285503/index.html
²⁷ https://www.channelpartner.de/285658/
²⁸ https://www.channelpartner.de/querschlaeger/284988/index.html