3.5.5 Graphische Übersicht

Graphische Übersichten gehören sowohl zu den Orientierungs- als auch zu den Navigationshilfen. Sie sind ein wichtiger Bestandteil von Hypertextanwendungen und spielen bei deren Entwicklung eine große Rolle. Daher ist ihnen in dieser Arbeit ein eigenes Kapitel gewidmet.
Die wichtigste Funktion einer graphischen Übersicht ist es, den Benutzern die Struktur des zugehörigen Hypertextes zu verdeutlichen und ihnen den Aufbau eines mentalen Modells zu ermöglichen (Rada 1991, S. 29, De Young 1990, S. 239). Benutzer, die eine Vorstellung von der Struktur des Hypertextes haben, verlieren seltener die Orientierung, da sie sich ihre jeweilige Position im Hypertextnetz bewußt machen können (Bogaschewski 1991, S. 70). Für den Fall, daß dennoch Orientierungsschwierigkeiten auftreten, sollte die graphische Übersicht zu jedem Zeitpunkt und von jedem Knoten aus schnell erreichbar sein. Die graphische Übersicht dient dann als Orientierungshilfe. Wenn die dargestellten Knoten von der Übersicht aus direkt erreichbar sind, indem an die entsprechende Stelle der Graphik geklickt wird, hat die Übersicht gleichzeitig die Funktion einer Navigationshilfe. In verschiedenen Untersuchungen erbrachten Versuchspersonen bessere Leistungen, wenn ihnen eine graphische Übersicht zur Verfügung stand (Billingsley 1982, zit. nach McKnight 1991, S. 80, Hammond und Allinson 1989, zit. nach Nielsen 1990a, S. 134).
Daher wurde auch die Struktur des QM-Handbuchs den Benutzern in einer graphischen Übersicht verdeutlicht. Zur Gestaltung dieser Übersicht ließen sich aus der Literatur zahlreiche Anregungen gewinnen.
In der Literatur werden viele verschiedene Arten von Übersichten vorgestellt, die hier zunächst skizziert werden sollen:

Hypertexte werden meistens als Graphen dargestellt. Dies bedeutet, daß die Knoten durch Kreise oder Kästchen und die Verweise durch Verbindungslinien symbolisiert werden. Je nach der Struktur des Hypertextes ergibt sich dabei z. B. eine netzwerkartige, dreidimensionale oder baumförmige Darstellung (siehe Abb. 3.5.1-1).
Eine Alternative zur Übersicht in Form eines Graphen bietet sich für hierarchisch strukturierte Hypertexte an. Hierarchische Beziehungen können nämlich auch dadurch verdeutlicht werden, daß hierarchietiefere Knoten innerhalb von hierarchiehöheren Knoten dargestellt werden. Man bezeichnet diese Methode als nested set notation (dt. Schachtelmengen) (Feiner 1988, S. 207, Krüger 1990 S. 72). Besonders interessant ist eine Variante, bei der sich die Knoten einer Ebene auch durch ihre Ausrichtung von denen der nächsthöheren und der nächsttieferen Hierarchieebene unterscheiden. Werden z. B. die Knoten der höchsten Ebene als horizontale Rechtecke dargestellt, so werden für die zweite Ebene vertikale Rechtecke gewählt, während die dritte Ebene wiederum horizontal ausgerichtet wird usw.

Abbildung 3.5.5-1: Vergleich zwischen Graph (Hierarchiebaum) und nested set notation (tree map)

Auf diese Weise können große Hierarchien kompakt und platzsparend dargestellt werden, da die gesamte zur Verfügung stehende Fläche ausgenützt wird. So sind in der folgenden Abbildung ca. 120 Knoten dargestellt, die sich über nur vier Hierarchieebenen verteilen.[40] Übersichten dieser Art werden als tree maps bezeichnet (Johnson 1994, zit. nach Rivlin 1994, S. 93f, Fox URL, Lamping URL).

Abbildung 3.5.5-2: tree map (Rivlin 1994, S. 93)

