Abschlussprüfung Mediengestalter Winter 2015/2016, Konzeption und Gestaltung: U5: Mobile Navigationselemente (Alle Fachrichtungen)

Theme der Mediengestalter Abschlussprüfung – Mobile Navigationselemente. Was könprnte alles bei diesem extrem umfangreichen Thema drankommen? Welche „mobilen Navigationselemente“ gibt es? Wo liegen die jeweiligen Vor- und Nachteile? Wo liegen überhaupt die Unterschiede zwischen einer klassischen Desktop-Navigation und welche Anforderungen gibt es an eine mobile Navigation? Gibt es eine bestmögliche Lösung für beide Einsatzbereiche?

Dies versucht der vorliegende Artikel so kompakt und anschaulich wie möglich inklusive verschiedener Demos darzustellen. 

Anforderungen an die klassische Desktop-Navigation

Bereits seit Anbeginn des Internets sind Navigationselemente eine elementare Anforderung  an gutes und funktionierendes Webdesign, das möglichst große „Conversions“ auslöst.

Neben der klassischen Hauptnavigation (dazu später mehr) gibt es auch weitere Lösungsansätze, um möglichst jedem Besucher eine für ihn möglichst intuitive Nutzerführung zu ermöglichen.

Lösungen abseits der Hauptnavigation

Anbei einige Beispiele:

  • Seitenschalter – weitgehend bekannt z.B. von der Google-Suche macht diese Funktion vor allem bei Beiträgen Sinn, die über mehrere Seiten gehen oder bei Artikelserien. (Beispiel hier auf der Seite beim Artikel CSS-Kaskadierung ganz unten)
  • Brotkrumennavigation oberhalb des Content – sie soll dem Nutzer ermöglichen, sich auf der Seite zu orientieren und ggf. auf die nächsthöhere Ebene zu wechseln. (Beispiel hier auf der Seite oberhalb jedes Artikels)
  • Tagcloud (oder: Stichwortwolke) – zeigt die Themenschwerpunkte einer Seite auf. Themen mit einer besonders hohen Präsenz werden dabei größer dargestellt. (Beispiel hier auf der Seite in der Sidebar)
  • Suchfunktion – ermöglicht Nutzern die konkrete Suche nach bestimmten Inhalten. Wünschenswert wäre je nach Content auch eine erweiterte Suche wie zum Beispiel nach Künstler, Epoche, Stil usw. bei einer Museumsseite.
  • Ähnliche Artikel – Soll dem User weitere interessante Inhalte im Kontext zur grade dargestellten Seite anbieten.

Hauptnavigation am Desktop

Auch ohne Mobilgeräte gibt es erhebliche Ansprüche an die Hauptnavigation. Dazu zählen vor allem:

  • Konsistenz der Navigation – die Navigation sollte immer an der gleichen Stelle erscheinen und die gleichen Inhalte haben.
  • Verständlichkeit der Navigation – Es sollten nur gebräuchliche Begriffe für die Navigationselemente gewählt werden. Hilfreich ist zum Beispiel auch, wenn der aktuelle Link oder die zugehörige Kategorie „gehighlighted“, also optisch hervorgehoben wird.
  • Die Anzahl notwendiger Klicks sollte möglichst gering gehalten werden. Allgemein gilt als „Best Practise“: Nicht mehr als drei Klicks sollten notwendig sein, um zum gewünschten Seiteninhalt zu gelangen.
  • Nicht mehr als fünf bis sieben Elemente in der Hauptnavigation – alles andere überfordert den durchschnittlichen User. Davon ausgenommen sind natürlich Submenüs, auch wenn für jedes davon natürlich die gleiche Regel gilt.
  • Verwendung deskriptiver Links – Merke: Die Navigation funktioniert wie eine Weiche bei Eisenbahnen! Entweder ich gehe in die eine Richtung oder die andere!
    Bei einer Eisenbahn habe ich nicht die Möglichkeit umzudrehen. Die hat ein User zwar theoretisch, aber erfahrungsgemäß setzt bei Webusern schnell Frust ein. Wird der gewünschte Content nicht binnen kürzester Zeit gefunden, verlässt er die Site auch schnell wieder.
    Ein klassischer Fehler vieler Firmenwebsites ist es z.B., die Navigation aus Sicht und mit den Termini der Firma selbst zu bezeichnen. Ein User hat häufig ganz andere Erwartungen und auch Kenntnisse von der Materie.

Adaptierung der Anforderungen für Mobilgeräte

Natürlich haben alle der oben genannten Anforderungen an eine Hauptnavigation auch für Mobilgeräte ihre volle Geltung. Allerdings sind diese aufgrund des kleineren und variablen Viewports sowie der Navigation via Touchscreen weitaus diffiziler umzusetzen.

Welche Anforderungen kommen für mobile Navigationselemente zusätzlich hinzu?

Beschäftigt man sich längere Zeit mit responsivem Webdesign, so lernt man schnell, dass die „klassische“ Hauptnavigation auf Mobile Devices schnell an ihre Grenzen stößt. Einige davon wären:

  • Es gibt keine „Mouseover“ oder „Hover“-Funktion. Bei einem Desktopbrowser kann man mit der Maus über einen Link in der Hauptnavigation fahren, woraufhin das entsprechende Submenü ausklappt. Diese Möglichkeit gibt es auf Mobilgeräten nicht. Hier muss ein entsprechender Workaround gefunden werden.
  • Minimale Größe von Schaltflächen / Buttons / Navigationselementen und ihr Abstand zueinander.  Stellen Sie sich vor, Sie müssten auf einem Mobilgerät Links wie diese klicken: 1 2 3 . Und nun stellen Sie sich vor, Sie wären ein Handwerker mit einer riesigen Pranke – wie viele Links würden Sie vermutlich gleichzeitig auslösen? Richtig – alle.
    Fazit: Für mobile Navigationen müssen Links nicht nur eine Mindestgröße (Best Practice: mindestens 48×48 Pixel), sondern auch einen minimalen Abstand voneinander besitzen.
  • Wie auch beim Desktop sollte die Navigation komplett darstellbar sein. Notwendiges Scrollen innerhalb der Navigation sollte dringend vermieden werden.
    Ein – zugegebenermaßen von mir im Rahmen einer kleinen Case-Study erstelltes – Worst-Case-Scenario für eine solche „einfach nur responsiv gemachte“ Navigation für das Free-to-Play Game „Warthunder“ mit zahlreichen Sub- und Subsubmenüs sieht folgendermaßen aus: http://tarcgn.de/warthunder/ .
    Wie schnell verliert hier der User die Übersicht und Orientierung? Umgehend! Eine mögliche Lösung wäre, die Submenüs für den Mobile-Usecase einfach auszublenden. Auf den Unterseiten sind in diesem speziellen Fall ohnehin alle Unterkategorien und Seiten dargestellt und somit problemlos erreichbar.
  • Ständige Präsenz der Navigation – wie auch auf dem Desktop sollte die Navigation möglichst ständig und umgehend erreichbar sein. Während das Scrollen auf der Desktopseite mittels des Scrollbalkens oft noch sehr schnell geht, ist es bei Mobilgeräten insbesondere bei langen Seiten sehr hässlich, erst zum Seitenanfang scrollen zu müssen, nur um die Navigation aufrufen zu können. Dies führt bei Mobile-Devices häufig zu sehr hohen Absprungraten von der jeweiligen Site.
    Eine mögliche Lösung wäre, die Navigationselemente oben bzw. unten auf der Seite zu fixieren – auch wenn dies andere Probleme mit sich bringen kann.

Sie merken – die Anforderungen an eine funktionierende Navigation steigen bei einer mobilen Umsetzung stark an.

Lösungsansätze für die Umsetzung Mobiler Navigationselemente

Eine fast vollständige Liste mit entsprechenden Demos finden Sie unter responsivenavigation.net.

Die unten ausführlich mit Vor- und Nachteilen beschriebenen Methoden sind so sortiert, dass sie nach unten hin einen immer höheren technischen Aufwand erfordern.

Die „Do-Nothing-Approach“

Im Prinzip wird an der Darstellung des Menüs nichts geändert – kein „Hamburger“ oder „NavIcon“, kein Verstecken verschiedener Elemente, keine „Optimierung“ für den Mobile-Use-Case.

Einziger Ansatz ist die Vergrößerung der touchsensitiven Zone von Links wie im oben genannten „1 2 3“ Beispiel. Dies sollte natürlich auch auf alle anderen Links im Content angewendet werden. Infos zur Umsetzung und Demo: http://responsivenavigation.net/examples/simple-padding/index.html

Vorteile der  Do-Nothing-Approach

  • Minimale Ergänzung am CSS notwendig
  • Funktioniert ohne Javascript

Nachteile der Do-Nothing-Approach

  • Keine „optimierte“ Mobildarstellung
  • Funktioniert nur bei sehr kurz gehaltenen Menüs

Das Footer-Menü

Footer Menü - Mobilansicht

Footer Menü – Mobilansicht

Footer Menü - Mobilansicht

Footer Menü – Mobilansicht

Footer Menü - Desktopansicht

Footer Menü – Desktopansicht

Die Idee hinter dem Footermenü ist folgende: Der klassische Topmenü-Bar wird auf Mobilgeräten versteckt und durch einen „Menüschalter“ ersetzt. Bei Klick darauf gelangt der Nutzer zum Fuß der Seite, auf dem das Mobile Menü steht. Dieses wiederum ist auf dem Desktop nicht sichtbar.

Vorteile des Footer-Menüs

  • Die Umsetzung ist komplett ohne Javascript möglich.  Es ist lediglich eine Media-Query notwendig um das jeweilige Menü auf dem entsprechenden Endgerät darzustellen.

Nachteile des Footer-Menüs

  • Wie auch bei der Dropdown Box müssen im Normalfall (also ohne Verwendung von Javascript) zwei Menüs verwaltet werden.
  • Die Darstellung von Submenüs ist nur eingeschränkt sinnvoll und ohne Verwendung von Javascript teilweise gar nicht möglich.

Hinweis zur Footer-Menü Demo

Es ist sicherlich nicht sinnvoll, den Schalter zum Menü nur im Kopfbereich zu haben und ggf. nach oben oder unten scrollen zu müssen. Hilfreich wäre es ggf. den Button auf der Seite zu fixieren und so immer im sichtbaren Bereich zu halten.

Mobile Navigation als Dropdown Box

Desktop Ansicht - Mobile Navigation als Dropdown Box

Desktop Ansicht – Mobile Navigation als Dropdown Box

Mobile Ansicht - Mobile Navigation als Dropdown Box

Mobile Ansicht – Mobile Navigation als Dropdown Box

Ein vollständiger Lösungsansatz zu dieser Möglichkeit findet sich auf CSS-Tricks. Die Demo dazu finden Sie hier oder auch ausschließlich unter Nutzung von Javascript auch auf responsivenavigation.net.

Vorteile der Dropdown Lösung

  • Die erste aufgezeigte Lösung funktioniert mittels Media-Queries auch völlig ohne Javascript
  • Sie wird von jedem noch so alten Mobilgerät unterstützt.
  • Das Menü erscheint als System-Overlay als eigenes Element über dem Content. Dies kann man ggf. auch als Nachteil interpretieren.

Nachteile der Dropdown Lösung

  • Wenn man auf Javascript verzichten möchte, muss die Navigation zweimal integriert werden – einmal für den Desktop, einmal als Dropdown für den Mobile-Use-Case.
  • Auf keinem – mir bekannten – Mobilgerät lässt sich das Dropdown mittels CSS stylen, sondern wird entsprechend den Systemvorgaben selbst formatiert.
  • Da es sich um ein Systemelement handelt, wird die Schriftgröße auch den Systemeinstellungen angepasst. Das ist natürlich grundsätzlich ein Vorteil, allerdings brechen die Texte in einem Dropdown im Normalfall nicht um. Im Klartext – zu lange Texte werden einfach abgeschnitten. Korrektur: Zumindest bei aktuellen Android-Versionen brechen die Texte im Overlay korrekt um!

Mobile Navigation als Toggle-Menü

Das Toggle-Menü funktioniert im Prinzip wie bekannte Mechanismen vom Desktop. Mit dem einzigen Unterschied, dass der Menübutton geklickt werden muss, statt auf Mouseover/Hover zu reagieren. Zur Demo des Toggle-Menüs.

Toggle Menü - Desktopansicht

Toggle Menü – Desktopansicht

Toggle Menü - Mobileansicht

Toggle Menü – Mobileansicht

Vorteile des Toggle-Menüs:

  • Keine wesentliche Änderung der „User-Experience“ zwischen Mobile und Desktop.
  • Minimale Eingriffe in den Code notwendig.
  • Das Menü kann optimal gestyled und auf die mobilen Anforderungen angepasst werden.
  • Funktioniert ohne Javascript.

Nachteile des Toggle-Menüs

  • Es müssen (wenn man auf Javascript verzichten möchte) zwei Menüs gepflegt werden.
  • Je nach Umsetzung (Submenüs, nur ein Menü im Code, ..) ist Javascript notwendig.
  • Verwendung von Submenüs wenig sinnvoll und ggf. nur unter Verwendung von Javascript möglich. Siehe „Warthunder“-Demo..

Mobile Navigation als Multi-Toggle Menü

Desktopansicht - Multi-Toggle Menü

Desktopansicht – Multi-Toggle Menü

Mobileansicht - Multi-Toggle Menü

Mobileansicht – Multi-Toggle Menü

Der wesentliche Unterschied zum Vorgängermenü ist der, dass es über Submenüs verfügt. Das setzt natürlich voraus, dass der Nutzer den entsprechenden Hauptmenüpunkt „touched“ statt klickt. Sinnvollerweise werden dabei nur die Submenüpunkte des ausgewählten Hauptmenüpunkts sichtbar, alle anderen Submenüs sollten ausgeblendet werden. Zur Demo des Multi-Toggle Menüs.

Vorteile des Multi-Toggle Menüs

  • Kaum ein Unterschied zwischen Mobile und Desktop User-Experience
  • Das komplette Menü inklusive aller Submenüpunkte ist vorhanden. Diese haben sie ja nicht nur zum Spaß angelegt, sondern besitzen einen elementaren Nutzen. Warum also sollten Sie diese also für Mobile-User in einer „Light“-Version präsentieren?
  • Es ist nur die Programmierung eines Menüs notwendig. Es müssen keine zwei Menüs gepflegt werden.
  • Das Laden einer Hauptmenüseite, von der aus Sie dann einen weitere Subkategorie aufrufen können, ist also überflüssig. Natürlich beschleunigt dies die Navigation je nach vorhandener Netzwerk-Anbindung erheblich.

Nachteile des Multi-Toggle Menüs

  • Nicht unbedingt zwingend, aber im Normalfall, notwendig ist die Verwendung von Javascript.

Hinweis zur Multi-Toggle Demo

Auch hier sollte natürlich das Menü ständig erreichbar sein und ggf. auf der Seite fixiert werden.

Es wäre außerdem hilfreich, wenn die Eltern-Navigationselemente entsprechend kontrastreich hervorgehoben würden.

Was ich meine, sehen Sie, wenn Sie einmal den Hauptmenüpunkt „Field Maintainance“ aufrufen, dann den Submenüpunkt „Field Marketing Equipment“ und dann den Subsubmenüpunkt „Field Tarps“ – na, wo befinden Sie sich jetzt? Hier wäre ein Hervorheben der jeweils übergeordneten Menüpunkte für die Orientierung im Menü sicherlich hilfreich.

Das klassische Off-Canvas Menü

Beim klassischen Off-Canvas („Außerhalb der Leinwand“) Menü, welches sich ungefähr in den letzten zwei Jahren etabliert hat, unterscheidet sich die Darstellung zwischen Mobile und Desktopansicht weiterhin.

Wird ein bestimmter Viewport unterschritten, so wird das Menü komplett ausgeblendet und verschwindet rechts oder links neben dem Content. Beim Klick auf den „Hamburger“ oder das NavIcon slidet das Menü daraufhin herein und versteckt – zumeist – den größten Teil der angezeigten Webseite. Zur Demo des Off-Canvas Menüs.

Desktopansicht - Off-Canvas Menü

Desktopansicht – Off-Canvas Menü

Mobileansicht - Off-Canvas Menü

Mobileansicht – Off-Canvas Menü

Vorteile des Off-Canvas Menüs

  • Komplexe Menüs mit den Vorteilen des Multi-Toggle Menüs möglich.
  • Es muss nur ein Menü verwaltet werden.
  • Neben dem Menü selbst können auch noch weitere Inhalte und Stilelemente wie z.B. Bilder oder ähnliches untergebracht werden.
  • Nur ein bedingter Vorteil – das Off-Canvas Menü ist zur Zeit quasi anerkannter Standard auf den meisten mobilen Websites. Wenn auch noch nicht zwingend die beste Lösung..

Nachteile des Off-Canvas Menüs

  • Funktioniert – insbesondere ohne Verwendung von Javascript – suboptimal, da der Bereich im Normalfall nicht scrollbar ist. Dies, wie auch die Integration von Submenüs wie beim Multitoggle Menü, kann aber mit Javascript gelöst werden.
  • Die Darstellung und somit auch die Userexperience zwischen Mobile und Desktop ist immer noch nicht 100% konsistent.

Das Always-Off-Canvas Menü

Mobile und Desktopansicht - Always-Off-Canvas Menü

Mobile und Desktopansicht – Always-Off-Canvas Menü

Mobile und Desktopansicht - Always-Off-Canvas Menü

Mobile und Desktopansicht – Always-Off-Canvas Menü

Fast alle vorangegangenen Lösungen gerieten in der letzten Zeit nicht nur bei selbsternannten, sondern auch bei renommierten Usability-Experten zunehmend ins Kreuzfeuer. Einer der Hauptgründe dafür ist der, dass die Konsistenz zwischen Mobile- und Desktop-Userexperience schlichtweg nicht gewährleistet ist.

Doch wie kann diese gewährleistet werden? Die Lösung ist einfach: Man reduziert beide Ansätze auf den kleinsten gemeinsamen Nenner und implementiert diese für beide Nutzungsformen in ähnlicher Form. Zur Demo des Always-Off-Canvas-Menüs.

Dennoch gibt es kleine Unterschiede:

  • Ein mobiles Menü kann schlichtweg nicht auf Mouseover/Hover hin aktiviert werden. Es ist immer noch eine Touch-Geste notwendig.
  • Da es keine Mausbewegung gibt, kann auch nicht kontrolliert werden, ob die Maus sich zum Rand der Seite bewegt. Für den Mobile-Use-Case muss also weiterhin eine Button-Lösung oder eine Slide-Geste her um das Menü zu aktivieren.
  • Auf dem Desktop gibt es keine Slide-Geste. Dafür kann man dort die Mausposition überprüfen oder mit Drag-and-Drop zum „Herausziehen“ des Menüs arbeiten.

Vorteile des Always-Off-Canvas-Menüs

  • Bestmögliche Konsistenz zwischen beiden Plattformen, auch wenn die Drag-and-Drop Lösung für den Desktop (noch) nicht grade intuitiv ist.
  • Nur ein Menü notwendig für beide Plattformen.
  • Anpassungen für die jeweiligen Endgeräte mit Javascript möglich.
  • Nicht unbedingt ein nennenswerter Vorteil, aber:
    • aktuellster Trend im responsive Webdesign.
    • actually very, VERY hip„..
  • Weitere: Siehe Off-Canvas-Menü

Nachteile des Always-Off-Canvas-Menüs

  • Funktioniert – insbesondere ohne Verwendung von Javascript – suboptimal, da der Bereich im Normalfall nicht scrollbar ist. Dies, wie auch die Integration von Submenüs wie beim Multitoggle Menü, kann aber mit Javascript gelöst werden

Abschließende Anmerkungen zu Mobilen Navigationselementen

Ich möchte mich nicht explizit auf die Seite der einen oder anderen Lösung stellen – auch wenn subjektive Meinungen im Artikel vielleicht durchscheinen mögen. Aber für jeden Ansatz gibt es einen sinnvollen Anwendungsbereich.

Nicht außer Acht lassen sollte man dabei auch Mischformen. So kann man beispielsweise neben dem Toggle-Button auch die wichtigsten Links (Startseite, Call-to-Action etc.) nach der „Do-Nothing-Approach“ unterbringen. So machen es beispielsweise aktuell einige Agenturen, Beispiele dazu sind in den weiterführenden Links gelistet.

Zusätzlich hilfreich mag am Ende der Seite eine „Grid based“ Navigation sein. Wenn der User bereits am Ende der Seite ist, wäre es sinnvoll, ihm direkt ohne weiteren Klick eine kontextsensitive Navigation anzubieten. Schließlich wollen wir den Nutzer durch unsere Website „führen“. Unterlassen wir dies, so ist die Wahrscheinlichkeit ihn zu verlieren recht groß.

Weiterführende Links zum Thema „Mobile Navigationselemente“

Thomas A. Reinert
Freelancer, MediaDesign, CEO TARThemes.com bei TAR MediaDesign
Thomas ist (hauptsächlich) Frontend-Entwickler auf Basis von HTML5, CSS3 und jQuery. Nach insgesamt 35 Jahren Programmiererfahrung, 20 davon als Webentwickler und knapp 10 Jahren Wordpress hat er einen guten Einblick in das Backend, die Theme- sowie Plugin-Programmierung und individuelle Anpassungen an die jeweiligen Projektvoraussetzungen. Zusätzlich unterrichtet er als freier Dozent in der Berufsbildung und ist seit 2013 im Prüfungsausschuss der IHK Köln für "Mediengestalter Digital und Print, Fachrichtung Digital" tätig.

Schreibe eine Antwort

Deine E-Mailadresse wird nicht veröffentlicht Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>