Dieter Petereit 29. Januar 2018

Design: Beachte diese Best Practices der Seitennavigation

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren...

Mit dem Design der Seitennavigation wurde schon viel experimentiert. Inzwischen können wir klare Empfehlungen dazu ableiten, wie wir vorgehen sollten. Dennoch kommt es auch hier auf den konkreten Einzelfall an.

Das sogenannte Menü, das wir zur Seitennavigation verwenden, ist an unterschiedlichsten Positionen denkbar und kann die unterschiedlichste Optik annehmen. Es kann viele oder nur ganz wenige Einträge haben. Und je nach Zweck, Größe und Zielsetzung der individuellen Website wird auch das Menü unterschiedlich sein. Das eine, immer richtige Standardmenü gibt es definitiv nicht.

Zudem gehört zur Seitennavigation nicht nur dieses Menü. Auch andere Maßnahmen zur Inhaltsfindung subsumieren wir unter diesem Begriff. Die wichtigste Ergänzung in diesem Zusammenhang ist die Seiten-Suchfunktion. Wenn eure Besucher irgendwo angekommen sind, müssen sie auch strukturiert zurück finden können. Diesen Zweck erfüllt etwa die sogenannte Brotkrumen-Navigation. Und dann gibt es noch die Linksetzungen, die keiner hierarchischen Grundordnung folgen und entweder themenbezogen im Text stattfinden oder ansatzweise strukturiert im Rahmen von Tag-Links, also Stichworten mit Lenkungsfunktion, angelegt 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ültigen Grundsätzen für jede Form der Navigation beginnen.

Grundsatz #1: Navigation ist konsistent

Ganz unabhängig davon, wie ihr eure Seitennavigation konzipiert. Eines muss stets gewährleistet sein, nämlich Konsistenz. Das bedeutet, dass ihr eure einmal gewählten Positionen über die gesamte Website beibehaltet. Auch wenn vielleicht ein konkreter Inhalt auf einer konkreten Unterseite eventuell mal optisch ansprechender zu vermitteln wäre, wenn wir die Navigation von oben an die Seite nähmen. Tut es nicht.

Wenn ihr eine Software benutzt, wechseln die Navigationselemente auch nicht ständig. Lediglich der Inhalt ändert sich. Der Rahmen, die Grundstruktur ist starr. So entsteht Sicherheit. Die Sicherheit, zu wissen, was ihr wie erreichen könnt. Orientierung und Sicherheit sind grundlegende Bedürfnisse, die nicht aufs Spiel gesetzt werden dürfen. Sonst sucht sich der Benutzer eine Alternative, die ihm eben diese Sicherheit zurück gibt.

Konsistenz bezieht sich nicht nur auf die Position der Elemente. Auch die Inhalte dürfen nicht wechseln und die Gestaltung bleibt ebenfalls gleich.

Grundsatz #2: Navigation ist sichtbar

Versucht nicht, die Navigation quasi zu verstecken, um den Fokus auf andere Seitenelemente zu lenken. Die Navigation ist von so essenzieller Bedeutung, dass sie keinesfalls in den Hintergrund treten darf. Vielmehr sollte sie zweifelsfrei als solche zu erkennen sein, was ihr am einfachsten über eine entsprechend prominente Platzierung nebst kontrastreicher Gestaltung erreicht. Zum Thema „Hamburger-Icon” findet ihr hier klare Worte.

Als Best Practice hat sich erwiesen, den jeweils gewählten Menüpunkt beim Hovern hervorzuheben und die Hervorhebung beim Klicken beizubehalten, so dass der optische Eindruck einer getätigten Schaltung entsteht. So ganz ohne Skeuomorphismen geht es halt doch nicht. Achtet dabei darauf, den Kontrast zwischen „gewählt” und „nicht gewählt” deutlich zu gestalten. Ein Wechsel von Hellgrau auf Dunkelgrau on hover wird dem nicht gerecht.

Apropos Hover: Es hat sich bewährt, die klickbare Fläche stets größer zu gestalten als die eigentliche Target ist. Wir legen also um den Navigationstext herum eine gedachte Box, entweder tatsächlich oder per Whitespace, und definieren den gesamten Bereich als Klickzone. So ist der Eintrag leichter zu identifizieren und vor allem auch leichter zu treffen.

