Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
Denis Potschien 26. April 2019

Mobiles Webdesign: 5 mehr oder weniger gute Navigationskonzepte

Mobiles Webdesign hat sei­ne Tücken. Die Gestaltung mobi­ler Weblayouts für Smartphones stellt Designer immer wie­der vor Herausforderungen. Der weni­ge Platz, der auf den Geräten zur Verfügung steht, will sinn­voll genutzt sein – vor allem für die Inhalte. Die Navigation darf also am Besten gar kei­nen Platz weg­neh­men, soll aber den­noch schnell und intui­tiv auf­find­bar sein. Wir zei­gen dir 5 Beispiele, wo man im mobi­len Webdesign die Navigation über­all unter­brin­gen kann. Der letz­te Ansatz lässt sich übri­gens Ratzfatz umset­zen.

Konzept #1 | Der Klassiker: Slide-in-Navigation mit Hamburger-Icon

Der Einsatz des Hamburger-Icons ist nach­wie­vor ein viel dis­ku­tier­tes Thema. Vor allem Usability-Experten kri­ti­sie­ren, dass hier­bei die Navigation, selbst die wich­tigs­ten Navigationselemente, zunächst nicht sicht­bar 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 qua­si als Standard im mobi­len Webdesign durch­ge­setzt. Dabei ist das Icon meist links oben plat­ziert und die Navigation wird nach rechts in den Viewport ein­ge­blen­det.

Selbst Googles Material Design setzt auf die­se Variante der Navigation. Sie ist mitt­ler­wei­le so ver­brei­tet, dass sie ihr Einsatz längst nicht mehr beson­ders ori­gi­nell ist. Dafür kannst du dir aber sicher sein, dass jeder Besucher dei­ner Website die Navigation dort fin­det. Mit die­sem Klassiker machst du also nichts falsch. Und der Usability-Papst gibt auch sei­nen Segen dazu.

Konzept # 2 | Die flexible Navigation mit dem „mehr“-Button

Wer nicht die gesam­te Navigation außer­halb des Viewports ver­ste­cken möch­te, fin­det an fol­gen­der Navigation sicher Gefallen. Hierbei han­delt es sich um eine klas­si­sche hori­zon­ta­le Navigation, bei der – wie es eh sein soll­te – die ein­zel­nen Menüpunkte nach Priorität ange­ord­net sind. Der ers­te Menüpunkt ist also der wich­tigs­te. In abstei­gen­der Bedeutung fol­gen die wei­te­ren Menüpunkte.

Mobiles Webdesign: 4 Tipps für die Navigation
Website der BBC mit fle­xi­bler „mehr“-Navigation

Da gera­de bei umfang­rei­chen Websites sel­ten alle Menüpunkte einer Navigation in eine Reihe pas­sen, blen­dest du ein­fach alles aus, was nicht so wich­tig ist und fügst am Ende der Navigation einen „mehr“-Button ein. Dahinter ver­birgt sich ein Dropdown-Menü mit allen wei­te­ren Links dei­ner Navigation.

Der Vorteil hier­bei ist, dass nicht die gesam­te Navigation aus­ge­blen­det wird. Das, was passt, wird dar­ge­stellt. Vor allem die wich­tigs­ten Menüpunkte sind immer sicht­bar. Diese fle­xi­ble Navigation ist somit eine Mischform aus kom­plett sicht­ba­rer Navigation und der kom­plett aus­ge­blen­de­ten Navigation.

Konzept # 3 | Die Navigation mit Text-Icon-Kombination

Die ein­zel­nen Menüpunkte einer Navigation mit aus­sa­ge­kräf­ti­gen Icons zu ver­se­hen, ist ja ohne­hin ein belieb­ter Gestaltungsansatz. Dank der zahl­rei­chen kos­ten­lo­sen Iconfonts und -sets fin­det sich für nahe­zu alles ein pas­sen­des Symbol.

Mobiles Webdesign: 5 Tipps für die Navigation
Currys mit Icon-Navigation

Ist dei­ne Navigation nicht all­zu umfang­reich, bie­tet es sich an, in der mobi­len Ansicht die Icons für sich spre­chen zu las­sen und auf die Menütexte zu ver­zich­ten. Hierbei soll­test du jedoch dar­auf ach­ten, dass die Icons genü­gend Raum haben und die­se ein­deu­tig auf den dahin­ter ste­hen­den Link hin­deu­ten.