Graphen und tree maps verdeutlichen in ihrer einfachsten Form nur die Struktur eines Hypertextes. Zusätzlich können jedoch auch inhaltliche Aspekte zum Ausdruck gebracht werden. Beispielsweise können wichtige Knoten (Landmarks) größer dargestellt, farblich hervorgehoben oder dicker umrandet werden. Welche Knoten wichtig sind, kann der Autor eines Hypertextes selbst intuitiv festlegen. Es gibt jedoch auch Algorithmen, nach denen die Wichtigkeit eines Knotens berechnet werden kann. Ein Beispiel hierfür ist der Algorithmus von Mukherjea und Hara (Mukherjea 1997, S. 189), nach dem sich die Wichtigkeit eines Knotens daraus ergibt, wie häufig auf ihn zugegriffen wird, welche Position er in der Hierarchie des Dateisystems einnimmt und wie stark er mit anderen Knoten verknüpft ist. Bei der Ermittlung des Verknüpfungsgrades wird sowohl berücksichtigt, wieviele Verweise vom aktuellen Knoten ausgehen (outdegree), als auch, wieviele Verweise zu diesem Knoten führen (indegree).
Eine weitere Möglichkeit, inhaltliche Aspekte in der graphischen Übersicht zum Ausdruck zu bringen, besteht darin, den räumlichen Abstand der Knoten vom "inhaltlichen Abstand" abhängig zu machen: Knoten mit ähnlicher Thematik werden möglichst dicht nebeneinander dargestellt, sofern dies mit strukturellen Aspekten vereinbar ist.
Das Grundproblem bei der Gestaltung graphischer Übersichten besteht darin, daß große Datenmengen auf kleinem Raum dargestellt werden müssen. Die Darstellung wird daher oft sehr komplex und damit unübersichtlich. Sie kann von den Benutzern nicht bzw. nur mit großem Aufwand kognitiv verarbeitet werden (vgl. Abbildung). McKnight bezeichnet solche Darstellungen als "visual spaghetti" (1991, S. 80).

Abbildung 3.5.5-3: visual spaghetti (Teil des QM-Handbuchs - ohne Zoom)

Abbildung 3.5.5-4: visual spaghetti (Teil des QM-Handbuchs - mit Zoom)

Es gibt verschiedene Visualisierungstechniken, mit denen versucht wird, diesem Problem zu begegnen. Zum Beispiel könnte den Benutzern immer nur der Ausschnitt aus der Gesamtübersicht gezeigt werden, der ihren gegenwärtigen Standort umgibt. Weiter entfernt liegende Knoten werden nicht dargestellt. Dieser Ansatz ist allerdings problematisch, da der Gesamtkontext verlorengeht: Die Benutzer erkennen zwar Details ihrer unmittelbaren Umgebung, können jedoch aus der Übersicht nicht ableiten, an welcher Stelle des Hypertextnetzes sie sich befinden (Lamping URL). Wenn Wert auf den Gesamtkontext gelegt wird, sollte das gesamte Netz dargestellt werden. Allerdings muß dann in der Regel auf Details verzichtet werden. Dies kann z. B. dadurch erfolgen, daß die Knoten nur bis zu einer bestimmten Hierarchieebene angezeigt werden. Hierarchietiefe Knoten werden weggelassen ("Subtree Detail Suppression", Feiner 1988, S. 208). Alternativ dazu kann die Wichtigkeit der Knoten nach einem ausgefeilten Algorithmus berechnet werden (s.o.). In die graphische Übersicht werden dann nur wichtige Knoten (Landmarks) aufgenommen. Es besteht natürlich auch im Rahmen eines solchen Ansatzes die Möglichkeit, den Benutzern auf Wunsch Detailinformationen anzuzeigen ("details-on-demand", "zoom", Morse URL).
Besonders häufig werden die Benutzer an Detailinformationen zu ihrer unmittelbaren Navigationsumgebung interessiert sein. Daher kann es sinnvoll sein, diese Informationen direkt in die graphische Übersicht zu integrieren. Die Übersicht enthält dann sowohl diejenigen Knoten, die ganz allgemein besonders wichtig sind (eine hohe "A-Priori-Importance" besitzen) als auch diejenigen, die eine geringe Distanz zum Standort des Benutzers haben und daher für diesen Benutzer zum gegenwärtigen Zeitpunkt besonders wichtig sind. Aus der A-Priori-Importance (API) und der Distanz (D) läßt sich berechnen, wie interessant ein bestimmter Knoten für den Benutzer sein dürfte ("Degree of Interest", DOI). Dabei wird die Distanz von der A-Priori-Importance abgezogen, da eine hohe A-Priori-Importance bei großer Distanz ihre Bedeutung verliert bzw. eine kleine A-Priori-Importance durch eine kleine Distanz kompensiert werden kann. Somit ergibt sich die Formel:

DOIfisheye (x|.y)=API (x) - D (x, y)

(x=Knoten, dessen DOI berechnet wird, y=Standort) (Furnas 1986, S. 17)

Ein Knoten wird dann in der Übersicht dargestellt, wenn sein DOI einen bestimmten Schwellenwert überschreitet. Diese Art der graphischen Übersicht wird als "Fisheye View" bezeichnet. Ein Sonderfall des Fisheye Views wurde bereits in Kapitel 3.5.3 behandelt. Es ging um den Fisheye View nullter Ordnung, bei dem der Schwellenwert so hoch liegt, daß nur der direkte Pfad zur Wurzel angezeigt wird.

Bei den bisher vorgestellten Ansätzen wurden diejenigen Knoten weggelassen, die weniger wichtig erschienen.

