Navigationshilfen

Auf einer Website gehen Nutzer je nach Vorliebe und Gewohnheit unterschiedliche Wege. Barrierefreies bzw. barrierearmes Webdesign versucht, allen Nutzern gerecht zu werden. Eine Sitemap (dt. Inhaltsverzeichnis) hilft unerfahrenen Nutzern. Für Nutzer mit präzisen Vorstellungen ist eine Website-interne Suchfunktion von Vorteil. Andere Nutzer wiederum bewegen sich ungezielt durch die Website, bis das Gesuchte gefunden wird. Navigationshilfen wie der Seitentitel, ein Navigationspfad, ein Index, eine Suche, Hilfeseiten oder eine Seite mit häufig gestellten Fragen unterstützen den Nutzer inhaltlich.
Stand 17.06.2009

Inhaltsübersicht:

  1. Seitentitel und Seitenüberschrift
  2. Der Navigationspfad
  3. Die Sitemap
  4. Der Index
  5. Die Website-interne Suche
  6. Kontextbasierte Hilfen
  7. Frequently Asked Questions

Seitentitel und Seitenüberschrift

Zu unterscheiden sind Seitentitel und Seitenüberschrift.

Der Titel wird in der Titelleiste des Browser-Fensters angezeigt und ist zu vergleichen mit einem Namen. Die Seitenüberschrift ist mit einer Inhaltsüberschrift gleichzusetzen. Sie sollte sich nicht nur durch das Hervorheben der aktiven Menüpunkte ergeben, sondern visuell in die Hierarchie gegliedert sein, also meist oberhalb des eigentlichen Inhaltes stehen.

Wird auf eine Webseite verwiesen, so sollte der Verweistext in etwa dem Seitentitel bzw. der Seitenüberschrift entsprechen oder zumindest ein gutes Äquivalent darstellen.

Seitenanfang

Der aktuelle Standort des Benutzers wird über eine klare Navigation und das Hervorheben der aktiven Verweise deutlich (siehe Navigationsleisten). Neben visuellen Hinweisen sollten umfangreiche Webseiten einen Navigationspfad, einen sog. Brotkrumenpfad (engl. Breadcrumb) enthalten. [Anmerkung: In Anspielung auf das Märchen "Hänsel und Gretel", in dem Hänsel im Wald Brotkrumen verstreute, um den Heimweg zu markieren.]

Einsatz finden solche Navigationspfade in umfangreichen Webprojekten mit mehrstufigen Navigationsebenen, bei denen Unterseiten existieren, die nicht direkt von der Startseite erreichbar sind. Der Brotkrumenpfad ermöglicht dem Nutzer, ergänzend zur Haupt- und Unternavigation, eine schnelle Navigation bis zur obersten Hierarchie-Ebene der Website, der Homepage.

Der Navigationspfad wird weit oben auf der Webseite platziert. Vorangestellt wird ein Text ähnlich "Sie befinden sich hier: [...]". Als Trennung zwischen den Hierarchiepunkten hat sich das Zeichen für "größer als" (>) durchgesetzt. Der letzte Punkt der Aufzählung ist der Name der aktuellen Seite. Bis auf diesen sind alle anderen Punkte als Verweis auf die entsprechenden Hierarchieebenen zu realisieren, so dass sie als Navigationselemente genutzt werden können.

Beispiel XHTML-Datei - Navigationspfad (Ausschnitt):

<p id="breadcrumb">Sie befinden sich hier:
<a href="index.html">Startseite</a>
&gt; <a href="kapitel.html">Kapitel</a>
&gt; <a href="unterkapitel.html">Unterkapitel</a>
&gt; Abschnitt 1</p>

Der Navigationspfad wird meist in einer kleineren Schriftgröße als der normale Text zur Verfügung gestellt. Das unterstreicht die Funktion als ergänzendes Hilfsmittel.

Beispiel CSS-Datei - Navigationspfad (Ausschnitt):

/* Brotkrumen-Pfad */ #breadcrumb {
/* Schriftgröße: 80% des Elternelementes */   font-size: .8em;
/* Außenabstand: keiner */   margin: 0;
/* Innenabstand: oben/unten keiner, rechts/links .5em */   padding: 0 .5em;
}

Auf den Seiten des Projektes [diːbaːweː] befindet sich der Brotkrumenpfad unterhalb der jeweiligen Artikelüberschrift, hier auf dieser Seite bspw. unterhalb der Überschrift "Navigationshilfen".

Seitenanfang

Die Sitemap

Die Sitemap ist eine Übersichtsseite, vergleichbar mit einem Inhaltsverzeichnis. Sie enthält Verweise auf jede einzelne Webseite der Website und ist durch diese Verlinkung auch besonders für Suchmaschinen von Interesse.

Bei einer umfangreichen Website wird die Ausgabe aller verfügbaren Webseiten schnell unübersichtlich. In solchen Fällen reicht das Ausgeben der Hauptkategorien.

