Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
Dieter Petereit 29. Januar 2018

Design: Beachte diese Best Practices der Seitennavigation

Mit dem Design der Seitennavigation wur­de schon viel expe­ri­men­tiert. Inzwischen kön­nen wir kla­re Empfehlungen dazu ablei­ten, wie wir vor­ge­hen soll­ten. Dennoch kommt es auch hier auf den kon­kre­ten Einzelfall an.

Das soge­nann­te Menü, das wir zur Seitennavigation ver­wen­den, ist an unter­schied­lichs­ten Positionen denk­bar und kann die unter­schied­lichs­te Optik anneh­men. Es kann vie­le oder nur ganz weni­ge Einträge haben. Und je nach Zweck, Größe und Zielsetzung der indi­vi­du­el­len Website wird auch das Menü unter­schied­lich sein. Das eine, immer rich­ti­ge Standardmenü gibt es defi­ni­tiv nicht.

Zudem gehört zur Seitennavigation nicht nur die­ses Menü. Auch ande­re Maßnahmen zur Inhaltsfindung sub­su­mie­ren wir unter die­sen Begriff. Die wich­tigs­te Ergänzung in die­sem Zusammenhang ist die Seiten-Suchfunktion. Wenn eure Besucher irgend­wo ange­kom­men sind, müs­sen sie auch struk­tu­riert zurück fin­den kön­nen. Diesen Zweck erfüllt etwa die soge­nann­te Brotkrumen-Navigation. Und dann gibt es noch die Linksetzungen, die kei­ner hier­ar­chi­schen Grundordnung fol­gen und ent­we­der the­men­be­zo­gen im Text statt­fin­den oder ansatz­wei­se struk­tu­riert im Rahmen von Tag-Links, also Stichworten mit Lenkungsfunktion, ange­legt sind.

Breadcrumb-Navigation (Quelle Carl deCaire auf Dribbble)

Damit haben wir den Bogen schon mal recht weit gespannt. Lasst uns vom Grundsätzlichen zum Spezielleren gehen und mit den immer gül­ti­gen Grundsätzen für jede Form der Navigation begin­nen.

Grundsatz #1: Navigation ist konsistent

Ganz unab­hän­gig davon, wie ihr eure Seitennavigation kon­zi­piert. Eines muss stets gewähr­leis­tet sein, näm­lich Konsistenz. Das bedeu­tet, dass ihr eure ein­mal gewähl­ten Positionen über die gesam­te Website bei­be­hal­tet. Auch wenn viel­leicht ein kon­kre­ter Inhalt auf einer kon­kre­ten Unterseite even­tu­ell mal optisch anspre­chen­der zu ver­mit­teln wäre, wenn wir die Navigation von oben an die Seite näh­men. Tut es nicht.

Wenn ihr eine Software benutzt, wech­seln die Navigationselemente auch nicht stän­dig. Lediglich der Inhalt ändert sich. Der Rahmen, die Grundstruktur ist starr. So ent­steht Sicherheit. Sicherheit für die Nutzenden, zu wis­sen, was sie wie errei­chen kön­nen. Orientierung und Sicherheit sind grund­le­gen­de Bedürfnisse, die nicht aufs Spiel gesetzt wer­den dür­fen. Sonst sucht sich der Benutzer eine Alternative, die ihm eben die­se Sicherheit zurück gibt.

Konsistenz bezieht sich nicht nur auf die Position der Elemente. Auch die Inhalte dür­fen nicht wech­seln und die Gestaltung bleibt eben­falls gleich.

Grundsatz #2: Navigation ist sichtbar

Versucht nicht, die Navigation qua­si zu ver­ste­cken, um den Fokus auf ande­re Seitenelemente zu len­ken. Die Navigation ist von so essen­zi­el­ler Bedeutung, dass sie kei­nes­falls in den Hintergrund tre­ten darf. Vielmehr soll­te sie zwei­fels­frei als sol­che zu erken­nen sein, was ihr am ein­fachs­ten über eine ent­spre­chend pro­mi­nen­te Platzierung nebst kon­trast­rei­cher Gestaltung erreicht. Zum Thema „Hamburger-Icon” fin­det ihr hier kla­re Worte.

