Infothek

Webseiten strukturieren
Teil 2: Struktur von Webseiten

18.01.2005

Die meisten Webseiten sind keine gegliederten Texte wie man sie von der Schule kennt. Die Inhalte folgen nicht aufeinander wie die Abschnitte und Kapitel eines Aufsatzes. Es gibt Spalten und Kästen, weniger Überschriften, Texte und Bilder sind über den Bildschirm verstreut. Wir sehen wir uns als Beispiel eine typische Portalseite an.

Auf dieser Seite:

• 1. Die Startseite der Süddeutschen Zeitung
• 2. Ordnung der Seite
• 3. Verlust der Ordnung

1. Die Startseite der Süddeutschen Zeitung

Abbildung der Startseite von sueddeutsche.de

Ziemlich voll ist diese Seite. Das Bild zeigt nur einen kleinen Ausschnitt, die vollständige Startseite ist um ein vielfaches länger. Wer näher hinschaut, sieht aber: Alles hat seinen Platz.

Was ist drauf auf der Seite?

• Ganz oben gibt es eine Leiste, in der Datum und Uhrzeit angezeigt werden, daneben die Funktion "als Startseite definieren", dann Links auf "Kontakt", Impressum" und "Sitemap". Optisch gehört das alles zusammen, es ist durch die Farbgebung des Hintergrunds als Einheit zusammengefasst. Gibt es auch eine inhaltliche Gemeinsamkeit der auf der Leiste untergebrachten Elemente? Vielleicht eher eine negative Gemeinsamkeit: Keines der zugeordneten Elemente hat einen besonderen Bezug zum Inhalt der Startseite oder zum Informationsangebot der Süddeutschen Zeitung. Es handelt sich eher um allgemeine Servicefunktionen. Die Leiste könnte genau so auch auf den meisten anderen Webangeboten stehen.
• Darunter ist der Titel des Webangebots angeordnet - eine Schriftgrafik mit dem Logo "sueddeutsche.de". Rechts daneben eine blinkende Werbung, die wir jetzt nicht weiter beachten.
• Darunter kommt dann ein waagerechtes Menü. Es hat 7 Optionen: Neben zwei Versionen der Zeitung gibt es Verweise auf Webangebote zu Immobilien, Autokauf, Jobs, Reisen, der SZ-Bibliothek und SZ-Klassik. Rechts daneben gibt es noch eine ausklappbare Liste mit Verweisen auf andere zentrale Webangebote der Süddeutschen Zeitung. "Andere Webangebote der Süddeutschen Zeitung" wäre wohl das Gemeinsame dieses Abschnitts.
• Als Nächstes kommt wieder eine farbig hinterlegte Leiste, in der zwei Eingabefelder und vier Links zum Thema "Anmelden bei sueddeutsche.de" zusammengefasst sind.

Dann geht es mit drei nebeneinander angeordneten Spalten weiter.

• In der linken Spalte ist ein senkrechtes Menü mit den Ressorts der Zeitung angeordnet, dann ein kleines Menü mit drei Sonderthemen, darunter ein Kasten für die Suche und diverse Listen mit direkten Links zu weiteren Themen und Services.
• In der mittleren Spalte stehen die eigentlichen Inhalte. Auf der Startseite sind das kleine Abschnitte mit "Topthemen": jeweils eine Überschrift, ein kurzer Anreißer, und eine Liste mit Verweisen auf Artikel dazu. Dann nach dem gleichen Schema je ein Abschnitt zu den Ressorts Politik, Wirtschaft, Finanzen, Job & Karriere, Sport, Kultur und so weiter.
• Die rechte Spalte bietet diverse ständige Service-Rubriken, zum Beispiel zum Wetter, Spruch des Tages, den Börsendaten.

---

2. Ordnung der Seite

Ist das jetzt ungeordnet? Ganz sicher nicht. Es ist zwar sehr viel auf der Seite untergebracht, so dass man nicht gleich den Überblick hat, wenn man sie sich zum ersten Mal anschaut. Aber man merkt schon, dass sich da Leute viel Mühe gegeben haben, die vielen Texte und Bilder so anzuordnen, dass es Sinn macht und man sich zurechtfindet.

Und wie steht es mit den vorgestellten Ordnungsmitteln? Die finden wir alle auf der Seite wieder - auch wenn sie in etwas anderer Form daherkommen als etwa in einem Aufsatz:

