Warum das Hamburger-Icon die Conversion killt

Warum das Hamburger-Icon die Conversion killt

Claudia Heinze in User-Experience-Tipps
Lesezeit: 3 Minuten · 26. Oktober 2016
von | 26. Oktober 2016 | User-Experience-Tipps

Auf mobilen Endgeräten wird das Hamburger-Icon schon länger genutzt, neuerdings hält es jedoch auch auf Desktop-Geräten Einzug und ersetzt häufig eine klassische Hauptnavigation.

So hat auch die Telekom vor einigen Wochen ihr neues Webdesign gelauncht und setzt nun Device-übergreifend das „Hamburger-Icon“ als Hauptnavigation ein. Aus User-Experience-Sicht kein guter Schachzug… In diesem Beitrag möchte ich zeigen, warum.

Das Hamburger-Icon – ein Resultat von Mobile First?

Das Hamburger-Icon besteht aus drei horizontalen Strichen. Mit etwas Phantasie sehen diese aus wie ein Burger-Brötchen mit einem Fleisch-Patty dazwischen.

Seit die kleinen Bildschirme mobiler Geräte Einzug in unseren Alltag gehalten haben, ersetzt es immer häufiger eine klassische Hauptnavigation. Tatsächlich wurde das Icon jedoch schon in den 80er-Jahren von Norm Cox für das User-Interface des Xerox Star konzipiert. Danach ist es erst einmal lange von den Bildschirmen verschwunden.

Das erste Hamburger Icon

