Grundlagen/Navigationstechniken

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Der Begriff zu einer Ressource navigieren trifft technisch sowohl auf den User zu, der einen Link betätigt, als auch auf den Browser, der zu einem Dokument navigiert, um dieses anzeigen zu können. Dieser Artikel bespricht den Aspekt Navigation aus der Sicht des normalen Users, das heißt, er bespricht Konzepte, wie man dem User Navigationsinstrumente präsentiert. Unter CSS/Anwendung und Praxis/Dropdown-Menüs mit CSS gestalten wird der Aufbau und die Gestaltung von Menüs und Navigationen besprochen.

Einleitung[Bearbeiten]

Der Link - ein Klebstoff des Internets[Bearbeiten]

Der Hyperlink, der klickbare Verweis, ist die Essenz des Hypertexts. Er ist der zentrale Mechanismus, welcher eine isolierte Informationseinheit mit anderen Einheiten verbindet und so das Informationsnetz erzeugt. Eine Ressource (d.h. eine Datei oder ein Datenstrom) ist das Ziel eines Links und kann wiederum Links enthalten. Der Begriff "Navigation" bezeichnet die Reihenfolge, in welcher ein Anwender solche Links betätigt.

Ein Link besteht, je nach Sprache, aus verschiedenen Teilen.

  • Der URI bezeichnet die Adresse, unter welcher das Ziel erreicht werden kann. Ihre Form wird durch den ausliefernden Server definiert und ist ihrer Form nach für den Linksetzer dem Leser nicht zumutbar.
  • Ein Label schreibt den Link an. Die Form des Labels darf vom Linksetzer frei definiert werden. Dabei kann es aber zu Konflikten kommen.
    • Soll das Label den Titel des Zieles darstellen, oder sich dem Kontext unterstellen?
    • Soll das Label in der Sprache des Zieldokuments oder in der Sprache des verlinkenden Dokuments geschrieben sein?
  • Weitere Link-Attribute nehmen sich des Problems an:
    • title-Attribut (HTML), um das Linkziel weiter zu beschreiben
    • hreflang-Attribut (HTML), um die Sprache des Zieldokuments anzugeben.

Der Link ist nicht das einzige Instrument, um einen Request vorzubereiten. Formulare bieten eine andere Möglichkeit, um parametrisierte Requests zu erlauben. Als typische Anwendung sei hier ein HTML-Suchformular genannt, dessen mit GET übertragene Parameter zu einem vollwertigen URI zusammengesetzt werden. Formulare sind besonders dann wichtig, wenn Datenbanken abgefragt werden sollen.

Der Link ist kein Garant für Inhalte[Bearbeiten]

Ein Link ist eine einseitige Referenz. Der Linksetzer kennt zwar die zu verlinkende Ressource, aber nicht immer kennt die zu verlinkende Ressource den Linksetzer. Dies gilt vor allem bei Links über Domänengrenzen hinweg. Dies schafft das Problem, dass sich der verlinkte Inhalt verändern kann oder das Linkziel eventuell nicht mehr existiert.

In vielen Situationen ist ein Link nicht eine permanente Ressource im Sinne eines permanent identischen Inhalts. So ändern sich die News einer Seite ihrem Inhalt gemäß, hören aber nicht auf, die News einer Seite zu sein. Wer Seiten mit wechselnden Inhalten anbietet, sollte die konkreten Inhalte auch als permanente Links anbieten.

Navigieren zwischen verschiedenen Kontexten[Bearbeiten]

Navigieren durch das Web ist ein Vorgang, der mehrere Partner beinhaltet. Es ist zwar der Anwender, der letztlich einen Link aktiviert und somit eine Auswahl trifft. Es ist aber der Autor eines Dokuments, der diese Auswahl entscheidend vorbereitet. Letztlich wird aber die künftige Auswahl von der verlangten Ressource definiert. Ein Anwender kann aber jederzeit eine Auswahl vernachlässigen und zu Alternativen greifen, zum Beispiel den Bookmarks oder einer Auswahl in einer anderen offenen Browserinstanz. Ein Anwender sieht sich also vor einem offenen Baum von Navigationsangeboten.

