Bilder und Farben richtig setzen: sieben Tipps für Online-Shops

Kaum ein Internetnutzer schaut sich die einzelnen Bereiche von Webseiten systematisch oder in aller Ruhe an. Stattdessen springt der Blick in Sekundenbruchteilen zwischen Bildern und einzelnen Wörtern hin und her, Texte werden höchstens angelesen. Dieses „Scannen“ haben Forscher mit Geräten zur Blickerfassung von Nutzern häufig beobachtet.

Daher sollten Web-Anbieter die Nutzerführung intuitiver und visueller gestalten, meint Usability-Experte Florian Schneider, Creative-Direktor bei der Internetagentur Netz98 New Media. Er hat jetzt in einem ausführlichen Online-Artikel die wichtigsten Regeln für die Benutzerführung von Online-Shops aufgestellt und diese mit gelungenen und auch missglückten Beispielen belegt. Sie lassen sich in den folgenden sieben Tipps zusammenfassen.

1. Texte, die den Nutzer durch das Warenangebot oder die Webseite insgesamt führen sollen, sollten so knapp wie möglich gehalten werden. Weil der User seinen nächsten Klick hauptsächlich aufgrund visueller Reize entscheidet, ist immer auch eine Kombination von Text und Bild oder von Text und einem aussagekräftigen Icon sinnvoll. Wenn etwa mehrere Produktkategorien angeboten werden, kann neben der textlichen Benennung der Warengruppe ein Foto eines beispielhaften Artikels stehen. Schnell das Wesentliche darzustellen, ist wichtig, da es insgesamt nur wenige Sekunden sind, in denen sich der Nutzer einen Überblick über die Startseite eines Online-Geschäfts verschafft.
2. Farben so verwenden, wie sie intuitiv erkannt werden. Aus der Farbpsychologie ist bekannt, dass die Menschen bestimmte Farben emotional zuordnen oder deren Bedeutung gelernt haben. So steht Grün für vorteilhafte Eigenschaften, Rot für Warnungen oder Fehler. Blau steht für Verlässlichkeit und Seriosität, Gelb erregt Aufmerksamkeit.
3. Aktionsfarben setzen. Farbe, so Experte Florian Schneider, kann auch grundsätzlich kommunizieren: Hier geht es lang. Wesentliche Aktions-Buttons, etwa „In den Warenkorb“, sollten daher auffällig und unbedingt farbig gestaltet werden. Von manchem Designer bevorzugte hellgrau-silberfarbene Buttons signalisieren dagegen, diese würden nicht aktiv sein.
4. Farbe stringent anhand ihrer Bedeutung und Funktion einsetzen. So ist zu empfehlen, alle klickbaren Elemente in einer einzigen Interaktionsfarbe anzulegen. Der häufig formulierten Annahme, unterschiedlich eingefärbte Rubriken würden dem Nutzer bei der Orientierung helfen, erteilt Schneider eine Absage. „Ein Farbcode ist sicher nicht grundsätzlich schlecht oder störend“, schreibt er. Und weiter: „Allerdings macht er eine Seite vor allem bunt – und das ohne wirklichen Nutzen.“ Denn der Kunde müsse für jeden Online-Shop die Farbcodierung jeweils neu „lernen“.
5. Möglichst „erzählende“ Icons verwenden. Um auf das Lesen längerer Teaser verzichten zu können, helfen Icons bei der Orientierung. „Erzählende“ Icons zeigen selbsterklärende Symbole, etwa einen Drucker fürs Drucken oder verschieden große Buchstaben fürs Einstellen der Schriftgröße. Für alle anderen Icons muss der Nutzer ihre Bedeutung erlernen, wie es bei vielen Social-Media-Icons der Fall ist.
6. Funktions-Teaser und -Tools gleich auf die Startseite stellen. Mit diesen kann der Seitenbesucher etwa interaktiv Geschenke finden, die erweiterte Suchen benutzen oder Bewertungen abgeben.
7. Verschiedenen Nutzertypen unterschiedliche Einstiege anbieten. Der eine User orientiert sich über die klassische Navigationsleiste, der andere tippt sofort den Namen des gewünschten Artikels ins Suchfeld ein. Der dritte wählt illustrierte Teaser von Warenkategorien mit anschließendem Produktfilter. Diese drei Haupteinstiege, so Usability-Fachmann Florian Schneider, sollte eine Webseite allesamt parallel anbieten. So würden keine Interessenten bei der Informationssuche auf der Strecke bleiben.

Mit diesen Tipps kann der Betreiber eines Online-Shops dem Besucher ein Angebot machen, dass dieser intuitiv nutzen kann. Der Nutzer entscheidet dann selbst, wie er seinen Weg durch das Angebot findet.