Navigations-Optimierung mit Icons: 12 Best Practices

Es liegt in der Natur des Menschen, unnötigen Aufwand zu vermeiden. Evolutionstechnisch ist dieses Verhalten darauf zurückzuführen, dass ein optimaler Energiehaushalt in schwierigen Situationen ein Überlebensfaktor sein kann. Wir versuchen daher stets, unsere Ziele mit möglichst geringem Einsatz zu erreichen. Dazu muss natürlich auch sofort klar sein, wo es überhaupt zum Ziel geht.

Kurzum:

Wir wollen nicht lange darüber nachdenken, wo es lang geht.

Im Straßenverkehr weisen uns Schilder den richtigen Weg. Da zumindest die meisten Zeichen gelernt sind, muss das Gehirn zu deren Dekodierung kaum Energie aufwenden.

In der Welt der Computer werden Symbole oder Icons schon seit der Erfindung von grafischen Benutzeroberflächen in den 70er Jahren eingesetzt.

Das Ziel ist das gleiche: Schnell und ohne nachzudenken ans Ziel gelangen.

Ein Klassiker ist hier das Diskette zum Speichern von Dateien. Auch wenn Disketten schon seit fast 15 Jahren ausgedient haben, wird das Symbol noch immer verwendet.

icons_b 

Der Grund liegt ganz einfach darin, dass es sich bei uns über die letzten Jahrzehnte fest eingeprägt hat. Das Symbol wurde gelernt - und es gibt bisher keine Alternative. Bleibt abzuwarten, wie lange das noch so bleibt. Interessant wäre auch, ob die Diskette von der „neuen Generation“ verstanden wird - aber das ist ein anderes Thema...

Also nochmal zurück:
Es geht immer noch darum, den Kognitionsaufwand zu reduzieren.

Was bedeutet das aber jetzt für den E-Commerce?

Jeder Orientierungs- und Suchaufwand reduziert die Kaufmotivation des Kunden. Um dem entgegenzuwirken, wurden über die Jahre zahlreiche Icons als Standard etabliert.
Sei es der Einkaufswagen beim Warenkorb oder die Lupe bei der Suche - die Symbole erleichtern die Orientierung und unterstützen den Besucher dabei, sein Ziel zu erreichen.

Gut sichtbare Serviceelemente wie Telefonnummern oder weitere Kontaktmöglichkeiten wirken sich zudem positiv auf das Vertrauen des Nutzers aus.
 

Icons_E-Commerce 

Icons müssen sich jedoch keineswegs auf diese „Standardelemente“ beschränken. So können sie im Onlineshop auch auf dem Weg zum Produkt sehr hilfreich und zielführend sein.

Welche Möglichkeiten sich dazu bieten, möchte ich gerne anhand von Praxisbeispielen vorstellen:

1. Icons innerhalb der Hauptnavigation

Dies kann besonders bei einer sehr breitgefächerten Hauptnavigation mehr Klarheit schaffen. Das Sortiment ist schneller zu überblicken und der Einstieg fällt deutlich leichter.

Voraussetzung dafür ist natürlich, dass die Icons verständlich sind. Leider sieht man auf Websites immer wieder Piktogramme, die überhaupt nicht bekannt bzw. assoziierbar sind. Teilweise kann man sie nicht genau erkennen, weil sie zu klein dargestellt sind.

Es gibt aber auch zahlreiche positive Beispiele:

Crumpler

crumpler.de

Das Portfolio des Shops wird auf Anhieb deutlich.

Asstel

asstel

Die Bildsprache vereinfacht die Navigation und hilft, die Versicherungen einzuordnen.

Sport Tiedje

tiedje

Die wichtigsten Produktgruppen sind durch Symbole hervorgehoben.

Urlaubspiraten

piraten

Auch dezente Piktogramme können die Orientierung erleichtern.

Globetrotter

globetrotter

