1 |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
![eBook-Project by AboutWebDesign.de [LOGO]](logo.jpg){kind=logo}
|
||||||
3.4 Site-Strukturen und Navigation |
||||||
|
||||||
3.4.1 EinführungHypertext ist verwirrend - eine Datei kann im Prinzip unendlich viele Links enthalten, und die Link-Ziele selbst können wiederum beliebig viele Links enthalten. Das Beispiel ist praxisfremd, zugegeben. Der Praxis näher kommt folgende Vorstellung: eine Seite mit 10 Hyperlinks, jede von dort gelinkte Seite mit wiederum 10 Links. Das ist realistisch und zwingt den Surfer, sich zwischen 100 verschiedenen Möglichkeiten zu entscheiden.Dass Webdesigner dem Surfer in dieser Hinsicht unterstützend unter die Arme greifen sollten, ist logisch. Ein Surfer, der eine Navigation nicht versteht, ist ein unzufriedener Surfer, und die sind schlecht fürs Geschäft. Etwas verallgemeinert lässt sich von Site-Strukturen/Informationsarchitekturen und Navigationsstrukturen reden. Sinn und Zweck dieses Kapitels ist es, den sinnvollen Umgang mit Hypertext darauf bezogen zu erläutern. Obwohl wir auch in diesem Kapitel konkrete Anregungen für die Praxis geben, sollten Sie sich auf jeden Fall noch die entsprechenden Abschnitte aus dem Praxis-Kapitel durchlesen. Auch der Usability-Abschnitt dieses Kapitels sollte gelesen werden. |
||||||
|
||||||
3.4.2 Verschiedene Website-StrukturenEs gibt viele Möglichkeiten, eine Website zu strukturieren. Zunächst geht es uns hierbei um die logischen Strukturen. Unterscheiden Sie bitte zwischen Navigation und Site-Struktur: die Navigation ist die Nutzbarmachung der Site-Struktur. Die Site-Struktur dagegen ist das logische Verhältnis der Seiten zueinander. Der Unterschied ist nicht offensichtlich, aber wichtig!Der physischen Struktur, also der Ordnerstruktur der Website, ist ebenfalls Bedeutung zuzumessen. Wir behandeln sie am Ende dieses Kapitels. Kommen wir zunächst aber zu den logischen Strukturen zurück. Interessanterweise lassen sich nahezu alle sinnvollen Struktur-Varianten mit Beispielen aus der Natur erklären. 3.4.2.1 Baum-Struktur
Wer das auch dem Surfer unmissverständlich klarmachen will, der kann z.B. ein Navigations-Applet verwenden, das die Links in einer Hierarchie so darstellt, wie es der Windows Explorer mit Dateien tut. Wem das nicht gefällt, der weicht auf andere Alternativen aus, was meist sowieso sinnvoller ist: Der Surfer muss wissen, auf welcher Ebene er sich gerade befindet und Möglichkeiten haben, auf- bzw. abzusteigen. Eine vernünftige Variante hat Yahoo gefunden: Die Zeile, in der die aktuelle Position angezeigt wird, dient gleichzeitig als Rückwärtsnavigation. Gibt es in einer Kategorie weitere Unterkategorien, so werden diese in einer Liste angezeigt. 3.4.2.2 Lineare Struktur
Typische Beispiele für eine lineare Struktur sind diverse Tutorials, denn hier macht es Sinn, von einem Kapitel zum nächsten zu springen. Wir müssen Sie jedoch davor warnen, ausschließlich diese Struktur einzusetzen: Wer direkt in den Mittelteil springen will, muss sich erst durch vorhergehende Seiten kämpfen. Auch das hat durchaus Frustrationspotential. 3.4.2.3 Netz-Strukturen
Sinnvoll eingesetzt mag auch diese Navigationsform ihre Vorteile haben. Unser Rat jedoch: kommen Sie niemals auf die Idee, allein diese Struktur zu verwenden. Chaos wäre die Folge - das WWW selbst zeigt das. 3.4.2.4 Ansätze für die PraxisVorhergehende Beispiele sind lediglich Modelle. Für den Einsatz in der Praxis sind andere Methoden jedoch meist besser geeignet, am besten wohl - wen wundert's - eine Mischung der drei Modelle.So ist es z.B. gut möglich, die Hauptstruktur baumartig zu organisieren und thematisch zusammengehörende Bereiche innerhalb des Baumes mit linearen oder Netz-Strukturen zu verbinden. Für den Surfer bedeutet das optimale Bedienbarkeit: Er hat freie Wahl seines Sprungziels (durch den Baum), kann aber auch leicht innerhalb thematischer Bereiche navigieren. |
||||||
|
||||||
3.4.3 Baum-Strukturen organisierenWann immer Sie einen Baum als Grundlage für Ihre Site-Struktur bzw. Informationsarchitektur verwenden, sind Sie gezwungen, bestimmte Seiten einer anderen hierarchisch unterzuordnen. Man könnte auch sagen, Sie fassen Unterseiten zu zusammengehörigen Gruppen zusammen.Wenn der Surfer jetzt auf der Suche nach bestimmten Inhalten ist, wird er zunächst versuchen, die Oberkategorie ausfindig zu machen, die am ehesten seinen Wünschen entspricht. Anders formuliert: Er sucht das Element, unter dessen Nachfahren er die gesuchten Inhalte vermutet. Das Problem ist nun: Wie lässt sich der Baum so organisieren, dass die Vermutungen des Surfers möglichst häufig zutreffen? Vergessen Sie nicht, der Surfer ist der Maßstab Ihrer Bemühungen. Das heißt gleichzeitig auch: Auch wenn Ihre Site-Struktur absolut logisch aufgebaut ist, kann sie schlecht sein - wenn der Benutzer nicht damit zurechtkommt. 3.4.3.1 EinordnungsproblemeDer grundsätzliche Ansatz zur Site-Struktur, die Idee des Baums, wird von fast allen Surfern verstanden. Dieses Konzept findet sich so häufig im Internet, dass es zum Standard geworden ist.Problematisch ist dagegen die oben angesprochene Unterteilung in Gruppen: es kann sein, dass der Surfer eine Unterseite einer ganz anderen Kategorie zuordnet als Sie. Beispiel: Sie betreiben eine Firma, die die verschiedensten Fortbewegungsmittel verkauft. Ein Kunde will sich über Ihre Hovercrafts informieren, und findet auf Ihrer Hauptseite die drei Links "Wasserfahrzeuge", "Landfahrzeuge" und "Luftfahrzeuge". Wo würden Sie das Hovercraft einordnen? Schließlich fliegt es ja. Andererseits benutzt man es sehr oft, um Wasser zu überqueren. Schlussfolgerung: es gibt verschiedene Systematiken, nach denen man Unterseiten zu Gruppen zusammenfassen kann. 3.4.3.2 Gruppierungs-SystematikenEinige davon sind jedermann geläufig, andere wiederum nicht. Eine kleine Auswahl:3.4.3.2.1 AlphabetischSie legen Ihre Unterseiten in einem alphabetischen Index ab. Das Prinzip kennt zwar jeder, doch wenn es um komplexe Inhalte und Zusammenhänge geht, versagt es oft. Sie müssen erst einmal einen passenden Anfangsbuchstaben für jedes Element finden. Welcher Buchstabe wäre beispielsweise für den Artikel "Gliederung von Site-Strukturen" geeignet?3.4.3.2.2 WissenschaftlichSie wenden strikte wissenschaftliche Kriterien auf Ihre Elemente an, um eine Gruppierung zu erreichen. Wenn Ihre Zielgruppe das verkraftet, ist es eine hervorragende Form der Gliederung. Für den normalen User jedoch ist die wissenschaftliche Systematik zu komplex.3.4.3.2.3 IntuitivSie versuchen, das Modell zu erraten, das der Benutzer für die Strukturierung Ihrer Elemente verwenden würde. Wenn das klappt, ist die intuitive Systematik die beste. Leider ist es jedoch praktisch unmöglich, eine für alle Surfer gleichermaßen passende Systematik zu finden.Beispiel: einer intuitiven Systematik folgend, würde man "Pilze" wahrscheinlich unter den Punkt "Pflanzen" stellen. Eine wissenschaftliche Systematik würde hingegen erkennen, dass Pilze keine Pflanzen sind und daher eine eigene Gruppe für sie einrichten. Je nach wissenschaftlicher Bildung Ihrer Surfer haben Sie also das Problem, dass die intuitiven Gruppierungen zu anderen Ergebnissen führen. 3.4.3.2.4 Örtlich/ZeitlichManche Informationen lassen sich am besten nach Ort oder Zeit gruppiert darstellen.Beispiel: eine Handwerker-Site könnte für jeden Kreis in Deutschland drei oder vier empfehlenswerte Betriebe anzeigen. 3.4.3.2.5 ZielgruppenorientiertSie ordnen die Sites nach Relevanz für bestimmte Benutzergruppen.Beispiel: "Kundenservice" wird ein Unterknoten von "Endkunden", "Angebot machen" kommt unter "Lieferanten". 3.4.3.2.6 LösungsorientiertSie versuchen, zu einem bestimmten Problemkomplex gehörende Elemente hierarchisch unter einem Oberpunkt anzuordnen. Zentral ist hier die Frage: "Was will der Benutzer auf meiner Site tun?".Mögliche Baum-Elemente der obersten Ebene könnten hier z.B. "Ich will bei Ihnen arbeiten", "Ich will Informationen über Ihre Produkte" und "Ich will Informationen über Ihre Firma" sein. 3.4.3.3 VermischungEs ist möglich und oft sinnvoll, diese Systematiken zu vermischen. Achten Sie jedoch darauf, das nicht in einer Ebene zu tun. Wenn Sie auf einer Ebene die wissenschaftliche Systematik verwenden, können Sie nicht auf einmal in die intuitive wechseln. Eine Ebene darunter könnte sich dann jedoch die alphabetische anbieten, z.B. um alle zu einer Tierart gehörenden Unterarten aufzulisten.3.4.3.4 Optimierung von Baum-Strukturen
Zu tiefe Bäume dagegen sind auch nicht optimal. Wenn der Surfer erst 10 Ebenen hinabsteigen muss, bevor er seine relevanten Inhalte findet, ist das ermüdend.
3.4.3.5 Horizontale Bewegungen
Oft ist es jedoch sinnvoll, eine alternative Bewegungsmethode vorzusehen: die vertikale Bewegung, d.h. direkt zwischen zwei Seiten einer Ebene. Voraussetzung: die Seiten gehören linear zusammen, d.h. der Inhalt der einen Seite schließt nahtlos an den der anderen an. |
||||||
|
||||||
3.4.4 Regeln des StrukturdesignsAufbauend auf den vorhergehenden Modellen lassen sich einige Grundregeln für Navigationsdesign bzw. Struktur-Entwürfe aufstellen. Beide Begriffe sind an dieser Stelle nicht zu verwechseln: Die Struktur ist die dem Projekt zugrundeliegende Organisation, die Navigation die Möglichkeit für den Surfer, sich innerhalb des Projekts zu bewegen.Navigation hat die Aufgabe, drei wesentliche Fragen zu beantworten: Wo bin ich? Woher komme ich? Und wohin kann ich gehen? Von diesen drei Hauptaufgaben ausgehend lassen sich einige Faustregeln formulieren, deren Beachtung in den meisten Fällen zwangsläufig zu vernünftigen Navigationsdesigns führt. Fundamental ist die Regel, nirgendwo eine Sackgasse zuzulassen. Strukturell heißt das, dass jede Seite Verbindungen zu anderen Seiten enthalten muss. Optimalerweise sollten diese Links auch noch sinnvoll sein: Zum nächsten Abschnitt, zur nächsthöheren Ebene etc. Die Navigation sollte darauf ausgelegt sein, dem Surfer die interne Struktur vorzuführen. Soll heißen: die verwendeten Links sollten zur internen Struktur passen. Ein anderes Tabu ist eine nicht wieder erreichbare Seite. Eine lineare Struktur ohne rückwärtig ausgerichtete Hyperlinks würde zu solchen Seiten führen. Surfer hassen so etwas. Hypertext ist mehr als eine Zeitschrift oder ein Buch. Hypertext verknüpft verschiedene Seiten untereinander. Wir raten Ihnen also, die grundsätzliche Site-Struktur auf einen Baum aufzubauen - auch dann, wenn Sie ein Tutorial oder Ähnliches schreiben. Versuchen Sie niemals, dem Surfer seine Wege vorzuschreiben, denn das mag er gar nicht. Achten Sie auch darauf, Ihre Struktur logisch und leicht nachvollziehbar zu gestalten, damit der Surfer sie verstehen kann. Die Unterteilung in verschiedene Rubriken ("Über uns", "Support", "Online-Shop") ist z.B. sowohl sinnvoll als auch sehr beliebt. |
||||||
|
||||||
3.4.5 Navigationsdesign3.4.5.1 Visualisieren und operationalisierenNavigationsdesign ist gewissermaßen die Kunst, eine Site-Struktur einerseits zu verbildlichen (Visualisierung) und andererseits durchsuchbar (Operationalisierung) zu machen. Ersteres ist wichtig für den Anwender, denn um sinnvoll navigieren zu können, muss er die Struktur der Seite verstanden haben. Die Durchsuchbarkeit ist die Nutzbarmachung dieser Visualisierung, fast immer durch die Platzierung von Hyperlinks erreicht.3.4.5.2 Was ist Navigation?Wo bin ich? Woher komme ich? Und wohin kann ich gehen?Navigation lässt sich im Wesentlichen auf die Beantwortung dieser drei Fragen reduzieren. Richten Sie all Ihre Bemühungen darauf aus, genau das zu tun. Weitere Attribute wie Aussehen sind dagegen sekundär: versagt die Navigation in ihrer Funktion, wird die Site unbenutzbar. 3.4.5.3 Die Baum-Struktur im KontextVerwenden Sie immer eine Baumstruktur als Grundgerüst für Ihre Site: Sie ist aus Sicht des Anwenders am besten und sinnvollsten, weil sie einfach zu bedienen und zu verstehen ist. Zudem stellt sie die einzige Methode dar, große Mengen von Informationen so abzulegen, dass schneller Zugriff möglich ist. Legen Sie besonderen Wert auf eine sinnvolle Systematik, denn sie ist die entscheidende Grundvoraussetzung.Wie setzt man also eine Baumstruktur als Navigation um? 3.4.5.3.1 Wohin kann ich gehen?
Sie sind frei darin, weitere Links einzubauen. Oft ist es so, dass die oberste Ebene des Struktur-Baums immer erreichbar ist. Bei AboutWebDesign sind das u.a. "Webmaster-Praxis", "Technik-Ecke" und "Design-Theorie". Der Surfer muss erkennen, dass es sich hierbei um Elemente auf der gleichen Ebene handelt. Eine eindeutige farbliche Kennzeichnung solcher Links bietet sich also an: Navigationsdesign sollte eindeutig sein. Die AboutWebDesign-Site-Struktur arbeitet mit einer weitgehend inhaltsleeren Ebene, der der Übersichtsseiten. Auch zwei inhaltsleere Ebenen sind denkbar und oft zu sehen, so z.B. bei der L-Navigation: oben die Navigation der ersten Ebene, in einer links platzierten Leiste die Links der zweiten Ebene. Im frei bleibenden Platz können dann weitere Links platziert werden. Hinweis: dabei handelt es sich gleichzeitig auch um eine Visualisierung der vorhandenen Struktur. Oft können Sie beide Funktionen, also Visualisierung und Operationalisierung, elegant miteinander verknüpfen. 3.4.5.3.2 Wo bin ich?Zumindest ein prominent platzierter Titel sollte dem Surfer gerade mitteilen, wo er sich befindet. Sie können auch in der Navigation kleine Symbole einblenden, die das noch unterstützen, so z.B. einen kleinen roten Pfeil neben der gerade aktiven Kategorie.3.4.5.3.3 Woher komme ich?Diese Aufgabe wird zum Glück vom Browser übernommen: mit der "Zurück"-Schaltfläche hält er die Antwort jederzeit parat. An dieser Stelle ein Hinweis: verzichten Sie darauf, einen "Zurück"-Link zu setzen, denn:
3.4.5.4 TabusVermeiden Sie auf jeden Fall zwei schwere Fehler:
3.4.5.5 Eindeutigkeit als LeitmotivEindeutigkeit ist eines der Hauptziele des Navigationsdesigns überhaupt. Der Grund: oft erscheint es sinnvoll, verschiedene Site-Strukturen miteinander zu vermischen. Beispiel: Eine Online-HTML-Referenz. Das Inhaltsverzeichnis ist baumartig, allerdings finden sich im Text selbst zusätzlich netzartige Strukturen, weil bestimmte Fachbegriffe als Link markiert sind. Ein Klick führt dann zu einer Definition.Wenn dem Surfer klar ist, dass die Links im Kontext des Inhaltsverzeichnisses etwas anderes sind als die Definitions-Links, funktioniert die Site. Wenn nicht, werden viele Surfer die Referenz verwirrt und frustriert verlassen. Gerade das wird durch visuelle Kennzeichnungen vermieden. Eindeutigkeit bezieht sich aber auch auf die Benennung der Links. Wenn ein Benutzer einen Baum nach Informationen durchsucht, folgt er dabei dem ersten verfügbaren Link, der in etwa zu seiner Vorstellung passt. Er wird nicht nach weiteren verfügbaren Elementen suchen, die seinen Vorstellungen viel besser entsprechen könnten. Das tut er erst, wenn er nach einem Misserfolg wieder zur ursprünglichen Seite zurückkehren muss. Daher: die auf gleicher Ebene nebeneinander stehenden Elemente müssen so eindeutig benannt werden, dass die Grenzen so scharf wie möglich sind. 3.4.5.6 Logisches DesignAls zweites Hauptziel steht neben der Eindeutigkeit die logische Konsistenz innerhalb der Navigation: Ausbrüche aus dem dem Surfer bekannten System führen zu Verwirrung. Um es auf den Punkt zu bringen: Bieten Sie die gleiche Navigation auf möglichst allen (oder zumindest allen thematisch verwandten) Unterseiten an.Wer mehr Tipps zum Thema Navigation sucht, dem seien die Abschnitte "Usability" und "Navigation" (letzteres allerdings im Kapitel "Design-Praxis") stärkstens empfohlen. In diesem Abschnitt beschäftigen wir uns nur mit der Navigation im Kontext der theoretischen Site-Strukturen. Alles andere würde keinen Sinn machen, denn damit würde unsere Kapitel-Einteilung ad absurdum geführt - ein Struktur-Problem wäre die unvermeidliche Folge. |
||||||
|
||||||
3.4.6 Verschiedene UnterseitenIst jede in der Struktur enthaltene Seite vom Prinzip her gleich? Ja, würde man wohl eigentlich annehmen. Es gibt jedoch Versuche, an diesem Konzept zu rütteln. Konkrete Ansätze sind z.B. Eingangs- und Ausgangstunnel.3.4.6.1 TunnelseitenWährend die klassische Hypertext-Strukter allerhöchstens eine Wurzel-Seite enthält, sind Eingangs- und Ausgangstunnel Versuche, spezielle, nur einmal erreichbare Seiten zu etablieren.Gründe für solche Ansätze - und handele es sich dabei auch nur um die Verwendung einer Startseite (echte Startseiten sind gemeint, also spezielle Eingangs-Seiten, und nicht Seiten, die lediglich einen Begrüßungstext, ansonsten aber die normale Navigation anzeigen) - gibt es viele. So z.B. das Argument, dadurch könne Spannung auf folgende Inhalte erzeugt werden. Obwohl das durchaus stimmen kann, widerspricht es dem Prinzip von Hypertext, eine feste Folge bestimmter Seiten zu definieren. Das nimmt dem Surfer seine Entscheidungsfreiheit. Unserer Überzeugung nach sind solche Ansätze also nicht der Surfer-Zufriedenheit zuträglich und sollten damit nach Möglichkeit vermieden werden. 3.4.6.2 Sitemaps, Guided ToursInteressanter dagegen sind spezielle Seiten, die besonders zum Aufbau einer guten Struktur beitragen: Eine Sitemap beispielsweise enthält alle Unterseiten, thematisch (bzw. hierarchisch) übersichtlich geordnet.Guided Tours speziell für Site-Neulinge anzubieten, hat auch seine Vorteile. Gewissermaßen wird auch hier - je nach Art der Tour - dem Anwender ein Teil seiner Entscheidungsfreiheit genommen, weil wichtige Unterseiten der Reihe nach, einem Muster folgend aufgerufen werden. Es kann jedoch davon ausgegangen werden, dass Anwender, die damit ein Problem haben, die Bedeutung von "Guided" erkennen werden und daher eine Guided Tour erst gar nicht beginnen. 3.4.6.3 Die Standard-SeiteDie Standard-Seite, also sozusagen die typische Seite, enthält zwei elementare Strukturverknüpfungen: einen Hyperlink, um zurück zu springen, und eine Anzeige, die dem Surfer genau sagt, wo er sich gerade befindet. Optionale Elemente sind denkbar und sinnvoll, so z.B. ein Navigationsmenü auf jeder Unterseite. Auch macht das in Hinblick auf Usability Sinn, doch dazu mehr im passenden Kapitel. |
||||||
|
||||||
3.4.7 Physische Site-StrukturenNachdem nun so lange über logische Aspekte von Navigation und Site-Struktur gesprochen wurde, wenden wir uns nun der physischen Site-Struktur zu: Die Speicherung von Dateien und Ordnern auf der Festplatte.Wieso ist ein vernünftiges System beim Speichern der Dateien überhaupt sinnvoll?
Wir schlagen Ihnen daher folgendes Modell vor: Legen Sie die Seiten, nach Kategorie geordnet, in eigenen Unterordnern ab - einer für jede Kategorie. Versuchen Sie dabei, Ihre Baum-Struktur auf der Festplatte so gut wie möglich nachzubilden. Dateien sollten nach ihrem Inhalt benannt werden. Ist die enthaltene Information stark von einem Datum abhängig (z.B. News), dann stellen Sie dem eigentlichen Namen eine Datumsangabe im Format 2001-10-25 voran. Dabei ist es sinnvoll, die URLs möglichst kurz zu halten. Wer in den URLs gebräuchliche Wörter verwendet, erhöht die Wahrscheinlichkeit eines Zufallstreffers. Auch mit Blick auf suchmaschinenrelevante URLs kann das sinnvoll sein. An dieser Stelle wäre noch zu erwähnen, dass es sinnvoll ist, ein einmal verwendetes System zur Benennung von Dateinamen beizubehalten. Viele externe Links sind nicht auf Startseiten, sondern auf Unterseiten gesetzt. Wenn Sie also auf einmal Ihr Benennungs-Schema umstellen, werden auf einmal viele Links auf Sie mit hoher Wahrscheinlichkeit ungültig und Sie verlieren Besucher. |
||||||
|