Man navigiert von einem Quelldokument zu einem Zieldokument. Hierbei werden verschiedene Grenzen überschritten.

  • Beim Navigieren innerhalb des gleichen Dokuments wird die Ressource nicht neu aufgerufen. Es ist wünschenswert, dass sich solche Links visuell unterscheiden von Links, welche neue Ressourcen aufrufen.
  • Navigieren in eine neue Ressource innerhalb der gleichen Domäne. Der Linksetzer hat sehr wahrscheinlich die Kontrolle darüber, dass das Linkziel stets dem Zweck des Links entspricht.
  • Navigieren über Domänengrenzen hinweg, was bedeutet, dass der Linksetzer keine Gewähr über Existenz der Zielressource hat und dass der Inhalt der Zielressource sich mit der Zeit verändern kann, so dass er womöglich nicht mehr dem Zweck des Links entspricht.
  • Navigieren von einer Dokumentsprache in eine andere Sprache.
  • Navigieren in eine neue Ansicht (Fenster/Tab). Dieser Mechanismus kann im Link selber vorliegen, oder durch den Anwender initiiert werden.
  • Navigieren von einem Dokumentformat in ein anderes Dokumentformat. Dadurch können die dem Browser eigenen Navigationsinstrumente (History) wirkungslos werden.

Diese Kontexte sollten an Links kenntlich gemacht werden.

Entscheidungsgrundlagen[Bearbeiten]

Wichtig vor der Entscheidung zum richtigen Konzept sind Überlegungen zur Beziehung zwischen virtueller und physikalischer Beziehung, zur Skalierbarkeit und zum Navigationsbedürfnis.

Physikalische und virtuelle Ordnung[Bearbeiten]

Die physikalische Ordnung bezeichnet die Lage einer Ressource auf dem Filesystem. Die virtuelle Ordnung bezeichnet die Lage, wie sie im URI-Pfad sichtbar wird. Bei statischen Webseiten besteht grundlegend eine Identität, wobei die URI-Domain dem http-Wurzelverzeichnis des Webservers entspricht. Mittels .htaccess kann diese Beziehung verändert werden.

Bei dynamisch generierten Websites besteht in der Regel für zu navigierende Ressourcen keine Beziehung mehr zwischen dem URI-Pfad und einer entsprechenden Lage einer Ressource im Filesystem. Hier tritt eine vermittelnde Tabelle hinzu, welche Ressourcen hierarchisch ordnet.

Auch bei dynamisch generierten Websites bleiben in aller Regel Aspekte des zur physikalischen Adressierung identischen Pfads im URI erhalten. Besonders betroffen sind eingebettete Ressourcen wie Bilder, CSS-Files oder Javascript-Files.

Skalierbarkeit[Bearbeiten]

Websites wachsen, der (logische und visuelle) Platz für Linklisten auf einer Seite aber ist beschränkt. Soll auf jeder Seite jede andere Seite erreichbar sein, so entsteht vor allem bei händisch gecodeten Seiten eine stets zunehmende Arbeit. Die Bearbeitung gleichartiger Linklisten erfordert eine gemeinsame Aktualisierung aller betroffenen Ressourcen. Es ist daher früh zu entscheiden, ob und wie Navigationsgruppen automatisiert verwaltet werden sollen.

Gruppen[Bearbeiten]

Da es aber nicht sinnvoll ist, alle Ressourcen auf allen Seiten zu verlinken, braucht es virtuelle Gruppen. Es muss dann lediglich die Startseite jeder Gruppe überall erreichbar sein.

Gruppen vereinigen thematisch Zusammengehöriges. Eine solche Sammlung mag ungeordnet (Bsp. Warenrubriken) oder seriell geordnet sein (Bsp. Kapitel).

Gruppen können bereits durch die Ablage der Ressourcen auf dem Filesystem existieren. Gruppen lassen sich aber bei dynamisch erzeugten Seiten auch komplett virtualisieren, so dass keine Relation mehr besteht zwischen dem URI-Pfad und der Lage der verarbeitenden Ressource auf dem Server.

Navigationsbedürfnis[Bearbeiten]

