1 |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 1 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
![eBook-Project by AboutWebDesign.de [LOGO]](logo.jpg){kind=logo}
|
||||||
3.4 Site-Strukturen und Navigation |
||||||
| Zurück zu: [ eBook-Startseite | AboutWebDesign.de ] | ||||||
|
Inhaltsverzeichnis Site-Strukturen und Navigation 3.4.1 Einführung 3.4.2 Verschiedene Website-Strukturen 3.4.2.1 Baum-Struktur 3.4.2.2 Lineare Struktur 3.4.2.3 Netz-Strukturen 3.4.2.4 Ansätze für die Praxis 3.4.3 Regeln des Navigationsdesigns 3.4.4 Verschiedene Unterseiten 3.4.4.1 Tunnelseiten 3.4.4.2 Sitemaps, Guided Tours 3.4.4.3 Die Standard-Seite 3.4.5 Navigationsdesign 3.4.5.1 Visualisieren und operationalisieren 3.4.5.2 Die Baum-Struktur im Kontext 3.4.5.3 Eindeutigkeit als Leitmotiv 3.4.5.4 Logisches Design 3.4.6 Physische Site-Strukturen |
||||||
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 und Informationsarchitekturen reden. Sinn und Zweck dieses Kapitels ist es, den sinnvollen Umgang mit Hypertext 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, also die internen Hyperlinks. Auch die physischen Struktur, also die Organisation in Verzeichnissen, ist sicherlich wichtig. Deshalb werden wir auch ihr später einige klärende Worte widmen.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
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. Yahoo hat das wunderbar realisiert: Die Zeile, in der die aktuelle Position angezeigt wird, dient gleichzeitig als Rückwärtsnavigation. 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 Navigationsform 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 Regeln des NavigationsdesignsAufbauend auf den vorhergehenden Modellen lassen sich einige Grundregeln für Navigationsdesign bzw. Struktur-Entwürfe aufstellen. Beide Begriffe sind übrigens 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.4 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.4.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.4.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.4.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.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 Die Baum-Struktur im KontextWir haben weiter oben empfohlen, möglichst die Site-Struktur auf Grundlage des Baum-Modells zu entwerfen. Sinn macht das vor allem, weil dadurch eine Einsortierung der Links unter verschiedene Oberbegriffe erzwungen wird. Beispiel: Es existieren vier Seiten: "Kontakt", "Firmengeschichte", "Unsere Produkte" und "Unsere Services". Sinnvoll wäre es, "Kontakt" und "Firmengeschichte" unter einen Hauptpunkt zu legen, z.B. "Über uns". Die anderen beiden Seiten würden in eine Kategorie "Unsere Leistungen" passen.Der Vorteil für den Anwender: Er muss nicht aus einer mehr oder minder langen Liste die gesuchte Seite herauspicken. Stattdessen entscheidet er sich für die Wahl einer Kategorie bzw. eines Oberbegriffs, und das so lange, bis er irgendwann am Ziel angekommen ist. Ein gutes Navigationsdesign muss dem Surfer also die verfügbaren Kategorien vorführen. 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. 3.4.5.3 Eindeutigkeit als LeitmotivEindeutigkeit ist sogar 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. 3.4.5.4 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.Zur logischen Konsistenz gehört auch die sinnvolle Strukturierung des Site-Baums. Praxisnäher formuliert heißt das, dass die ausgewählten Navigations-Kategorien bzw. -Oberbegriffe logisch nachvollziehbar sein sollten. Es macht keinen Sinn, zwei Links "Unsere Produkte" und "Der neue multiMaxx 2001" auf eine Ebene zu stellen. Genauso wenig macht es aber Sinn, 30 Kategorien mit jeweils zwei Unterseiten zu verwenden. Eine Reduzierung der Kategorien wäre hier besser, denn zu viele Kategorien verwirren den Surfer. Tipp: Niemand zwingt Sie, nur zwei Ebenen zu verwenden - eine Kategorie kann durchaus weitere Unterkategorien enthalten. 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 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 ist zur Speicherung der Dateien und Ordner auf der Festplatte äquivalent.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 Bennenungs-Schema umstellen, werden auf einmal viele Links auf Sie mit hoher Wahrscheinlichkeit ungültig und Sie verlieren Besucher. |
||||||
|
