4 Tipps zum Webshop

Kundenbindung

Datum:11.05.2011
Autor(en):Ronald Wiltscheck

In den letzten Jahren hat sich das Online-Nutzungsverhalten stark gewandelt. Die User bewegen sich noch schneller, selbstverständlicher und auch visueller durch das Netz als früher. Sie sind anspruchsvoller und wählerischer geworden. Gerade im E-Commerce¹ ist es besonders wichtig, die Nutzerführung so zu gestalten, dass sie auf die neuen, visuell geprägten Bedürfnisse der Nutzer eingeht. Die folgenden Tipps von Florian Schneider, Creative Director und Managing Partner bei netz98², wollen dabei helfen, die Nutzerführung von Online-Shops intuitiver und visueller zu gestalten.

1. Das Text-Bild-Verhältnis

Die grundsätzliche Frage "Lesen Nutzer beim Besuch von Webauftritten³ gerne Texte?" ist mit einem klaren ja und auch mit einem klaren nein zu beantworten. Man muss hier zwischen "Text als Inhalt" und "Text zur Nutzerführung" unterscheiden. Gerne lesen wir zum Beispiel⁴ einen Artikel eines Online-Magazins, einen Beitrag in einem Expertenblog oder eine als hilfreich bewertete Nutzermeinung. Nicht gerne arbeiten wir uns aber lesend zu den für uns interessanten Inhalten durch. Untersuchungen haben sogar ergeben, dass dabei überhaupt nicht gelesen wird, man könnte diesen Vorgang eher als "Scannen" bezeichnen - die Navigationspunkte oder auch die ersten Wörter eines Teasers werden lediglich angelesen.

Danach entscheiden wir in Sekundenbruchteilen, ob es sich um einen für uns interessanten⁵ Inhalt bzw. Zugang⁶ handelt oder nicht. Für eine visuelle Nutzerführung ist es deshalb wichtig, Text entsprechend dieser Nutzer-Gewohnheit einzusetzen. Das bedeutet: Dient ein Text hauptsächlich der Nutzerführung, sollte er so knapp wie möglich gehalten sein. Gut⁷ ist auch immer die Kombination von Text und Bild oder von Text und aussagekräftigem Icon.

Der Online-Shop designers-heaven.de möchte den Nutzern direkt auf der Startseite schon einiges mitteilen
Foto: netz 98

Oft sagt auch ein Bild allein mehr als tausend Worte. Denn noch wesentlich schneller als einen kurzen Text können Nutzer die Aussage eines passenden Bildes erfassen. Gut zu sehen ist das an den folgenden Beispielen. Der Online-Shop designers-heaven.de möchte den Nutzern direkt auf der Startseite schon einiges mitteilen, zum Beispiel dass hier wirklich tolle Design⁸- und Geschenkartikel angeboten werden, in einem sicheren Shop mit tollem Service. Dies geschieht jedoch hauptsächlich über einen langen Fließtext, der dem Nutzer visuell nur eines vermittelt: "Hier muss ich lesen."

myfab.com kommuniziert hauptsächlich visuell
Foto: netz 98

Die gleichen Aussagen⁹ werden auch von myfab.com getroffen, jedoch auf einem entgegen gesetzten Weg, nämlich hauptsächlich visuell. Der Nutzer sieht sofort, dass es tolle Designermöbel und Accessoires zu kaufen gibt. Auf ebenso visuelle Weise¹⁰ erfährt er, dass es sich um einen seriösen Onlineshop handelt - durch das professionelle und hochwertige Design.

Bei der Frage der visuellen Gestaltung der Startseite¹¹ sollten Betreiber eines Online-Shops immer bedenken, dass es wirklich nur wenige Sekunden sind, in denen ein Nutzer sich einen Überblick über diese Startseite verschafft.

2. Mit Farbe führen

Der Einsatz von Farbe¹² spielt bei der Gestaltung von Webseiten seit jeher eine besonders große Rolle. Diese Rolle der Farbe ist inzwischen sogar noch tragender geworden. Der Grund dafür ist wieder unser verändertes Nutzungsverhalten im Web: Wir wollen immer schneller und visueller geführt werden und uns nicht nur lesend und arbeitend durch ein Angebot bewegen.