Empfehlenswert ist es, die Struktur auch visuell kenntlich zu machen, bspw. durch Aufzählungen mit verschiedenen Ebenen.

Seitenanfang

Der Index

Sofern es angesichts der Größe der Website sinnvoll ist, kann zusätzlich zur Sitemap ein Index angeboten werden.

Hierbei handelt es sich um alphabetisch aufgelistete Stichworte, die als Verweise auf die entsprechenden Webseiten realisiert sind. Bei einer Website mit vielen verschiedenen Themengebieten bietet der Index eine gute Orientierungsfunktion.

Seitenanfang

Die Website-interne Suche

Findet der Nutzer nicht auf Anhieb das Gesuchte auf einer Website, ist eine Website-interne Suchfunktion hilfreich.

Das Eingabefeld sollte optisch gut sichtbar positioniert sein und das Suchergebnis ohne Umschweife ausgegeben werden. I.d.R. befindet sich das Eingabefeld der Suche rechts oben auf der Webseite oder links direkt unterhalb der vertikalen Navigation.

Sinnvoll ist eine sortierte, gewichtete Ausgabe der Suchergebnisse in Listenform mit jeweils einem als Verweis realisierten Titel sowie einem Textausschnitt, der den gesuchten Begriff beinhaltet.

Seitenanfang

Kontextbasierte Hilfen

Ein ebenfalls wichtiger Bestandteil jedes Accessibility-Konzeptes sind kontextbasierte Hilfeseiten. Sie geben dem Nutzer einen Überblick, welche assistiven Techniken unterstützt werden.

Werden Styleswitcher zur Änderung von Seitenlayout oder Schriftgröße angeboten, können diese in der Hilfe erläutert werden. Für den Nutzer kann auf Hilfeseiten zusammengefasst werden, welche Aufgabe die Website hat, wie sie aufgebaut ist, welche Navigationsmechanismen zur Verfügung stehen und wie bei Bedarf ein Kontakt zum Betreiber hergestellt werden kann.

Generell ist es empfehlenswert, allgemeine Orientierungshilfen, Hinweise auf besondere Unterstützung oder Bedienungsempfehlungen für Nutzer assistiver Technik und eine Kontaktadresse bspw. zum Melden von Barrieren anzubieten. Bei längeren Hilfeseiten profitieren Nutzer von einem kurzen, seiteninternen Inhaltsverzeichnis - sog. Sprungmarken, die zu den Abschnittsüberschriften führen. Es kann auch sinnvoll sein, die Inhalte auf mehrere, weniger umfangreiche Hilfeseiten aufzuteilen.

Seitenanfang

Frequently Asked Questions

Häufig gestellte Fragen, sog. FAQ, sind knapp und präzise formulierte, signifikante Fragen.

Sowohl die Frage als auch die Antwort sind so prägnant wie möglich zu formulieren, damit der Nutzer diese auch in der Liste der FAQ findet. Für weitere Informationen kann über eine Verlinkung auf entsprechenden Website-Inhalt verwiesen werden.

Die Sortierung der Fragenliste erfolgt i.d.R. nach der Häufigkeit, mit der die Frage gestellt wurde. Bei langen Listen ist zusätzlich eine Gruppierung nach Themengebieten von Vorteil.

Weiterführende Literatur:

Krug, Steve:
Buchdeckel Don't make me think!
Don't make me think! Web Usability - Das intuitive Web, Seite 72 ff.,
mitp-Verlag, Bonn, 1. Auflage 2002 (Mediendesign),
ISBN 3826608909
Erlhofer, Sebastian:
Buchdeckel Suchmaschinen-Optimierung
Suchmaschinen-Optimierung, Seite 178-179,
Galileo Computing, Bonn, 1. Auflage 2005 (Galileo Press),
ISBN 3898426203
Alkan, Saim Rolf:
Buchdeckel Texten für das Internet
Texten für das Internet. Ein Praxisbuch für Online-Redakteure und Webtexter, Seite 113,
Galileo Press, Bonn, 2. aktualisierte und erweiterte Auflage 2004 (edition PAGE),
ISBN 3898424936
Radtke, Angie und Charlier, Michael:
Buchdeckel Barrierefreies Webdesign. Attraktive Websites zugänglich gestalten
Barrierefreies Webdesign. Attraktive Websites zugänglich gestalten, Seite 192 ff. sowie Seite 199 ff.,
Addison-Wesley Verlag, München, 1. Auflage 2006,
ISBN 3827323797
Manhartsberger, Martina und Musil, Sabine:
Buchdeckel Web Usability
Web Usability - Das Prinzip des Vertrauens, Seite 100 ff.,
Galileo Press, Bonn, 1. Auflage 2002 (Galileo Design),
ISBN 3898421872

Seitenanfang