Die Navigation auf meiner Homepage


Auswahlseite
Die Navigation soll für den Besucher möglichst einfach und übersichtlich sein. Das wird durch Verwendung immer der gleichen Navigationssymbole in auffälliger roter Farbe erreicht. Die Symbole sind:
  • Zur Indexseite. Falls angegeben, befindet es sich links oben auf der Seite.
  • Zur Sitemap. Falls angegeben, befindet es sich links oben auf der Seite.
  • Zur vorigen Auswahlseite zurück. Eine Auswahlseite ist eine Seite, die eine Verteilfunktion hat.
  • Zur nächsten Auswahlseite vor.
  • oderZur vorigen Seite zurück.
  • oderZur nächsten Seite vor.
  • oderZur Informationsseite des Themas oder für weitere Informationen zum Thema innerhalb meiner Homepage. Bei Zielen, die außerhalb meiner Homepage liegen, entfällt das Informationssymbol.
  • Zurück zur vorigen Seite oder Auswahlseite.
  • Framedarstellung restaurieren.
Möglichst wird die Farbe des Navigationssymbols durch einen Javascript in Blau geändert, wenn der Mauszeiger darauf liegt. Dies erleichtert die Bedienung bei Geräten mit schlecht sichtbarem Mauszeiger.

Ich habe gelegentlich Tadel erhalten, da die Navigationssymbole recht groß sind. Aber: je größer das Navigationssymbol, desto einfacher und schneller kann man es mit der Maus treffen. Die Navigationssymbole sind fast immer beschriftet, denn dies vergrößert die anklickbare Fläche. Tatsächlich ist die auf meiner Website benutzte Mindestgröße für Navigationssymbole 15*16 Pixel, die am häufigsten verwendete Größe ist 30*30 Pixel.

Am oberen Rand jeder Seite befinden sich die Dinge, die man benötigt, um den Inhalt der Seite zu erkennen und um die Seite sofort wieder verlassen zu können, und zwar mindestens eines der Symbole:

    • "Zur Indexseite", meistens mit "Home" beschriftet
    • "Zur Sitemap"
    • "Zurück zur vorigen Seite oder Auswahlseite"
    • "Zur Infoseite"
  • In der Mitte: der Seitentitel, der etwas über den Inhalt der Seite aussagt.
  • Ganz rechts oben: Bei Frames das Restaurationssymbol für Frames. Es ist für Diejenigen gedacht, die von einer Suchmaschine auf die Seite gefunden haben, und denen deshalb die Framedarstellung fehlt.
  • Unmittelbar rechts neben dem Seitentitel befinden sich entweder Verweise auf das vorige und/oder das nächste Thema. Falls eine Themeneinteilung nicht vorgenommen wurde, befinden sich hier Verweise auf die vorige und/oder nächste Seite.
  • Bei Seiten mit Themeneinteilung befinden sich die Verweise auf die vorige und/oder nächste Seite am unteren Rand der Seite.

Ein typisches Beispiel für einen Abschnitt mit Themeneinteilung und ohne Frames ist das unterteilte Thema "Yorkshire". Schauen Sie ruhig einmal bei der Seite über Bridlington nach. Das Thema "Bridlington" befindet sich zwischen den Themen "Goole" und "The Sidings". "Bridlington" selbst beinhaltet mehrere Seiten, durch die man sich hin durchklicken kann! Ein Doppelklick auf "Infoseite" links oben auf der Seite führt zur Übersichtsseite zurück.

Eine kleine Spielerei sind die Symbole, die etwas über das Thema aussagen. Es gibt mehrere solcher Symbole:

  1. Ein Sambawagen - Straßenbahnen in Hamburg Sambawagen für Straßenbahnthemen
  2. Ein Minibaer Teddybär für "Willkommen im Bärenland".

Die Verlinkung der Seiten

Die Verlinkung der Seiten erfolgt in bestimmten Strukturen. Die Strukturen lassen sich mit Kästchen gut veranschaulichen. Die Linien zeigen dabei die Verlinkungen, die Rechtecke stellen einzelne Seiten dar.

Die Links zu den Beispielen können angeklickt werden. Sie werden alle in dem gleichen Fenster dargestellt.

Baumstruktur

Baumstruktur

Jeder Knoten führt zu einer Anzahl von Abkömmlingen. Jeder Abkömmling hat nur einen Vorgänger.

Beispiele für Baumstrukturen auf meiner Website sind:
  1. Die Indexseite (Home) und die Sitemap. Die Indexseite führt zu den Hauptthemen, die Sitemap führt zu den Hauptthemen und zusätzlich zu den Unterthemen.
  2. Die Seite, die Sie gerade lesen, ist der Abkömmling eines Knotens. Sie kommen zu dem Knoten zurück, wenn Sie oben rechts auf der Seite das Rückwärtssymbol anklicken.
  3. Die Navigationsrahmen bei den Frames sind typische Knoten. Beispiel: London's Underground
  4. Eine Imagemap (Eine Grafik, die Links beinhaltet) bildet einen Knoten. Beispiel: Die Ringlinie
  5. Eine Gruppe von Vorschaubildern bildet einen Knoten. Beispiel: Amateurfunk
Reihenstruktur

Reihenstruktur

Die Seiten werden in einer einfachen Folge angeordnet. Diese Struktur ist besonders leicht zu durchschauen. Allerdings ist der Zugriff etwas unbequem, denn wenn man nur eine einzelne Seite betrachten möchte, muss man sich durch andere Seiten hindurchklicken, um dahin zu gelangen.

Baum- und Reihenstruktur

Baum- mit Reihenstruktur

Hier werden die Vorteile der Baumstruktur (direkter Zugriff zu einzelnen Seiten) mit der leichten Verständlichkeit der Reihenstruktur verbunden. Ein Beispiel hierfür sind die Seiten über London's Underground.

Jeder mit Jedem

Jeder mit Jedem

Diese einfache Struktur kann bei vielen Knoten unübersichtlich werden. Wenn nur drei Seiten miteinander so verbunden sind, ist sie jedoch ideal!

Hotelstruktur

Hotelstruktur

Die Bezeichnung "Hotelstruktur" fiel mir ein, da sie einem großen Hotel nachempfunden ist: es gibt einen Empfang (grün angedeutet), eine Art Treppenhaus und in jedem Stock Zimmer. Man kann von jedem Zimmer unmittelbar zu den beiden Nachbarzimmern und zum Treppenhaus gelangen. Zum "Empfang" kann man ebenfalls unmittelbar von jedem Zimmer aus gelangen. Bei dem Thema Yorkshire dient die "Infoseite" als "Empfang". Sie verweist dort zusätzlich in Baumstruktur auf die einzelnen "Stockwerke" (Diese überlagerte Baumstruktur ist in der Grafik nicht angedeutet).