Mobiles Webdesign: 5 Tipps für die Navigation

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010...

Mobiles Webdesign hat seine Tücken. Die Gestaltung mobiler Weblayouts für Smartphones stellt Designer immer wieder vor Herausforderungen. Der wenige Platz, der auf den Geräten zur Verfügung steht, will sinnvoll genutzt sein – vor allem für die Inhalte. Die Navigation darf also am Besten gar keinen Platz wegnehmen, soll aber dennoch schnell und intuitiv auffindbar sein. Wir zeigen dir 5 Beispiele, wo man im mobilen Webdesign die Navigation überall unterbringen kann. Der letzte Tipp lässt sich übrigens Ratzfatz umsetzen. ☺

Mobiles Webdesign – Tipp 1 | Der Klassiker: Slide-in-Navigation mit Hamburger-Icon

Der Einsatz des Hamburger-Icons ist nachwievor ein viel diskutiertes Thema. Vor allem Usability-Experten kritisieren, dass hierbei die Navigation, selbst die wichtigsten Navigationselemente, zunächst nicht sichtbar ist und erst ein Klick auf den Pixelburger sie zum Vorschein bringt.

Nichtsdestotrotz hat sich das Hamburger-Icon vor allem in Kombination mit einer Slide-in-Navigation quasi als Standard im mobilen Webdesign durchgesetzt. Dabei ist das Icon meist links oben platziert und die Navigation wird nach rechts in den Viewport eingeblendet.

Selbst Googles Material Design setzt auf diese Variante der Navigation. Sie ist mittlerweile so verbreitet, dass sie ihr Einsatz längst nicht mehr besonders originell ist. Dafür kannst du dir aber sicher sein, dass jeder Besucher deiner Website die Navigation dort findet. Mit diesem Klassiker machst du also nichts falsch. Und der Usability-Papst gibt auch seinen Segen dazu.

Mobiles Webdesign – Tipp 2 | Die flexible Navigation mit dem „mehr“-Button

Wer nicht die gesamte Navigation außerhalb des Viewports verstecken möchte, findet an folgender Navigation sicher Gefallen. Hierbei handelt es sich um eine klassische horizontale Navigation, bei der – wie es eh sein sollte – die einzelnen Menüpunkte nach Priorität angeordnet sind. Der erste Menüpunkt ist also der wichtigste. In absteigender Bedeutung folgen die weiteren Menüpunkte.

Mobiles Webdesign: 4 Tipps für die Navigation

Website der BBC mit flexibler „mehr“-Navigation

Da gerade bei umfangreichen Websites selten alle Menüpunkte einer Navigation in eine Reihe passen, blendest du einfach alles aus, was nicht so wichtig ist und fügst am Ende der Navigation einen „mehr“-Button ein. Dahinter verbirgt sich ein Dropdown-Menü mit allen weiteren Links deiner Navigation.

Der Vorteil hierbei ist, dass nicht die gesamte Navigation ausgeblendet wird. Das, was passt, wird dargestellt. Vor allem die wichtigsten Menüpunkte sind immer sichtbar. Diese flexible Navigation ist somit eine Mischform aus komplett sichtbarer Navigation und der komplett ausgeblendeten Navigation.

Kennst du unser E-Book-Bundle? Spare jetzt 6,99 €!

E-Book Bundle von Andreas Hecht

Mobiles Webdesign – Tipp 3 | Die Navigation mit Text-Icon-Kombination

Die einzelnen Menüpunkte einer Navigation mit aussagekräftigen Icons zu versehen, ist ja ohnehin ein beliebter Gestaltungsansatz. Dank der zahlreichen kostenlosen Iconfonts und -sets findet sich für nahezu alles ein passendes Symbol.

Mobiles Webdesign: 5 Tipps für die Navigation

Currys mit Icon-Navigation

Ist deine Navigation nicht allzu umfangreich, bietet es sich an, in der mobilen Ansicht die Icons für sich sprechen zu lassen und auf die Menütexte zu verzichten. Hierbei solltest du jedoch darauf achten, dass die Icons genügend Raum haben und diese eindeutig auf den dahinter stehenden Link hindeuten.