Vue.js Amsterdam: Der wichtigste Menüeintrag ist besonders hervorgehoben. (Screenshot: Dr. Web)

In den letzten Jahren, vor allem begünstigt durch den Trend zum Long Scrolling, setzen sich sogenannte „Fixed Navigationbars” durch. Dabei handelt es sich um Navigationsleisten, die sich beim Scrollen von ihrer Position lösen und am oberen Rand des Browserfensters stets sichtbar bleiben. So geht die Orientierung selbst dann nicht verloren, wenn sich eure Besucher engagiert durch die Inhalte bewegen.

Das Erfordernis der Sichtbarkeit bedeutet zudem, dass ihr eine Navigation, die allein aus Icons besteht, unbedingt vermeiden solltet. Aus gestalterischen Gründen kann es eine nette Idee sein, Piktogramme zusätzlich zum Texteintrag zu verwenden. Als alleinige Klickhilfe taugen Icons nicht, da sie zu klein und nicht eindeutig genug interpretierbar sind. Haltet es mit Steve Krug.

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

Wo wir gerade beim Thema Texteintrag sind. Verwendet Texte, die wirklich genaue Rückschlüsse darauf zulassen, was den Nutzer beim Klick darauf erwartet. Anders als früher gerne gepredigt, ist es unter diesem Aspekt durchaus in Ordnung, Menüeinträge zu wählen, die aus mehreren 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, niemals nur eine Menünavigation anzubieten. Mindestens die Suchfunktion muss zusätzlich vorhanden sein. Das ist eine Auswirkung der Generation Google.

Gesucht wird stets per Suchfeld, sobald in einem Navigationsmenü nicht auf den allerersten Blick klar wird, wo die gewünschte Information sich verbirgt. Inzwischen hat sich durchgesetzt, das Menü mit der Suchfunktion gestalterisch zu verbinden, also wie eine Einheit, meist als Navigationsleiste, anzubieten. Wenn diese dann am oberen Seitenrand fixiert wird, habt ihr gleich zwei Findungsmethoden an einem Ort vereint.

Prominentes Suchfeld als zentrales Navigationselement auf Pixabay. (Screenshot: Dr. Web)

Flexibilität bedingt auch, dass eure Besucher von der Stelle, an der sie sich jetzt befinden, wieder zurück können müssen, an jene Stelle, von der sie zur jetzigen Position gelangt sind. Das mag nicht immer wirklich sinnvoll sein, gibt aber das gute Gefühl, Herr der Lage zu sein, jederzeit genau zu wissen, wo und wie tief ich im Seitengefüge stehe. Diese Art der Orientierung lässt sich am besten und sehr simpel über die sogenannte Brotkrumen-Navigation gewährleisten.

Wenn ihr euch an diese drei einfachen Grundsätze haltet, ist grober Unfug im Navigationsdesign kaum noch denkbar. Nun können wir uns mit ein paar Feinheiten befassen, die eure Navigation ganz konkret verbessern werden.

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

Welcher Webdesigner kennt es nicht? Der Kunde will am liebsten seine komplette Website über das Menü zugänglich machen. Ist ja schließlich alles ganz wichtig. Er verwechselt das Navigationsmenü mit einer Sitemap. Unterstützt ihn auf diesem Holzweg nicht auch noch.

Alle, also ausnahmslos alle Inhalte finden zu können, sollte über die Suchfunktion möglich sein. Das Menü ist dazu da, die wichtigsten Bereiche zu benennen und zugänglich zu machen. Deshalb ist das Menü auch eines der ersten Elemente, die ihr entwickeln solltet, wenn es an ein neues Web-Projekt geht. Aus dem Menü entwickelt ihr dann die Sitemap, die letztendlich alle Verästelungen der Seite abbilden soll. Das ist nicht die Aufgabe des Navigations-Menüs.

Je mehr Auswahl ihr dem Besucher über das Menü bietet, desto weniger zielgenau könnt ihr steuern, wohin er sich bewegt. Da jedoch die klassische Website irgendein Konversionsziel haben wird, kann das nicht in eurem Interesse liegen. Je weniger Auswahl besteht, desto sicherer fühlt sich zudem der Besucher. Denn die Inhaltsfülle, die es tatsächlich dennoch geben wird, erschlägt ihn nicht schon bei den ersten Entscheidungen, die zu treffen sind.

