Lost in Hyperspace – Navigation durch die Homepage

<      >

Das Grundkonzept der Homepage besteht aus Seiten (pages), wobei eine Seite besonders hervorsticht, das ist die sog Indexseite oder kurz auch Home genannt. Navigieren heißt also durch Seiten zu navigieren.

Der Inhalt einer Seite kann ganz unterschiedlich sein: Im Vordergrund einer künstlerischen Homepage steht der grafische Kontent, der sich auf Seiten in Form von Bildern oder Galerien abbildet.

Das Einzelbild hat verschiedene Funktionen, zunächst kann es als Einstiegsbild in ein Thema verstanden werden. Beim Anklicken vergrößert sich das Bild. Eine weitere Funktion besteht darin als visueller Menüpunkt das Fortschreiten der Navigation zu unterstützen. Die Logik folgt dabei der der Menütechnik (Pull-down-Menüs). Mit dem Anklicken eines solchen Bildes öffnet sich in der Regel eine Bildergalerie.

Neben dem grafischen Kontent gibt es den textuellen, den wir bewusst vom grafischen Kontent getrennt haben, um die Bilder nicht mit Texten zu überfrachten.

Die Homepage hat ein ausgefuchstes Navigationskonzept, das gerade verhindern soll, dass es irgend wann mal heißt Lost in Hyperspace. Das Navigationskonzept ist ein zentrales Konzept zur Erreichung der sog. Useability, d.h. Navigieren im gesamten Kontent ohne Gefahr zu laufen verloren zu gehen. Es besteht aus mehreren Elementen, die z. T. redundant angelegt sind und folgt weitgehend den Regeln der Barrierefreiheit. Sobald man sich einem externen Link folgend aus der Homepage heraus bewegt hat, kommt man nur über die Funktion Verlauf/Chronik des Browsers wieder zurück.

Während der Navigation kann man problemlos die Navigationstechnik wechseln. Folgende Elemente sieht das Navigationskonzept vor:

  1. eine hierarchische Navigationsstruktur über sog. Pull-down-Menüs
  2. Navigation über in Texten und Bildern gesetzte Links
  3. Navigation über Navigationspfeile
  4. Sitemap
  5. Navigation zu zuletzt geänderten Seiten
  6. Navigation mit Mitteln des Browsers (Zurück-Pfeil, Verlauf/Chronik)

 1. Navigation über Pull-down Menüs

Ohne eine zentrale Menüstruktur ist eine Home-Page nicht sinnvoll zu nutzen. Wie könnte es anders sein: alphabetisch geordnete Seiten oder gar keine Ordnung?

Nein, die hierarchische Struktur ist eine natürliche und weitverbreitete Ordnung. Es gibt nur wenige Punkte zu beachten wie z. B. die Erwartungskonformität oder die Useability. Ansonsten kann die Struktur völlig frei konzipiert werden, es gibt auch nicht nur eine richtige. Erwartungskonformität meint, dass das was ein Menüpunkt ausdrückt, und was der User dann auch erwartet, auch eintritt. Beim Surfen durchs Internet hat man nicht den Eindruck, dass Programmierer dieses simple Prinzip wirklich verstanden haben.

Schon die Startseite, die mit dem Link www.zeitraumzeit.de erreicht wird, zeigt die oberste Hierarchieebene neben dem Logo mit den Menüpunkten:

Befindet sich hinter dem Menüpunkt ein kleines Dreieck, dann bedeutet dies, dass ein weiteres Pull-Down-Menü aufklappt. Wenn nicht, ist die unterste Ebene der Hierarchie erreicht. Die Menüs klappen auf, sobald man mit dem Cursor darüber fährt. Achtung: Beim rechts Rüberziehen der Maus ins Untermenü kann es sein, dass man den darunterliegenden Menüpunkt überstreicht, der sich dann öffnet. Das ist kein Fehler im System, it works as designed.

Man kann den Menüpunkt auch anklicken, dann öffnet sich eine Seite, die das Weiterklicken erlaubt.

2. Navigation über in Text und Bild gesetzte Links

Jedem Wort in einem Text kann ein Link hinterlegt sein. Die Seiten Literatur und Sitemap bestehen ausschließlich über Text implementierte Links.

Text mit hinterlegtem Link zeigt sich in blauer Schrift. Beim Überfahren mit dem Cursor wechselt der Pfeil in eine Hand.

