Interaktionen in HTML-basierten Applikationsoberflächen

Inhaltsverzeichnis

1. Einleitung
1.1. Motivation und Ziel
1.2. Beispiele für interaktive Menüsysteme
1.3. Gliederung der Arbeit

2. Grundlagen und Begriffsklärung
2.1. Grafische Benutzerschnittstellen (GUIs)
2.1.1. Definition
2.1.2. Historische Entwicklung
2.1.3. Normen und Style Guides
2.2. Menüs
2.2.1. Definition
2.2.2. Menüarten und inhaltliche Abgrenzung
2.2.3. Normen und Style Guides
2.3. Einsatz von Menüsystemen in HTML-Applikationen
2.3.1. Gründe für Menüsysteme als Navigation
2.3.2. Entwicklung von Navigationsarten
2.3.3. Arbeitsdefinition „interaktives Menüsystem“

3. Kriterien und Anforderungen
3.1. Grundlagen
3.1.1. Benutzerführung technischer Geräte
3.1.2. Zielgruppen und Anforderungsebenen
3.1.3. Überblick der Anforderungskategorien
3.2. Usability
3.2.1. Begriffsdefinition und Usability im Navigationskontext
3.2.2. Einschränkungen der Anwendbarkeit
3.2.3. Ansätze zur Usability-Quantifizierung
3.2.4. Zusammenfassung der Anforderungen
3.3. Barrierefreiheit
3.3.1. Begriffsdefinition
3.3.2. Gesetze und offizielle Regulierungen
3.3.3. Technische Lösungen und Anwender-Tools
3.3.4. Auswahl und Erklärung der Anforderungen
3.3.5. Überprüfung von Barrierefreiheit
3.3.6. Zusammenfassung der Anforderungen
3.4. Anpaßbarkeit, Integrierbarkeit und Gestaltung
3.4.1. Begriffsdefinitionen und Erläuterungen
3.4.2. Zusammenfassung der Anforderungen
3.5. HTML und Standards
3.5.1. Begriffsdefinition und Grund für Standards
3.5.2. Technische Anforderungen
3.5.3. Browsererweiterungen / Plugins
3.5.4. Zusammenfassung der Anforderungen
3.6. Beschreibung einer Referenzlösung
3.7. Zusammenfassung des Anforderungskatalogs

4. Marktübersicht und Bewertung
4.1. Übersicht und Auswahl
4.1.1. Marktsituation
4.1.2. Übersicht der zu betrachtenden Lösungen .
4.1.3. Auswahl der Testkandidaten
4.2. Anwendung des Anforderungskatalogs

5. Referenzlösung
5.1. Ergebnisse der Bewertung
5.2. Technische Details und Optimierungen

6. Fazit

Literaturverzeichnis

Onlinequellen

A. Gesamtübersicht des Anforderungskatalogs

B. Quellcode der Referenzlösung

C. Mailinglisten, Newsgroups und Weblogs

D. Zur verwendeten Rechtschreibung

Abbildungsverzeichnis

1.1. Mehrstufige horizontale Navigation auf http://www.m-audio.de/

1.2. Mehrstufige vertikale Navigation auf http://www.alg.de/

1.3. Einstufige horizontale Navigation auf http://www.blender3d.org/

1.4. Einstufige vertikale Navigation auf http://www.dasmagazin.de/

2.1. GUI des Xerox Star (Quelle: [Lin05])

2.2. GUI des Apple Macintosh (Quelle: [Lin05])

2.3. Mehrstufig-hierarchisches Pull-Down-Menü (Microsoft Word 2003, Windows XP)

2.4. Mehrstufiges Pop-Up-Menü (Acrobat Reader 7.0, Windows XP)

2.5. Einfache Textverlinkung

2.6. Navigation mit Frame-Menü

2.7. Navigation mit CSS-basierendem Menüsystem

3.1. Die „vier Ws der Benutzerführung“ (Quelle: [Die02])

3.2. Browser-Marktanteile im deutschsprachigen Raum

4.1. „Suckerfish“-Menü, Demo (Quelle: [GW03])