Natürliche Konflikte entstehen durch die verschiedenen Navigations-Bedürfnisse der Besucher und Admins. Ein Autor möchte (alle) seine Inhalte in einer vorgedachten Ordnung präsentieren und warten. Der Gast aber möchte sein aktuelles Informationsbedürfnis befriedigen. Kenntnis des Gesamtzusammenhangs ist für ihn nicht erforderlich.

Gäste gelangen meist via Suchseiten oder andere externe Referenzen auf irgendeine Unterseite im Webangebot. Sie sind über die Struktur der Seiten uninformiert und meist auch nicht interessiert, solange sie schnell einem für ihr Thema relevanten Link folgen können.
Gäste, die in regelmäßigen Abständen neu kommen, kommen aufgrund eines allgemeinen Interesses an einer Web-Präsenz. Für sie ist eine News-Seite eine ideale Einstiegsseite. Daraus ergibt sich eine Prioritätenliste des direkt erreichbaren weiteren Angebots.

  1. Am wichtigsten sind Vorgänger- und Nachfolger-Seite in einem seriell geordneten Kontext.
  2. Die Startseite des Kontextes
  3. Unverzichtbare Spezialseiten:
    • Impressum
    • Kontaktseite
    • Die Startseite des Angebots
    • ...
  4. Weitere optionale Navigationspunkte

Navigationskonzepte[Bearbeiten]

In einer Webseite kommen in der Regel mehrere Navigationskonzepte gleichzeitig vor. Es handelt sich um sich ergänzende Strategien. Navigationsinstrumente sind nur in Abhängigkeit des Medientyps notwendig. Sie sind beim Ausdruck meistens unerwünscht.

Wenn Sie mehrere Navigationstechniken gleichzeitig verwenden, hat Konsistenz höchste Priorität.

  • Platzieren Sie eine Navigationsart konsistent logisch oder visuell an einem konstanten Ort.
  • Ändern Sie nicht die Navigationsart an einer für Navigationen intendierten Stelle von Seite zu Seite.

Der Kontextlink[Bearbeiten]

kontext-Link

Der Kontextlink präsentiert erweiterte, detaillierte oder verwandte Information. Ein solcher Link taucht im normalen Text auf. Er erfüllt in HTML-Dokumenten eine Doppelrolle. Das Linklabel ist Teil des sichtbaren Textes. Daraus entsteht das Problem, die Autorität (Domäne), eine ev. abweichende Sprache und das Format des Ziels zu verdeutlichen. Es ist besonders erwünscht, eine andere Domäne zu markieren, um einem Anwender die Wahl zu lassen, wie er das Ziel navigiert.

Kontextlinks erzeugen ein loses Netzwerk verlinkter Ressourcen. Sie sind aber bedeutsam dadurch, dass sie das Internet über Domänengrenzen hinweg zusammenhalten. Prägend für das Web der Kontextlinks ist, dass jüngere Ressourcen auf ältere Ressourcen verweisen.

Beachten Sie: Der Ausdruck eines Dokuments verlangt, dass nebst dem Label eines Kontextlinks auch der URI angezeigt wird.

Skiplinks[Bearbeiten]

Skiplinks dienen ausschließlich der Navigation innerhalb einer Seite und haben den Zweck, bestimmte Sektionen zu überspringen. Sie werden oft zur verbesserten Usability verwendet, um Screenreadern entgegenzukommen. Sofern jedoch die Hauptsektionen einer Seite durch Überschriften eingeleitet sind, können diese entfallen. Skiplinks werden am logischen Beginn des Dokuments notiert und enthalten zum Beispiel:

  • zum Inhalt
  • zur Navigation
  • zur Sitesearch

Das hierarchische Verzeichnis[Bearbeiten]

Als verschachtelte Liste wird eine Navigation in Gruppen gegliedert. Dies ist die häufigste Form in Navigationsmenus oder Webshops. Dabei können auch mal mehrere Ebenen sichtbar sein.

In einem umfangreichen Projekt kann eine verschachtelte Liste unmöglich alle Zielseiten in allen Zweigen des hierarchischen Baumes aufführen. Daraus ergibt sich die Frage, wieviel von der Hierarchie gezeigt werden soll. Ein vorsichtiger Ansatz begrenzt das Menu-Angebot auf

  • die unmittelbaren Kinder der aktuellen Seite,
  • die gleichwertigen Geschwister der aktuellen Seite,
  • die übergeordnete Seite und deren Geschwister,
    • deren übergeordnete Seite und deren Geschwister,
      • ... bis zur Wurzelseite (im Allgemeinen die Startseite).

