Checkliste Shop-Visualisierung: Futter für das Augentier 'Kunde'

In den letzten Jahren hat sich das Online-Nutzungsverhalten stark gewandelt. Anders als früher bewegen sich die Nutzer heute schneller und mit Selbstverständlichkeit durch das Netz. Dadurch sind ihre Ansprüche gestiegen: Sie sind wählerisch geworden. Besonders im E-Commerce ist es nun wichtig, die Nutzerführung an die neuen Kundenbedürfnisse anzupassen: Händler müssen die Nutzerführung ihres Onlineshops intuitiver und visueller gestalten.

Vier Stellschrauben haben ECommerce-Händler, ihren Shop visueller und interakiver zu gestalten.

1. Das Text-Bild-Verhältnis finden

Für eine visuelle Nutzerführung müssen Shopbetreiber Textinhalte entsprechend der aktuellen Nutzergewohnheiten ausrichten.
Nutzer lesen online gerne:

• Artikel von Onlinemagazinen,
  
• Beiträge in Expertenblogs
  
• oder als hilfreich bewertete Nutzermeinungen.

Klar unterschieden wird hier zwischen "Text als Inhalt" und "Text zur Nutzerführung". Nicht so gerne arbeiten sich Nutzer allerdings lesend zu den für sie interessanten Inhalten durch.

Untersuchungen haben ergeben, dass die Nutzer dabei meist überhaupt nicht lesen: Sie scannen den Text lediglich. Der Leser liest also nur die ersten Wörter eines Teasers oder die Navigationspunkte an. Danach entscheidet er in Sekundenbruchteilen, ob es sich für ihn um einen interessanten Inhalt handelt oder nicht.

Dient ein Text hauptsächlich der Nutzerführung, sollte er also so knapp wie möglich sein. Eine gelungene Lösung ist hier die Kombination aus Text und Bild oder aus Text und einem allgemein bekannten Icon. Denn: Nutzer können die Aussage eines passenden Bildes schneller erfassen, als die eines kurzen Textes.

Negativbeispiel: Zu viel Text
Am deutlichsten werden die Folgen eines falschen Text-Bild-Verhältnisses für einen Onlineshop auf dessen Startseite: Muss der potenzielle Käufer dort zu viel lesen, verlässt ihn schnell das Interesse weiterzuklicken.

Der Onlineshop Designers Heaven   etwa möchte den Nutzern direkt auf der Startseite vermitteln, dass hier tolle Design- und Geschenkartikel angeboten werden, der Shop sicher ist und guten Service bietet. Dies geschieht jedoch hauptsächlich über einen langen Fließtext, der dem Nutzer visuell nur eines signalisiert: "Hier muss ich viel lesen". (Laaaangweilig).


Positivbeispiel: Mehr Bilder

Die gleichen Aussagen möchte auch Myfab   vermitteln. Myfab wählt hierzu jedoch den visuellen Weg. So erkennt der Nutzer sofort: Hier werden Designermöbel und Accessoires angeboten. Das professionelle und hochwertige Shopdesign soll dem potenziellen Käufer außerdem auf visuelle Weise vermitteln, dass es sich um einen seriösen Onlineshop handelt.

Im Hinblick auf die visuelle Gestaltung der Startseite sollten Betreiber eines Onlineshops immer bedenken, dass es nur wenige Sekunden sind, in denen ein Nutzer sich einen Überblick über diese Startseite verschafft. Der jüngste Hype-Kandidat Pinterest   zeigt, wie wichtig visuelle, bildgestützte Designkonzepte für den Erfolg im E-Commerce in Zukunft sein werden (Pinterest: Wie sich ein Fotoalbum zur subtilen Cashcow mausert).

2. Den Nutzer anhand von Farben führen

Das veränderte Nutzungsverhalten im Web hat weiterhin auch Auswirkungen auf den Einsatz von Farbe bei der Gestaltung von Webseiten. So sind Farben bei der Nutzerführung wichtiger geworden. Der Grund: Farben wecken Assoziationen. Sie helfen dabei, emotionale Bedeutung ohne Umwege direkt zu vermitteln. Nutzer erfassen ihren Sinn somit blitzschnell.

Farben teilen ihre Botschaft unschlagbar schnell mit. Sei es eine rote Fehlermeldung 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. Dies birgt allerdings auch Risiken. So müssen bestehende, allgemein gängige emotionale Farbverknüpfungen unbedingt beachtet werden. Denn eine grüne Fehlermeldung oder rote Häkchen bei einer Vorteilskommunikation würde der Betrachter als "falsch" empfinden.