4.2. Menü von tanfa.co.uk, Demo (Quelle: [Cam05])

4.3. Menü von gazingus.org, Demo (Quelle: [Lin03])

4.4. ADxMenu, Demo (Quelle: [Vac05a])

4.5. CoolMenus, Demo (Quelle: [Bra02])

Tabellenverzeichnis

A.1. Anforderungen im Bereich Standards

A.2. Anforderungen im Bereich Usability

A.3. Anforderungen im Bereich Anpaßbarkeit, Integrierbarkeit und Gestal- tung

A.4. Anforderungen im Bereich Barrierefreiheit

„nicht nicht kommunizieren gilt nicht.“ [-monochrom.at]

1. Einleitung

1.1. Motivation und Ziel

Als bekennender „Netizen“¹bemerkte ich im Lauf der letzten Jahre einen deutlichen Anstieg der Komplexität verschiedenster Internetangebote, speziell Webseiten. Wa- ren vor rund zehn Jahren die meisten Präsenzen im Netz noch überschaubar und entsprechend einfach vom Benutzer zu erfassen, so begann spätestens im Jahr 2001 eine wahre „Inhaltsexplosion“ im World Wide Web. Ehemals ausschließlich offline er- hältliche Inhalte wurden online gebracht, Datenbanken wurden für die Nutzung via Internet aufbereitet und ganz allgemein ging der große „Run“ auf das WWW insofern weiter, als nun auch viele speziellere Nischenthemen abrufbar sein sollten.

Diese Informationsflut brachte es mit sich, daß die jeweiligen Angebote nicht mehr mit nur drei bis fünf Kategorien zur Auswahl auf einer Startseite auskamen, sondern der Gesamtüberblick über all diese Angebote dargestellt und benutzbar gemacht werden mußte. Bedeutete „Navigation“ anfangs noch eine möglichst ergonomische Zusam- menfassung von Links zu allen verfügbaren Seiten an einer unauffälligen Stelle des Internet-Angebots, so lief die Entwicklung schnell über Experimente mit Farben und Animationen und teilweise fast unbenutzbaren Spielereien auf proprietärer Basis hin zu dem Bewußtsein, daß eine Navigation eines der wichtigsten Elemente eines Ange- bots darstellt und daher so „benutzbar“ wie möglich sein sollte. Diese Benutzbarkeit umfaßt dabei sowohl eine technische als auch eine inhaltliche Ebene.

Herausforderung an den Softwareentwickler ist es also nun, für den Teilbereich der Navigation einer auf HTML basierenden Applikation eine technisch einwandfreie Lö- sung zur Verfügung zu stellen, die verschiedensten Anforderungen (siehe Kapitel 3) genügt. Dafür einen überprüfbaren Kriterienkatalog zu entwickeln, der in der Praxis Anwendung finden soll, soll Hauptaufgabe dieser Arbeit sein.

Nachfolgend zeige ich eine kurze Auswahl verschiedener im WWW eingesetzter Navigationslösungen und gebe einen Überblick über den Aufbau dieser Arbeit.

1.2. Beispiele für interaktive Menüsysteme

Mit einem interaktiven Menüsystem ist eine dem Benutzer vertraute Art der Navigation gemeint, nämlich eine, die der Navigation betriebssystemnaher Applikationen ähnelt. Der Benutzer ist an die Bedienung bereits gewöhnt, die Navigation wird dadurch intuitiv bedienbar.

Im konkreten Fall läuft dies meist auf hierarchisch organisierte Menüstrukturen hin- aus, die einen Überblick über das Informationsangebot einer Webseite bieten und sich gleichzeitig in die Gestaltung der jeweiligen Webseite oder Anwendung perfekt einfügen.

Abbildung in dieser Leseprobe nicht enthalten

Abbildung 1.1.: Mehrstufige horizontale Navigation auf http://www.m-audio.de/

Diese Navigationen, von denen hier einige Beispiele zu sehen sind, können horizontal (Abbildungen 1.1 und 1.3) oder vertikal (Abbildungen 1.2 und 1.4) angeordnet oder auf unterschiedlichste Weise optisch gestaltet sein.