Fehler sollten immer rot, positive Botschaften immer grün dargestellt werden
Foto: netz 98

Farbe hilft uns dabei, weil wir die Farbe und ihre von uns gelernte oder emotionale Bedeutung blitzschnell erfassen können. Farbe teilt uns etwas mit - und das tut sie unschlagbar schnell. Ob es eine rote Fehlermeldung ist oder grüne Häkchen bei einer Vorteilskommunikation, in beiden Fällen unterstützt der adäquate Einsatz von Farbe visuell die Aussage und Funktion des entsprechenden Moduls. Hier ein kleines Beispiel, wie "falsch" eine grüne Fehlermeldung oder rote Häkchen einer Vorteilskommunikation auf uns wirken.

Fehler sollten immer rot, positive Botschaften immer grün dargestellt werden
Foto: netz 98

Farbe kann uns auch grundsätzlich kommunizieren: "Hier geht’s lang." Daher ist es unerlässlich, den wesentlichen Call-to-Action, wie zum Beispiel¹³ den "In den Warenkorb"-Button, schön auffällig und unbedingt farbig zu gestallten. Ein Button in Hellgrau - Designer sagen auch gern Silber dazu - wirkt eben leider wie ausgegraut, also wie inaktiv.

Gerade im E-Commerce¹⁴ orientieren wir uns ganz stark an der Farbe und lernen deren Funktion sehr schnell, vorausgesetzt, die Farbe wird stringent eingesetzt. Ein Beispiel dafür: alle klickbaren Elemente sind in einer einzigen Interaktionsfarbe gehalten.

Es ist sehr zu empfehlen, Farbe anhand ihrer Bedeutung und Funktion einzusetzen - und nicht wahllos, weil es zum Beispiel "einfach gut aussieht". Bei netz98 sind wir allerdings der Meinung, dass Farbe jahrelang auch dann regelmäßig falsch eingesetzt wurde, wenn es um das Thema Farbcode ging. Die Theorie "Wenn wir unsere Rubriken unterschiedlich einfärben, helfen wir dem Nutzer bei der Orientierung" ist zwar klar und erfrischend einfach, sie scheitert aber in der Praxis.

Ein Farbcode ist sicher nicht grundsätzlich schlecht oder störend. Allerdings macht er eine Seite vor allem bunt - und das ohne wirklichen Nutzen. Warum bleibt dieser Nutzen aus? Wie beschrieben haben unterschiedliche Farben eine unterschiedliche Wirkung und Bedeutung - eine, die wir alle intuitiv erleben. Blau steht zum Beispiel für Verlässlichkeit und Seriosität, aber nicht für Kindermoden; Gelb macht uns ganz automatisch auf ein tolles Sonderangebot aufmerksam und steht nicht für Möbel; Grün sagt uns "Alles bestens", aber nicht "Hier gibt’s Schuhe".

Wenn wir also die intuitive Grundbedeutung der Farbe bei ihrem Einsatz mit einbeziehen, helfen wir dem Nutzer wirklich. In allen anderen Fällen muss der Nutzer den neuen, willkürlich definierten Farbcode eines Shops erst lernen - und zwar auf jeder Seite, die einen spezifischen Farbcode beinhaltet, neu. Was das Problem verschärft: Farbcodes werden gerade dann sehr gerne integriert, wenn ein Angebot besonders umfangreich ist. Wenn jede Rubrik ihre eigene, willkürliche Farbe bekommt, wird der Nutzer von der Komplexität des Farbcodes schlicht erschlagen. Statt klarer Gliederung nehmen wir nur noch Buntheit wahr.

Ottos Farbcode beinhaltet gleich drei leicht unterschiedliche Blautöne
Foto: netz 98

Der Otto-Farbcode beispielsweise beinhaltet gleich drei leicht unterschiedliche Blautöne. Ob das eine wirkliche Hilfe für den Nutzer ist, darf bezweifelt werden.

3. Icons verwenden und Funktion zeigen