Xerox Star (Quelle: http://toastytech.com/guis/starbitmap2.gif )

Als Interface-Designer fühle ich mich selbst häufig verleitet, das schlichte Hamburger-Icon einzusetzen. Schließlich ist es platzsparend und sieht minimalistisch-cool aus – aus Designer-Sicht.

Dass es nun immer häufiger auch auf Desktop-Geräten eingesetzt wird, kommt wahrscheinlich durch eine Fehlinterpretation des Mobile-First-Ansatzes. Dank immer besser werdender Bildschirm-Auflösungen gibt es aber keinen Grund, diesen Platz auf Desktop-Geräten einzusparen. Im Gegenteil – hier 3 Gründe, warum das Hamburger-Icon auf Desktop-Geräten die Conversion killt:

1. Hamburger-Icons verstecken die Hauptnavigation

Der erste Eindruck einer Website wird bereits in den ersten Sekunden bestimmt. Die Hauptnavigation spielt an dieser Stelle eine wichtige Rolle, denn sie bietet einen schnellen Überblick über das Angebot der Seite. Außerdem hilft sie uns zu entscheiden, ob die Seite für uns relevant ist. Mit dem Hamburger-Icon müssen die Nutzer jedoch einen Klick mehr tätigen, um die Inhalte der Hauptnavigation zu sehen – wenn sie sie überhaupt finden.

Hamburger Icons verstecken die Hauptnavigation

Die Telekom versteckt gleich drei Navigations-Ebenen in einer (leider auch recht unübersichtlichen) Off-Canvas-Navigation, die nur über das Hamburger-Icon erreichbar ist. (Quelle: http://telekom.de)

Durch die Markierung des aktiven Menüpunkts bietet die Hauptnavigation dem Nutzer außerdem Orientierung, wo er sich auf der Website befindet.

2. Icons erhöhen den Lernaufwand für die Nutzer

Bedauerlicherweise ist das Hamburger-Icon – wie viele andere Icons – nicht selbsterklärend und erhöht somit den Lernaufwand für den Nutzer. Das Icon wird aktuell häufig ohne ein entsprechendes Text-Label „Menü“ eingesetzt.

Aus zahlreichen Usability-Tests wissen wir, dass besonders ältere Nutzer mit dem Hamburger-Icon wenig anfangen können und es in den meisten Fällen schlicht übersehen.

Hinter dem Hamburger-Icon steht die Metapher für eine – wohlgemerkt vertikale – Navigation. Kennt die Zielgruppe das Hamburger-Icon nicht, wird sie das aber kaum erahnen. Ohne ein Text-Label hat der Benutzer keinerlei Hilfestellung bei der Interpretation des Hamburger-Icons und klickt es unter Umständen nicht an.

Das Hamburger Icon erhöht den Lernaufwand

Auch der Telekom ist schnell aufgefallen, dass das Hamburger-Icon für ihre sehr breite Zielgruppe nicht selbsterklärend ist. Inzwischen verwenden sie daher – anders als direkt nach dem Relaunch – das zusätzliche Text-Label „Menü“. (Quelle: http://telekom.de)

Wurde ein Icon erst einmal erlernt, hat es jedoch einen stärkeren Wiedererkennungswert als Text – ein deutlicher Vorteil.

3. Hamburger-Icons sind kein guter Call-to-Action

Klickbare Elemente müssen auch klickbar aussehen, das ist ein wichtiger Faktor bei der Gewinnung von Klicks.

Exis schickte das Hamburger Icon gegen einen Hamburger Button (Hamburger-Icon mit Umrandung) in einen A/B-Test (http://exisweb.net/mobile-menu-abtest). Ergebnis: Der Button wurde häufiger verwendet als das Icon.

In einem zweiten A/B-Test (http://exisweb.net/menu-eats-hamburger) verglich Exis die Conversion eines Hamburger-Buttons (Hamburger-Icon mit Umrandung) mit dem eines Menü-Buttons (Text-Label „Menü“ mit Umrandung). Ergebnis hier: Die Anzahl der Klicks auf das Wort war ca. 20% höher.

Neben der Gestaltung als Button und der Verwendung eines Text-Labels, spielt auch Farbe eine wichtige Rolle dabei, Elemente klickbar erscheinen zu lassen. Dazu ist es wichtig, im Styleguide klar zwischen Auszeichnungs- und Interaktionsfarbe zu unterschieden. Das Hamburger-Icon sollte in der Interaktions-Farbe gekennzeichnet sein.

Hamburger Icons sind kein guter Call-to-Action

Das Hamburger-Icon der Telekom sieht durch seine hellgraue Farbe inaktiv aus. (Quelle: http://telekom.de)

Fazit – Schauen Sie auf Ihre Zielgruppe

Ich empfehle generell, auf den Einsatz von Hamburger-Icons auf Desktop-Geräten zu verzichten, da sie ein potenzieller Conversion-Killer sind. Falls Sie sich doch dafür entscheiden, ist ein ganzheitliches Verständnis Ihrer Zielgruppe und deren Nutzungsverhalten essentiell:

  • Mit Usability-Test erhält man qualitative Insights, wie das Hamburger-Icon gestaltet und positioniert sein muss, damit die Zielgruppe die Hauptnavigation verwendet.
  • Mit A/B- oder multivariaten Tests kann überprüft werden, welche Gestaltung und Positionierung die beste Conversion hat.
  • In der Webanalyse kann zudem verglichen werden, ob die klassische Hauptnavigation einer Website besser konvertiert, als das Hamburger-Menu.

Auf mobilen Geräten sollten drei Grundregeln für die Gestaltung des Hamburger-Icons beachtet werden:

  1. Hamburger-Icon mit Text-Label „Menü“ kombinieren
  2. Hamburger-Icon als Button gestalten
  3. Interaktions-Farbe für das Hamburger-Icon verwenden

Was halten Sie vom Hamburger Icon? Conversion-Killer oder doch praktikabel für Ihre Nutzer? Welche Erfahrungen haben Sie mit dem Hamburger Icon gemacht?

Horizontales Scrollen – Wunderwaffe oder No-Go?

Horizontales Scrollen – Wunderwaffe oder No-Go?

Sophie Krüger in User-Experience-Tipps
Lesezeit: 2 Minuten · 4. Oktober 2016
von | 4. Oktober 2016 | User-Experience-Tipps

In Design-Fachkreisen erhält das horizontale Scrollen aktuell viel Aufmerksamkeit. So konnte Deutsche See (http://www.deutschesee.de/) mit ihrer Website einen Design-Award gewinnen. Die Website setzt auf den meisten Seiten vollständig auf die Scroll-Bewegung von links nach rechts.

Stärken des horizontalen Scrollens

Auf mobilen Geräten mit Touchfunktion spielt horizontales Scrollen seine große Stärke aus. Im Gegensatz zur Mouse-Navigation ist das horizontale Wischen mit dem Finger eine effiziente und intuitive Geste, mit der schnell und gefühlvoll im Content navigiert werden kann.

Weitere Vorteile des horizontalen Scrollens

  • So lange das Interaktionsprinzip nicht weit verbreitet ist, kann es Markenwebsites zu Einzigartigkeit und Charakter verhelfen.
  • Es ermöglicht eine bildgewaltige Wirkung und ist stark darin, Inhalte visuell und großflächig zu inszenieren.
  • Es ist intuitiv auf Touch-Screens bedienbar.
  • Es erleichtert einfaches Stöbern und fördert Inspiration.

Schwächen des horizontalen Scrollens

Horizontales Scrollen fällt Nutzern in Usability-Tests eher negativ auf. Sie sind es gewohnt, im Web von oben nach unten zu scrollen. So testete kürzlich eine Internetbank eine Aktien-Übersichtstabelle, die horizontales Scrolling einsetzte. 3 von 7 Testern bemerkten den horizontalen Scroll-Balken erst gegen Ende des Tests. Bis dahin hatten sie einen Großteil der Informationen gar nicht beachtet.

Weitere Nachteile des horizontalen Scrollens

  • Es ist ungewohnt für viele Nutzer und wird oft übersehen.
  • Es kann Orientierungslosigkeit verursachen, weil den Nutzern wechselnde Navigationspunkte fehlen.
  • Die Kombination von vertikalem und horizontalem Scrollen kann verwirren, da es mehr als eine Bewegungsrichtung gibt.
  • Websites wirken überladen.
  • Der Content ist weniger effizient zu erschließen, da mehrfach geklickt werden muss und nicht mit dem Maus-Rad gescrollt werden kann (dabei ist diese Umsetzung auch möglich).
  • Es ist aufgrund des begrenzten Platzes nicht für die Darstellung umfangreicher Textmengen geeignet.

Positive und negative Beispiele von horizontalem Scrollen

Auf der Website von Metadesign wird das bereits angesprochene Problem des Orientierungsverlusts bei der Kombination von horizontaler und vertikaler Scroll-Richtung deutlich. Als Nutzer ist es schwer zu erkennen, wann horizontal gescrollt werden kann. Die Seite wirkt außerdem durch die verschiedenen Scroll-Abschnitte überladen und unübersichtlich.

Horizontales Scrollen Screenshot metadesign

Bildgewaltig, aber unübersichtlich. Informationen gehen verloren und der Nutzer wird von den Reizen erdrückt.

Die bildgewaltige, fast schon magazin- und galerieartige Wirkung wird vor allem auf Portfolio-Seiten deutlich. Die Künstlerin Stephanie Tartelin inszeniert Ihre Werke auf diese Weise. Sie nutzt außerdem keine Navigationspfeile, sondern das Scrolling funktioniert auch über das Mausrad. Der Nutzer kann sich dadurch viel leichter durch die Galerie bewegen.

horizontales scrollen Screenshot Stephanie Tartelin

Mehrere Bilder können gleichzeitig großformatig dargestellt werden – ein Vorteil von horizontalem Scrollen

Fazit – Mehrwert hängt vom Use-Case ab

Die Verwendung horizontalen Scrollens hängt ganz vom Use-Case ab. Für Portfolios, Brand-Seiten und auf mobilen Geräten kann es sinnvoll sein, doch den meisten Websites raten wir vom Einsatz ab, da es bei den Nutzern zu Verwirrung und Orientierungslosigkeit führen kann.

Wie ist Ihre Meinung:
Kennen Sie positive oder negative Beispiele horizontalen Scrollens? Würden Sie den Einsatz auf Ihrer Website in Erwägung ziehen?

Die optimale mobile Navigation? Teil 4: Die Seitennavigation

Die optimale mobile Navigation? Teil 4: Die Seitennavigation

Martin Schröter in Mobile Usability
Lesezeit: 3 Minuten · 30. Juli 2014
von | 30. Juli 2014 | Mobile Usability

Wenn Sie darüber nachdenken, Ihre Webseite für mobile Geräte wie Smartphones oder Tablets zu optimieren, sollten Sie sich vor allem mit der Darstellung der Navigation Gedanken machen. Eine der beliebtesten und benutzerfreundlichsten Formen der Navigation ist die Seitennavigation oder auch “Off Canvas” Navigation genannt, die wir Ihnen im Folgenden vorstellen.

Seitennavigation sorgt für übersichtliche Darstellung

Nicht erst seit Facebook die Seitennavigation auf seiner mobilen Webseite nutzt, gehört sie zu den beliebtesten Navigationsformen. Auch bekannte Online-Shops wie Mister Spex oder Cyberport verwenden die Seitennavigation auf ihren mobilen Plattformen. Die Off Canvas Navigation ist besonders geeignet für kleine und mittelgroße Online-Shops, weil mit ihr eine begrenzte Anzahl an Kategorien – es sollten nicht mehr als sieben Hauptkategorien sein – übersichtlich dargestellt werden kann.

Aufbau der mobilen Seitennavigation

Das Menü der Seitennavigation ist links oder rechts im Header positioniert und öffnet sich bei Tap auf den entsprechenden Button, woraufhin der komplette Inhaltsbereich zur Seite verdrängt wird.

 

Abb. 1: Seitenavigation mit eingeklappten Kategorien Abb. 2: Seitennavigation mit ausgeklappten Sportbrillen-Bereich

Ähnlich wie die Top-Navigation können die Kategorien ein- und ausgeklappt werden. Sind Nutzer beispielsweise auf der Suche nach Laufbrillen im Online-Shop von Mister Spex können Sie die Kategorie Sportbrille wählen, die sich öffnet und Unterkategorien zum Vorschein bringt. Erst bei Klick auf die entsprechende Unterkategorie wird die Seite neu geladen und der Seiteninhalt angezeigt – die Seitennavigation klappt dann automatisch zu.

Vorteile der Off Canvas Navigation

Ähnlich wie die Top-Navigation hat die Seiten-Navigation gegenüber dem Einstieg über Kategorien den Vorteil, dass durch die ein- und ausklappbaren Menüpunkte alle angebotenen Kategorien immer sichtbar sind. Dies gewährleistet eine große Übersichtlichkeit und gute Orientierung der suchenden Nutzer.

Die Tatsache, dass der komplette Seiteninhalt bei Aufrufen der Navigation verdrängt wird mag zunächst wenig intuitiv erscheinen. Ist diese Logik aber einmal verstanden, ist die Bedienbarkeit recht einfach und bequem.

Nachteile beim Einstieg über die Seitennavigation

Einen echten Nachteil hat die Seitennavigation nicht. Ein potentielles Risiko jedoch kann die Darstellung des Menü Icons sein, welches oben rechts oder links im Header positioniert ist. Dieses sollte stets gut als solches identifizierbar sein, denn hier liegt schließlich der Hauptfokus.

In unseren mobilen Usabilitytests kam u.a. heraus, dass viele Nutzer das Menü-Icon gar nicht als solches erkannt haben. Folge: Sie wussten nicht, wo sie durch das Sortiment navigieren können und brachen den Besuch ab. In unserem Artikel zum Hamburger Icon verraten wir Ihnen drei ganz einfache Tricks, mit denen Sie gewährleisten, dass das Menü-Icon als solches wahrgenommen wird und Nutzer auf Ihrer Seite bleiben.

Fazit: Durch Usability-Tests individuelle Anforderungen klären! Ähnlich wie die Top-Navigation lässt sich die Seitennavigation sehr gut für kleine und mittelgroße Online-Shops verwenden. Dabei sollte darauf geachtet werden, dass die Anzahl der Haupt- und Unterkategorien auf das Wesentliche reduziert ist.

Aus dem Vergleich der drei Navigationsformen wird deutlich: Die ideale mobile Navigation hängt immer von den individuellen Bedürfnissen (“Use Cases”) ab, die sich aus den Anforderungen der Nutzergruppe ableiten. Um die Komplexität und den Zeitaufwand solcher Anforderungsanalysen zu reduzieren, empfehlen sich Usability-Tests:

  • Mithilfe von RapidUsertests lässt sich herausfinden, ob die Navigation von Ihren Nutzern als intuitiv bedienbar wahrgenommen wird.
  • Durch “Card-Sorting” lässt sich herausarbeiten, wie viele und welche die sinnvollsten Kategorien für Ihre mobile Navigation sind
  • Mithilfe von Eyetracking lässt sich zeigen, ob die Navigation an der strategisch richtigen Stelle positioniert ist und von den Nutzern sofort als solche erkannt wird.

 

Die optimale mobile Navigation? Teil 3: Die Top-Navigation

Die optimale mobile Navigation? Teil 3: Die Top-Navigation

Martin Schröter in Mobile Usability
Lesezeit: 2 Minuten · 16. Juli 2014
von | 16. Juli 2014 | Mobile Usability

Wenn Sie einen kleinen oder mittelgroßen Online-Shop besitzen und diesen mobil optimieren wollen, haben Sie sich wahrscheinlich schon Gedanken über die Darstellung der Navigation gemacht. Diese ist sozusagen das Herzstück Ihrer Webseite und verdient daher besondere Aufmerksamkeit.

Weil vor allem Smartphones Displays nur begrenzten Platz bieten, bedarf es mobiler Lösungen, die einerseits übersichtlich und platzsparend sind, gleichzeitig aber den gesamten Inhalt darstellen. Hier bietet sich mit der sogenannten Top-Navigation, oder auch “Toogle” Navigation genannt, eine übersichtlich Navigationsform an.

Top-Navigation sorgt für übersichtliche User Experience

Während Online-Shops mit einer breiten Produktpalette den Einstieg über Kategorien nutzen, um ihren Besuchern die größtmögliche Orientierung zu bieten, empfiehlt es sich für kleinere und mittelgroße Online-Shops auf die Top-Navigation zurückzugreifen. Vor allem auf bestimmte Produktekategorien spezialisierte Anbieter wie Rossmann oder A.T.U. nutzen diese Form der Navigation.

Aufbau der mobilen Top-Navigation

Im Online-Shop von A.T.U. wird verschiedenes Kfz-Zubehör angeboten. Die Hauptkategorien (Sommerreifen, Batterien, Tuning, etc.) sind gut sichtbar nahe des Headers positioniert. Bei “Tap” auf einen Menüpunkt klappt dieser aus und die Unterkategorien kommen zum Vorschein. Sind Besucher beispielsweise auf der Suche nach einem Autoradio finden sie dieses über die entsprechende Unterkategorie in der Hauptkategorie “Hifi & Navigation”. Der übrige Content verschiebt sich dabei nach unten.

  • Idealerweise ist die Top-Navigation im Header positioniert.
  • Der Header kann fixiert sein, sodass er sich beim Scrollen mitbewegt und immer im sichtbaren Bereich bleibt.

Vorteile dieser mobile Navigation

Die Top-Navigation hat gegenüber dem Einstieg über Kategorien den klaren Vorteil, dass immer alle Kategorien sichtbar sind. Egal auf welcher Seite sich der Nutzer gerade befindet oder welchen Produkt er sich anschaut, über die Top-Navigation kann er unkompliziert zu einer ganz anderen Kategorie springen. Und das direkt von seiner jetzigen Seitenposition aus. Dies sichert eine hohe Übersichtlichkeit und unterstützt die Orientierung auf der Webseite. Dies lädt zum Stöbern ein und verringert das Risiko, dass die Besucher die Seite verlassen.

Nachteile bei Einstieg über die Top-Navigation

Ein Nachteil kann jedoch sein, dass die Navigation aufgrund zahlreicher Kategorien sehr viel Platz einnimmt. Dies hat zur Folge, dass Besucher deutlich öfter Scrollen müssen als beispielsweise beim Einstieg über Kategorien. Im Falle des Online-Shops von A.T.U. sind sehr viele Kategorien in der Navigation vorhanden. Sind diese zusätzlich noch ausgeklappt, bedeutet dies einen hohen Scroll-Aufwand für die Besucher. Dies kann schnell zu Unübersichtlichkeit und Frustration führen.

Auch gilt:

  • Je tiefer die Navigationshierarchie der Webseite, d.h. je mehr Unterkategorien vorhanden sind, desto größerer der Scrollaufwand und desto geringer die Übersichtlichkeit.
  • Aus diesem Grunde ist es stets ratsam eine maximale Anzahl an Haupt- und Unterkategorien festzulegen: Hier empfehlen wir maximal 7 Hauptkategorien und höchstens drei Hierarchieebenen.

Grafische Darstellung über Icons

Das Kategorienverständnis der Navigation kann durch Icons unterstützt werden (siehe Bildbeispiel unten: Rossmann). Aber achten Sie stets darauf nur solche Icons zu verwenden, die zusätzliches Verständnis schaffen – sonst erreichen Sie den gegenteiligen Effekt. Eine Spielart der Top-Navigation ist zudem die Overlay Navigation. Sie unterscheidet sich jedoch nur hinsichtlich der Darstellung: Auch sie wird im Header positioniert, überdeckt beim Öffnen aber den Content durch ein Overlay und verschiebt ihn nicht nach unten (siehe Beispielbild unten: Nike Online Shop).

Abb. 1: Navigation mit Icons auf der mobilen Rossmann-Seite Abb. 2: Einstieg über Overlay-Navigation auf der mobilen Nike-Seite

Fazit – Wie optimal ist die Top-Navigation?

Die Top- bzw. Overlay-Navigation eignet sich besonders gut für kleine und mittelgroße Online-Shops die sich auf ein übersichtliches Produktsortiment konzentrieren. Wird darauf geachtet, dass die Navigationsstruktur logisch aufgebaut und die Hierarchie ausbalanciert ist, kann diese Art der Navigation ein schnelles Verständnis der Webseite und große Übersichtlichkeit schaffen.

Die optimale mobile Navigation? Der Einstieg über Kategorien – Teil 2

Die optimale mobile Navigation? Der Einstieg über Kategorien – Teil 2

Martin Schröter in Mobile Usability
Lesezeit: 2 Minuten · 2. Juli 2014
von | 2. Juli 2014 | Mobile Usability

Im ersten Teil dieser Serie zum Thema mobile Navigation sind wir auf die verschiedenen Herausforderungen eingegangen, die sich aus der Anpassung von Navigationstypen an Smartphones und Tablets ergeben.

In den kommenden Artikeln stellen wir Ihnen daher drei verschiedene Navigationskonzepte vor, die sich für mobile Geräte eignen. Diese unterscheiden sich hinsichtlich ihrer Anwendungsfälle, ihrer Struktur und ihrem Aufbau. Als erstes präsentieren wir Ihnen den Einstieg über Kategorien, der sehr häufig in mobilen Online-Shops verwendet wird.

Ideal für mobile Shops mit großem Produktsortiment

Insbesondere große Online-Shops wie Amazon nutzen den Einstieg über Kategorien, um ihren Kunden die größtmögliche Übersicht zu bieten. Dies scheint aufgrund der breiten Produktpalette des Online-Händlers auch die sinnvollste Lösung zu sein, da die vielen Hauptkategorien und Unterkategorien (bis zu 10!) unmöglich in einem aufklappbaren Menü unterzubringen sind.


Aufbau der mobilen Navigation über Kategorien

Amazon platziert die wichtigsten Hauptkategorien auf der Startseite (siehe Screenshot). Sind die Besucher beispielsweise auf der Suche nach Digitalkameras können Sie in der Hauptkategorie “Elektronik & Foto” ein Untermenü aufklappen, das weitere Unterkategorien enthält. Bei Klick auf die Unterkategorie “Kamera & Foto” werden Sie auf eine neue Seite weitergeleitet. Dort finden Sie erneut ein Kategoriemenü auf, das wiederum Unterkategorien enthält. Erst durch das Aufrufen der entsprechenden Hauptkategorie gelangen die Besucher wieder auf die höhergelegene Ebene zurück.

 

Abb. 1: Einstieg über Kategorien auf der mobilen Amazon-Seite


Welche Vorteile hat diese mobile Navigation?

Mag dies zunächst sehr kompliziert klingen, liegt der Vorteil klar auf der Hand: Selbst eine sehr komplexe Navigationsstruktur lässt sich so gut darstellen. Die Nutzer dringen damit immer weiter in die Seitenstruktur ein, ohne aus den Augen zu verlieren, wo sie sich gerade auf der Seite befinden.


Gibt es Nachteile beim Einstieg über Kategorien?

Andererseits ist bei diesem Navigationstypen nicht das komplette Produktsortiment – sprich alle Kategorien – direkt sichtbar. Wollen Nutzer beispielsweise nach einem TV Gerät suchen, müssen sie zurück auf die Startseite gehen. Hier hilft allerdings die hervorragende Suchfunktion von Amazon, die direkt über den Kategorien platziert ist und dank einfacher Bedienung schnell zum gesuchten Produkt führt.


Grafische Darstellung der Kategorien über Teaserbilder

Es bietet sich zudem an, die Kategorien grafisch zu unterstützen: Teaserbilder machen deutlich, was sich hinter der jeweiligen Kategorie versteckt und laden so zum Stöbern ein. Ein gelungenes Beispiel ist der Online Shop von Esprit, der eine ausschließlich grafische Kategoriennavigation nutzt. Doch auch hier ist Vorsicht geboten: Zu viele Bilder lassen die Navigation schnell überladen wirken und es sollte gut überlegt werden, welche Bilder zusätzliches Verständnis schaffen und wann auf Bilder verzichtet werden sollte. Gleiches gilt übrigens auch für die Nutzung von Icons.

Abb. 2: Einstieg über Teaser bei dem mobilen Esprit-Shop

Fazit – Wie optimal ist diese mobile Navigation?

Der Einstieg über Kategorien lohnt sich für sehr komplexe Shop-Systeme mit einer Vielzahl an Haupt- und Unterkategorien. Vor allem in Kombination mit einer guten Suchfunktion gewährleistet diese Art der Navigation ein bedienungsfreundliches und übersichtliches Nutzererlebnis. Für kleinere Shops eignen sich hingegen Top- oder Seitennavigationen, die wir Ihnen in den nächsten Teilen vorstellen werden.

Seite 1 von 212