Der Einstieg fällt dank der aussagekräftigen Icons sehr leicht. Auch wird die breite Produktpalette auch einen Blick sichtbar, was für die Kompetenz des Anbieters spricht.

Ohne die Bildsprache würde das ganze viel komplexer und anstrengender aussehen:

globetrotter_ohne_icons

Ohne Piktogramme rückt die Navigation optisch in den Hintergrund. Die wichtigen Einstiege würden deutlich weniger Blickaufmerksamkeit erhalten.

2. Icons innerhalb von Mega-Dropdowns

Insbesondere bei komplexen Unternavigationen kann dies sehr hilfreich sein. Ähnlich wie in den oben gezeigten Beispielen erleichtern bekannte Symbole auch hier ein schnelleres „Zurechtfinden“. Zusätzlich wird der Joy of Use erhöht. So macht das grafisch-unterstützte Stöbern sicherlich mehr Spaß als das Suchen in einer Textwüste.

Da der Detailgrad auf diesen tieferen Navigationsebenen in der Regel zunimmt, ist die Zuweisung von verständlichen Icons hier schon etwas schwieriger. Häufig nehmen die Symbole eine eher unterstützende Aufgabe ein. Sie fördern den Komfort und die Orientierung, sind jedoch meist nur in Kombination mit dem Textlabel verständlich.

Avandeo

avandeo

Die Möbelkategorien sind hier klar differenzierbar - teilweise sogar ohne Textlabel.

Ikea

Ikea

Ähnlich bei Ikea: Die Icons sind allerdings etwas zu kontrastarm dargestellt.

Action Envelope

envelope

Für die Enkodierung sind die Textabels hier unerlässlich.

Freitag

freitag


Bei den unbekannten Produktnamen (z.B. Tote Bags) können die Icons bei der Navigation zum gesuchten Produkt helfen.

Gateway

gateway

Auch weniger komplexe Menüs profitieren von der Bildsprache.

Heine

heine

Die Hauptkategorien sind durch Piktogramme hervorgehoben.

Motor-Talk

motortalk

Auch mit 56 Unterpunkten kann ein Mega-Dropdown noch übersichtlich sein.

3. Icons auf Landingpages

Neben dem klassischen Weg über die Hauptnavigation gibt es natürlich viele weitere Einstiegsmöglichkeiten über Landingpages. Auch dort können kleine Bilder den Weg zum gesuchten Produkt erleichtern.

Ein Beispiel: Google liefert zum Keyword „Zelt“ folgendes Ergebnis:

google_zelte

Ein Klick öffnet die folgende Kategorieseiten-Landingpage:

globetrotter_zelte

Auf der Landingpage erkennt der Besucher sofort, wo es lang geht.

Die grafische Unterstützung der Produktgruppen macht den Einstieg an dieser Stelle sehr leicht. Zudem entsteht der Eindruck, dass der Anbieter eine auf diesem Gebiet breite - aber dennoch überschaubare - Produktpalette zu bieten hat. Alternativ zum primären Einstieg gibt es noch die Möglichkeit, den Weg über die Marken gehen.

Diese Landingpages bestehen im gleichen Muster für alle weiteren Kategorieseiten. Besonders positiv hervorzuheben ist, dass die Symbolsprache über die gesamte Website konsistent ist.

globetrotter_2

Auch die Landingpage für Outdoormöbel hält passende Einstiege bereit.

Fazit

Unabhängig von der Einsatzform bedeutet die Entwicklung eines individuellen Iconsets einen sehr hohen Aufwand - sowohl konzeptionell, als auch designtechnisch.

Auf der anderen Seite bietet diese Maßnahme jedoch ein sehr hohes Potenzial, denn

Was der Besucher nicht (schnell genug) findet, exisistiert für ihn auch nicht.

Werden Produkte schneller auffindbar gemacht, und zudem der Joy of Use gesteigert, profitieren Käufer und Shopbetreiber gleich doppelt.

