Home
Sitemap
Entwurfskriterien und Erfahrungsbericht
über die Erstellung meiner Website
Auswahlseite

Über fredriks.de:
Die Navigation auf meiner Website

Die Navigation soll 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 oben auf der Seite.
Zur vorigen Auswahlseite zurück. Eine Auswahlseite ist eine Seite, die eine Verteilfunktion hat.
Zur nächsten Auswahlseite vor.
Zur vorigen Seite zurück.
Zur nächsten Seite vor.
Zurück zur vorigen Seite oder Auswahlseite.
 i  Zur Informationsseite des Themas oder in einigen Fällen für weitere Informationen zum Thema innerhalb meiner Website. Bei Verweisen auf externe Webseiten wird dem Linkziel ein nach rechts gerichteter Pfeil →vorangestellt.

Wenn der Mauszeiger darauf liegt, wird häufig die Farbe des Navigationssymbols mittels Javascript in blau geändert. Außerdem wird dann bei allen Links die Hintergrundfarbe in gelb verändert. Beides erleichtert die Bedienung bei Geräten mit schlecht sichtbarem Mauszeiger.

Die Navigationssymbole sind recht groß, denn 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. Die auf meiner Website benutzte Mindestgröße für Navigationssymbole beträgt 15*16 Pixel, die am häufigsten verwendete Größe ist 30*30 Pixel.

Bei vielen Links erscheint ein Hilfstext, wenn man den Mauszeiger darauf ruhen lässt. Der Hilfstext informiert über das Wesen des Links. Typische Hilfstexte sind

  • Interner Link (neues Fenster)
  • Interner Link (Zweitfenster)
  • Interner Link mit Rückwärtslink hierher
  • Interner Link ohne Rückwärtslink hierher
  • Interner Link, Javascript ermöglicht Rückwärtssprung hierher

Dabei besagt „interner Link”, dass der Link zu einer Webseite innerhalb meiner Website führt. Ein „externer Link” führt auf eine fremde Website.

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

  • „Zur Indexseite”, meistens mit „Home” beschriftet
  • „Zur Sitemap”
  • „Zurück zur vorigen Seite oder Auswahlseite”
  • „Zur Infoseite”

In der Mitte steht der Seitentitel. Er sagt was über den Inhalt der Seite aus.

  • Unmittelbar rechts neben dem Seitentitel stehen Verweise auf das vorige und/oder das nächste Thema. Falls eine Themeneinteilung nicht vorgenommen wurde, stehen hier Verweise auf die vorige und/oder nächste Seite.
  • Bei Seiten mit Themeneinteilung stehen Verweise auf die vorige und/oder nächste Seite in einer weiteren unmittelbar folgenden Navigationszeile.

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.

Bild: Baumstruktur
Baumstruktur
Links sind von oben nach unten drei Verknüpfungen dargestellt:
  • Baum,
  • Reihe und
  • Baum mit Reihe.
Bei der Baumstruktur hat jeder Abkömmling einen einzigen unmittelbaren Vorgänger.
Beispiele für Baumstrukturen 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. Eine Imagemap (Eine Grafik, die Links beinhaltet) bildet einen Knoten. Beispiel: Die Ringlinie
  4. Eine Gruppe von Vorschaubildern bildet einen Knoten. Beispiel: Amateurfunk

Reihenstruktur
Die Seiten werden in einer einfachen Folge angeordnet. Diese Struktur ist besonders leicht zu durchschauen. Nur 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- 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.
Bild: 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! Beispiel: Elstertalbrücke.
Bild: Hotelstruktur
Hotelstruktur

Die Bezeichnung „Hotelstruktur” ist einem großen Hotel nachempfunden: Es gibt einen Empfang (grün angedeutet), ein Treppenhaus und in jedem Stockwerk Zimmer. Man kann von jedem Zimmer unmittelbar zur „Infoseite” als Empfang. Die Infoseite verweist dort zusätzlich in Baumstruktur auf die einzelnen Stockwerke. Diese überlagerte Baumstruktur ist in der Grafik nicht angedeutet.

Von jedem Zimmer kann man zum/zu den Nachbarzimmer/n Nachbarzimmern und zum Treppenhaus gelangen. Zum Empfang kann man ebenfalls unmittelbar von jedem Zimmer aus gelangen.
Beispiel: Bei dem Thema Yorkshire dient die „Infoseite” als Empfang.

Letztes Upload: 13.03.2020 um 17:39:32