Ist ein Icon auch nur ansatz­wei­se mehr­deu­tig oder nicht ver­ständ­lich, soll­test du auf die­sen Navigationsansatz ver­zich­ten.

Konzept # 4 |Die Full-Screen-Navigation

Da die Navigation ein wich­ti­ger Bestandteil einer Website dar­stellt, wird oft viel Aufwand betrie­ben, was die Gestaltung und Animation der Navigation betrifft. Selbst wenn dei­ne Navigation nur per Hamburger-Icon erreich­bar ist, muss sie den­noch nicht dezent sein.

Mobiles Webdesign: 5 Tipps für die Navigation
Die Website von Dove mit Fullscreen-Navigation und Hamburger-Icon

Daher gön­nen vie­le Webdesigner ihren Navigationen statt eines ein­fa­chen Slide-In-Menüs gleich den kom­plet­ten Display. Bei die­sen Fullscreen-Navigationen wer­den die Menüpunkte häu­fig auf­wän­dig hin­ein ani­miert oder ander­wei­tig ein­ge­blen­det.

Dabei sind die ein­zel­nen Menüpunkte oft in gro­ßer Schrift dar­ge­stellt. Zusätzliche Links zu sozia­len Netzwerken oder ein Kontaktformular wer­den je nach Screengröße gleich mit dar­ge­stellt.

Wem also die klas­si­schen Slide-in-Navigationen zu gewöhn­lich und aus­ge­lutscht sind, kann sei­ner Website eine Fullscreen-Navigation mit aus­la­den­den Menüpunkte gön­nen. Hierbei ist der Kreativität nur die Grenze des Displays gesetzt.

Konzept # 5 | Verzicht auf eine Navigation

Bevor man sich den Kopf zer­bricht, wo man die Navigation denn nun am sinn­volls­ten unter­bringt, ver­zich­ten eini­ge Webdesigner ein­fach kom­plett auf eine Navigation.

Mobiles Webdesign: 5 Tipps für die Navigation
Anonymous Hamburger Society ver­zich­tet ganz auf eine Navigation

Auch die­ser Ansatz hat sei­nen Reiz, wenn­gleich er natür­lich nicht über­all funk­tio­niert. Aber statt eines klas­si­schen Menüs kannst du dei­ne ein­zel­nen Seiten zum Beispiel per Wischgeste erreich­bar machen. Oder dei­ne kom­plet­te Startseite ist qua­si dei­ne Navigation. Hierbei kannst du groß­zü­gig Links mit aus­sa­ge­kräf­ti­gen Überschriften, Bildern und Icons ver­se­hen.

Bei kom­ple­xen und umfang­rei­chen Seiten funk­tio­niert die­ser Ansatz natür­lich nicht. Häufig ist eine Navigation nicht nur wich­tig, um ein­zel­ne Seiten zu errei­chen. Sie dient auch zur Orientierung, wo man sich gera­de befin­det.

Fazit

Das Hamburger-Icon und die Slide-In-Navigation sind zwei­fels­oh­ne der Klassiker unter den Navigationen. Aber es gibt zahl­rei­che ande­re Varianten. Wichtig ist, dass du immer den Umfang der Menüpunkte und die Komplexität dei­ner Website berück­sich­tigst. Wir haben an die­ser Stelle aus­führ­li­cher dazu geschrie­ben.

Im Übrigen spricht ja auch nichts dage­gen, einen gänz­lich ande­ren Ansatz bezüg­lich Gestaltung und Funktionalität für dei­ne Navigation zu fin­den. Hast du schon ein­mal einen ande­ren Navigationsansatz gewählt?

Beitragsbild: 200 Degrees auf Pixabay

Denis Potschien

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.

2 Kommentare

  1. Ich fin­de die Navigation in 3 Strichen oben rechts oder links in der Ecke am bes­ten (Mobil). Leider sieht man immer wie­der, dass es vie­le Webseiten gibt, wo man gleich als ers­tes von der Navigation erschla­gen. Ich kann mir auch nicht vor­stel­len, dass es kom­plett ohne Navigation funk­tio­nie­ren kann / soll. (Hab ich bis­her auch noch nir­gends gese­hen)

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.