Das Geheimnis einer guten Navigation
Jeder, der sich mit Webseiten beschäftigt, stößt irgendwann auf unerwartete Schwierigkeiten - und fast alle davon haben mit der Navigation auf der Seite zu tun. Die Navigation ist für jede Seite zentral, sie soll einfach sein, der Besucher soll sich spontan zurecht finden.
Das ist erstaunlich schwierig.
Wie viele überraschende Fallen selbst in der einfachsten Navigation lauern, davon soll dieser Blog-Artikel handeln.
Die einfachste Navigation
Lassen Sie uns mit einem wirklich simplen Fall beginnen: Eine Firma verkauft Früchte und Olivenöl. Die Hauptnavigation soll daher drei Punkte umfassen: „unsere Früchte“, „unser Olivenöl“ und „unsere Firma“. Alle enthalten jeweils entsprechende Unterseiten.
Der Seitenbaum im Backend der Seite sieht dann etwa so aus wie in der Abbildung.
Wie reagiert die Navigation?
Auch die Darstellung der Navigation auf der Website ist erst mal einfach: Alle Menüpunkte liegen waagerecht nebeneinander. Keine Überraschungen bis hierhin.
Was passiert jetzt, wenn der User mit der Maus über die Navigation fährt? Die spontane Antwort lautet: sobald sich die Maus über dem Menü-Eintrag befindet (hover), wird das entsprechende Untermenü sichtbar. Zum Beispiel so:
Der Besucher kann jetzt die Maus weiter nach unten bewegen, zum Beispiel über den Eintrag "Birnen" und dort klicken. Dann öffnet sich die Seite "Birnen".
Was aber passiert, wenn der Besucher die Maus nicht bewegt, sondern auf "unsere Früchte" klickt? Dann öffnet sich die Seite "unsere Früchte" - oder?
Gibt es denn etwas, was sinnvoll auf dieser Seite stehen könnte? Ein allgemeiner Text darüber, wie die Firma mit Früchten umgeht, welche Früchte man anbietet und welche nicht, wie die Firma sie lagert, was sie auszeichnet und von Konkurrenzfirmen unterscheidet? Dann wäre das sinnvoll.
Oft aber gibt es an dieser Stelle nichts wirklich interessantes zu berichten. Die Seite "unsere Früchte" wird dann ein Stiefkind. Üblicherweise stellt dann kurz vor dem Livegang ein gestresster Redakteur vier Bilder von Äpfeln, Birnen, Kirschen und Weintrauben auf die Seite und verlinkt diese jeweils auf die passenden Unterseiten.
Das funktioniert, hinterlässt aber eine Zwischenseite, die eigentlich nur der Navigation dient - und auf die man leicht verzichten könnte.
Was passiert auf Touch-Display?
Schwieriger wird die nächste Frage: Wie benimmt sich die Navigation auf einem Touch-Gerät? Ein Touch-Gerät (Handy oder Tablet) hat ja keine Maus. Es gibt nur den Finger des Benutzers und damit einen "tap", das Gegenstück zum Klick. Den Hover-Zustand, den man mit der Maus erzeugen kann, gibt es nicht.
Wie kommt der Benutzer dann an die Unterseiten?
Die praktische (aber unvollkommene) Lösung für dieses Problem besteht darin, dass man annimmt, dass Touch-Geräte kleiner sind als Desktop-Bildschirme. Die Touch-Eigenschaft lässt sich nämlich nicht von außen erkennen, nur die Größe des Displays. Glücklicherweise haben die meisten Touch-Geräte tatsächlich einen kleineren Bildschirm.
Wenn man auf kleinen Bildschirmen ein touch-geeignetes Menü anzeigt, liegt man in fast allen Fällen richtig:
Schon steckt man in den nächsten Schwierigkeiten: auf einen "tap" hin erreicht der Benutzer die Unterseiten von "unsere Früchte". Aber was ist, wenn er die Seite "unsere Früchte" selbst erreichen will? Mit der Maus gab es zwei Aktionen: Hovern oder klicken. Auf mobile haben wir nur den "tap" und der öffnet die Liste mit den Unterseiten.
Der einzige Ausweg: Der mobil-Nutzer bekommt zwei Schaltflächen zu sehen. Mit der einen erreicht er die Zwischenseite, mit der anderen erreicht er die Unterseiten.
Das könnte dann so aussehen:
So funktioniert die Baum-Navigation
Damit gibt es eine funktionierende Lösung, die wir "Baum-Navigation" nennen. Warum, wird aus dem Übersichtsbild sichtbar: alle Seiten sind vom Benutzer erreichbar, der ganze Baum ist zugänglich.
Hier nochmal zusammengefasst die Vor- und Nachteile dieser Lösung:
Vorteile:
- Auf Desktop öffnet das Menü durch Hover, wie von Desktop-Programmen gewohnt
Nachteile:
- Mobile Nutzer müssen zwischen zwei Schaltflächen entscheiden
- Touch-Geräte werden nicht sicher erkannt, sondern nur über die Display-Größe bestimmt. Für sehr große Touch-Geräte wird die Seite schlecht benutzbar.
Je nach Seiteninhalten kann es übrigens mühsam sein, die Zwischenseiten mit Inhalt zu füllen.
Die zweite Lösung: Blätter-Navigation
Durch geringe Abänderungen kann man die beschriebenen Nachteile der Baum-Navigation vermeiden. Dafür sind nur kleine Umstellungen nötig, die aber tief greifende Auswirkungen für die Redakteure haben.
Es beginnt damit, dass man den Hover-Effekt in der Hauptnavigation weglässt. Wenn der Benutzer mit der Maus über die Navigation fährt, öffnet sich das Untermenü nicht. Erst auf einen Klick hin öffnet es sich, auf einen zweiten Klick hin schließt es sich wieder.
Diese Navigation funktioniert auch auf Touch-Geräten jeglicher Größe: ein "tap" öffnet das Untermenü, ein zweites "tap" schließt es wieder.
Auch das mobile Menü für Smartphones vereinfacht sich: Wenn es Unterseiten gibt, öffnet ein "tap" die Liste der Unterseiten, wenn es keine gibt, wird die Seite selbst geöffnet.
Und was ist dann mit den Zwischenseiten? Diese tragen nun keine Inhalte mehr und sind auch nicht mehr erreichbar. Sie dienen nur noch dazu, Unterseiten aufzubewahren.
Im Ergebnis bekommt man wieder eine Baumstruktur, nur dass in diesem Fall ausschließlich die äußersten Elemente des Baumes erreichbar sind - quasi seine Blätter.
Man könnte sie deshalb "Blätter-Navigation" nennen:
Vorteile:
- auf allen Endgeräten gleichermaßen bedienbar
- Einfache Mobil-Navigation
Nachteile:
- Gewohnter Hover-Effekt auf Desktop-Geräten entfällt
- Gewöhnungsbedürftig für Redakteure
Diese Lösung ist fast perfekt - hat aber Tücken für die Redakteure.
Oft wächst so ein Seitenbaum im Lauf der Zeit: Einzelne Seiten werden zu lang und bekommen irgendwann Unterseiten.
In diesem Moment aber wird die bisherige Seite zur Zwischenseite und ist nicht mehr erreichbar. Ihre Inhalte müssen dann eine Ebene tiefer verschoben werden.
Das ist alles machbar und kein Grund, diese Navigation zu verwerfen. Es erfordert nur von den Redakteuren eine gewisse Vertrautheit mit der Seitenstruktur.
Welche Navigation ist die beste?
Welche der beiden Navigationen zu bevorzugen ist, hängt im wesentlichen von der Frage ab, ob man Inhalte auf den Zwischenseiten haben möchte.
In manchen Projekten ist es eine Strafarbeit, diese Seiten zu befüllen, weil es dort wirklich nichts zu sagen gibt. Dann ist die Blätter-Navigation klar zu bevorzugen.
In anderen Projekten sind die Zwischenseiten hoch willkommen und wichtig für das Verständnis. Dann ist die Baum-Navigation die Möglichkeit der Wahl.
Kontaktieren Sie uns
Selbstverständlich gibt es über die beschriebenen zwei Möglichkeiten hinaus noch unzählige weitere Varianten, wie man Navigationen für eine Website gestalten kann.
Welche Variante jeweils die beste ist, lässt sich erst nach einer genauen Analyse des jeweiligen Anwendungsfalls entscheiden.
Wir helfen Ihnen gerne, eine einfache, auf allen Geräten bedienbare Navigations-Struktur für Ihre Seite zu finden.