Diese Beschränkung verbirgt aber Teile des Angebots im Menu. Um das gesamte Angebot zu erfassen, muss durch das Menu geklickt werden. Dadurch taucht ein anderes Problem auf, denn die Empfehlung, wonach man jeden Punkt einer Website von überall aus durch maximal drei Klicks erreichen können sollte, wird nicht immer einzuhalten sein. Außer bei einer Sitemap ist ein vollständiges Menu nicht empfehlenswert. Entscheidend für den Informationsgehalt hierarchischer Menus sind geeignete Menu-Labels.

Die (Location-)Breadcrumbs-Navigation[1] stellt den hierarchischen Weg zur aktuellen Seite dar und eignet sich für sehr verzweigte Angebote. Hier liegt der Schwerpunkt darin, schnell wieder in eine übergeordnete Seite zu finden.

Beispiel: Beziehung zwischen einem Menu und seiner Breadcrumbs-Navigation
Verschachtelte Liste
  • Home
  • Zeitschriften
    • Web-Phantasium
      1. 2007
      2. 2008
      3. 2009
        1. 1.Quartal
        2. 2.Quartal
        3. 3.Quartal
        4. 4.Quartal
    • Net-Samples
    • HTTP-Views

Breadcrumbs-Navigation

Zeitschriften > Web-Phantasium > 2009 > 4.Quartal
In der Breadcrumbs-Navigation ist jede Ebene anklickbar. Dies erfordert, dass es zum Beispiel eine Seite 2009 gibt, die als Inhaltsverzeichnis aller darin verfügbaren Quartale dient.

Die Breadcrumbs-Navigation eignet sich für statische wie dynamisch generierte Websites, da sie wenig Platz beansprucht, wenig Pflege benötigt und anderseits von jeder Unterseite aus die übergeordneten Seiten und damit das gesamte Projekt verfügbar macht. Die Breadcrumbs-Navigation verweist aber nicht auf andere Unterseiten und ist deshalb nicht für die Indexierung einer Site durch Robots geeignet. Diese wird nur sichergestellt, indem übergeordnete Seiten als Inhaltsverzeichnisse fungieren.

Beachten Sie: Es gibt kein spezifisches Zeichen, das semantisch bedeutet 'Sie betreten eine neue Hierarchieebene'. Es haben sich aber zwei starke Konventionen herausgebildet: > und aus der Mac-Welt das ::.

ABC-Navigation[Bearbeiten]

Navigationen werden meistens mit einer Quernavigation oder einem Fly-Out-Menü verwirklicht. Bei sehr langen Listen würden diese Menüs aber schnell unübersichtlich.

Eine Möglichkeit hier für Übersicht zu schaffen und schnell zum gewünschten Eintrag zu navigieren, ist die ABC-Navigation. Hier wird ein Register mit Buchstabenreitern angelegt, deren Links auf den Anker in den Überschriften zeigen:

Schnell-Index

Eine solche Navigation wird zum Beispiel im Schnellindex verwendet.

Die Serie[Bearbeiten]

Serielle Navigation ist dort erforderlich, wo entweder die Inhaltsvermittlung in serieller Ordnung stattfindet oder die Speicherung von Abschnitten seriell erfolgt. Als Beispiele seien erwähnt:

  • die Online-Präsentation eines klassischen literarischen Werkes
  • ein Gästebuch, das pro Seite 10 Einträge in der Ordnung ihrer Speicherung darstellt

Eine serielle Navigation besteht aus folgenden möglichen Navigationspunkten:

  • die erste Seite
  • die letzte Seite
  • die logisch vorangehende Seite
  • die logisch nächste Seite

Je nach Umfang der Serie sind weitere Navigationsinstrumente notwendig:

  • springe n Seiten zurück
  • springe n Seiten vor
  • direktes Ansteuern jeder Seite
    • durch eine nummerierte Liste
    • durch ein Eingabefeld

In HTML stehen nicht nur Anker-Elemente für diese Navigation zur Verfügung, es gibt auch für die link-Elemente logische Werte für das rel-Attribut.