Die richtige Signalwirkung des Stilmittels Farbe sollten sich Shopbetreiber jedoch durchaus zu Nutze machen: Zum Beispiel als Wegweiser ("Hier geht's lang"). Besonders wichtige Call-to-Action-Funktionen, wie etwa der "In den Warenkorb"-Button, sollten auffällig und farbig markiert sein. Ein Button in Hellgrau suggeriert dem Nutzer den Status 'inaktiv'. Denn die Bedeutung der ausgegrauten Schrift kennt der Nutzer unter anderem von der Verwendung verschiedenster Software-Programme.

Besonders im E-Commerce orientieren sich Nutzer stark an der Farbe und lernen deren Funktion sehr schnell, vorausgesetzt, die Farbe wird stringent eingesetzt. Ein Beispiel dafür ist etwa, dass alle klickbaren Elemente in einer einzigen Interaktionsfarbe gehalten sind.

Farben sollten immer ihrer Bedeutung und Funktion entsprechend eingesetzt werden - keinesfalls wahllos und nur weil es "einfach gut aussieht". Bisher wurden Farben jedoch bezüglich des Farbcodes oft falsch eingesetzt. So ging die Theorie "Wenn wir unsere Rubriken unterschiedlich einfärben, helfen wir dem Nutzer bei der Orientierung" in der Praxis oft nicht auf.

Der Grund: Die Disharmonie der Assoziationen. Unterschiedliche Farben beschreiben zwar eine unterschiedliche Wirkung und Bedeutung, jedoch sind diese nicht frei wählbar. So ist die Farbe blau beispielsweise im menschlichen Unterbewusstsein mit Verlässlichkeit und Seriosität verbunden, nicht aber mit Kindermoden. Gelb macht Kunden automatisch auf Sonderangebote aufmerksam, aber nicht auf Möbel.

Grün suggeriert dem Gehirn ein freundliches "Alles bestens", aber nicht "Hier gibt's Schuhe". Ein Farbcode ist daher nicht grundsätzlich schlecht oder störend, allerdings macht er eine Seite vor allem eines: bunt. Und dies ohne wirklichen zusätzlichen Nutzen.

Wenn Händler die intuitive Grundbedeutung der Farbe bei ihrem Einsatz beachten, helfen sie ihren Nutzern. Sonst müsste der Kunde den neuen, willkürlich definierten Farbcode eines Shops erst erlernen. Und dies für jede Seite einzeln, wenn diese einen jeweils spezifischen Farbcode beinhalten.

Das Problem missverständlicher Farcodes wird verschärft, wenn ein Angebot besonders umfangreich ist. Farbcodes werden gerade dann sehr gerne integriert. Wenn jedoch jede Rubrik ihre eigene, willkürlich ausgewählte Farbe bekommt, wird der Nutzer von der Komplexität des Farbcodes schlicht erschlagen. Statt klarer Gliederung nimmt er dann nur noch Buntheit wahr. Beispielsweise verwendet der Anbieter Otto   für seinen Shop-Farbcode drei leicht unterschiedliche Blautöne. Dies könnte den Nutzer eher verwirren, als ihm helfen.

3. Icons verwenden und Funktionen zeigen

Inhalte schon von vornherein grafisch darzustellen ist effektiver, als die Besucher zum Anlesen von Text zu zwingen. Hier greift das Prinzip des erzählenden Icons, ähnlich dem von Verkehrsschildern: Ein Bild von einem Auto, das ins Wasser fällt, wird sofort erfasst und verstanden. Um die gleiche Aussage ("Vorsicht: In zweihundert Metern endet die Straße am Ufer") anhand des Textes zu erfassen, bräuchte der Autofahrer im Vorbeifahren einen entscheidenden Moment länger.

Ein Icon funktioniert allerdings nur, wenn das Symbol entweder sehr aussagekräftig oder sehr bekannt und damit dessen Bedeutung bereits erlernt ist. Das Prinzip gilt für alle Online-Auftritte: Beispielsweise ein "Drucken-Icon" in Form eines Druckers ist sowohl aussagekräftig als auch bereits erlernt. Leider bringen nur sehr wenige Icons diese Eigenschaften mit sich. So funktionieren bekannten Icons für die Funktionen "Schrift größer", "Versenden", "Drucken" und "RSS" sehr gut. Die Icons für "Bookmarken" und "Merken" funktionieren hingegen nicht besonders gut.

