Benutzerfreundliche Webseiten  - Navigation in Webseiten

Er führt den Besucher durch Ihre Inhalte. Doch was ist zu beachten? Wann ist eine Navigation benutzerfreundlich?

• kurze Aussagekräftige Navigationseinträge
  
• Zeilenumbrüche vermeiden - kurze Navigationseinträge - Anzahl der Navigationseinträge
  
• gewählte Navigationseinträge optisch sichtbar gestalten - Hintergrund - Unterstrich - andere Schriftfarbe
  
• Navigation sollte auf allen möglichen Ansichten, kleiner Bildschirm, großer Bildschirmansicht, Tablet, Smartphone gut bedienbar sein
  
• Fixe Navigationen (Navigation scrollt mit dem Content mit) sollten immer bedienbar sein
  
• versteckte Seiten vermeiden
  
• bei Dropdown-Navigation Breadcrumb verwenden
  
• versteckte Navigationen - erreichbar nur mit Klick auf Icon - vermeiden

Achten Sie darauf dass die Navigationspunkte überschaubar sind. In der Regel sollten hier nur 5 bis 7 Einträge vorhanden sein.

Viel mehr sind schnell unübersichtlich und werden vom Besucher nicht wahr genommen.

Unschön sind horizontale Navigationen über mehrere Zeilen. Wenn es mehr als die empfohlenen Einträge sein sollen, was bei Webseiten mit Shop schnell der Fall sein kann, dann kann per CSS die Navigation optisch geteilt werden. 

Wichtig ist die Übersichtlichkeit für den Besucher zu wahren.

Immer noch beliebt, doch nicht immer ratsam.

Worauf Sie hier achten sollten:

• dass die 1. Ebene nicht zu viele Einträge enthält
• die Bezeichnungen kurz sind, mehre Wörter wenn möglich vermeiden
• dass die 2. Ebene nicht zu viele Einträge enthält
  
• nur im Notfall eine 3. Ebene angezeigt wird
  
• eine mögliche 3. Ebene auch auf kleinen Bildschirmen korrekt dargestellt und ansprechbar ist
  
• ideal ist die Anzeige einer zusätzlichen Anzeige, wo sich der Besucher befindet - in der Fachsprache wird dies Breadcrumb (Brotkrumenpfad) genannt
  
• ideal ist auch die Anzeige/ Kennzeichnung, unter welchem Navigationseintrag sich weitere Einträge befinden 
  

Wichtig: funktioniert die Navigation auch auf mobilen Geräten? Tabletts zeigen meist nicht die mobile Ansicht an, da die Geräte oftmals eine Auflösung von 800px beherrschen. Testen schafft Abhilfe.

Die Wahl, wenn eine Webseite viele Unterseiten hat. Achten Sie auf kurze Navigationseinträge. Vermeiden Sie Zeilenumbrüche. Verzichten Sie auf die Anzeige, die nur mit Klick auf einem Button die Navigation zeigt. Ebenso auf eine Anzeige, die 1., 2. und 3. Ebene optisch trennt. Heben Sie die Navigationseinträge durch Farben, Hintergrund oder andere optische Änderungen hervor.

Und für noch mehr Übersichtlichkeit können über ein Style Navigationseinträge optisch getrennt werden. Empfehlenswert bei wichtigen zusätzlichen Angaben (AGB, Versandkosten etc.) für Webseiten mit Shop. Oder bei vielen Einträgen, bei Produktgruppen. Beispiele für optische Trennung der Navigation finden Sie hier.

Es ist durchaus möglich eine Navigation mit Bildern statt mit Schriften zu gestalten.

Sie sollten die "wirklichen" Navigationseinträge aber nicht über das Augensymbol ausblenden, d.h. die Seiten verstecken und die Navigation in der Sidebar über Bilder erzeugen. Es gibt einfache Style-Eigenschaften um dies auch Suchmaschinenfreundlich zu lösen. Wenn Bilder zum Einsatz kommen, sollte ein Alternativbild für die Anzeige von aktive gewählten Navigationseintrag vorhanden sein, bzw. angezeigt werden. Dies funktioniert nur über zusätzliche gezielte CSS-Eigenschaften. Der Besucher wird es Ihnen danken, da es das Navigieren und die Orientierung unterstützt.

Unter anderem empfiehlt Jimdo Icon, Bilder in der Sidebar für die Navigation bei Seiten mit mehreren Sprachen.

Bitte bedenken Sie:

• der Inhalt der Sidebar auf allen Seiten gleich ist
  
• es keine Möglichkeit gibt, dass die Eigenschaft des Bildes/Icon sich mit der Wahl der Sprache bzw. Seite ändert
  
• es ist für den Besucher nicht sichbar, dass sich hinter dem Bild/Icon ein Hyperlink versteckt
  
• UND - der Inhalt der Sidebar wird in der mobilen Ansicht von Jimdo nicht angezeigt

Bitte bedenken Sie diese Punkte auch, wenn Sie Icon, Bilder aus der Sidebar auf Unterseiten verlinken.

Lesen Sie auch Bilder mit Hyperlinks benutzerfreundlich anzeigen.