Je nach Umfang der Serie werden die Navigationen verschieden dargestellt. Für kleine Serien ist es noch möglich, eine vollständige Menuliste darzustellen und die Seiten namentlich zu erwähnen. Sobald aber Serien dynamisch erzeugt werden (Beispiel Gästebucheinträge), braucht es komplexere Navigationen. In der Regel kann eine Seite dann nicht mehr namentlich im Linklabel erwähnt werden.

Die Suchbegriff-Navigation[Bearbeiten]

"Tag-Wolke

Mit Suchbegriffen oder Markern (engl. tag) können entweder komplette Listen der verfügbaren Suchbegriffe z.B. als Wolke (engl. tag cloud) oder in Beziehung zum Artikel als weiterführende Suchbegriffe in Form eines tag bars angebracht werden.

Der Mechanismus für ein tag ist nicht vorgegeben. Es kann sich dabei um eine Suche oder um eine Datenbankabfrage handeln. Bei einer Liste von vorgeschlagenen Suchstichworten repräsentieren diese die populärsten Suchen, was eine Art Statistik benötigt. Häufiger werden aber redaktionelle Stichworte in Form von Kategorien verwendet.

Das Ziel eines solchen Links ist eine Auswahlliste von Seiten. Suchwolken sind geeignet für sehr umfangreiche Seiten oder in Situationen, wo die Seiten in keinem seriellen oder hierarchischen Kontext gespeichert oder vermittelt werden müssen. Eine Seite kann durch mehrere Stichworte erreicht werden.

Die typische Navigationsreihenfolge ist:

Wolke → Auswahl aus Liste → Zielseite

Ergänzend zur Wolke gibt es die Attribute-Breadcrumbs-Navigation. Diese stellt dar, über welche verschiedenen Suchstichworte diese Seite aufgerufen wurde, und führt somit zu verschiedenen übergeordneten Listen zurück.

Beispiel
  • Deutschland → Kultur → Essen → Sauerbraten
  • Essen → Warme Küche → Fleischgerichte
  • Stichworte: Braten, Essen, Gerichte
Jeder der Begriffe ist ein Link, der eine neue Suche ausführt und in einer übergeordneten Liste resultiert.

Die Sitesearch[Bearbeiten]

Eine Sitesearch erlaubt die Suche nach Seiten aufgrund von Suchstichworten. Dabei gibt es verschiedene Implementationen.

Die Einbindung eines Suchformulars durch einen öffentlichen Suchdienst ist zwar einfacher, vermindert jedoch die Aktualität der Rückgabe und die Steuerung der Durchsuchbarkeit.

Die aufwändigere Implementation einer eigenen Sitesearch erlaubt spezifische Features und präsentiert eine aktuelle Liste nach Relevanz geordneter Links zu Seiten mit Beschreibung.

Die typische Navigationsreihenfolge ist:

Sucheingabe → Auswahl aus der Liste → Zielseite.

Sitemaps[Bearbeiten]

Sitemaps haben den Zweck, jede öffentlich direkt erreichbare Seite (egal ob statische Seite/Ressource oder Datenbankabfrage) als Link aufzulisten. Sitemaps sind eher für Robots gedacht als für Menschen. Erfahrungen haben gezeigt, das Sitemaps eher selten von Menschen genutzt werden. Dennoch sollte man Sitemaps so gestalten, dass die Ziele beschrieben sind.

Sitemaps werden entweder als HTML-Seiten geschrieben und im eigenen Webangebot verlinkt, oder sie werden, falls für einen spezifischen Indexbot gedacht, in einem speziellen Format (meist XML) notiert, und beim Bot-Betreiber eingereicht.

Bei normal verlinkten Sitemaps ist das Format des hierarchischen Verzeichnisses gefordert. Für zu verlinkende HTML-Seiten eignet sich die Verwertung der in der Meta-Description definierten Information. Als Linklabel eignet sich die Verwertung des title-Elements.

Beachten Sie: Auch normale Sitemaps müssen bei Index-Stellen speziell eingereicht werden, damit auch alle Links dieser recht umfangreichen Listen indexiert werden.

News-Seite[Bearbeiten]