Der Link kann sowohl auf eine interne wie auch auf eine externe Seite verweisen.

Ist man auf einer externen Seite gelandet, findet man nicht automatisch zurück an die Stelle, an der man die Home-Page verlassen hat. Zurück kommt man dann nur noch über den Zurückpfeil des Browsers oder über den Verlauf des Browsers.

Auch ein Bild kann mit einem Link hinterlegt sein. Insbesondere Galerien können so adressiert werden.

Schon auf der ersten Seite haben die vier Bilder der Künstler einen Link, der zu den Portfolios der Künstler verweist. Von den Portfolios kommt man dann zu den Bildern der hinterlegten Galerie. Einige Galerien sind als Slider ausgeprägt, d.h. die Bilder werden automatisch weitergeschaltet. Warten Sie bis die Zwischenzeit abgelaufen ist, in der Regel wenige Sekunden.

3. Navigation innerhalb einer Seite/Galerie

Die Navigation innerhalb einer Seite geschieht über die angezeigten Pfeile (siehe Punkt 4), über ein Scrollen nach unten, falls die Seite mehr als einen Bildschirm überdeckt und – sofern der Inhalt eine Galerie ist, innerhalb derselben. Am Ende einer Seite kann man direkt wieder an den Anfang springen. Die Navigation innerhalb einer Galerie gibt es in 2 Varianten: als Gitter oder als Slider. Das Gitter zeigt in einer bestimmten Anzahl (meistens 4, 12 oder 16) sämtliche Bilder in der Galerie. Sind es mehr Bilder, werden sie in weiteren Seiten angezeigt. Beim Anklicken der Bilder werden sie groß dargestellt. Man kann zum nächsten Bild über die angezeigten Pfeile navigieren. Ein Klicken neben das Bild verkleinert es wieder.

Der Slider gibt es wiederum in 2 Varianten. In einer ersten Variante wird ein Bild angezeigt, man navigiert über die angezeigten Pfeile. Bei einer zweiten Variante schaltet die Navigation nach einer festen Zeit automatisch weiter.

4. Navigation über Navigationspfeile

Navigation über Navigationspfeile gibt es in zweifacher Ausprägung:

1) Die Navigation innerhalb einer Galerie wie oben beschrieben und

2) Navigation durch die Seiten wie folgt:

Jede Seite enthält eine oder zwei Textzeilen mit Navigationspfeilen:

<   ∧   ∨   >

Nicht immer sind alle 4 Pfeile vorhanden, sondern nur dann, wenn eine Verzweigung sinnvoll ist.

Die Logik, die sich dahinter verbirgt ist einfach:

Ein Pfeil nach rechts oder links verzweigt zur Seite dahinter oder davor auf der gleichen Ebene wie die angezeigte Seite. Hat man alle Seiten der gleichen Ebene durch, beginnt die Verzweigung wieder von vorne (Zirkelschluss).

Ein Pfeil nach unter verweist auf eine untergeordnete Seite, der Pfeil nach oben auf die übergeordnete.

Die Links sind genauso angelegt wie die Links über Text.

Diese Art der Navigation erlaubt ebenfalls jede Seite der Home-Page zu erreichen.

Insgesamt sind in der Home-Page über 3000 Links hinter Texten und Bildern verbaut.

5. Sitemap

Die Sitemap erlaubt einen schnellen Gesamtüberblick über alle Seiten. Da jeder Texteintrag ein Link zu der entsprechenden Seite ist, kann man schnell zu einer gewünschten Seite gelangen ohne umständliches Navigieren über das Menü oder über die Navigationspfeile. Wenn man von der Sitemap auf eine Seite gelangt ist, kommt man nur über den Browser wieder zur Sitemap oder aber über das hierarchische Menü.

6. Navigieren zu geänderten Seiten

Die Seite „Was hat sich geändert seit der letzten Version“ erlaubt das direkte Ansteuern von neuen oder geänderten Seiten. Auch hier erfolgt die Navigation über in Texten gesetzte Links.

7. Navigation mittels Zurück-Pfeil/Verlauf des Browsers

Hat man eine z. B PDF-Datei aufgerufen oder ist man einem externen Link gefolgt, kommt man mit dem Zurück-Pfeil des Browsers wieder auf die Übersichtsseite zurück. Auch über den Verlauf-Button kann man wieder auf die Ausgangsseite kommen.

Wolfgang Ahrens, Leichlingen März 2016

<      >