Holzweg Mega-Menüs

Vor nicht allzu langer Zeit versuchten wir, einen Kompromiss zu finden. Sogenannte Mega-Menüs fanden ihren Weg auf viel zu viele Websites. Manches Mega-Menüs war schon fast eine eigene kleine Site, die sich über die eigentlichen Inhalte geblendet hat und in der man dann quasi eigenständig surfen konnte. Das mag beeindruckend aussehen, Sinn ergibt es nur für ganz wenige Websites. Solange du aber nicht für Amazon, Otto-Versand oder ein sonstiges großes Handelshaus arbeitest, kannst du diese Menü-Form vergessen.

Ob dieses Menü zur Übersichtlichkeit beiträgt, darf bezweifelt werden. (Quelle: Timothy Kortman auf Dribbble)

Es wäre übrigens durchaus zu diskutieren, ob nicht auch die großen Handelshäuser besser auf gigantische Menüs verzichten sollten. Zumeist dienen diese ohnehin nur der Demonstration schierer Größe und nicht der Usability der Seite. Produkte werden zumeist über die Suchfunktion oder andere Navigations-Features, etwa Bestseller-Listen gefunden.

Die Reihenfolge der Menüeinträge ist wichtig

Habt ihr schon einmal von dem psychologischen Gedächtnisphänomen namens serieller Positionseffekt gehört? Man lernt halt nie aus. Dieses Phänomen beschreibt den Effekt, dass sich Personen, die sich Punkte einer Liste merken sollen, tendenziell stets die ersten und letzten Punkte besonders nachhaltig verinnerlichen.

Daraus leiten wir ab, dass die wichtigsten Menüeinträge stets der erste und letzte sind. Diese Einträge werden am meisten gesehen und entsprechend am meisten geklickt. Versteckt also nicht eure konversionsträchtigsten Einträge irgendwo mittig im Menü.

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

Wenn ihr bis hierhin gelesen habt, seid ihr über eine ganze Menge unterschiedlicher Tipps gestolpert, denen aber allen eines gemeinsam ist. Sie limitieren eure gestalterischen Möglichkeiten nicht. Und das ist auch wichtig. Denn gleichförmige Designs sehen wir doch jeden Tag.

Mit den Best Practices aus diesem Beitrag hingegen, seid ihr in der Lage, durchaus individuelle Seiten zu erstellen, die dennoch über ein funktionierendes Navigationskonzept abseits der konkreten Optik verfügen. Viel Spaß dabei!

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. Man findet ihn auch auf Twitter und Google+.

6 Kommentare

  1. Wirklich sehr guter Artikel. Nicht zu lange und das Wesentliche verständlich auf den Punkt gebracht! Danke dass es keine 12 Punkte geworden sind, sondern 3!

  2. Sehr guter Artikel. Allerdings kann ich die Kritik am Hamburger-Icon nicht ganz nachvollziehen. Auch und schon gar nicht in dem verlinkten Beitrag dazu. In dem steht, daß das Hamburger-Icon schlecht ist, weil es nicht intuitiv zu dem dahinterliegenden Ergebnis führe, ganz im Gegensatz zum Zahnrad-Symbol, das ganz logischerweise „Einstellungen“ bedeute. Abgesehen davon, daß „intuitiv“ in der EDV ohnehin meist nur bedeutet, daß jemand, der darüber einen Bericht geschrieben hat, zufällig die Bedeutung erraten hat, wird es ewig ein Geheimnis des Verfassers bleiben, wieso ein Zahnrad naheliegender „Einstellungen“ bedeutet als ein Hamburger-Icon „Menü“.
    Viel wichtiger als der Mist mit dem „intuitiv“ ist doch imho die Forderung, für gleiche Funktionen immer und überall möglichst ähnliche wenn nicht gleiche Symbole zu verwenden. Daß man bei der Bedienung technischer Geräte komplett ohne Lernprozess, Anleitung oder Einschulung auskommen muß oder auch kann, glauben vermutlich nicht einmal die Ignoranten, die sich einen Spionagelautsprecher von Apple, Amazon oder Google ins Wohnzimmer stellen…

Schreibe einen Kommentar zu Dieter Petereit Antworten abbrechen

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