Eine Newsseite ist eine spezielle Seite, welche Ihre Gäste über Neuerungen und Änderungen auf Ihrer Webpräsenz informiert. Für regelmäßige Besucher stellt sie quasi ein kommentiertes Inhaltsverzeichnis zur chronologischen Entwicklung Ihrer Site dar.

Seiteninterne Navigation[Bearbeiten]

Stark strukturierte umfangreichere Seiten gewinnen durch eine seiteninterne Navigation, so wie sie auf diesen Wiki-Seiten ab einem bestimmten Umfang automatisch erzeugt wird. Vorzugsweise wird dabei die hierarchische Header-Strukturierung des Hauptinhalts ausgewertet. Das Inhaltsverzeichnis dieser internen Navigation sollte nach dem Haupttitel des Inhalts stehen, darf vor oder nach einer Zusammenfassung (engl. abstract) stehen und sollte jedem weiteren Haupt-Inhalt vorangehen. Ein Link sollte am Ende jedes Hauptabschnittes zu diesem Inhaltsverzeichnis führen.

Beispiel
Der Link führt Sie zum seiteninternen Inhaltsverzeichnis

Usability und Gestaltung[Bearbeiten]

Allgemein[Bearbeiten]

Die Gestaltung und die Ausführung von Links unterliegen Konventionen.

  • Ein unterstrichener Text wird im Medientyp screen als Link wahrgenommen.
  • An einem Link sollte kenntlich sein, ob er bereits besucht wurde.
  • Eine allgemeine Regel empfiehlt, dass man nie die aktuelle Seite verlinke.
  • Ein Link Zufällige Wiki-Seite ist verständlicher als wenn Sie schreiben: "Eine zufällige Wiki-Seite erhalten Sie hier"!

Erweiterte Link-Information[Bearbeiten]

Der Anwender sollte erweiterte Informationen zu einem Link erhalten.

  • Unter wessen Autorität liegt das Ziel.
  • In welcher Sprache liegt die Zielressource vor.
  • In welchem Format liegt die Zielressource vor.
  • Aktualität der Zielressource.
    • Problematik: Zielressource wird verändert, nachdem sie referenziert wurde.

Dropdown-Menus[Bearbeiten]

Dropdown-Menus verlangen Interaktion, um die einzelnen Menupunkte zu erreichen. Sie sollten auch mit der Tastatur allein erreicht werden. Umfangreiche Menus verlangen nach verschachtelten Listen. Schnell wird jedoch eine Grenze der Bedienbarkeit erreicht, und man sollte sich alternative Strukturen überlegen.

Der Artikel: Eine zugängliche Dropdown-Navigation demonstriert ihnen eine Navigation mit restaurierter TAB-Tasten-Funktion, welche Sie einfach an ihre Bedürfnisse anpassen können.

Bookmarking[Bearbeiten]

Browser zeigen die URI einer navigierten Ressource im Location-Bar an. Wurde die Ressource aus einem Formularfeld navigiert, sollte sichergestellt werden, dass die URI alle notwendigen Parameter enthält.

Print-Medien[Bearbeiten]

Dokumente werden auch ausgedruckt. Hier entfallen die Navigationsinstrumente. Kontextlinks aber brauchen eine besondere Behandlung. So muss nebst dem Label auch der URI ausgedruckt werden. Weiterhin Bedarf bleibt für:

  • Die Internet-Adresse der ausgedruckten Datei.
  • Die Adresse zur Einstiegsseite des Angebots.

Siehe auch[Bearbeiten]

Quellen[Bearbeiten]

  1. Es gibt drei verschiedene Arten von Breadcrumbs-Navigation (siehe: http://de.wikipedia.org/wiki/Breadcrumbs oder http://psychology.wichita.edu/surl/usabilitynews/52/breadcrumb.htm):
    • Location-Breadcrumbs: Stellt die hierarchische Stellung der Seite dar.
    • History-Breadcrumbs (heute obsolet): Wie hat der Anwender die Seite erreicht?
    • Attribute-Breadcrumbs: Über welche verschiedenen Wege kann diese Seite erreicht werden?
    Unter Breadcrumbs-Navigation werden heute eigentlich meist die location-breadcrumbs verstanden.