Nur wenige Icons sind "selbs erklärend"
Foto: netz 98

Effektiver, als die Besucher zum Anlesen von Text, zum sogenannten Scannen, zu zwingen, ist es, Inhalte von vornherein grafisch darzustellen. Das Prinzip des erzählenden Icons kennen wir zum Beispiel von Verkehrsschildern: Ein Bild von einem Auto, das ins Wasser fällt, können wir sofort erfassen und verstehen. Um die gleiche Aussage "Vorsicht: In zweihundert Metern endet die Straße am Ufer" im Vorbeifahren als Text zu erfassen, brauchten wir einen - möglicherweise entscheidenden - Moment länger.

Ein Icon funktioniert allerdings nur, wenn das Symbol entweder sehr aussagekräftig oder eben bekannt und erlernt ist. Das Prinzip gilt auch für alle Online-Auftritte: ein "Drucken-Icon" in Form eines Druckers ist sowohl aussagekräftig als auch erlernt. Leider bringen nur sehr wenige Icons diese nützlichen Eigenschaften mit. Im folgenden Beispiel ist erkennbar, wie gut die bekannten Icons für "Schrift größer", "Versenden", "Drucken" und "RSS" funktionieren, die für "Bookmarken" und "Merken" dagegen nicht annähernd so gut.

Abgesehen von Icons gibt es noch ein weiteres sehr wirksames Mittel der visuellen Nutzerführung, die sogenannten Funktionsteaser. Hier geht es darum, eine Funktion und den entsprechenden Mehrwert im Einstieg nicht nur zu beschreiben und zu verlinken, sondern direkt im Teaser selbst zu zeigen. So können gleich auf der Startseite etwa eine gute, erweiterte Suchmaske oder ein toller interaktiver Geschenke-Finder integriert werden. Solche wirkungsvollen Funktionsteaser ersetzen klassische Teaser, die Funktionen eben nur beschreiben können, anstatt sie sofort zu liefern.

Funktion direkt zu zeigen, ist aber auch auf den Unterseiten ein probates Mittel. Amazon zum Beispiel hat seine Artikeldetailseite entsprechend ausgerichtet. Die Seite ist recht lang, dafür kann der Nutzer sehr gut einfach herunterscrollen und die für ihn relevanten Informationen visuell sehr schnell erfassen.

Die Bewertungsfunktion bei Amazon ist besonders aussagekräftig gestaltet.
Foto: netz 98

Die Bewertungsfunktion beispielsweise ist bei Amazon besonders visuell und aussagekräftig gestaltet.

4. Unterschiedliche Einstiege und Wege bieten

Für gute Usability ist es wichtig, möglichst vielen Nutzern einen geeigneten Weg durch das Angebot aufzuzeigen, der ihrem Use-Case adäquat ist. Findet ein Nutzer keinen passenden Einstieg, wird er dadurch schlicht ausgeschlossen und ist als möglicher Kunde verloren. Wer möglichst wenig Nutzer ausschließen will, sollte bei allen interaktiven Elementen eine Entweder-oder- Strategie vermeiden.

Unterschiedlichen Einstiege bei Heine
Foto: netz 98

Für den Link zur Startseite gibt es beispielsweise inzwischen mehrere gelernte Darstellungsformen: oben rechts in der Metanavigation, als erster Hauptnavigationspunkt, unterhalb des Logos und natürlich in Gestalt des Logos selbst. Die Annahme, es reiche zum Beispiel aus, einfach das Logo zu verlinken, da das "ja eh jeder kennt", führt unweigerlich zu einem Ausschluss der Nutzer, die diesen Link stattdessen etwa in der Metanavigation erwarten und suchen.

Bei einer Eye-Tracking-Studie hat eine Probandin über 30 Sekunden gebraucht, um auf Amazon einen Link zur Startseite zu finden. Für einen Internet-Nutzer fühlt sich das wie eine absolute Ewigkeit an. Man darf davon ausgehen: wäre die Probandin in einer echten Besuchssituation auf der Amazon-Site gewesen, hätte sie längst aufgegeben und ihren Besuch abgebrochen.