Als Best Practice hat sich erwie­sen, den jeweils gewähl­ten Menüpunkt beim Hovern her­vor­zu­he­ben und die Hervorhebung beim Klicken bei­zu­be­hal­ten, so dass der opti­sche Eindruck einer getä­tig­ten Schaltung ent­steht. So ganz ohne Skeuomorphismen geht es halt doch nicht. Achtet dabei dar­auf, den Kontrast zwi­schen „gewählt” und „nicht gewählt” deut­lich zu gestal­ten. Ein Wechsel von Hellgrau auf Dunkelgrau on hover wird dem nicht gerecht.

Apropos Hover: Es hat sich bewährt, die klick­ba­re Fläche stets grö­ßer zu gestal­ten als die eigent­li­che Target ist. Wir legen also um den Navigationstext her­um eine gedach­te Box, ent­we­der tat­säch­lich oder per Whitespace, und defi­nie­ren den gesam­ten Bereich als Klickzone. So ist der Eintrag leich­ter zu iden­ti­fi­zie­ren und vor allem auch leich­ter zu tref­fen.

Vue.js Amsterdam: Der wich­tigs­te Menüeintrag ist beson­ders her­vor­ge­ho­ben. (Screenshot: Dr. Web)

In den letz­ten Jahren, vor allem begüns­tigt durch den Trend zum Long Scrolling, set­zen sich soge­nann­te „Fixed Navigationbars” durch. Dabei han­delt es sich um Navigationsleisten, die sich beim Scrollen von ihrer Position lösen und am obe­ren Rand des Browserfensters stets sicht­bar blei­ben. So geht die Orientierung selbst dann nicht ver­lo­ren, wenn sich eure Besucher enga­giert durch die Inhalte bewe­gen.

Das Erfordernis der Sichtbarkeit bedeu­tet zudem, dass ihr eine Navigation, die allein aus Icons besteht, unbe­dingt ver­mei­den soll­tet. Aus gestal­te­ri­schen Gründen kann es eine net­te Idee sein, Piktogramme zusätz­lich zum Texteintrag zu ver­wen­den. Als allei­ni­ge Klickhilfe tau­gen Icons nicht, da sie zu klein und nicht ein­deu­tig genug inter­pre­tier­bar sind. Haltet es mit Steve Krug.

Icon-Unterstützung: Schick, aber nicht erfor­der­lich. (Quelle: UI Kit von Creative Mints auf Dribbble)

Wo wir gera­de beim Thema Texteintrag sind. Verwendet Texte, die wirk­lich genaue Rückschlüsse dar­auf zulas­sen, was den Nutzer beim Klick dar­auf erwar­tet. Anders als frü­her ger­ne gepre­digt, ist es unter die­sem Aspekt durch­aus in Ordnung, Menüeinträge zu wäh­len, die aus meh­re­ren Wörtern bestehen, etwa „Lade dein Bild hoch” statt „Upload”.

Grundsatz #3: Navigation ist flexibel

Jeder Jeck ist anders, sagt der Kölner. Deshalb gilt die Empfehlung, nie­mals nur eine Menünavigation anzu­bie­ten. Mindestens die Suchfunktion muss zusätz­lich vor­han­den sein. Das ist eine Auswirkung der Generation Google.

Gesucht wird stets per Suchfeld, sobald in einem Navigationsmenü nicht auf den aller­ers­ten Blick klar wird, wo die gewünsch­te Information sich ver­birgt. Inzwischen hat sich durch­ge­setzt, das Menü mit der Suchfunktion gestal­te­risch zu ver­bin­den, also wie eine Einheit, meist als Navigationsleiste, anzu­bie­ten. Wenn die­se dann am obe­ren Seitenrand fixiert wird, habt ihr gleich zwei Findungsmethoden an einem Ort ver­eint.

Prominentes Suchfeld als zen­tra­les Navigationselement auf Pixabay. (Screenshot: Dr. Web)