Es ist jedoch auch möglich, die Knoten nach anderen Kriterien zu filtern. Zum Beispiel kann bei Hypertexten mit typisierten Knoten die Übersichtlichkeit der Darstellung dadurch gesteigert werden, daß nur die Knoten eines bestimmten Typs abgebildet werden ("subset-by-type strategy", Fairchild 1988, S. 214). Sehr sinnvoll wäre es sicherlich auch, genau diejenigen Knoten darzustellen, deren Inhalt den Leser am meisten interessiert. Bei der Implementierung des Systems Cybermap (Gloor 1991, S. 115) wurde versucht, dieses Ziel dadurch zu erreichen, daß die Benutzer in einer interest list stichwortartig ihre Interessen festhalten. Die interest list wird anschließend mit dem Inhalt der Knoten verglichen.
Nicht nur Knoten, sondern auch Verweise können gefiltert werden. Feiner (1988, S. 210) hat in diesem Zusammenhang den Begriff der link inheritance geprägt. Damit ist gemeint, daß bei der Darstellung eines hierarchischen Hypertextes mit referentiellen Querverweisen (siehe Kap. 3.5.7.1) nur Querverweise zwischen Knoten desselben Teilbaumes abgebildet werden. Querverweise zwischen Knoten verschiedener Teilbäume werden durch einen Verweis zwischen den Kindern des ersten gemeinsamen Vorfahren ersetzt, d. h. man geht solange in der Hierarchie nach oben, bis ein Verweis der erlaubten Art gezeichnet werden kann.
Durch link inheritance kann die Komplexität einer graphischen Übersicht erheblich reduziert werden. Allerdings ist die Aussagekraft derartiger Übersichten umstritten:

The disadvantage, however, is that the abstraction is not always meaningful. That is, knowing that there exists a link from somewhere in one subhierarchy to somewhere in another subhierarchy may be very useful sometimes, but completely useless at other times." (Utting 1989, S. 65).

Abbildung 3.5.5-5: link inheritance (nach Nielsen 1990, S. 133) [*]

Eine weitere Methode zur Steigerung der Anschaulichkeit graphischer Übersichten ist die dreidimensionale Darstellung. Dadurch vergrößert sich - zumindest scheinbar - der Platz, der für die Darstellung zur Verfügung steht. Die verwendete Bildschirmfläche bleibt zwar gleich groß, der Benutzer kann sich jedoch eine dritte Dimension hinzudenken. Die Knoten verteilen sich für ihn auf drei Dimensionen, so daß die Darstellung weniger überladen scheint als eine zweidimensionale Darstellung mit gleicher Knotendichte.

Ein besonders typisches Beispiel für dreidimensionale Übersichten dieser Art sind "Cone Trees" (Robertson 1991, zit. nach Morse URL, Fox URL, Lamping URL). Dabei handelt es sich um Hierarchiebäume, bei denen die Knoten aller Teilbäume kegelförmig angeordnet sind. Verweise werden wie bei zweidimensionalen Hierarchiebäumen durch Verbindungslinien symbolisiert, Knoten können durch beliebige Körper dargestellt werden (in den folgenden Abbildungen erkennt man Tetraeder, Würfel und Kugeln):  

Abbildung 3.5.5-6: Cone Tree [**]  http://www-graphics.stanford.edu/papers/webviz/figs/euc.gif

Abbildung 3.5.5-7: Cone Tree http://wwwpi6.fernuni-hagen.de/Lehre/Seminare/Hypertext97/kein_rahmen/sattel/cone_pit.gif

Die dreidimensionale Darstellung netzwerkartiger Graphen wurde im Rahmen des Projektes SemNet (Fairchild 1988) untersucht. Es wurden verschiedene Methoden entwickelt, nach denen die Knoten möglichst sinnvoll angeordnet werden können. „Sinnvoll" kann hier z. B. bedeuten, daß der Abstand zwischen zusammengehörenden, miteinander verbundenen Knoten möglichst klein ist. Dadurch werden die Verbindungslinien kürzer, sind leichter zu verfolgen und überschneiden sich seltener. Beziehungen zwischen zusammengehörenden Knoten werden erkennbar, die Darstellung wird kompakter und die Struktur kommt besser zum Ausdruck. Fairchild berichtet:

„The results were striking. Not only were both ends of most arcs visible on a single screen, but since the arcs tended to be short, they were easier to trace, and even their two-dimensional projections had fewer crossings. It became apparent for the first time, for example, that our set of test nodes was in fact two disconnected subsets. There were further beneficial effects: Interesting subsets of interconnected nodes became visible, highly connected nodes took central positions, and more isolated nodes moved to the periphery" (Fairchild 1998, S. 211).

Abbildung 3.5.5-9: SemNet - zufällige Positionierung (Fairchild 1988, S. 208)

Abbildung 3.5.5-10: SemNet - optimierte Positionierung (Fairchild 1988, S. 213)