Ist ein Icon auch nur ansatzweise mehrdeutig oder nicht verständlich, solltest du auf diesen Navigationsansatz verzichten.

Mobiles Webdesign – Tipp 4 |Die Full-Screen-Navigation

Da die Navigation ein wichtiger Bestandteil einer Website darstellt, wird oft viel Aufwand betrieben, was die Gestaltung und Animation der Navigation betrifft. Selbst wenn deine Navigation nur per Hamburger-Icon erreichbar ist, muss sie dennoch nicht dezent sein.

Mobiles Webdesign: 5 Tipps für die Navigation

Die Website von Dove mit Fullscreen-Navigation und Hamburger-Icon

Daher gönnen viele Webdesigner ihren Navigationen statt eines einfachen Slide-In-Menüs gleich den kompletten Display. Bei diesen Fullscreen-Navigationen werden die Menüpunkte häufig aufwändig hinein animiert oder anderweitig eingeblendet.

Dabei sind die einzelnen Menüpunkte oft in großer Schrift dargestellt. Zusätzliche Links zu sozialen Netzwerken oder ein Kontaktformular werden je nach Screengröße gleich mit dargestellt.

Wem also die klassischen Slide-in-Navigationen zu gewöhnlich und ausgelutscht sind, kann seiner Website eine Fullscreen-Navigation mit ausladenden Menüpunkte gönnen. Hierbei ist der Kreativität nur die Grenze des Displays gesetzt.

Mobiles Webdesign – Tipp 5 | Verzicht auf eine Navigation

Bevor man sich den Kopf zerbricht, wo man die Navigation denn nun am sinnvollsten unterbringt, verzichten einige Webdesigner einfach komplett auf eine Navigation.

Mobiles Webdesign: 5 Tipps für die Navigation

Anonymous Hamburger Society verzichtet ganz auf eine Navigation

Auch dieser Ansatz hat seinen Reiz, wenngleich er natürlich nicht überall funktioniert. Aber statt eines klassischen Menüs kannst du deine einzelnen Seiten zum Beispiel per Wischgeste erreichbar machen. Oder deine komplette Startseite ist quasi deine Navigation. Hierbei kannst du großzügig Links mit aussagekräftigen Überschriften, Bildern und Icons versehen.

Bei komplexen und umfangreichen Seiten funktioniert dieser Ansatz natürlich nicht. Häufig ist eine Navigation nicht nur wichtig, um einzelne Seiten zu erreichen. Sie dient auch zur Orientierung, wo man sich gerade befindet.

Fazit

Das Hamburger-Icon und die Slide-In-Navigation sind zweifelsohne der Klassiker unter den Navigationen. Aber es gibt zahlreiche andere Varianten. Wichtig ist, dass du immer den Umfang der Menüpunkte und die Komplexität deiner Website berücksichtigst.

Im Übrigen spricht ja auch nichts dagegen, einen gänzlich anderen Ansatz bezüglich Gestaltung und Funktionalität für deine Navigation zu finden. Hast du schon einmal einen anderen Navigationsansatz gewählt?

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet.

Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

Hinterlasse einen Kommentar

2 Kommentare auf "Mobiles Webdesign: 5 Tipps für die Navigation"

Benachrichtige mich zu:
avatar
Sortiert nach:   neueste | älteste | beste Bewertung
Laura
Gast

Ich finde die Navigation in 3 Strichen oben rechts oder links in der Ecke am besten (Mobil). Leider sieht man immer wieder, dass es viele Webseiten gibt, wo man gleich als erstes von der Navigation erschlagen. Ich kann mir auch nicht vorstellen, dass es komplett ohne Navigation funktionieren kann / soll. (Hab ich bisher auch noch nirgends gesehen)

Michael Dobler
Dr. Web

Ein Navigations-Icon im Kopfbereich braucht es wohl immer, weil es gelernt ist – sich ganz auf Inhaltslinks zu verlassen wird viele Nutzer verwirren.

wpDiscuz