Web­­site-Navi­­ga­­tio­­nen - das Wich­tigste im Über­blick

Eine über­sicht­li­che und leicht ver­ständ­li­che Web­site-Navi­ga­tion ist ent­schei­dend für eine posi­tive User-Expe­ri­ence. Navi­ga­tio­nen sind das funk­tio­nale Leit­sys­tem einer Web­site. Sie schaf­fen Ori­en­tie­rung und sind für den Nut­zer das zen­trale Steue­rungs­werk­zeug. Da sie aber auch das Bran­ding des Online­auf­trit­tes ent­hal­ten, sind sie somit auch wich­ti­ges Gestal­tungs­ele­ment.
 

„Die rich­tige Wahl des Navi­ga­ti­ons­typs ist zuerst eine tech­ni­sche Ent­schei­dung.“

 
Bei der Wahl der pas­sen­den Navi­ga­tion sollte der Webdesigner oder Ent­wick­ler ganz klar nach dem Prin­zip „Form fol­lows Func­tion“ ent­schei­den und die aktu­elle bzw. zukünf­tige Sei­ten­struk­tur als Maß­gabe für das pas­sende Web­site-Menüs neh­men. Bevor es also tech­nisch oder im Web­de­sign an die Wahl bzw. Gestal­tung der Navi­ga­tion geht, sollte man sich fol­gende Fra­gen stel­len:
 
  1. Sind Inhalte nach Wich­tig­keit und The­men so struk­tiert, dass sie gut find­bar und aus­bau­fä­hig sind?
  2. Erfüllt die Struk­tur die tech­ni­schen Vor­aus­set­zung für die favo­ri­sierte Desk­top- und Mobile-Navi­ga­tion?
  3. Sind Inhalte für den Nut­zer mit maxi­mal 3 Klicks erreich­bar (3-klick-Pain­point-Regel)?

Mobile Hea­der

Auf­grund der tech­ni­schen Ein­schrän­kung durch Größe und Touch-Mecha­nik gibt es für mobile Navi­ga­tio­nen nicht viele Alter­na­ti­ven. In der Regel sind sie auf das Bran­ding (Logo) inklu­sive Bur­ger-Menü redu­ziert - dem soge­nann­ten Hea­der. Der kann dabei sti­cky, also fest am obe­ren Rand ver­an­kert, oder non-sti­cky sein und nach oben mit dem Con­tent weg­scrol­len. Bei sehr lan­gen Sei­ten mit gro­ßer Scroll­höhe ist eine stän­dig erreich­ba­res Sti­cky-Menu von Vor­teil. Der Klick auf das Bur­ger-Icon im Hea­der öff­net ent­we­der ein Off-Can­vas-Menü von der Seite oder ein bild­schirm­fül­len­des Can­vas-Menü über der Seite.
OFF-Can­vas-Navi­ga­tion
Die­ses Menü kommt von der Seite über oder nebst Con­tent und ist damit von der Seite als sol­ches los­ge­löst. Damit ist ist in der Höhe fle­xi­bel, kann bei Bedarf auch gescrollt wer­den, wenn es die maxi­male Bild­schirm­höhe sprengt. Off-Can­vas eig­net sich für Web­sites, die durch die Viel­zahl der Sei­ten umfang­rei­che Navi­ga­tio­nen nicht ver­mei­den kön­nen.
Palliative Care Netz Harburg
Klas­si­scher “sti­cky” Mobile-Hea­der mit Bur­ger-Menü
Mobile Canvas-Menu
Mobi­les Can­vas-Menu (full­screen)
Mobile Off-Canvas-Menu
Mobi­les Off-Can­vas-Menu (scroll­bar)
Can­vas-Navi­ga­tion
Diese Art von Navi­ga­tion funk­tio­niert wie ein Full­screen-Popup mit einem über­sicht­li­chen, in der Regel zen­trier­ten Menü. Wenn es der Platz zuläßt, kön­nen Haupt- und Unter­punkte bereits offen auf­ge­lis­tet sein. Wird es eng, soll­ten Unter­punkte mit Klick auf Haupt­punkte frei­ge­legt wer­den. Im Wech­sel schließt sich gleich­zei­tig ein davor geöff­ne­ter Haupt­punkt. Diese Toggle-Mecha­nik spart Platz und ver­mei­det, dass durch Öff­nen aller Menü­punkte die Über­sicht ver­lo­ren geht. Menüs, die sich mit einem Can­vas-Over­lay öff­nen, fin­det man vor allem bei One­pagern oder klei­nen Busi­ness-Web­sites.