Bisher wurden Ansätze vorgestellt, bei denen die Anordnung in drei Dimensionen nur dazu diente, die Übersichtlichkeit zu steigern, indem der (scheinbar) zur Verfügung stehende Raum vergrößert wird. Einen Schritt weiter gehen Ansätze, bei denen wichtige Knoten groß im Vordergrund und unwichtige Knoten klein im Hintergrund dargestellt werden. Dies ist eine sehr gute Methode, um diejenigen Teile des Hypertextnetzes, die im Mittelpunkt des Interesses (Focus) stehen, detailliert anzuzeigen, ohne daß der Kontext verlorengeht. Besonders deutlich wird dies am Beispiel der "Perspective Walls" (Mackinlay 1991, zit. nach Morse URL, Lenz URL, Kamba URL, Sattel URL, Fox URL, Dominik URL). Dabei erhält die graphische Übersicht zunächst ein herkömmliches zweidimensionales Layout. In dieser Übersicht wird nun ein Bereich bestimmt, der als zentral gilt und die meisten Detailinformationen zeigen soll. Dieser Bereich bildet den Vordergrund bzw. die "Frontwand" (Lenz URL) der Perspective Wall. Die anderen beiden Bereiche, die links bzw. rechts an den zentralen Bereich angrenzen, werden gedanklich nach hinten geklappt und nur noch verzerrt dargestellt (siehe Abbildung). Sie bilden die "Seitenwände" der Perspective Wall und haben die Funktion, die Detailinformationen des zentralen Bereiches in einen Kontext einzubetten.

Abbildung 3.5.5-11: Perspective Wall http://www.inxight.com/imgs/wall2sm.gif

Abschließend sollen noch zwei weitere Visualisierungstechniken erwähnt werden, die ebenfalls auf Verzerrung beruhen: Graphical Fisheye Views (Sarkar 1994, S. 73) und hyperbolische Browser (Lamping URL).

Graphical Fisheye Views unterscheiden sich von den oben vorgestellten Fisheye Views nach Furnas darin, daß unwichtige Knoten nicht ganz weggelassen, sondern nur kleiner dargestellt werden. Für jeden Knoten wird ein Visual Worth berechnet, der dem Degree of Interest nach Furnas entspricht und proportional zur Größe des Knotens im Fisheye View ist. Je höher der Visual Worth, d. h. je "interessanter" der Knoten, desto größer wird dieser dargestellt. Den Unterschied zwischen Graphical Fisheye Views und Fisheye Views nach Furnas verdeutlicht noch einmal die folgende Abbildung (Sarkar 1994, S. 73-84).

Abbildung 3.5.5-12: Hierarchiebaum ohne Fisheye-Technik (Sarkar 1994, S. 82)	Dargestellt sind Fisheye Views, die entstehen, wenn sich der Benutzer auf Knoten 48 befindet.
Abbildung 3.5.5-13: Fisheye View nach Furnas (Sarkar 1994, S. 82)	Der Fisheye View nach Furnas unterscheidet sich vom Hierarchiebaum ohne Fisheye-Technik nur darin, daß ein großer Teil der Knoten nicht dargestellt ist. Es fehlen diejenigen Knoten, die entweder allgemein unwichtig sind, weil es sich um hierarchietiefe Knoten handelt, oder die für einen Benutzer mit Knoten 48 als Standort unwichtig sind, weil sie weit von diesem Knoten entfernt sind. Es ist auffällig, daß um den Knoten 48 herum mehr Knoten dargestellt sind als am Rand des Hierarchiebaums.
Abbildung 3.5.5-14: Graphical Fisheye View (Sarkar 1994, S. 82)	Der Graphical Fisheye View unterscheidet sich vom Hierarchiebaum ohne Fisheye-Technik und vom Fisheye View nach Furnas vor allem darin, daß die Knoten unterschiedlich groß dargestellt sind. Am größten ist der Knoten 48, der aktuelle Standort des Benutzers. Ausgehend von Knoten 48 werden die Knoten umso kleiner, je weiter sie einerseits von Knoten 48 und andererseits von der Wurzel entfernt sind. Die Entfernung ist im Graphical Fisheye View als räumlicher Abstand definiert, während beim Fisheye View nach Furnas die Anzahl der Navigationsschritte gezählt wird. Daher gilt Knoten 49 im Graphical Fisheye View als nah (höchstens 1 cm Abstand!) und ist sehr groß dargestellt, während er im Fisheye View nach Furnas gar nicht abgebildet ist, da er nur auf einem Umweg über die Wurzel erreicht werden kann und hierfür ganze sieben Navigationsschritte notwendig sind.

Hyperbolische Browser beruhen auf hyperbolischer Geometrie, einer Alternative zur allgemein bekannten, in der Schule gelehrten euklidischen Geometrie. In der euklidischen Geometrie gilt insbesondere, daß es zu jeder Gerade genau eine Parallele gibt, die durch einen bestimmten, nicht auf dieser Gerade liegenden Punkt verläuft.

