Vorheriger Artikel Nächster Artikel

Webdesign: So gelingt eine responsive Navigation für Smartphones und Tablets

Aus dem
t3n Magazin Nr. 32

06/2013 - 08/2013

Jetzt kaufen

Die Navigation ist eines der Schlüsselelemente einer Website. Responsive und Mobile stellen aufgrund des geringen Platzes besondere Herausforderungen an das Navigationsdesign. Herausforderungen, für die es unterschiedliche Lösungsansätze gibt.

Webdesign: So gelingt eine responsive Navigation für Smartphones und Tablets

Die Navigation ist in der Regel das erste, was einem Nutzer auf einer Seite Orientierung gibt. Ähnlich einem Kompass geleitet sie den User zu den gewünschten Inhalten. Entsprechend wichtig ist eine gute, verständliche und leicht zu bedienende Navigation – auch als Basis für eine gute Usability und User Experience. Dazu sollte eine Navigation grundsätzlich folgende Grundvoraussetzungen erfüllen:

  • Schnell zu finden: Die Navigation muss leicht als solche zu identifizieren und zu erreichen sein.
  • Leicht verständlich: Klare, leicht verständliche und eindeutige Begriffe sind wichtig, die möglichst aus nur einem Wort bestehen. Icons können den Link-Text visuell unterstützen.
  • Nicht überladen: Eine Navigation sollte maximal fünf bis sieben Menüpunkte enthalten. Mehr überfordert den User, da er dies nicht schnell erfassen und sich entscheiden kann.
  • Leichte Bedienbarkeit: Der klickbare Bereiche sollte nicht zu klein sein, ein Link als solcher zu erkennen. Hover-Effekte können den Look-And-Feel unterstützen. Aufklappmenüs müssen sich einfach bedienen lassen.
  • Orientierung geben: Auch wenn der User über eine Suchmaschine auf eine Unterseite gelangt, sollte er sich anhand der Navigation schnell orientieren können. Geschicktes Highlighting und eine unterstützende Breadcrumb-Navigationen bieten hier Orientierung.
  • Konsistente Navigation: Die Navigation muss auf allen Seiten einheitlich sein, so dass der User Erlerntes schnell wieder erkennt.
  • Accessibility: Jeder muss die Navigation bedienen können – egal ob mit Screenreader oder speziellen Ein- und Ausgabegeräten. Die Navigation sollte daher auch ohne JavaScript oder CSS lesbar bleiben.
  • Versprechen einhalten: Die Menüpunkte müssen die Inhalte liefern, die sie versprechen. Die Link-Texte sollten deshalb mit Sorgfalt gewählt sein und die ihnen folgenden Inhalte möglichst genau beschreiben.

Bildschirmfoto 2013 05 17 um 14.57.56
Dieser Artikel stammt aus der brandneuen t3n Ausgabe Nr. 32 mit dem Schwerpunkt UI/UX-Design

Die Herausforderung Touch-Devices

Die oben genannten Voraussetzungen stellen grundsätzlich den Erfolg einer Navigation sicher. Auf kleineren Smartphone- und Touch-Device-Displays gilt es darüber hinaus, noch ein paar weitere Aspekte zu beachten: Jeder einzelne Link muss der Größe des Endgeräts entsprechend angepasst und gut lesbar sein. Auch die Abstände zwischen den Navigationspunkten sollten Webdesigner ausreichend groß wählen, damit der Nutzer nicht versehentlich einen Nachbar-Link anklickt.

Dazu kommt, dass der Touch-sensitive Bereich eines Links ausreichend groß sein muss, um den Link gut mit den Fingern bedienen zu können. Tablet- und Smartphone-User sind mittlerweile an Touchevents wie Swipes oder ähnliches gewohnt. Je nach Konzept sollte man diese daher für die mobile Navigation berücksichtigen, um beispielsweise Off-Canvas-Navigationen auszublenden.

Wo die schnelle Auffindbarkeit von Navigationselementen bei einer Desktop-Website absoluten Vorrang hat, gibt es auf kleineren Displays ein Platzproblem. Die prominente Platzierung von Navigationselementen ist hier daher nicht so einfach wie bei Desktop-Websites. Das führt dazu, dass man die Navigation zugunsten des Contents etwas zurückstellen sollte. Schließlich soll der User im Viewport nicht ausschließlich mit der Navigation konfrontiert sein und vom eigentlichen Inhalt nichts oder nur wenig zu sehen bekommen. Das Responsive oder Mobile Design kennt einige Navigationsvarianten, welche die Informationen in den Vordergrund stellt, ohne deshalb auf eine gut erreich- und bedienbare Navigation zu verzichten.

responsive navigation 1
Links: Eine einfache vertikale Ansicht nimmt zu viel Platz im Viewport ein und sollte nur bei sehr wenigen Menüpunkten zum Einsatz kommen. Rechts: Eine Select-Box als Navigation auf dem iPhone.

