Mit writemaps.com erstellte Struktur bzw. Sitemap

Der Weg zur eigenen Website — Teil 2: Struktur und Navigation

Im letzten Artikel ging es um grundsätzliche Überlegungen zur Erstellung der Website. Mit der Recherche und der Ideen- sowie Informationssammlung beginnt der Prozess. Dann die Überlegung ob eine statische oder besser eine dynamische Website zum Einsatz kommen soll.

Mit der Sortierung und Strukturierung der Informationen, die auf der Website dargestellt werden soll, geht es weiter. Der Besucher der Website soll sich schnell zurecht finden, problemlos den Weg zur gesuchten Information finden und hierbei mit möglichst wenigen Klicks oder Eingaben zum Ziel kommen.

Die Grundstruktur kann man einfach mit Stift und Papier skizzieren:

Informationen strukturieren und zu Papier bringen
Informationen strukturieren und zu Papier bringen

Es gibt auch Programme oder Websites, mit deren Hilfe man recht zügig die Struktur dokumentieren kann. Anwendungen wie Microsoft Visio, OmniGraffle oder ConceptDraw MINDMAP oder Websites wie writemaps.com sind einige Beispiele hierfür.

Mit writemaps.com erstellte Struktur bzw. Sitemap
Mit writemaps.com erstellte Struktur bzw. Sitemap

Abhängig von der Komplexität der Struktur gibt es unterschiedliche Möglichkeiten, wie die Navigation der Website realisiert werden kann. Hierüber sollte man sich Gedanken machen, bevor man beginnt, das Layout der einzelnen Seiten zu planen.

In der Praxis haben sich bestimmte Formen der Navigation eingebürgert, die den Anforderungen möglichst optimal Rechnung tragen sollen.
[bullet-disc-orange]

  • Es gibt die Hauptnavigation, die auf allen Seiten verfügbar ist und über die alle wichtigen Seiten erreicht werden können.
  • Dann gibt es die Hilfsnavigation, die auch auf allen Seiten verfügbar ist, jedoch nicht das gleiche Gewicht hat, wie die Hauptnavigation. Ein Impressum oder ein Login wäre hierfür zwei Beispiele.
  • Die Untermenüs unterstützen die Hauptnavigation, indem sie bestimmte Teile der Hauptstrukturbereiche ansteuerbar machen.
  • Die lokale Navigation hilft auf Einzelseiten mit viel Inhalt, bestimmte Bereiche über Sprungmarken direkt ansteuerbar zu machen.
  • Mit der Brotkrumennavigation behält man in tief verschachtelten Ebenen der Struktur den Überblick und kann sich in der Hierarchie immer problemlos wieder „nach oben hangeln“.
  • Mit der Paginierung kann man eine große Anzahl zusammenhängender Informationen auf mehrere kleinere Seiten verteilen und ansteuern.

[/bullet-disc-orange]

Hauptnavigation und Unternavigation
Hauptnavigation und Unternavigation

Bei obigem Beispiel sieht man eine horizontale Hauptnavigation. Die Unternavigation liegt als horizontale Leiste direkt unter der Hauptnavigationsleiste.

Hauptnavigation und Unternavigation

Hier wird die horizontale Hauptnavigation durch eine vertikale Unternavigation auf der linken Seite unterstützt. Es gibt in diesem Beispiel noch eine weitere Unterebene, die optisch ansprechend dargestellt wird. Zudem wird eine Brotkrumennavigation unterhalb der Hauptnavigation angezeigt.

Hilfsnavigation
Hilfsnavigation

Die Hilfsnavigation wird meist recht schlicht in reiner Textform im unteren Bereich der Seite realisiert. Manchmal steht sie auch ganz oben am Bildschirmrand, in die rechte Ecke gedrängt.

Lokale Navigation
Lokale Navigation

Bei obigen Beispiel ist die Hauptnavigation und die lokale Navigation identisch. Der gesamte Inhalt der Website steht auf einer einzigen Seite. Per Navigation zu den Sprungmarken wird der gewünschte Ausschnitt der Seite dargestellt.
Diese Technik ist aktuell im Trend, ist aber nur bei kleinen Websites mit wenig Inhalt empfehlenswert. Bei viel Inhalt würde die Flexibilität und die Ladezeit doch sehr leiden.

Paginierung
Paginierung

Die Paginierung steht meist unten links oder mittig unter dem eigentlichen Inhaltsbereich der Seite.

Im nächsten Artikel wird es um die Wireframes gehen, mit deren Hilfe man das Seitenlayout planen kann.

Alle Teile dieser Serie:

Teil 1 – Recherche
Teil 2 – Struktur und Navigation
Teil 3 – Wireframes
Teil 4 – Die Farben
Teil 5 – Die Schriften