Abbildung 3.5.5-15: siehe Fußnote [41]

In der hyperbolischen Geometrie gibt es hingegen mehrere Parallelen durch einen gegebenen Punkt (Geometry Center URL, Royster URL 1 u. 2). Dies können wir uns nur sehr schwer vorstellen, gilt aber in einer geometrischen Ebene, die an Holzschnitte von Escher erinnert:

Abbildung 3.5.5-16: Holzschnitt von Escher http://www.acm.org/sigchi/chi95/Electronic/documnts/ papers/jl_figs/tn-eschr.gif

Abbildung 3.5.5-17: Hierarchiebaum im hyperbolischen Raum http://www.acm.org/sigchi/chi95/Electronic/documnts/ papers/jl_figs/tn-ut.gif

Das Besondere an dieser Ebene ist, daß nach außen hin exponentiell mehr Platz zur Verfügung steht. Da bei der Darstellung von Hierarchien das Problem genau darin besteht, daß mit zunehmender Entfernung von der Wurzel exponentiell mehr Platz benötigt wird, eignet sich die hyperbolische Ebene hierfür hervorragend. Hinzu kommt, daß auf diese Weise - wie auch bei anderen Visualisierungstechniken - wichtige Knoten groß im Focus und detailliert dargestellt werden, während die übrigen Knoten im Hintergrund den Kontext bilden (Lamping URL).




Zusammenfassend sollen hier noch einmal alle Arten von graphischen Übersichten aufgeführt werden, die in diesem Kapitel vorgestellt wurden:

Grundformen: Graphen (Flächen und Verbindungslinien) nested set notation (Knoten werden ineinander verschachtelt) tree maps (Knoten haben abwechselnd horizontale und vertikale Lage) Varianten: lokaler Ausschnitt Filter subtree detail suppression (Darstellung nur bis zu einer bestimmten Hierarchieebene) Fisheye Views nach Furnas ("Degree of Interest = A-Priori-Importance - Distanz"; DOI muß Schwellenwert überschreiten) subset-by-type strategy (nur bestimmte Knotentypen werden angezeigt) link inheritance (es sind nur Verweise innerhalb von Teilbäumen erlaubt) dreidimensionale Darstellung (zur Platzvergrößerung) Cone Trees (dreidimensionale Hierarchiebäume) SemNet (dreidimensionale Netze) Verzerrung Perspective Walls (Seitenwände werden "nach hinten geklappt") Graphical Fisheye Views (Knoten mit höherem Visual Worth werden größer dargestellt) hyperbolischer Browser (Hierarchiebäume auf hyperbolischer Ebene; mit zunehmender Distanz vom Focus steht exponentiell mehr Platz zur Verfügung)

Prinzipiell können alle genannten Visualisierungstechniken direkt im HTML-Publishing umgesetzt werden. Praktisch ist es jedoch in vielen Fällen extrem aufwendig bzw. nahezu unmöglich, die zugehörigen Übersichten von Hand zu zeichnen. Auch Techniken wie zoom und details-on-demand können ohne Programmierung nur sehr schwer realisiert werden. Daher sind Webmaster hier auf Software-Tools angewiesen, mit denen sich graphische Übersichten automatisch erzeugen lassen. Zwar bieten einige HTML-Editoren und Site-Manager[42] eine solche Funktion (Ehrmann 1997, S. 170ff.). So kann z. B. mit AOLpress ein "MiniWeb" erstellt werden, d. h. eine Website-Übersicht in Form eines Graphen (siehe Abb. 3.5.5-3). Allerdings dienen Übersichten, die von Editoren oder Sitemanagement-Tools generiert werden, eher dazu, dem Webmaster die Verwaltung einer Website zu erleichtern. Mit ihrer Hilfe können ungültige Verweise, isolierte Dateien und Inkonsistenzen in der Struktur erkannt werden. Oft ist es sogar möglich, die Struktur zu ändern, indem Knoten in der Übersicht mit der Maus verschoben werden. Weniger geeignet sind solche Übersichten als Orientierungshilfe für die Nutzer eines Hypertextes. Da sie für den Webmaster alle vorhandenen Knoten und Verweise enthalten müssen und in der Regel nur zweidimensional sind, werden sie meist zu komplex und unübersichtlich. Es werden daher Tools benötigt, mit denen sich graphische Übersichten generieren lassen, die auf die Bedürfnisse der Nutzer zugeschnitten sind. Leider sind bisher nur sehr wenig Produkte auf dem Markt, die diese Funktion bieten. Ein erster Ansatz ist das Programm "Site Analyst" (Microsoft URL 1 und 2). Dessen "Web Maps" sind zwar eigentlich ebenfalls für Webmaster gedacht, beruhen aber zumindest teilweise auf anspruchsvolleren Visualisierungstechniken. Es wird dabei unterschieden zwischen "Tree Views", "Filtered Views" und "Cyberbolic Views [43]"
Ein Programm, mit dessen Hilfe tatsächlich den Nutzern ein Überblick über eine Website gegeben werden soll, ist das Java-Applet "Tree View" von Rob Young. Das Programm erzeugt einen Hierarchiebaum, der demjenigen des Windows-Explorers ähnlich ist. Leider können dabei nur zwei Hierarchieebenen berücksichtigt werden (Elsner 1988, S. 91).
Auch der HTML-Editor NetObjects Fusion bietet die Möglichkeit, einen Verweis auf eine automatisch erzeugte Sitemap in alle Dokumente einzufügen. Die Sitemap verdeutlicht zunächst nur die Struktur der Website. Informationen zum Inhalt der angezeigten Knoten erhält man aber, wenn man die Maus über die einzelnen Knoten bewegt.

