Conversion Optimierung

Navigations-Optimierung mit Icons: 12 Best Practices

Marcel Licht
 Lesezeit: 4 Minuten    
4
arrow_down
4

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.

Über den Autor

Marcel Licht

Vorstand

Marcel Licht ist Vorstand bei konversionsKRAFT. 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.
Frage zum Artikel? Frag den Autor!

Welche Frage hast du an den Autor?

15 [contact-form-7 id="53320" title="Autorkontakt"]

4 Kommentare

  1. Gravatar

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

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

    Bernd,

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

  4. Gravatar

    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

Schreibe einen Kommentar

Teile diesen Artikel

Kostenlos anmelden