Vier Tipps für visuelle und intuitive Nutzerführung im E-Commerce

((Fachbeitrag netz98, Visuelle Nutzerführung, ca. 12.800 Zeichen)) Vier Tipps für visuelle und intuitive Nutzerführung im E-Commerce Autor: Florian Schneider, Creative Director und Managing Partner bei netz98 In den letzten Jahren hat sich das Online-Nutzungsverhalten stark gewandelt. Die Nutzer 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 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. 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 1 tollem Service. Dies geschieht jedoch hauptsächlich über einen langen Fließtext, der dem Nutzer visuell nur eines vermittelt: „Hier muss ich lesen.“ Die gleichen Aussagen werden auch von myfab.com getroffen, jedoch auf einem entgegengesetzten 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. 2 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. 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. 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 3 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. Der Otto Farbcode beispielsweise beinhaltet gleich drei leicht unterschiedliche Blautöne. Ob das eine wirkliche Hilfe für den Nutzer ist, darf bezweifelt werden. 4 3. Icons verwenden & Funktion zeigen 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 beispielsweise ist bei Amazon besonders visuell und aussagekräftig gestaltet. 5 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. 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.