Abbildung 3.5.5-18: Mit Hilfe von NetObjects Fusion erzeugte Sitemap

Der Mauszeiger befindet sich über dem rot markierten Knoten

Es ist damit zu rechnen, daß bald leistungsfähigere Programme auf den Markt kommen. Forschungsprototypen existieren bereits jetzt (Gloor URL 1). Das bekannteste Beispiel ist der Navigational View Builder von Sougata Mukherjea und James Foley. Diese System integriert gleich mehrere Visualisierungstechniken, darunter Filter, Cone Trees, Perspective Walls und Tree Maps (zit. nach Gloor URL 1).
Mukherjea und Hara (Mukherjea 1997, S. 187ff.) haben eine Technik entwickelt, mit der focus+context views für Web-Dokumente erstellt werden können. Die Technik beruht darauf, daß zunächst für alle Knoten die Wichtigkeit berechnet wird. Hierfür wird der Algorithmus verwendet, der in dieser Arbeit bereits vorgestellt wurde. In die Übersicht werden nun zum einen besonders wichtige Knoten aufgenommen und zum anderen diejenigen Knoten, die mit dem "Focus" durch einen Verweis direkt verbunden sind.
Diese Technik der focus+context views gehört ebenso wie der Navigational View Builder zu den Forschungssystemen. Für den Einsatz in der Praxis werden jedoch Programme benötigt, die sich ein Webmaster ohne großen Aufwand besorgen kann.

Bei der Konvertierung des QM-Handbuches standen mir keine Programme zur automatischen Erstellung einer graphischen Übersicht zur Verfügung. Daher mußte die Übersicht von Hand gezeichnet werden. Zunächst wurde hierfür folgendes Konzept entwickelt:
Die Übersicht sollte auf der nested set notation beruhen, d. h. hierarchietiefere Knoten sollten innerhalb von hierarchiehöheren Knoten dargestellt werden. Außerdem sollte es möglich sein, durch Zoom auf bestimmte Teile der Übersicht Detailinformationen zu erhalten. Die Zoom-Funktion hätte mit Hilfe des Ismap-Attributes implementiert werden können. "Ismap" bedeutet, daß eine Graphik in verschiedene Bereiche eingeteilt und jeder Bereich mit einer bestimmten URL verknüpft wird. Nach Anklicken eines Bereiches wird die zugehörige URL geladen. Hinter einer URL kann sich nicht nur eine HTML-Seite verbergen, sondern eben auch eine neue Graphik. Diese Graphik könnte nun eine detailliertere Darstellung des Bereiches enthalten, von dem aus auf sie verwiesen wird. Damit wäre eine Zoom-Funktion verwirklicht. Beim QM-Handbuch war geplant, jede Rubrik (z. B. Handbuch Systementwicklung, Handbuch Dokumentation, ...) als einen Bereich zu definieren und somit für jede Rubrik eine eigene, detaillierte Graphik anzulegen. Es hätten also neun Graphiken für die einzelnen Rubriken sowie eine Graphik für die oberste Ebene gezeichnet werden müssen.
Zunächst soll hier nun die geplante Graphik für die oberste Ebene beschrieben werden:
In dieser Graphik sind alle drei Hierarchieebenen des QM-Handbuches zu sehen. Zur Verdeutlichung wurde - wie in der Hypertextanwendung selbst - jeder Hierarchieebene eine bestimmte Farbe zugewiesen. Die Farben der Knoten in der Darstellung entsprechen den Hintergrundfarben der "wirklichen" Knoten in der Hypertextanwendung. Die hierarchische Abfolge der Knoten ergibt sich direkt aus der nested set notation. Das Vorhandensein hierarchischer Verweise kann bzw. muß man also aus der nested set notation erschließen. Speziell dargestellt werden nur die referentiellen Querverweise. Diese werden durch Verbindungslinien symbolisiert. Damit die Graphik nicht durch zu viele Linien unübersichtlich wird, gilt das Prinzip der link inheritance: Verweise zwischen Knoten verschiedener Rubriken werden ersetzt durch Verweise, die die beiden beteiligten Rubriken in der Darstellung direkt miteinander verbinden. Mehrere Verweise zwischen zwei Rubriken werden dadurch zu einer Linie zusammengefaßt. Um zu verhindern, daß sich dadurch die Aussagekraft der Darstellung erheblich reduziert, wird das Prinzip der link inheritance nach Feiner um folgende Besonderheit ergänzt: Die Dicke einer Verbindungslinie hängt von der Menge der Verweise ab, die sie symbolisiert. Gibt es zwischen zwei Rubriken sehr viele Verweise, so werden diese nach dem Prinzip der link inheritance zwar nicht einzeln angezeigt, die enge Verknüpfung zwischen den Rubriken wird jedoch durch eine dicke Verbindungslinie deutlich gemacht.

