keine Kommentare

Entwurf: Navigation - alles inclusive

Eigentlich sollten alle Fragen, die es je zu Navigationen geben könnte, bereits in unserer Doku beantwortet worden sein.

Allerdings haben sich die Anforderungen über die Jahre immer wieder geändert, sodass es Zeit für eine Bestandsaufnahme und Komplett-Überarbeitung wurde:

Eigentlich sollten alle Fragen, die es je zu Navigationen geben könnte, bereits in unserer Doku beantwortet worden sein.

Allerdings haben sich die Anforderungen über die Jahre immer wieder geändert, sodass es Zeit für eine Bestandsaufnahme und Komplett-Überarbeitung wurde:

  • Navigation - alles über Menüs und Navigationen

Konventionen geben Sicherheit!

Bereits 2003 gab es in der alten Doku eine Dynamische Navigationsleiste, die folgende Warnung enthielt:

Beachten Sie: Erklären Sie dem Anwender auf der ersten Seite, wo Sie eine solche Navigation verwenden, kurz mit einem Satz das Handling der Navigation. … [1]

Aus heutiger Sicht fällt die Schwachstelle sofort auf: Ich will nicht raten oder nachlesen müssen, um eine Navigation bedienen zu können.

So wie der gewohnte Ort für die Taschenlampe in der Schublade an der Haustür sicherstellt, dass ich sie im Falle eines Stromausfalls auch zur Hand habe, verlassen sich gute Webseiten auf Konventionen, die Anwendern vertraut sind, damit Webseiten schnell und komfortabel bedient werden können.

Solch ein gewohntes Look & Feel berücksichtigt

  1. die Leserichtung von oben links nach rechts und positioniert die Navigation gut sichtbar.
  2. Die aktuelle Seite ist gekennzeichnet und
  3. die Linktexte sind klar und verständlich, damit Nutzer schnell und sicher zur gewünschten Seite kommen.

Um eine Navigation übersichtlich zu halten, kann sie zweitrangige Links zunächst verbergen und diese durch eine Benutzerinteraktion sichtbar machen:

Dropdown ohne JavaScript?

Früher war eine reine CSS-Lösung, die mit :hover aufgeklappt wurde, möglich, heute reicht das nicht mehr!

Warum? Heute ist das Netz größer und vielfältiger geworden:

  • Mehr als die Hälfte der Nutzer surft mit dem Handy oder Tablet. Dort gibt es keine Maus!
  • Sehbehinderte - aber auch Autofahrer und Menschen am Herd - lassen sich Seiten vorlesen.
  • In ihrer Motorik eingeschränkte Menschen - aber auch IT-Profis navigieren lieber mit den Pfeiltasten.

Webseiten, die alle diese Nutzer mit einschließen wollen…

Screenshot einer Kette von parentNode, weil es den IE6 berücksichtigen musste


  1. Dynamische Navigationsleiste (http://de.selfhtml.org/dhtml/beispiele/navigation.htm) ↩︎

eingeordnet unter:

veröffentlicht von Matthias Scharwies