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.

Die optimale mobile Navigation? 3 Navigations-Konzepte im Vergleich – Teil 1

Die optimale mobile Navigation? 3 Navigations-Konzepte im Vergleich – Teil 1

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

Immer wieder stellen wir im Rahmen unserer RapidUsertests fest, dass die Navigation von Online-Shops nicht optimal auf die mobilen Bedürfnisse der Nutzer (Smartphone, Tablet) angepasst ist: Entweder ist sie viel zu umfangreich, schlecht positioniert oder gar nicht erst als solche zu erkennen (Zu unserem Artikel über das “Hamburger” Icon geht es hier).

Aus diesem Grunde stellen wir Ihnen in den nächsten Wochen einige Navigationskonzepte vor, die sich besonders gut für mobile Anforderungen eignen. In diesem Artikel beleuchten wir zunächst die grundsätzlichen Herausforderungen, die sich aus der Anpassung an mobile Geräte ergeben.

Herausforderungen für die mobile Navigation

Die meisten Besucher Ihres Online-Shops werden die Navigation nutzen, um auf der Seite zu stöbern oder schnellstmöglich zum gewünschten Produkt zu gelangen. Wollen Sie Ihren Online-Shop auch auf die mobile Nutzung zuschneiden, sollten Sie der Navigation daher besondere Aufmerksamkeit widmen.

Sucht ein Nutzer beispielsweise nach einem TV-Gerät, ist er es von Desktop-Seiten gewohnt, dass die Navigation optisch anspruchsvoll ausklappt, sobald er darüber fährt. Dieser als “Mouseover” bekannte Effekt ist bei der mobilen Darstellung nicht einsetzbar, da die Bedienung mit den Fingern – anders als bei der Bedienung durch die Maus – keinen Mouseover simulieren kann. Ein solches Overlay wird auf Smartphones zudem als überladen und störend empfunden, da es aufgrund des kleineren Displays viel zu viel Platz einnimmt.

Eine horizontale Anordnung der Navigation ist aufgrund des kleineren Displays ebenfalls wenig empfehlenswert, weil nur sehr wenige Kategorien nebeneinander platziert werden können.

Die richtige Navigationsstruktur finden

Wie an den Beispielen deutlich wird: Für die mobile Navigation müssen andere Lösungen her. Nehmen Sie die mobile Anpassung auch als Chance wahr, Ihr Navigationskonzept generell zu überprüfen, denn:

  1. Ihre Navigationsstruktur sollte ausbalanciert sein. Das heißt: Verwenden Sie maximal drei Hierarchieebenen, bestehend aus Haupt- und Unterkategorien.
  2. Verwenden Sie höchstens sechs Hauptkategorien, um Übersichtlichkeit zu bewahren und um den Nutzer schnell zum Ziel zu führen.
  3. Verwenden Sie ein- und ausklappbare Kategorien. Bei einer Navigation mit mehreren Hierarchieebenen sollte berücksichtigt werden, dass Mouseover-Effekte mobil nicht darstellbar sind.
  4. Achten Sie darauf, dass die Navigation nicht zu lang wird. Aufgrund der geringen Displaygröße von Smartphones und Tablets ist eine vertikal angeordnete Navigation der Kategorien unabdingbar. Aber auch hier ist Vorsicht geboten: Viele Nutzer haben keine Lust auf mobilen Webseiten zu scrollen.
  5. Verwenden Sie großzügige Buttons und Formularfelder (mindestens 1x1cm), da die Bedienung per Finger auf den kleinen Displays nicht so genau ist wie mit dem Mauszeiger.

Neben diesen grundsätzlichen Eigenschaften mobiler Navigationen gibt es viele verschiedene Konzepte für attraktive Navigationen, die sich vor allem hinsichtlich Positionierung und Struktur unterscheiden. Je nach Komplexität der Website passt die eine oder andere Variante besser. Grundsätzlich sollten jedoch Aspekte wie die Übersichtlichkeit und die Bedienbarkeit immer eine wesentliche Rolle spielen.

Welche unterschiedlichen Navigationstypen es gibt und welche eine optimale Variante für Ihre individuellen Bedürfnisse sein kann, verraten wir Ihnen in den nächsten Ausgaben.