Flexibilität bedingt auch, dass eure Besucher von der Stelle, an der sie sich jetzt befin­den, wie­der zurück kön­nen müs­sen, an jene Stelle, von der sie zur jet­zi­gen Position gelangt sind. Das mag nicht immer wirk­lich sinn­voll sein, gibt aber das gute Gefühl, Herr der Lage zu sein, jeder­zeit genau zu wis­sen, wo und wie tief ich im Seitengefüge ste­he. Diese Art der Orientierung lässt sich am bes­ten und sehr sim­pel über die soge­nann­te Brotkrumen-Navigation gewähr­leis­ten.

Wenn ihr euch an die­se drei ein­fa­chen Grundsätze hal­tet, ist gro­ber Unfug im Navigationsdesign kaum noch denk­bar. Nun kön­nen wir uns mit ein paar Feinheiten befas­sen, die eure Navigation ganz kon­kret ver­bes­sern wer­den.

Das Navigationsmenü ist nur so ausführlich wie nötig

Welcher Webdesigner kennt es nicht? Der Kunde will am liebs­ten sei­ne kom­plet­te Website über das Menü zugäng­lich machen. Ist ja schließ­lich alles ganz wich­tig. Er ver­wech­selt das Navigationsmenü mit einer Sitemap. Unterstützt ihn auf die­sem Holzweg nicht auch noch.

Alle, also aus­nahms­los alle Inhalte fin­den zu kön­nen, soll­te über die Suchfunktion mög­lich sein. Das Menü ist dazu da, die wich­tigs­ten Bereiche zu benen­nen und zugäng­lich zu machen. Deshalb ist das Menü auch eines der ers­ten Elemente, die ihr ent­wi­ckeln soll­tet, wenn es an ein neu­es Web-Projekt geht. Aus dem Menü ent­wi­ckelt ihr dann die Sitemap, die letzt­end­lich alle Verästelungen der Seite abbil­den soll. Das ist nicht die Aufgabe des Navigations-Menüs.

Je mehr Auswahl ihr dem Besucher über das Menü bie­tet, des­to weni­ger ziel­ge­nau könnt ihr steu­ern, wohin er sich bewegt. Da jedoch die klas­si­sche Website irgend­ein Konversionsziel haben wird, kann das nicht in eurem Interesse lie­gen. Je weni­ger Auswahl besteht, des­to siche­rer fühlt sich zudem der Besucher. Denn die Inhaltsfülle, die es tat­säch­lich den­noch geben wird, erschlägt ihn nicht schon bei den ers­ten Entscheidungen, die zu tref­fen sind.

Holzweg Mega-Menüs

Vor nicht all­zu lan­ger Zeit ver­such­ten wir, einen Kompromiss zu fin­den. Sogenannte Mega-Menüs fan­den ihren Weg auf viel zu vie­le Websites. Manches Mega-Menüs war schon fast eine eige­ne klei­ne Site, die sich über die eigent­li­chen Inhalte geblen­det hat und in der man dann qua­si eigen­stän­dig sur­fen konn­te. Das mag beein­dru­ckend aus­se­hen, Sinn ergibt es nur für ganz weni­ge Websites. Solange du aber nicht für Amazon, Otto-Versand oder ein sons­ti­ges gro­ßes Handelshaus arbei­test, kannst du die­se Menü-Form ver­ges­sen.

Ob die­ses Menü zur Übersichtlichkeit bei­trägt, darf bezwei­felt wer­den. (Quelle: Timothy Kortman auf Dribbble)

Es wäre übri­gens durch­aus zu dis­ku­tie­ren, ob nicht auch die gro­ßen Handelshäuser bes­ser auf gigan­ti­sche Menüs ver­zich­ten soll­ten. Zumeist die­nen die­se ohne­hin nur der Demonstration schie­rer Größe und nicht der Usability der Seite. Produkte wer­den dann doch über die Suchfunktion oder ande­re Navigations-Features, etwa Bestseller-Listen gefun­den.

Die Reihenfolge der Menüeinträge ist wichtig

Habt ihr schon ein­mal von dem psy­cho­lo­gi­schen Gedächtnisphänomen namens seri­el­ler Positionseffekt gehört? Man lernt halt nie aus. Dieses Phänomen beschreibt den Effekt, dass Personen, die sich Punkte einer Liste mer­ken sol­len, ten­den­zi­ell stets die ers­ten und letz­ten Punkte beson­ders nach­hal­tig ver­in­ner­li­chen.