• Abschnitte

  Abschnitte im Sinne unserer Ordnungsmittel gibt es viele. Nicht immer ist die Gemeinsamkeit auf den ersten Blick deutlich, aber sie ist ganz klar da. Servicebereich, Menü mit verwandten Webangeboten, Anmelden, Menü für die Ressorts, Suche, diverse Listen mit Direktlinks, Topthemen, Ressortthemen und so weiter: Alle Inhalte sind sehr klar und deutlich in abgegrenzte Einheiten gepackt. Und das ist auch unbedingt nötig. Denn ohne eine klare Abgrenzung der verschiedenen Elemente wäre man auf dieser Seite, die doch sehr viele unterschiedliche Inhalte zusammenbringt, schnell verloren.

• Aufzählungen

  Aufzählungen gibt es auch recht viele. Zum Beispiel die sieben Optionen des waagerechten Menüs: Die gehören zusammen, man nimmt sie auch als zusammengehörig wahr. Sie stehen zwar nicht wie bei Aufzählungen üblich untereinander, sondern nebeneinander - trotzdem ist das Menü ganz klar eine Aufzählung. Auch das Menü für die Ressorts ist eine Aufzählung, ebenso die verschiedenen Listen mit Direktlinks.

• Überschriften

  Es gibt auch zahlreiche Überschriften auf der Seite. Allerdings sind einige sehr klein, man übersieht sie leicht. Und es gibt auch Bereiche, die keine Überschrift haben.

  Zum Beispiel wieder das waagerechte Menü. Da könnte man eine Überschrift "Menü Onlineangebote" darüber setzen, dann wüsste man gleich, wofür die Leiste da ist. Aber ist das nötig? Die Optionen des Menüs sind als Karteikartenreiter gestaltet - eine übliche Form für die grafische Darstellung der Hauptmenü-Optionen, die den meisten Besuchern sicherlich vertraut ist. Die Gestaltung ersetzt also die Überschrift, eine zusätzliche Überschrift braucht der Betrachter eigentlich nicht.

• Größere Einheiten

  Größere, übergeordnete Einheiten gibt es auch. Die drei Spalten sind zum Beispiel übergeordnete Einheiten. Auch sie haben keine Überschriften. Und auch hier kann man fragen: Brauchen sie welche? Der Besucher würde vielleicht beim ersten Mal ein bisschen Zeit sparen, wenn der Inhalt der beiden Randspalten durch treffende Überschriften angezeigt würde. Aber wenn er drei oder vier Mal auf der Seite war, dann weiß er: Das Wetter ist in der rechten Spalte.

Die Webseite ist geordnet und der Besucher benutzt die Seite auf Basis dieser Ordnung. Die Ordnung verwendet grafische Mittel, übergeordnete Einheiten werden zum Beispiel durch die Farbe des Hintergrunds als zusammengehörig dargestellt. Die Ordnung kommt teilweise ohne Worte aus. Sie stützt sich auf Sehgewohnheiten und vertraute Bilder.

---

3. Verlust der Ordnung

Was passiert aber, wenn die grafischen Mittel zur Ordnung der Inhalte nicht zur Verfügung stehen, zum Beispiel weil der Besucher blind ist oder weil er nur einen sehr kleinen Ausschnitt des Bildschirms sehen kann?

So sieht die Startseite der Süddeutschen Zeitung in einem einfachen Textbrowser aus:

Der Textbrowser Lynx bringt die Inhalte alle nacheinander. Die Anordnung in der Fläche und die grafische Aufbereitung gehen verloren. Das lässt sich auch gar nicht vermeiden, in so eine Form muss man den Inhalt bringen, um ihn vorzulesen oder um ihn auf einem sehr kleinen Bildschirm anzuzeigen. Wie steht es mit der Übersichtlichkeit?

Jetzt soll man nicht ungerecht sein und gleich abwinken. Auch bei der grafischen Version der Seite ist nicht alles auf einen Blick klar. Es kostet Zeit, sich zu orientieren und das ist bei einer Seite, die so viele unterschiedliche Inhalte zusammenfasst, auch unvermeidlich. Und dazu kommt: Die Darstellung im Textbrowser ist man nicht gewohnt, man muss erst mal herauskriegen, woran Überschriften oder andere strukturierende Elemente da zu erkennen sind.

Aber auch nach näherem Studium muss man sagen: So etwas, wie eine ordnende Struktur, irgend etwas, das auch nur annähernd den Ordnungsmitteln der visuellen Darstellung entspricht, ist nicht zu erkennen.

Die Ordnung der Seite war an die Aufbereitung für den Bildschirm gebunden, sie ist nicht mehr da. Irgendwie benutzen kann man die Seite schon noch. Aber es ist umständlich. Ein Ersatz für die visuelle Ordnung muss also her.

Inhaltsverzeichnis