1.3. Gliederung der Arbeit

In Kapitel 2 werden die Grundlagen und Begriffsdefinitionen von grafischen Oberflä- chen, Menüs und Navigationssystemen dargestellt, um das zu untersuchende Objekt inhaltlich abzugrenzen. In Kapitel 3 wird spezieller auf die einzelnen Anforderungen in verschiedenen Kategorien eingegangen und ein Anforderungs- bzw. Kriterienkata- log erstellt, anhand dessen einzelne Navigationslösungen auf ihre Praxistauglichkeit überprüft werden können.

Kapitel 4 zeigt eine kleine Marktübersicht der verschiedenen fertigen Lösungen und wendet darauf jeweils den entwickelten Anforderungskatalog an, um so in Kapitel 5 zu einer „Referenzlösung“ zu gelangen, deren Details dann erläutert und gegebenenfalls angepaßt und präsentiert werden. In Kapitel 6 schließlich gebe ich als Fazit eine abschließende Beurteilung sowohl der Marktsituation als auch der Ergebnisse in diesem Bereich insgesamt.

Abbildung in dieser Leseprobe nicht enthalten

Abbildung 1.2.: Mehrstufige vertikale Navigation auf http://www.alg.de/

Abbildung in dieser Leseprobe nicht enthalten

Abbildung 1.3.: Einstufige horizontale Navigation auf http://www.blender3d.org/

Abbildung in dieser Leseprobe nicht enthalten

Abbildung 1.4.: Einstufige vertikale Navigation auf http://www.dasmagazin.de/

2. Grundlagen und Begriffsklärung

2.1. Grafische Benutzerschnittstellen (GUIs)

2.1.1. Definition

Mit dem Oberbegriff „graphical user interface“ (grafische Benutzerschnittstelle, GUI) wird eine Schnittstelle zwischen Benutzer und technischen Systemen bzw. Applika- tionen bezeichnet, die aus der Notwendigkeit heraus entstand, die Bedienbarkeit und die Rückmeldungen solcher Systeme einfacher und somit intuitiver zu gestalten. Die Interaktion mit dem Benutzer findet sich hier nicht in Form beispielsweise einer Be- fehlssprache wieder, über die der Anwender das System steuert (Kommandozeile, „command line interface“), sondern über dargestellte grafische Elemente und Sinnbil- der, mit denen der Benutzer anhand eines Steuergeräts (meist einer Maus, seltener auch eines Grafiktabletts) die gewünschte Aktion auslösen oder die gewünschte In- formation abfragen kann.

Dies wird bei einer GUI durch den Einsatz von Metaphern erreicht, die Objekte aus der wirklichen Welt darstellen sollen, um dem Benutzer eine schnelle Einarbeitung und effiziente Bedienung der jeweiligen Applikation zu ermöglichen. Zu diesen Me- taphern gehören beispielsweise hierarchische Verzeichnisstrukturen, der sogenannte „Desktop“ oder die Benutzung von „Fenstern“. Die Abstraktion einer Aktion bzw. Handlung auf eine passende GUI-Metapher macht dabei eine gute Oberfläche aus.

Ziel der Steuerung einer Anwendung über eine GUI ist vor allem deren leichtere und schnellere Erlernbarkeit und, laut [Wes02], die daraus resultierende Steigerung der Effektivität, Effizienz und Zufriedenstellung vor allem bei unerfahrenen Benutzern. Im Gegensatz zur Kommandozeile, mit der eine spezifischere und unmittelbarere Steuerung möglich ist, ist die Benutzung einer GUI allerdings mit einer gewissen Mittelbarkeit verbunden. Das Erlernen einer Kommandosprache wird nicht mehr nötig, dafür muß der Benutzer mit Einschränkungen seiner Möglichkeiten leben. Vor die Wahl gestellt, wird einem Experten die Benutzung einer Applikation über eine Kommandozeile leichter fallen, ein Anfänger oder ein durchschnittlich erfahrener Benutzer wird sich für die Steuerung über eine GUI entscheiden.