Daraus lei­ten wir ab, dass die wich­tigs­ten Menüeinträge stets der ers­te und letz­te sind. Diese Einträge wer­den am meis­ten gese­hen und ent­spre­chend am meis­ten geklickt. Versteckt also nicht eure kon­ver­si­ons­träch­tigs­ten Einträge irgend­wo mit­tig im Menü.

Fazit: Navigation ist eine Grundfunktion, die sich recht gut definieren lässt

Wenn ihr bis hier­hin gele­sen habt, seid ihr über eine gan­ze Menge unter­schied­li­cher Tipps gestol­pert, denen aber allen eines gemein­sam ist. Sie limi­tie­ren eure gestal­te­ri­schen Möglichkeiten nicht. Und das ist auch wich­tig. Denn gleich­för­mi­ge Designs sehen wir doch jeden Tag.

Mit den Best Practices aus die­sem Beitrag hin­ge­gen, seid ihr in der Lage, durch­aus indi­vi­du­el­le Seiten zu erstel­len, die den­noch über ein funk­tio­nie­ren­des Navigationskonzept abseits der kon­kre­ten Optik ver­fü­gen. Viel Spaß dabei!

Beitragsbild: Ioannis Ioannidis / Pixabay

(Der Beitrag erschien erst­mals im Januar 2018 und wird seit­dem aktu­ell gehal­ten. Das letz­te Update erfolg­te im Mai 2019.)

Dieter Petereit

Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren in der IT daheim. Seit Anfang des neuen Jahrtausends schreibt er für diverse Medien, hauptsächlich zu den Themenfeldern Technik und Design.

6 Kommentare

  1. Kennt jemand ein WordPress plugin mit dem sich sol­che Tabs erstel­len las­sen?

    Nach was muss man hier suchen?

  2. Und war­um nut­zen Dr Web dann noch den bur­ger (den ich nach dem Lesen heu­te das ers­te mal kurz ange­klickt habe)?

  3. Wirklich sehr guter Artikel. Nicht zu lan­ge und das Wesentliche ver­ständ­lich auf den Punkt gebracht! Danke dass es kei­ne 12 Punkte gewor­den sind, son­dern 3!

  4. Sehr guter Artikel. Allerdings kann ich die Kritik am Hamburger-Icon nicht ganz nach­voll­zie­hen. Auch und schon gar nicht in dem ver­link­ten Beitrag dazu. In dem steht, daß das Hamburger-Icon schlecht ist, weil es nicht intui­tiv zu dem dahin­ter­lie­gen­den Ergebnis füh­re, ganz im Gegensatz zum Zahnrad-Symbol, das ganz logi­scher­wei­se “Einstellungen” bedeu­te. Abgesehen davon, daß “intui­tiv” in der EDV ohne­hin meist nur bedeu­tet, daß jemand, der dar­über einen Bericht geschrie­ben hat, zufäl­lig die Bedeutung erra­ten hat, wird es ewig ein Geheimnis des Verfassers blei­ben, wie­so ein Zahnrad nahe­lie­gen­der “Einstellungen” bedeu­tet als ein Hamburger-Icon “Menü”.
    Viel wich­ti­ger als der Mist mit dem “intui­tiv” ist doch imho die Forderung, für glei­che Funktionen immer und über­all mög­lichst ähn­li­che wenn nicht glei­che Symbole zu ver­wen­den. Daß man bei der Bedienung tech­ni­scher Geräte kom­plett ohne Lernprozess, Anleitung oder Einschulung aus­kom­men muß oder auch kann, glau­ben ver­mut­lich nicht ein­mal die Ignoranten, die sich einen Spionagelautsprecher von Apple, Amazon oder Google ins Wohnzimmer stel­len…

  5. Lieber Dieter, dies­mal hast du wie­der den Nagel auf den Kopf getrof­fen. Es gibt nichts hin­zu­zu­fü­gen. Vielen Dank und Grüße Lutz

Schreibe einen Kommentar zu Sebastian Weiß Antworten abbrechen

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