Bereich: "Software" Ergonomische Gestaltung von WWW-Seiten:
Bedienung & Navigation
Übersicht:
Ein ergonomisches Informationsangebot sollte es den Anwendern ermöglichen, möglichst schnell und bequem zu den gesuchten Informationen zu gelangen.
Eine gelungene Navigation setzt eine geeignete inhaltlich-fachliche Strukturierung des Webangebots voraus.
Für Anwender unterschiedliche Fähigkeiten und Aufgaben haben, sollten verschiedene Navigationsarten angeboten werden.
Es empfiehlt sich, Webseiten mit geeigneten Hilfen zur Orientierung über die Position der gerade angezeigten Seite innerhalb des Webangebots auszustatten.
Im WWW geht die Orientierung leicht verloren Der Begriff Navigation bezeichnet bei Hypertext-Systemen die Tätigkeit, die ein Benutzer ausführen muß, um gewünschte Informationen zu finden. Bietet ein Dokument im Web lediglich assoziative Links im Text an, um zu Dokumenten mit verwandtem Inhalt zu gelangen, so verliert man beim Klicken von Link zu Link und damit von Dokument zu Dokument leicht die Orientierung. Den Navigationsweg im Gedächtnis zu behalten, ist nur schwer möglich.

In einer Reihe von Untersuchungen wird dies "Lost in Hyperspace"-Phänomen genannt. Die Ursache liegt darin, daß es im World Wide Web (WWW) weder eine sequentielle Ordnung gibt wie in einem Buch oder einer Zeitschrift (von Seite 1 bis Ende) noch eine hierarchische Menüstruktur vorgesehen ist, die jederzeit offensichtlich wäre.

Verschiedene Arten der Navigation anbieten Um dies zu vermeiden, empfiehlt es sich, zusätzlich zum Informationsangebot eine möglichst übersichtliche und den Bedürfnissen der jeweiligen NutzerInnen angepaßte Navigation bereit zu stellen. In der Regel ist es am besten, sogar mehrere verschiedene Arten der Navigation anzubieten, für verschiedene Nutzergruppen mit unterschiedlichen Interessen und Fähigkeiten.

Darüber hinaus sollte die Gestaltung der Webseiten eine Orientierung darüber bieten, wo man sich gerade befindet, wie man dahin gekommen ist und welche weiteren Navigationswege offen stehen.

Empfehlungen
OROT.GIF (860 Byte) Sinnvolle Strukturierung der Informationen
Eine "gute" Navigation in einem Webangebot setzt eine geeignete inhaltliche Strukturierung der angebotenen Informationen voraus. Sind diese nicht fachlich sinnvoll gegliedert und auf verschiedene Dokumente verteilt, dann wird selbst die beste Navigation als chaotisch empfunden.
OROT.GIF (860 Byte) Information und Navigation trennen
Lediglich assoziative Links, die ausschließlich im Text eines Dokuments eingebettet sind, führen zu einem unübersichlichen Informationsangebot. Eine Struktur ist dann kaum erkennbar und ein zielgerichtetes Navigieren entlang des eigenen Interesses oder hin zur gesuchten Information nicht möglich.

Die Lösung des Problems besteht in der Trennung von Information und Navigation. Die Navigationselemente werden außerhalb des Texts z.B. in einer Menüleiste, die oben oder links am Rand des Bildschirms eingeblendet wird, zusammengefaßt. Dazu werden in der Regel besondere Buttons oder Schalter verwendet, da in HTML auch Grafiken mit einem Link versehen werden können. Wird ein solches Menü in einen gesonderten Frame eingesetzt, dann bleibt es dauerhaft sichtbar (wie die Schalterleiste auf der linken Seite in ergo-online).

Wie und in welcher Form eine geeignete Navigation zu realisieren ist, hängt von Art und Inhalt des Angebots sowie der Zielgruppe und deren Gewohnheiten, Fähigkeiten und Aufgaben ab. Es gibt viele geeignete Navigationsarten, aber keine prinzipiell Beste.

OROT.GIF (860 Byte) Verschiedene Navigationsarten

Ein ergonomisches Informationsangebot sollte es den verschiedenen Anwendern ermöglichen, möglichst schnell und bequem zu den gesuchten Informationen zu gelangen. Was schnell und bequem ist, wird sicher von verschiedenen AnwenderInnen auch verschieden beurteilt. Entsprechend dem software-ergonomischen Kriterium der "Steuerbarkeit" nach DIN EN ISO 9241-10 sollten daher verschiedene Navigationsarten angeboten werden. In der Praxis haben sich die folgende Verfahren bewährt:

Navigation über hierarchisch strukturierte Menüs:
Diese Art der Navigation ist von Oberflächen heutiger Windows oder Mac-Programme her bekannt. Auch im Internet ist sie zu finden, wenngleich nicht ganz einfach zu realisieren. Das Beispiel entstammt der Website der Microsoft Corp.:

Microosft Menueleiste

Der hierarchische, verzeichnisorientierte Zugang:
Die Informationen sind wie oben verschiedenen Kategorien zugeordnet und in mehrere Hierarchiestufen gegliedert. Der Zugriff erfolgt über hierarchisch angeordnete Verzeichnisseiten. Dieses Verfahren wird in ergo-online eingesetzt. Zum Anzeigen des Beispiels hier klicken.
Das Explorer-Modell
ist eine Variante des hierarchischen, verzeichnisorientierten Zugangs. Es wird eine Bedienungsoberfläche angeboten, die dem von Windows her bekannten Programm "Explorer" zum Auffinden und Verwalten von Dateien ähnlich ist. Das Beispiel unten stammt wieder von ergo-online:

ergo-online Explorer

Der visuelle Einstieg:
Die Nutzer können, indem sie mit der Maus in einem Bild (einer sog. Imagemap) auf bestimmte Gegenstände oder Bereiche klicken, einen Link aktivieren und so die nächste Seite auswählen. Auch dieses Verfahren kann am Beispiel von ergo-online verdeutlicht werden: hier klicken.
Das alphabetische Lexikon:
Alle Dokumente sind auch über eine alphabetisch sortierte Liste, quasi in Form eines Lexikons, aufzufinden. Auch das alphabetische Lexikon haben wir in ergo-online realisiert: hier klicken.
Die Suchfunktion:
Insbesondere bei umfangreichen Websites kann es aufwendig sein, die gewünschten informationen zu finden. In diesem Fall sollte ein gezielter Zugang über eine Schlagwortsuche angeboten werden, wie im Prinzip von jeder Suchmaschine her bekannt:

ergo-online Suche

OROT.GIF (860 Byte) Wie Links gestalten?
Damit Hyperlinks eine zielgerichtete Navigation ermöglichen, sollten sie eine Reihe wichtiger Anforderungen erfüllen:
  • Ein Link in Textform sollte eine möglichst genaue Beschreibung des Zielobjektes beinhalten. Aus der aussagekräftigen Bezeichnung sollte eindeutig hervorgehen, welche Informationen am Ziel angeboten werden.
  • Der inhaltlich relevanteste Teil des Textes sollte als Link-Text verwendet werden. Beispielsweise ist "Weiter? hier klicken!" kein geeigneter Text für einem Link. Besser und inhaltlich prägnanter wäre "Zur Vertiefung zum Thema XY".
  • Für grafisch gestaltete Links, z.B. in Form eines Schalters, gilt dies entsprechend. Wichtig ist eine aussagekräftige Beschriftung und - falls erforderlich - ein zusätzlicher beschreibender Text. Auch die Möglichkeit, einen alternativen Text mit einer Beschreibung des Zielobjekts bei Grafiken anzugeben (ALT-Option bei Hyperlinks in HTML), sollte genutzt werden. Fährt der Anwender mit der Maus über eine solche Grafik, wird dieser Hilfstext eingeblendet. (Zum Ausprobieren: Mit der Maus auf die ergo-online Schalterleiste links zeigen.)
  • Grafische Links können auch durch Javascript besonders hervorgehoben werden, falls der Nutzer mit der Maus darüberfährt oder die Grafik anklickt.
    Beispiel (mit der Maus darüber fahren):  Link zum Inhaltsverzeichnis des WebangebotsLink zur Einstiegsseite des Webangebots
  • Führt ein Link zu einem unerwarteten Datenformat wie einem Acrobat PDF-Dokument oder zu einer unerwarteten Aktion wie dem Download eines Word-Dokuments, so sollte dies durch ergänzenden Text oder ein besonderes grafisches Symbol kenntlich gemacht werden.
OROT.GIF (860 Byte) Orientierung bieten
Zur Vermeidung des "Lost-in-Hyperspace"-Phänomens empfiehlt es sich, dem Benutzer auf jeder Seite einige hilfreiche Informationen zur Orientierung anzubieten:
  • Welche Informationen werden angeboten?
    Dies sollte aus der Überschrift des Dokuments hervorgehen und auch im TITLE-Tag in HTML hinterlegt sein.
  • An welcher Position in der Menühierarchie befinde ich mich?
    Dies ist z.B. beim oben erwähnten Explorermodell gut sichtbar, sofern die Verzeichnisstruktur in einem eigenen Frame dargestellt wird. Eine weitere Möglichkeit sind sog. Backtracking-Listen, wie sie die Website des Verlages Ziff Davis (www.zdnet.de) enthält:

Backtracking-Liste

  • Welche Navigationswege sind vom gerade angezeigten Dokument aus sinnvoll?
    Zur Unterstützung sollten am Ende jeder Seite die wichtigsten Links stehen, z.B. zum nächsten übergeordneten Menü und zum obersten Menü.
OROT.GIF (860 Byte) Online-Hilfe
Da selbst die ergonomischste Bedienungsoberfläche in der Regel nicht vollständig selbsterklärend ist, sollte auch eine Website eine Online-Hilfe anbieten, die möglichst gut inhaltlich strukturiert ist, so daß man schnell die gesuchte Hilfestellung findet.
Weiterlesen
Ergonomische Gestaltung von WWW-Seiten

e_pblau.gif (936 Byte) Einleitung und Überblick

e_pblau.gif (936 Byte) Gestaltung und Konsistenz

e_pblau.gif (936 Byte) Inhalt und Länge der Dokumente

e_pblau.gif (936 Byte) Lesbarkeit und Typografie

e_pblau.gif (936 Byte) Grafiken und Multimedia

e_pblau.gif (936 Byte) Browser und Testen

Verwandte Themen

e_pblau.gif (936 Byte) Grundwissen: Software-Ergonomie

e_pblau.gif (936 Byte) Grundsätze der Software-Ergonomie gemäß DIN EN ISO 9241-10

e_pblau.gif (936 Byte) Ergonomische Dialoggestaltung: Menüs und Tabwege

Vertiefung Externer Link:

Harald Weinreich (Universität Hamburg, Fachbereich Informatik)
10 wichtige Leitlinien für die Gestaltung eines ergonomischen WWW-Informationssystems
Hamburg 1997
(Enthält auch vertiefende Literaturhinweise)

Förderung Die Erstellung dieser Seite wurde gefördert vom RKW und der Gewerkschaft HBV.

© (1999)   Projekt ergo-online Gesellschaft
Arbeit und Ergonomie -online
e.V.
Kontakt zum Autor: 
Letzte Änderung: 
Lothar Bräutigam
19.12.1999

[ Seitenanfang ]    [ Menü Software-Ergonomie ]  [ Inhaltsverzeichnis ]  [ Startseite ]