Bei den drei klassischen Haupteinstiegen Navigation, Suche und beim Einstieg über visuelle Teaser sind zwei Dinge besonders wichtig: dass es sie gibt und dass sie adäquat dargestellt sind. Findet ein Nutzer mit einer dieser Surf-Vorlieben sehr schnell "seinen" Einstieg, ist er damit zufriedengestellt - und es stört ihn auch nicht, dass noch andere, redundante Wege existieren.

Heine löst die adäquate Darstellung der unterschiedlichen Einstiege sehr gut: Die Navigation ist klassisch und erlernt, die Suche ist sehr prominent, und die Teaser sind besonders visuell.

Weniger gut macht dies die französische Seite 3suisses.fr. Hier ist die Suche wenig prominent gestaltet und platziert, und die Hauptnavigation wirkt nicht wirklich gebräuchlich und bekannt.

Im E-Commerce ist es sehr wichtig, die unterschiedlichen Use-Cases zu beachten. Die meisten Online-Shops bedienen in erster Linie den klassischen Use-Case: Der Nutzer weiß schon ziemlich genau, nämlich bis auf Ebene der Kategorie, was er sucht. Nicht immer sind die Nutzer jedoch auf der Suche nach Artikeln aus einer bestimmten Rubrik wie "Hose" oder "MP3-Player".

Da ist die Braut, die einfach etwas schönes Blaues sucht, der Mann, der seiner Frau etwas Elegantes schenken möchte, oder die Frau, die einfach mal sehen möchte, was es in einem Online-Shop in ihrer seltenen Größe alles für Oberteile gibt. In all diesen Fällen gilt: Durch eine interaktive Filtersuche, durch Produktfinder und Funktionsteaser gibt es inzwischen vielfältige Möglichkeiten, genau solche Einstiege auch tatsächlich anzubieten.

die französische Website 3suisses.fr: unübersichtliche Navigation
Foto: netz 98

Filtersuchen, Produktfinder und Funktionsteaser sind auch probate Mittel, um die Nutzer intuitiv zu führen. Wenn es ein besonders breites und großes Angebot gibt oder wenn diverse Unterzielgruppen mit ganz unterschiedlichen Bedürfnissen existieren, dann ist die Herausforderung, möglichst viele Nutzer abzuholen, besonders groß. Ein Mittel ist hier die klassische Portal-Strategie: für jede Untergruppe gibt es eine eigene Tür. Dies ist leider nicht sehr intuitiv, der Nutzer muss auch hier wieder viel lesen und selber entscheiden, in welche Schublade er passt.

Genau hier liegt der Kernpunkt: Wir lassen uns nicht gerne in Schubladen stecken, und oft gibt es auch keine, die für uns wirklich zutreffen würde. Besser ist es darum, die unterschiedlichen Nutzer intuitiv über spezifische Teaser abzuholen oder ihnen über Filtersuche oder Konfiguratoren einen Weg anzubieten, auf dem sie sich mit jedem einzelnen Klick das Angebot immer passgenauer zurechtkürzen können. Das heißt: der Shopbetreiber lässt die Nutzer selbst entscheiden - ohne sie in offensichtliche Schubladen zu stecken.

Nutzerführung in Online-Shops

Das Ziel einer jeden intuitiven und visuellen Benutzerführung ist es, möglichst viele unterschiedliche Nutzer mit all ihren unterschiedlichen aktuellen Ausgangssituationen, Gewohnheiten und Vorlieben so zu bedienen, dass sie gut und vor allem schnell zu ihren präferierten Inhalten kommen.

Sind Text, Bild, Farbe und Icons unserem erlernten Surfverhalten entsprechend eingesetzt und findet der Nutzer einen adäquaten Einstieg, ohne dafür viel arbeiten zu müssen, ist schon ein sehr großer Schritt hin zu einer visuellen und intuitiven Nutzerführung getan. Gerade im E-Commerce sind die Prinzipien der intuitiven Benutzerführung so gut wie unverzichtbar. Nur wenn der Kunde eine Ware findet, kann er sie auch kaufen. (rw)

Links im Artikel: