E-Commerce

Praxistipps: Onlineshops intuitiver und visueller gestalten

Seite 2 / 2

Icons verwenden und Funktion zeigen

Effektiver, als die Besucher zum Anlesen von Text, zum so genannten Scannen, zu zwingen, ist es, Inhalte von vornherein grafisch darzustellen. Das Prinzip des erzählenden Icons kennt man zum Beispiel von Verkehrsschildern: Ein Bild von einem Auto, das ins Wasser fällt, kann man sofort erfassen und verstehen.

Um die gleiche Aussage „Vorsicht: In zweihundert Metern endet die Straße am Ufer“ im Vorbeifahren als Text zu erfassen, braucht man hingegen 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:

Icons vermitteln Informationen oft schneller als Text.

Neben Icons sind Funktionsteaser ein wirksames Mittel der visuellen Nutzerführung. 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 Shopbetreiber etwa auf der Startseite eine gute, erweiterte Suchmaske oder einen interaktiven Geschenkefinder integrieren.

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 einfach herunterscrollen und die für ihn relevanten Informationen visuell schnell erfassen.

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

Amazon stellt Funktionen vorbildlich dar.

Amazon stellt Funktionen vorbildlich dar.

Unterschiedliche Einstiege bieten

Für die Usability ist es wichtig, möglichst vielen Nutzern einen geeigneten Weg durch das Angebot aufzuzeigen, der ihrem Use-Case entspricht. 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. Für einen Internetnutzer 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.

Die drei klassischen Haupteinstiege Navigation, Suche und Einstieg über visuelle Teaser sollten Shopbetreiber in jedem Fall anbieten und auch adäquat darstellen. Findet ein Nutzer mit einer dieser Surfvorlieben sehr schnell „seinen“ Einstieg, ist er damit zufriedengestellt – und es stört ihn auch nicht, dass noch andere, redundante Wege existieren.

Der Aufbau der französischen Seite 3suisses.fr ist ungewöhnlich und erschwert Besuchern die Orientierung.

Der Aufbau der französischen Seite 3suisses.fr ist ungewöhnlich und erschwert Besuchern die Orientierung.

Im E-Commerce ist es unerlässlich, dass Shopbetreiber unterschiedliche Use-Cases beachten. Die meisten Onlineshops bedienen in erster Linie lediglich 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“. Häufig wollen potenzielle Kunden auch nur stöbern oder haben nur eine ungefähre Vorstellung davon, was sie kaufen wollen. Durch eine interaktive Filtersuche, durch Produktfinder und Funktionsteaser gibt es inzwischen vielfältige Möglichkeiten, unterschiedliche Einstiege anzubieten.

Nicht jeder Käufer ist gleich

Filtersuchen, Produktfinder und Funktionsteaser sind 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 besteht die Herausforderung darin, möglichst viele Nutzer abzuholen.

Ein Mittel ist hier die klassische Portalstrategie: 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: Menschen lassen sich nicht gerne in Schubladen stecken, zudem gibt es oft keine passende Schublade.

Besser ist es darum, die unterschiedlichen Nutzer intuitiv über spezifische Teaser abzuholen oder ihnen über einer Filtersuche oder über 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.

Fazit

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 finden.

Setzt man Text, Bild, Farbe und Icons dem erlernten Surfverhalten entsprechend ein 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.

Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

3 Kommentare
Faber

Vielen Dank für die interessanten Anregungen, wir werden uns daran ein Beispiel nehmen!

Felix
Felix

jep, das Gleiche hab ich auch vor bei 3 privaten Projekten, herzlichen Dank für den Artikel! :)

Achja und danke für die t3n-Magazine und das T-Shirt, das Angebot war so genial, das ich mich den Monat sogar um die 35 Euro verschuldet habe :D

Faber

Nochmals danke, unsere Webseite wird zukünftiger noch besser :)