Inhaltsverzeichnis

1.  Einleitung  1

1.1.  Motivation und Ziel  1

1.2.  Beispiele für interaktive Menüsysteme  2

1.3.  Gliederung der Arbeit  3

2.  Grundlagen und Begriffsklärung  5

2.1.  Grafische Benutzerschnittstellen (GUIs)  5

2.1.1.  Definition  5

2.1.2.  Historische Entwicklung  6

2.1.3.  Normen und Style Guides  8

2.2.  Menüs  10

2.2.1.  Definition  10

2.2.2.  Menüarten und inhaltliche Abgrenzung  10

2.2.3.  Normen und Style Guides  12

2.3.  Einsatz von Menüsystemen in HTML-Applikationen  13

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

2.3.2.  Entwicklung von Navigationsarten  14

2.3.3.  Arbeitsdefinition „interaktives Menüsystem“  17

3.  Kriterien und Anforderungen  19

3.1.  Grundlagen  19

3.1.1.  Benutzerführung technischer Geräte  19

3.1.2.  Zielgruppen und Anforderungsebenen  20

3.1.3.  Überblick der Anforderungskategorien  20

3.2.  Usability  21

3.2.1.  Begriffsdefinition und Usability im Navigationskontext  21

3.2.2.  Einschränkungen der Anwendbarkeit  27

3.2.3.  Ansätze zur Usability-Quantifizierung  28

3.2.4.  Zusammenfassung der Anforderungen  30

3.3.  Barrierefreiheit  31

3.3.1.  Begriffsdefinition  31

3.3.2.  Gesetze und offizielle Regulierungen  32

3.3.3.  Technische Lösungen und Anwender-Tools  38

3.3.4.  Auswahl und Erklärung der Anforderungen  40

3.3.5.  Überprüfung von Barrierefreiheit  43

i

Inhaltsverzeichnis

3.3.6.  Zusammenfassung der Anforderungen  44

3.4.  Anpaßbarkeit, Integrierbarkeit und Gestaltung  44

3.4.1.  Begriffsdefinitionen und Erläuterungen  44

3.4.2.  Zusammenfassung der Anforderungen  49

3.5.  HTML und Standards  50

3.5.1.  Begriffsdefinition und Grund für Standards  50

3.5.2.  Technische Anforderungen  51

3.5.3.  Browsererweiterungen / Plugins  57

3.5.4.  Zusammenfassung der Anforderungen  58

3.6.  Beschreibung einer Referenzlösung  58

3.7.  Zusammenfassung des Anforderungskatalogs  59

4.  Marktübersicht und Bewertung  63

4.1.  Übersicht und Auswahl  63

4.1.1.  Marktsituation  63

4.1.2.  Übersicht der zu betrachtenden Lösungen  64

4.1.3.  Auswahl der Testkandidaten  65

4.2.  Anwendung des Anforderungskatalogs  66

5.  Referenzlösung  77

5.1.  Ergebnisse der Bewertung  77

5.2.  Technische Details und Optimierungen  78

6.  Fazit  85

Literaturverzeichnis   87

Onlinequellen   91

A.  Gesamtübersicht des Anforderungskatalogs  93

B.  Quellcode der Referenzlösung  97

C.  Mailinglisten, Newsgroups und Weblogs  101

D.  Zur verwendeten Rechtschreibung  103

ii

Abbildungsverzeichnis   

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

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

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

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

2.1.  GUI des Xerox Star (Quelle: Lin05 )  7

2.2.  GUI des Apple Macintosh (Quelle: Lin05 )  8

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

Windows  XP)  11

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

2.5.  Einfache Textverlinkung  15

2.6.  Navigation mit Frame-Menü  15

2.7.  Navigation mit CSS-basierendem Menüsystem  16

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

3.2.  Browser-Marktanteile im deutschsprachigen Raum  56

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

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

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

4.4.  ADxMenu, Demo (Quelle: Vac05a )  72

4.5.  CoolMenus, Demo (Quelle: Bra02 )  74

iii

Abbildungsverzeichnis

iv

Tabellenverzeichnis   

A.1.  Anforderungen im Bereich Standards  93

A.2.  Anforderungen im Bereich Usability  93

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

tung   94

A.4.  Anforderungen im Bereich Barrierefreiheit  95

v

Tabellenverzeichnis

vi

viii

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. Waren 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 erhä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 Zusammenfassung 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 Angebots 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)

¹ Mensch, der viel Zeit „im Internet“ verbringt

1

1. Einleitung

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 hinaus, die einen Überblick über das Informationsangebot einer Webseite bieten und sich gleichzeitig in die Gestaltung der jeweiligen Webseite oder Anwendung perfekt einfügen.

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.

2

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. Kriterienkatalog 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 1.2.: Mehrstufige vertikale Navigation auf http://www.alg.de/

3

1.  Einleitung  

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

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

4

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. Applikationen 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 Befehlssprache wieder, über die der Anwender das System steuert (Kommandozeile, „command line interface“), sondern über dargestellte grafische Elemente und Sinnbilder, 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 Metaphern 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

5

2. Grundlagen und Begriffsklärung

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:

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

¹ Windows, Icons, Menus, Pointers

² offizielle Bezeichnung „Xerox 8010 Information System“

6

Heimcomputer und PCs) statt, die jeweils Funktionalitäten im Bereich der Fenster-Metapher 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.

7

2. Grundlagen und Begriffsklärung

Auf eine ausführlichere Beschreibung der geschichtlichen Entwicklung grafischer Oberflächen soll hier allerdings aus naheliegenden Gründen verzichtet und statt dessen 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 herausgegebenen „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 Manipulation“ (die mit dem Status einer europäischen Norm eher die inhaltlichen Anforde-

8

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 Benutzer 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 beinhalten 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 Windows-Oberflä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.

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

2. Grundlagen und Begriffsklärung

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

• 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;

10

2.2.  Menüs  

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

Windows  XP)  

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

11

2. Grundlagen und Begriffsklärung

• lineare Abfolgen von Menüs;

• (die am weitesten verbreitete Gruppe) Menüsysteme mit Baumstrukturen; sowie

• zyklische und azyklische Menüs.

Innerhalb dieser Gruppen lassen sich Menüs desweiteren anhand zahlreicher struktureller 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 Betrachtung mit HTML-basierten Applikationsoberflächen als Ziel wird in dieser Arbeit also vorerst folgende Definition als generell sinnvoll für ein „Menü“ betrachtet:

Es erscheint sinnvoll, diese Definition im weiteren Verlauf noch spezieller zu formulieren, 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

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-

12

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 Einleitung (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 Anwendungen 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

13