4 Tipps zur Nutzerführung in Online-Shops
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 mitteilenOft 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 visuellDie 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
werdenFarbe 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
werdenFarbe kann uns auch grundsätzlich kommunizieren: "Hier
gehts 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 gibts 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öneDer
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"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.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 HeineFü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
NavigationFiltersuchen, 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)
--------------------------------------------------------------------------------
redaktion@bill.de
(Quelle Internet / Autor wenn
nicht erwähnt, UNBEKANNT)
|