Wilbert O. Galitz faßt in [Gal02] die Funktion einer GUI anschaulich zusammen:

A user interface (...) is a collection of techniques and mechanisms to interact with something. In a graphical interface, the primary interaction mechanism is a pointing device of some kind. This device is the electronic equivalent of the human hand. What the user interacts with is a collection of elements referred to as objects. They can be seen, heard, touched or otherwise perceived. Objects are always visible to the user and are used to perform tasks. They are interacted with as entities independent of all other objects. People perform operations, called actions, on objects. The operations include accessing and modifying objects by pointing, selecting, and manipulating. All objects have standard resulting behaviour.

2.1.2. Historische Entwicklung

Erste grafische Benutzeroberflächen wurden in den siebziger Jahren entwickelt. Das bei Xerox PARC entwickelte System WIMP¹kam erstmals 1981 am Xerox Star²zum Einsatz (vgl. Abbildung 2.1) und wird als erster öffentlicher und kommerzieller Auftritt einer grafischen Oberfläche angesehen. Der Apple Macintosh aus dem Jahr 1984 war schließlich einer der ersten auch kommerziell erfolgreichen Rechner, die mit einer GUI zur Bedienung ausgeliefert wurden (vgl. Abbildung 2.2). Hier wurden der sogenannte Desktop und der Papierkorb als Metaphern eingeführt, sowie die zu diesem Zeitpunkt innovativen Drop-Down-Menüs.

Im Lauf der folgenden Monate fanden Weiterentwicklungen grafischer Oberflächen in Form von DESQview (MS-DOS), GEM (Atari ST) oder GEOS (verschiedene

Abbildung in dieser Leseprobe nicht enthalten

Abbildung 2.1.: GUI des Xerox Star (Quelle: [Lin05])

Heimcomputer und PCs) statt, die jeweils Funktionalitäten im Bereich der FensterMetapher oder der Bedienung mit einer Maus verbesserten, bevor 1985 Microsoft Windows in der Version 1.0, nach dem Vorbild der Macintosh-Oberfläche gestaltet, erschien. Mit der Veröffentlichung von Windows 3.0 gelang der grafischen Benutzeroberfläche 1990 die Durchsetzung auf dem Markt. Nicht zuletzt dank ihr erzielte Microsoft beträchtliche kommerzielle Erfolge.

Heutzutage kann der Bereich der GUIs grob mit den drei großen Varianten

- OS X (Macintosh);
- Windows (Microsoft); und
- X Window System (Unix-Welt)

unterschieden werden. Innovationen oder Entwicklungen im Bereich BeOS oder OS/2 finden praktisch nicht mehr statt.

Abbildung in dieser Leseprobe nicht enthalten

Abbildung 2.2.: GUI des Apple Macintosh (Quelle: [Lin05])

Auf eine ausführlichere Beschreibung der geschichtlichen Entwicklung grafischer Oberflächen soll hier allerdings aus naheliegenden Gründen verzichtet und statt des- sen auf die umfassenderen Darstellungen von Marcin Wichary [Wic05] und Jeremy Reimer [Rei05] sowie Gerhard Erich Mischnitz [Mis05] hingewiesen werden.

2.1.3. Normen und Style Guides

Maßgeblich für das Design grafischer Oberflächen sind einerseits internationale und nationale Normen und Standards sowie die von den jeweiligen Herstellern herausge- gebenen „Style Guides“, die festlegen, welche Elemente der grafischen Schnittstelle in welcher Form und an welcher Stelle einer Applikation zu verwenden sind. Auch damit soll die Bedienung von Anwendungen einfacher gestaltet werden. Der Anwender kann Vorwissen einsetzen, Anwendungen lassen sich vergleichbar bedienen und reagieren erwartungsgemäß, und nicht zuletzt können auf diesem Weg die Entwicklungskosten auf Herstellerseite minimiert werden.