Bei den neun detaillierten Graphiken für die einzelnen Rubriken, die nach Anklicken der entsprechenden Bereiche in der eben beschriebenen Einstiegsgraphik erscheinen, spielt link inheritance keine Rolle. Statt dessen wird die Übersichtlichkeit dadurch gesteigert, daß bestimmte Knoten herausgefiltert werden. In jedem Fall weggelassen werden die Knoten der Inhaltsverzeichnisse und Metainformationen. Da zu ausnahmslos jedem Textknoten ein Inhaltsverzeichnis und drei Metainformationsknoten gehören, würde die Abbildung dieser Knoten den Informationsgehalt der Übersicht kaum erhöhen. Die Textknoten derjenigen Rubrik, zu der die detaillierte Graphik jeweils gehört, werden vollständig dargestellt. Aus den anderen Rubriken werden nur diejenigen Knoten in die Graphik aufgenommen, auf die von der aktuellen Rubrik aus verwiesen wird. Alle anderen Knoten werden weggelassen bzw. durch Punkte angedeutet. Die dargestellten Knoten sind alle gleich groß, damit die Graphik gleichmäßig aussieht. Die Wichtigkeit der Knoten wird durch die Dicke der Ränder zum Ausdruck gebracht: Wichtige Knoten werden dick umrandet, unwichtige Knoten werden dünn umrandet. Die Wichtigkeit eines Knotens wird ermittelt, indem die Verweise gezählt werden, die von diesem Knoten ausgehen (outdegree) und die zu diesem Knoten führen (indegree). Die Werte für indegree und outdegree werden dabei addiert.

Der Nachteil des in den letzten Absätzen beschriebenen Konzeptes für eine graphische Übersicht liegt auf der Hand: Die Umsetzung ist viel zu aufwendig. Es müssen nicht nur zehn verschiedene Graphiken gezeichnet, sondern auch sämtliche Verweise des Hypertextes gezählt werden. Die hierfür notwendige Zeit wird in der Praxis nie zur Verfügung stehen.

An diesem Beispiel sieht man sehr anschaulich das Grundproblem bei der praktischen Umsetzung von Ergebnissen der Hypertextforschung im HTML-Publishing: Aus der Forschung lassen sich interessante Anregungen gewinnen, deren Umsetzung in der Praxis sehr nützlich wäre. Allerdings ist die Umsetzung in vielen Fällen zu aufwendig. Der Entwickler einer Hypertextanwendung kann dies in der ihm zur Verfügung stehenden Zeit nicht leisten. Er ist darauf angewiesen, daß Tools programmiert werden, die ihm die Umsetzung neuer Ideen ermöglichen. Dies wird am Beispiel der graphischen Übersicht besonders deutlich, gilt aber auch für andere Bereiche des HTML-Publishing (siehe Kap. 4).

(Abbildung 3.5.5-19: graphische Übersicht des QM-Handbuchs )