Folgende Aspekte sollten dabei beachtet werden:

  • Wählen Sie eine Bildsprache, die zum Anbieter und zum Sortiment passt.
  • Erstellen Sie nach Möglichkeit ein individuell angepasstes Iconset.
  • Stellen Sie sicher, dass die Icons von den potenziellen Kunden verstanden werden.
  • Nutzertests helfen, die Innensicht des Anbieters zu objektivieren.
  • Beachten Sie, dass Symbole die Blickaufmerksamkeit auch falsch lenken können.
  • Icons sind keine Allzwecklösung - manchmal kann ein Text zielführender sein.

Wie sind Ihre Erfahrungen mit dem Thema? Wie schätzen Sie das Kosten-Nutzen-Verhältnis ein? Über Ihr Feedback freue ich mich.

  • Teilen
  • Send to Kindle
  • http://www.konversionskraft.de/?p=18943
Marcel Licht Marcel Licht ist Mitglied der Geschäftsleitung der Web Arts AG. Er beschäftigt sich seit 2009 mit der Conversion Optimierung von Websites namhafter Unternehmen aus den Bereichen Finanzen, Telekommunikation, Tourismus und Onlinehandel. Weiterhin ist Marcel Licht Dozent für Conversion Optimierung an der Hochschule Darmstadt. Seine Artikel erschienen bisher in Publikationen wie iBusiness, Website Boosting, t3n, Chip und weiteren Magazinen. Marcel Licht auf XING.

Frage zum Artikel? Fragen Sie den Autor!


Please leave this field empty.

, , ,

7 Reaktionen auf  “Navigations-Optimierung mit Icons: 12 Best Practices”

Kommentare

  1. Bitskin Bitskin

    Der Artikel ist für viele Onlineshop-Betreiber Gold wert. Ich finde auch, das die Navigation in einem Online-Shop essentiell für den Erfolg des selbigen ist!

  2. Andreas Andreas

    Sehr schöner Artikel. Ich finde auch solche Icons sind etwas enorm wichtiges. Denn der Besucher kann sich einfach besser bzw. schneller zurecht finden bzw. auf den Bereich fokussieren für welche er sich interessiert.

  3. Bernd Bernd

    Das mit den Icons hatten wir so noch gar nicht auf dem Schirm. Werden wir wohl umsetzen und -testen- müssen.

  4. Martin Martin

    ich finde Icons in der Navigation in Onlineshops grausam, weil es die meisten Shops nicht schaffen, Icons zu erstellen, die kognitiv ohne Aufwand zu erfassen sind. Im Gegenteil, der kognitive Aufwand für die Erfassung ist teilweise enorm.
    Ist „Liegen und Feldbetten“ nicht eher ein Tapeziertisch?
    Erkenne ich Wallets, die genauso groß sind wie Shopper?
    Ist ein Geodät-Zelt (was auch immer das ist) nicht nur ein Kuppelzelt, dessen Vorbau links statt rechts ist?

    Einzig bei gelernten Icons (Automarken) klappt das perfekt und ich bin kognitiv entlastet. Die meisten Icons sind halt nur gut gemeint

Trackbacks/Pingbacks

  1. […] Wann sollte man eigentlich Icons benutzen? Navigations-Optimierung mit Icons: 12 Best Practices. […]

  2. […] Navigations-Optimierung mit Icons – Es liegt in der Natur des Menschen, unnötigen Aufwand zu vermeiden. Evolutionstechnisch ist dieses darauf zurückzuführen, dass ein optimaler Energie-haushalt in schwierigen Situationen ein Überlebensfaktor sein kann. Weiter… […]

  3. […] Navigations-Optimierung mit Icons: 12 Best Practices […]

Hinterlassen Sie einen Kommentar

Du hast Fragen?

Gerne stehen wir Dir jederzeit für Fragen zur Verfügung. Du erreichest uns unter 06172-68097-0 oder per E-Mail unter training@konversionskraft.de.

Deine Referenten