Die geheimen Strukturen der Website

Kommentare 2
Informationsdesign / Navigation
priorities

Das Wichtige zuerst

Ein wesentlicher Vorteil von Hypertext im Vergleich zu Printmedien, ist die Möglichkeit Inhalte so zu strukturieren, dass am Anfang, auf der Startseite im Browserfenster oder auf dem Bildschirm erst einmal nur die wichtigsten Informationen zu sehen sind (Stichwort: Priority/Priorisierung=Prioritäten werden gesetzt). Hintergrundinformationen werden auf tiefere Navigationsebenen gelegt.
So entsteht eine Art virtuelles Gebäude. Verschiedenen Räume und Ebenen sind miteinander verbunden, in welchem man sich frei bewegen kann (Stichwort: Informationsarchitektur). Allerdings ist es sinnvoll, bei aller Freiheit bereits in der Planungsphase auch die Reihenfolge der Inhalts“pakete“ zu bestimmen. Dies erleichtert beispielsweise die Benutzung von Screenreadern.  Zudem können so die Inhalte auf kleinen Screens (wie z.B. Smartphones) bestmöglich, d.h. einspaltig und scrollbar, dargestellt werden (Stichwort: Linearisierung).

Die N­­­avigationsstruktur einer Website

Bereits in der Konzeptionsphase werden die Inhalte einer Website auf verschiedene Einzelseiten verteilt, die Seiten selbst gegliedert und Verbindungsmöglichkeiten zwischen Inhalten (die Navigation) strukturiert. Als Einstieg in den Entwurf einer Navigationsstruktur empfiehlt sich die Gliederung der Seiten als Sitemap (=Inhaltsverzeichnis der Seiten).

Navigationsplan

Die Struktur eines Internetauftritts erinnert an eine Mind-Map. Die einzelnen Felder repräsentieren die sogenannten „Knoten“ (Inhaltsbereiche, z.B die einzelnen HTML-Seiten einer Website), die Linien stellen „Kanten“ dar, also mögliche Verbindungen (Hyperlinks) zwischen zwei Inhaltsbereichen. Diese Verlinkungen sollen grundsätzlich in beide Richtungen möglich sein. Ein Hyperlink startet immer von anklickbaren „Ankern“ wie z.B. Textlinks („Hotwords“), Buttons, Icons oder Hot-Spots. (Beispiel für einen „Anker“ in der Auszeichnungssprache HTML: <a href=www.gsbk.de>Unsere Schule</a> )

Ausgehend von der Startseite kann üblicherweise eine Anzahl „Unterseiten“ der 2. Ebene aufgerufen werden. Von dort aus werden ins Detail gehende Inhalte auf einer dritten Ebene angesteuert. Es handelt sich hier um eine Baumstruktur. Anzustreben ist eine „Balance“ zwischen Breite und Tiefe der Baumstruktur. Bis zu fünf Ebenen gelten als „gerade noch übersichtliche“ Struktur.

Breadcrumbs

Die Inhalte tieferer Ebenen, besipielsweise der Ebene 3, sind nicht direkt von der Startseite aus erreichbar. Um die Übersicht zu behalten, werden die bereits gegangenen Navigationsschritte angezeigt (mittels „breadcrumbs“ oder „Brotkrumen“ wie bei Hänsel und Gretel). Beispiel:  Startseite > Unser Kino > Unsere Konzeption > Gemeinnützigkeit


Aufgaben:

-Welche Strukturen sind für 7-10 Seiten möglch/sinnvoll? Sie heißen „Baum-„, „Linear-„, „Jump-Linear-„, „Single-Frame-„, „Netz-„, „See-and-Point“ und „Ringstruktur“.
– Gehen Sie auf die Seite des „Kino am Kocher“ in Aalen (www.kino-am-kocher.de)

– Scribbeln Sie die Navigationsstruktur wie in der Übersicht oben dargestellt. (Mindestens drei Ebenen.)
– Auf der Seite „Inhaltsverzeichnis“ finden Sie die Sitemap der Seite als Liste. Welche Vorteile hat dies?
– Erläutern Sie den Begriff „Brotkrumen“ im Zusammenhang mit Navigationsplanung!

2 Kommentare

Kommentar verfassen