Die hierzulande gültige DIN EN ISO 9241-16 „Ergonomische Anforderungen für Bü- rotätigkeiten mit Bildschirmgeräten - Teil 16: Dialogführung mittels direkter Mani- pulation“ (die mit dem Status einer europäischen Norm eher die inhaltlichen Anforde- rungen an eine grafische Schnittstelle anstatt technischer Details beschreibt) definiert den Begriff GUI in [DIN99c] u.a. folgendermaßen:

Bei der Dialogführung mittels direkter Manipulation bearbeitet der Be- nutzer die auf dem Bildschirm dargestellten Objekte direkt, z.B. indem er mit Hilfe eines Zeigeinstruments auf sie zeigt, sie verschiebt und/oder ihre physikalischen Eigenschaften (oder Werte) verändert. (...) In der Praxis wird die Bezeichnung direkte Manipulation häufig mit der Bezeichnung grafische Benutzungsschnittstelle (GUI) gleichgesetzt. Allerdings beinhal- ten GUIs häufig zusätzliche Dialogtechniken wie Menüführung oder Kom- mandoeingaben.

Um den inhaltlichen Rahmen dieses Abschnitts nicht zu sprengen, sei hier auf einige der wichtigsten Style Guides hingewiesen, die weniger allgemein den Begriff der grafischen Schnittstelle definieren, sondern speziell für die jeweilige Entwicklungsumgebung auf technische Details eingehen:

- der „Leitfaden zur Softwaregestaltung“ von Microsoft ([Mic95a] bzw. [Mic95b]), der die Anforderungen an eine Anwendungsgestaltung für die WindowsOberfläche im Detail erklärt;
- das Pendant von Apple namens „Apple Human Interface Guidelines“ ([App05]); sowie
- die „GNOME Human Interface Guidelines“ ([The04]), die in der Unix-Welt eine vergleichbare Bedeutung haben und den „Motif and Common Desktop Environment Style Guide“³weitgehend in seiner Wichtigkeit ersetzt haben.

2.2. Menüs

2.2.1. Definition

Während die bisherigen Betrachtung über GUIs eher im Bereich der generellen Oberflächenentwicklung und meist in Hinblick auf Betriebssystem- und Anwendungssteuerung zu sehen waren, muß bei der Definition des Begriffs „Menü“ eine Ebene tiefer angesetzt werden. Unabhängig von der jeweils vorliegenden Art eines Menüs, auf die in Abschnitt 2.2.2 näher eingegangen wird, kann der Menübegriff sowohl im technischen bzw. IT-Sprachgebrauch als auch im täglichen Leben, beispielsweise als Menü in einem Restaurant, mit „Auswahlliste“ umschrieben werden.

In Hinblick auf grafische Schnittstellen schließlich kann als Menü bezeichnet werden: die Darstellung verschiedener Alternativen, aus denen der Benutzer eine oder mehrere der angebotenen Optionen mit einem geeigneten Hilfsmittel (Maus, Tastatur, Spracheingabe, ..) auswählen und dadurch eine Aktion veranlassen kann.

2.2.2. Menüarten und inhaltliche Abgrenzung

Nach [Zie93] und [Ebe98] lassen sich Menüarten anhand ihrer Form unterscheiden:

- Pull-Down- bzw. Kaskaden-Menüs (vgl. Abbildung 2.3), meist in Form einer feststehenden Menüleiste mit sich öffnenden hierarchisch, linear oder heterarchisch organisierten Untermenüs;
- Pop-Up-Menüs (vgl. Abbildung 2.4), die an beliebigen Stellen auf dem Bildschirm erscheinen können; sowie
- seltenere Formen, z.B. Tool-Palette oder Tear-Off- bzw. Push-Pin-Menüs.

Ben Shneiderman [Shn02] unterteilt Menüs in vier Gruppen:

- einzelne Menüs;

Abbildung in dieser Leseprobe nicht enthalten

Abbildung 2.3.: Mehrstufig-hierarchisches Pull-Down-Menü (Microsoft Word 2003, Windows XP)

Abbildung in dieser Leseprobe nicht enthalten

Abbildung 2.4.: Mehrstufiges Pop-Up-Menü (Acrobat Reader 7.0, Windows XP)