Abgesehen von Icons gibt es noch ein weiteres sehr wirksames Mittel der visuellen Nutzerführung, die so genannten Funktions-Teaser. Derlei Funktions-Teaser ersetzen klassische Teaser, welche Funktionen zwar beschreiben, aber nicht sofort liefern können. So können etwa gleich auf der Startseite eine erweiterte Suchmaske oder ein interaktiver Geschenkefinder integriert werden.

Funktionen direkt zu zeigen, ist auf Unterseiten ein probates Mittel. Amazon zum Beispiel hat seine Artikeldetailseite entsprechend ausgerichtet. Die Seite ist recht lang, dafür kann der Nutzer sehr einfach herunterscrollen und die für ihn relevanten Informationen visuell sehr schnell erfassen. Vor allem die Bewertungsfunktionen Amazons sind so bildlich besonders aussagekräftig gestaltet.

4. Usability: Unterschiedliche Einstiege und Wege anbieten

Eine gelungene Usability zeigt möglichst vielen unterschiedlichen Nutzern jeweils einen passenden Weg durch das Angebot. Denn: Findet ein Nutzer keinen passenden Einstieg, schließt ihn das schlicht vom Angebot des Shops aus. Er ist damit als potenzieller Kunde verloren. Um möglichst wenig Nutzer auszuschließen, sollten Shopbetreiber deswegen eine Entweder-oder-Strategie bei allen interaktiven Elementen 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 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.

Ihm Rahmen einer Eye-Tracking-Studie etwa benötigte eine Probandin über 30 Sekunden, um auf Amazon einen Link zur Startseite zu finden. Für einen Internetnutzer ist das zu lange: Wäre die Probandin in einer echten Besuchssituation auf der Amazon-Site gewesen, hätte sie aufgegeben und ihren Besuch abgebrochen.

Bei den drei klassischen Haupteinstiegen Navigation, Suche und beim Einstieg über visuelle Teaser sind zwei Dinge besonders wichtig: Deren Existenz und ihre adäquate Darstellung. Findet ein Nutzer schnell seinen Einstieg, ist er damit zufrieden gestellt: Es stört ihn dann auch nicht, dass noch andere, redundante Wege existieren.

Heine   löst die adäquate Darstellung der unterschiedlichen Einstiege sehr gut: Die Navigation ist klassisch gehalten und dem Nutzer bekannt. Die Suchfunktion ist sehr auffällig platziert und die Teaser sind bildlich dargestellt.

Weniger gut umgesetzt ist dies bei der französische Seite 3Suisses  . Hier ist die Suchleiste eher versteckt als leicht zu finden. Des weiteren wirkt die Hauptnavigation nicht wirklich gebräuchlich und daher unbekannt.

Zudem ist es wichtig, die unterschiedlichen Use Cases zu beachten. Die meisten Onlineshops bedienen sich in erster Linie der klassischen Use Cases: In diesem Fall weiß der Nutzer meist schon ziemlich genau, in welcher Kategorie er suchen muss. Dies trifft aber nicht immer zu. Noch unentschlossene Stöberer muss der Händler durch eine interaktive Filtersuche einfangen. Hier kommen Produktfinder und Funktionsteaser zum Einsatz.

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

Denn sich von Händlern in Schubladen stecken lassen, das tun Kunden äußerst ungern. Noch dazu gibt es fast keine exakt und allgemeingültig zutreffenden. Darum ist es besser, die unterschiedlichen Nutzer intuitiv über spezifische Teaser abzuholen. Auch die Filtersuche oder Konfiguratoren sind hier geeignete Optionen. Denn sie erlauben es den Kunden, sich mit jedem einzelnen Klick das Angebot für sich selbst passgenau zurechtzukürzen. So lässt der Händler dem Nutzer selbst die Entscheidungsgewalt - ohne ihn zu bevormunden.

Visuelle Benutzerführung: Eine für alle

Gerade im E-Commerce sind die Prinzipien der intuitiven Benutzerführung so gut wie unverzichtbar: Nur wenn der Kunde seine Ware schnell findet, wird er sie kaufen. Um dies zu erreichen, müssen Händler Texte, Bilder, Farben und Icons dem erlernten Surfverhalten entsprechend einsetzen. Denn 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 gewünschten Inhalten kommen.

---

iBusines-Autor Florian Schneider ist Creative Director und Managing Partner bei der auf Design spezialisierten Interaktiv-Agentur Netz98   .