Die vertikale responsive Navigation: kein Platz auf mobilen Geräten

Die Hauptnavigation stellt sich mit einigen Menüpunkten in der klassischen Desktop-Ansicht in der Regel horizontal dar. Um das Platzproblem eines solchen Menüs in der Breite zu umgehen, lassen sich die Menüpunkte im Mobile Web vertikal anordnen. Der Vorteil: Diese Lösung lässt sich rein über CSS realisieren, es ist kein JavaScriptnötig. Allerdings empfiehlt sich dieses Vorgehen nur bei wenigen Menüpunkten, da die Navigation sonst zu viel Platz im Viewport einnimmt.

Das Select-Menü: bitte auswählen

Bei der Variante des Select-Menüs reduziert sich zwar der Platzbedarf stark, seine Bedienung unterscheidet sich jedoch optisch auf iOS-Geräten sehr stark von der auf Android-Devices. Dazu kommt, dass sich die Darstellung von Select-Boxen in Desktop-Browsern nur unzureichend gestalten lässt. Außerdem erfordert diese Variante den Einsatz von JavaScript und erzeugt eventuell Duplicate Content.

Das versteckte Menü: erst nach Anklicken sichtbar

Eine sehr gängige Variante ist, das Hauptmenü auf kleineren Devices zu verstecken und durch einen Button zu ersetzen: Das Menü kommt also nur bei Bedarf zum Vorschein. Wichtig ist dabei eine eindeutige Beschriftung. Auch Icons können eine leichte Nutzung unterstützen. Zudem kann man eine Suchfunktion oder weitere Serviceangebote platzieren. Der so gewonnene Platz lässt sich gut für weitere Inhalte nutzen. Möglich sind dabei Dropdown- oder Off-Canvas-Navigationen.

Das Dropdown-Menü: aufgeklappt

Die Dropdown-Navigation öffnet sich bei Klick auf den Menü-Button und legt sich entweder über den Content oder verschiebt diesen nach unten. Dabei ist der Einsatz von JavaScript zwar nicht zwingend erforderlich, doch muss man dann die HTML-Elemente „input“ und „label“ entgegen ihrer eigentlichen Funktion einsetzten. Menüpunkte lassen sich bei der Dropdown-Navigation jedoch problemlos untereinander oder auch in zwei Spalten darstellen.

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.

Vorheriger Artikel Zurück zur Startseite Nächster Artikel
2 Antworten
  1. von Andreas Simon am 04.06.2013 (11:39 Uhr)

    ...und als kleine Erweiterung habe ich auf meinem eigenen Blog noch im Anschluss zu meinem T3N-Artikel einen Blogpost zum Thema "Responsive Navigationen mit mehreren Menüebenen" verfasst:
    http://www.sitevisions.de/html5css3/responsive-navigationen-mit-mehreren-menuebenen

    Hier gehe ich etwas konkreter und mit Beispielen auf das Thema komplexer Navigationen ein.

    Grüße,
    Andreas

    Antworten Teilen
  2. von ThomasSch am 04.06.2013 (16:07 Uhr)

    Vielen Dank für die hilfreichen Infos über responsive Design. Möchte meine Seite gerne optimieren auch für mobile Geräte. Der Artikel ist mir dazu sehr dienlich. Viele Grüße

    Antworten Teilen
Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Aktuelles aus dem Bereich Webdesign
Die Basics des Responsive Webdesign in 9 schicken GIFs
Die Basics des Responsive Webdesign in 9 schicken GIFs

Wir zeigen euch die wichtigsten Prinzipien des Responsive Webdesign – in neun schicken GIFs aus der Feder des Designers Sandijs Ruluks von Froont. » weiterlesen

Die 10 beliebtesten Artikel der Woche: Visitenkarten-Vorlagen, PayPal deaktiviert SSL 3.0 und Basics des Responsive Webdesign
Die 10 beliebtesten Artikel der Woche: Visitenkarten-Vorlagen, PayPal deaktiviert SSL 3.0 und Basics des Responsive Webdesign

In unserem wöchentlichem Best-of der t3n-Artikel präsentieren wir euch einen bunten Mix aus häufig geklickten und nutzwertigen Beiträgen. » weiterlesen

Mobile-UX: 6 Wege um die Conversion-Rate zu erhöhen
Mobile-UX: 6 Wege um die Conversion-Rate zu erhöhen

Nutzer surfen mehr und mehr über Smartphone und Tablet. Wir geben euch sechs Tipps, um eure Mobile-UX zu optimieren und damit eure Conversion-Rate zu steigern. » weiterlesen

Kennst Du schon unser t3n Magazin?

t3n 38 jetzt kostenfrei probelesen! Alle Inhalte des t3n Magazins Diesen Hinweis verbergen