- lineare Abfolgen von Menüs;
- (die am weitesten verbreitete Gruppe) Menüsysteme mit Baumstrukturen; so- wie
- zyklische und azyklische Menüs.

Innerhalb dieser Gruppen lassen sich Menüs desweiteren anhand zahlreicher struk- tureller Eigenschaften voneinander abgrenzen: Größe des Menüs bzw. Anzahl der Auswahlmöglichkeiten, Anzahl der gleichzeitig möglichen Wahlen, Darstellungsart der Items (sprachlich, symbolisch). Der Menübegriff ist demnach sehr unscharf und kann je nach Anforderungen weiter oder enger gefaßt werden. Für eine weitere Be- trachtung mit HTML-basierten Applikationsoberflächen als Ziel wird in dieser Arbeit also vorerst folgende Definition als generell sinnvoll für ein „Menü“ betrachtet:

Ein Menü ist eine grafisch darstellbare und hierarchisch organisierte Auswahlmöglichkeit aus verschiedenen Optionen.

Es erscheint sinnvoll, diese Definition im weiteren Verlauf noch spezieller zu formulie- ren, um eine Vergleichbarkeit der verschiedenen Navigationslösungen gewährleisten zu können.

2.2.3. Normen und Style Guides

Die DIN EN ISO 9241-14 definiert den Menübegriff in [DIN99b] als

Gruppe auswählbarer Optionen (...), [die] dem Benutzer durch Mittel der visuellen Darstellung (als Text oder Symbol) oder als Sprachausgabe angeboten werden. Ein Menü kann verschiedene Gruppen von Optionen enthalten; wenn über alle Gruppen hinweg nur eine einzige Auswahl getroffen werden kann, so ist es als ein Menü zu behandeln, andernfalls wäre jede Gruppe als ein Menü zu behandeln.

Die in Abschnitt 2.1.3 genannten Style Guides gehen auch hier wiederum nicht auf den Begriff als solchen näher ein, sondern beschreiben vielmehr speziell die Gestal- tung einzelner Menüs und Menüpunkte oder nennen Beispiele der bereits erwähnten Grundtypen (Drop-Down-Menü, Pop-Up-Menü).

In Hinblick auf die Anforderungen einer typischen HTML-Applikation muß der Begriff „Menü“ daher weiter gefaßt werden: das „interaktive Menü“, das die Applikation steuerbar machen soll, ist mit dem Begriff „interaktive Navigationslösung“ (oder bildlicher: „interaktives Menüsystem“) treffender beschrieben. Diese Bezeichnung wird im folgenden Abschnitt genauer untersucht.

2.3. Einsatz von Menüsystemen in HTML-Applikationen

2.3.1. Gründe für Menüsysteme als Navigation

Das Menüsystem einer Applikation ist als elementar und wichtig anzusehen, da kaum eine Anwendung noch so einfach gebaut ist, um ohne eine solche Navigation (sondern statt dessen mit einfachen Dialogen und Abfragen) auszukommen. Susan Fowler weist in [Fow98] darauf hin, daß einem Menüsystem - gleich nach dem Hauptzweck einer Applikation - die zweitwichtigste Aufgabe innerhalb einer Anwendung zukommt.

Der Sonderfall der HTML-Applikation ist heutzutage inhaltlich vergleichbar komplex aufgebaut wie eine „stand-alone“-Applikation: wie anhand einiger Beispiele in der Ein- leitung (Abschnitt 1.2) erkennbar, sind Informationsangebote im Internet kaum noch mit „Vor“- und „Zurück“-Links bedienbar. Auch entsprechende Intranet-Anwendungen bzw. auf HTML basierende Applikationen ganz allgemein bilden mittlerweile häufig ehemals für ein spezielles Betriebssystem programmierte und lokal ausgeführte An- wendungen im Browser ab, so daß sie universeller einsetzbar werden.