Die TOP-HEA­DER HORI­ZON­TAL-Navi­ga­tion

Lippold Sealing Technologies
Desk­top-Hea­der mit Bran­ding und klas­si­schen, hori­zon­ta­len Menü­punk­ten
Aus Sicht der Nut­zer­er­fah­rung die bekann­tere Vari­ante, die sich platz­spa­rend quer am obe­ren Brow­ser­fens­ter­rand befin­det. Den Top-Hea­der gibt es 2 unter­schied­li­chen Haupt-Aus­füh­run­gen. Ein­mal mit klas­sisch, hori­zon­tal ver­teil­ten Navi­ga­ti­ons­punk­ten und ein­mal mit Bür­ger­menü, wie man es auch von mobi­len Inter­faces kennt. Bei den neben­ein­an­der ange­ord­ne­ten Navi­ga­ti­ons­punk­ten kön­nen Unter­sei­ten per Maus­klick über Aus­klapp- oder per Mou­seo­ver als Flowout-Unter­me­nüs ange­zeigt wer­den. Die Luxus­aus­füh­rung von Flowout-Menüs sind die soge­nann­ten Megamenüs, die nebst Unter­sei­ten als Text­link auch Module wie Gale­rien oder Ban­ner ent­hal­ten kön­nen.

 

  • Aus Nut­zer­sicht die „gelernte“ Vari­ante
  • Schont platz­spa­rend das Web­de­sign
  • Kann als sti­cky hea­der fixiert wer­den
  • Anzahl der Menü­punkte in der breite begrenzt

DESK­TOP-SIDE­BAR Menu VER­TI­KAL

Die ver­ti­kale Side­bar ist weni­ger ver­brei­tet und eher auf Blog­ar­chi­ven im Ein­satz. Eine, meist auf der lin­ken Seite des Brow­sers, fixierte und farb­lich-abge­setzte Sei­ten­leiste, in der die Menü-Punkte unter­ein­an­der ange­ord­net sind. Auch hier gibt es zwei Vari­an­ten: Ein­mal mit offe­nen, unter­ein­an­der ange­ord­ne­ten Menü­punk­ten und ein­mal mit Bur­ger-Navi­ga­ti­on­s­pa­nel, das ein Off-Can­vas oder bild­schirm­fül­len­des Can­vas-Menü öff­net.
Normal Reduziert

Links: Nor­male Side­bar-Navi­ga­tion mit 2-Level-Menü zum Auf­klap­pen, Rechts: Side­bar mit Bur­ger-Icon, das ein Menü im Can­vas öff­net

  • per­ma­nent sicht­bar
  • Viele Navi­ga­ti­ons­punkte unter­ein­an­der mög­lich
  • Platz für viele Wid­gets wie Social-Icons, Such­funk­tion, Hin­weise
  • Unter­menü nur als Auf­klapp-ver­sion mög­lich
  • Nimmt optisch viel Platz ein
  • Kommt als Navi­ga­tion eher sel­ten zum Ein­satz

FAZIT

Die Wahl der rich­ti­gen Navi­ga­tion hängt in ers­ter Linie von der Site­map oder Con­tent-Archi­te­kur ab. Unter allen tech­ni­schen und gra­fi­schen Kri­te­rien muss sie eine Sache in jedem Fall erfül­len: Ein kom­for­ta­bles Leit­sys­tem für den User zu sein. Je weni­ger Klicks benö­tigt wer­den, um Inhalte zu errei­chen, umso bes­ser die Nut­zer­er­fah­rung.

Face­book
XING
Lin­ke­dIn
War die­ser Bei­trag hilf­reich?
Wir unter­stüt­zen Sie gerne bei Ihrem nächs­ten Projekt. Von der Kon­zep­tion bis zum Design oder der voll­stän­di­gen Ent­wick­lung einer Web­site.
SAG’
HALLO!
Impressum

//

Datenschutz
PROJEKTANFRAGE
Super, Sie haben bei Ihrem Projekt an uns gedacht. Vielen Dank! Beschreiben Sie kurz, worum es geht, damit wir ein gutes Feedback geben können. Wir melden uns in Kürze zurück. Bis bald!
Von Ihnen im Formular eingegebene Daten speichern und verwenden wir ausschließlich zur Bearbeitung Ihrer Anfrage. Ihre Daten werden verschlüsselt übermittelt. Wir verarbeiten Ihre personenbezogenen Daten im Einklang mit unserer Datenschutzerklärung.

DANKE.

Wir haben ihre Anfrage erhalten und melden uns umgehend.