Nachdem sich beim QM-Handbuch die Umsetzung der zunächst geplanten graphischen Übersicht als zu aufwendig erwiesen hatte, wurde im zweiten Anlauf bewußt ein sehr einfaches Konzept gewählt. Die Darstellung beruht auf einem Hierarchiebaum. Allerdings ist auf der untersten Ebene nur ein einziger Ast abgebildet, der stark vergrößert gezeigt wird. Die Knoten sind nicht beschriftet. Dies bedeutet, daß sich aus der Übersicht keinerlei Aussagen über die Einordnung eines bestimmten Knotens in das gesamte Hypertextnetz ableiten lassen. Die Übersicht eignet sich daher auch nicht als Orientierungshilfe. Sie kann lediglich dazu dienen, den Benutzern die Struktur des Hypertextnetzes zu verdeutlichen. Dabei liegt der Schwerpunkt auf den drei Aspekten "Hierarchie", "Guided Tour" und "Cluster". Die hierarchische Struktur erkennt man an der baumartigen Darstellung. Zusätzlich wurde jede Hierarchieebene mit der Farbe hinterlegt, die auch den Hintergrund der zugehörigen HTML-Seiten bildet. Die Knoten sind innerhalb einer Hierarchieebene ringförmig angeordnet und über einen Pfeil miteinander verbunden. Dies soll verdeutlichen, daß es im Rahmen einer Guided Tour möglich ist, sich die Knoten in einer vorgegebenen Reihenfolge nacheinander anzusehen . Auf der untersten Ebene ist detailliert dargestellt, wie die bisherigen Dokumente des QM-Handbuchs in mehrere Dateien zerlegt wurden, die nun ein Cluster bilden. Die Aufzählungspunkte im ersten Rechteck symbolisieren ein listenförmiges Inhaltsverzeichnis. Die Pfeile zu dem darunterliegenden Rechteck zeigen, daß von den verschiedenen Einträgen des Inhaltsverzeichnisses aus auf verschiedene Textstellen verwiesen wird. Die unteren kleinen Rechtecke stehen natürlich für die Metainformationsknoten (Bearbeitungsinformationen, Bearbeitungsliste und Referenzdokumente). Diese sind nur ein "Anhängsel" der Textknoten und bilden beim Navigieren eine Sackgasse. Die Graphik soll den Benutzern diese Tatsache vor Augen führen.

Da damit zu rechnen war, daß sich nicht alle Benutzer die Zeit nehmen würden, die graphische Übersicht genau zu betrachten, wurde für die Homepage eine zweite, noch schematischere Darstellung entwickelt. Es handelt sich um den Hypercone, der bereits in Kap. 3.5.1 ausführlich erläutert wurde.

[40] Die erste Hierarchieebene entspricht dem äußeren Rahmen, in den alle anderen Ebenen eingeschlossen sind. Die zweite Ebene sind die 10 vertikalen Rechtecke. Fünf dieser Rechtecke (ganz rechts) sind sehr schmal und nicht weiter unterteilt, d. h. es gibt hier keine untergeordneten Knoten mehr. In die anderen Rechtecke sind weitere Rechtecke eingeschlossen. Diese Rechtecke stellen die dritte Hierarchieebene dar. Eine vierte Hierarchieebene gibt es nur unterhalb derjenigen acht Knoten, die als horizontal gelegene Reihen in der Mitte zu erkennen sind und in die dunkelgrau gefärbte Rechtecke eingezeichnet sind. In der Abbildung wird der Pfad zu einem beliebig heraus-gegriffenen Knoten durch Farben verdeutlicht: die erste Ebene ist rot, die zweite blau, die dritte gelb und die vierte grün.
[*] Man erkennt in diesen beiden Darstellungen nach der nested set notation jeweils drei Hierarchieebenen mit einem Knoten in der obersten, drei Knoten in der mittleren und 5+4+3=12 Knoten in der untersten Ebene. In der linken Darstellung sind alle Verweise zwischen Knoten der untersten Ebene als Pfeile erkennbar. In der rechten Darstellung sind im Vergleich zur linken Darstellung diejenigen Verweispfeile erhalten geblieben, die innerhalb der Rechtecke liegen, die die Knoten der mittleren Ebene symbolisieren. Verweise, die von einem Rechteck in ein anderes führen, (d. h. Verweise zwischen Knoten mit verschiedenen Vorfahren), werden jeweils zu einem dickeren Pfeil zwischen den beiden beteiligten Rechtecken zusammengefaßt. Einer der drei dicken Pfeile in der rechten Darstellung hat zwei Pfeilspitzen, da er für Verweise mit unterschiedlicher Richtung steht (an seiner Stelle erkennt man in der linken Darstellung zwei dünne Pfeile nach unten und einen nach oben).
[**] Oben ist angedeutet, daß noch weitere Knoten existieren. Die hierarchische Struktur kommt dadurch zustande, daß ein beliebiger Knoten als Wurzel herausgegriffen wurde. Alle Knoten, auf die von diesem Knoten aus verwiesen wird, gelten als zweite Ebene usw. (Munzner URL).
[***] Erläuterungen: „Shadows provide powerful cues for disambiguating the shape and the location of three-dimensional objects. [...] We can further ease the viewer’s perception of the spatial structure of the scene by drawing grid lines on the walls onto which the shadows are cast. [...] Finally, we can further improve the viewer’s perception of the scene by using a wide-angle camera that is located close to the Cone Tree" (Najork URL).
[41] oben: euklidische Geometrie (http://www.math.usouthal.edu/~brick/teaching/math110/euc-pos.gif); unten: hyperbolische Geometrie (http://www.math.usouthal.edu/~brick/teaching/math110/hyp-pos.gif)
[42] Site-Manager sind Programme zur Organisation einer Website.
[43] "The Cyberbolic^TM View gives you a dynamic overview of your site that clarifies resource relationships and interconnections, and helps you immediately grasp the overall structure of a site. Drag your mouse to zoom in for details or move around for a site survey." (Microsoft URL 2).