Die Vielfalt der vorhandenen Browserumgebungen, in denen die Applikation (und somit auch deren Navigation) funktionieren muß, ist hierbei problematisch (wie in Kapitel 3 noch zu sehen sein wird). Sofern die Anwendung nicht auf ein sehr speziell definiertes Intranet mit exakt festgelegten Browsertypen und -versionen ausgelegt sein soll, so ist die Hauptanforderung an die Anwendung und damit auch an deren Menüsystem eine größtmögliche Kompatibilität zu allen denkbaren Systemen, auf denen die Anwendung funktionieren soll. Dies muß durch die Einhaltung von Stan- dards, aber auch durch das Umgehen bekannter Browser-Bugs (vgl. Abschnitt 3.5.2) geschehen.

Wie auch in anderen Bereichen der Softwareentwicklung ist auch hier eine Modularisierung sinnvoll. Die Wartbarkeit des Programmcodes wird gewährleistet; die Weiterentwicklung einzelner Module kann den jeweiligen Spezialisten überlassen werden, ohne andere Bereiche der Applikation zu gefährden; und nicht zuletzt können etwaige Probleme einfacher gelöst und Inkompatibilitäten leichter entfernt werden. Eine vollständige Kapselung eines Navigationssystems muß also hier das Ziel sein: eine „Toolbox“, die der HTML-Applikation eine Menünavigation zur Verfügung stellt, die alle Anforderungen (vgl. Abschnitt 3.7) erfüllt und gleichzeitig zu einem maximalen Grad an die jeweilige Anwendung anpaßbar bleibt.

2.3.2. Entwicklung von Navigationsarten

Die Navigation in HTML-Applikationen, also vor allem, aber nicht nur Webseiten im Internet, funktioniert typischerweise über sogenannte Hyperlinks, mit denen einzelne Stellen innerhalb eines Dokuments mit anderen Stellen in beliebigen anderen Dokumenten verknüpft werden können. Diese Grundidee des Hypertexts, die eine „Navigation“ durch einen linearen Text hindurch ermöglichte, ist sowohl die Grundvoraussetzung aller anderen Navigationsarten, als auch die eigentliche Schwierigkeit bei der Erstellung einer benutzbaren Navigation.

Einfache Textlinks

Diese Art einer Navigation ist immer noch in stark textlastigen und vor allem wissenschaftlichen Angeboten im Internet zu finden. Einzelne Begriffe oder Sätze werden sinngemäß mit weiterführenden Informationen wie beispielsweise zu Fußnoten, zu einem anderen Abschnitt oder zu externen Informationen versehen. Hierbei findet keinerlei Interaktion im eigentlichen Sinn während der Navigation statt - der Anwender entscheidet sich für eine „Abzweigung“ und folgt dieser.

Abbildung in dieser Leseprobe nicht enthalten

Abbildung 2.5.: Einfache Textverlinkung

Auf die gleiche Art und Weise können rudimentäre Navigationen in Form von Textlinks angefertigt werden. Am Anfang und/oder Ende eines Dokuments kann der Anwender so mit „Zurück“- oder „Weiter“-Links durch das Angebot navigieren oder direkt zu einzelnen Kapiteln/Abschnitten springen. Diese Art der Navigation ist eher als Notbehelf anzusehen, da die eigentliche Navigation oft überhaupt nicht definiert wird und dadurch beim Benutzer für Verwirrung sorgt.

Frames

Mit Einführung der sogenannten Frame-Technik konnte dieses Problem umgangen werden. Bereiche innerhalb des Browsers ließen sich unabhängig voneinander steu- ern. Dies wurde dementsprechend oft für feststehende Navigationen in Form von Links zu den jeweiligen Sinnabschnitten eines Web-Angebots genutzt. Auch hier- bei traten Probleme auf: an einzelnen Stellen ließen sich keine direkten Lesezeichen mehr abspeichern, verschiedene Browsertypen konnten mit der Frame-Technik nichts anfangen, der Navigationsbereich wurde schnell unübersichtlich und unbenutzbar.

Abbildung in dieser Leseprobe nicht enthalten

Abbildung 2.6.: Navigation mit Frame-Menü

Animierte Menüs & JavaScript

Hierarchische und animierte Menüs wurden erstmals mit dem Einsatz von JavaScript möglich. Über auf Anwenderseite ausgeführte Scriptsprachen konnten beim Berühren der Menüpunkte mit dem Mauszeiger Grafikdateien nachgeladen und ausgetauscht werden. Auf diese Weise konnte eine Navigation, wie sie dem Benutzer von nativen Betriebssystemapplikationen bekannt war, im Browser simuliert werden⁴. Der Nach- teil dieser Lösung lag in der Kombination verschiedener Techniken, die relativ kritisch im Einsatz mit verschiedenen Browsertypen und -versionen waren. Die häufig zu se- hende Formulierung „Diese Seite ist optimiert für ..“ entstand nicht zuletzt daraus, daß nicht für jeden denkbaren Browser eine spezielle Navigation bereitgestellt werden konnte.

Cascading Style Sheets (CSS)

Eine vollständige Modularisierung bei gleichzeitiger Maximierung der Cross-Browser- Kompatibilität und verschiedener anderer Probleme wurde durch die Entstehung von Cascading Style Sheets (CSS) möglich. Ganz „im Geiste von HTML“, nämlich Gliederungs- und Auszeichnungssprache - und nicht etwa Darstellungssprache - zu sein, lassen sich mit CSS einzelne Abschnitte visuell und funktional formatieren. Im Gegensatz zu einer Scriptsprache wie JavaScript hat diese Lösung aber den „recommendation status“ des W3C⁵, sollte im Idealfall also als system- und browserübergreifender Standard Gültigkeit besitzen.

Abbildung in dieser Leseprobe nicht enthalten

Abbildung 2.7.: Navigation mit CSS-basierendem Menüsystem

Solcherart aufgebaute Navigationslösungen erfüllen bereits weitgehend die in Ab- schnitt 2.3.1 angesprochenen Anforderungen, d.h. sie sind als Modul einsetzbar, so- mit aktualisier- oder austauschbar und gleichzeitig in der Lage, sowohl technische als auch Usability-Anforderungen zu erfüllen, auf die im folgenden Kapitel detaillierter eingegangen werden soll.

2.3.3. Arbeitsdefinition „interaktives Menüsystem“

Aus diesen Betrachtungen heraus läßt sich für den weiteren Verlauf der Arbeit folgende Arbeitsdefinition für das zu untersuchende Objekt, ein „interaktives Menüsystem“ für HTML-Applikationen, ableiten:

Als interaktives Menüsystem soll im Folgenden eine in einem WebBrowser lauffähige, hierarchisch organisierbare, optisch und inhaltlich frei gestalt- bzw. anpaßbare interaktive Auswahlmöglichkeit verschiedener Optionen zum Zweck der Navigation in einer Anwendung gelten.

Dieser rein inhaltliche Teil der Anforderungen an ein Menüsystem grenzt die Auswahl der zu untersuchenden Lösungen bereits deutlich ab, so daß die auf diese Definition passenden Lösungen nur noch auf technische Merkmale und Anforderungen sowie auf Aspekte der Usability und Barrierefreiheit hin untersucht werden sollen. Dieser Hauptteil des eigentlichen Anforderungskatalogs wird im folgenden Abschnitt aus- führlich behandelt.

[...]

---

¹Mensch, der viel Zeit „im Internet“ verbringt

¹Windows, Icons, Menus, Pointers

²offizielle Bezeichnung „Xerox 8010 Information System“

³http://docs.hp.com/en/B1171-90148/

⁴Oft wird der Einsatz von JavaScript in Kombination mit Cascading Stylesheets und der Anwen- dung des sogenannten Document Object Models (DOM) auch als Dynamic HTML (DHTML) bezeichnet. Dies ist keine neue oder andere Technik, sondern nur eine andere Benennung des gleichen Sachverhalts und soll daher hier nur der Vollständigkeit halber erwähnt werden. Auf DHTML trifft im Normalfall das gleiche zu wie auf alle JavaScript-basierenden Lösungen.

⁵World Wide Web Consortium, http://www.w3.org/, Zusammenschluß mehrerer hundert nam- hafter Firmen der Software-Industrie, höchste Instanz für Entwicklungen im WWW