3.1 Layout

Viele WWW-Seiten haben den „Charme eines Faltblattes" und den „Nutzen einer Postwurfsendung" (/Bager96a/, S. 268), andere wiederum sind „eher ein optisches Gesamtkunstwerk als ein Text zum Lesen" (/Ramm95/, S. 271).

Auch bei Online-Publikationen gilt wie bei „normalen" Publikationen die Forderung nach einem einheitlichen und klaren Layout unter Verwendung grundlegender Gestaltungselemente. In den letzten Jahren sind besonders durch Grafik-, Textverarbeitungs- und Desktop-Publishing (DTP)-Software die Ansprüche an das Aussehen jeglicher Publikationen gewachsen. Somit kommt dem Layout einer WWW-Präsentation als Motivationsmittel zum Weiterlesen eine wichtige Rolle zu.

In diesem Abschnitt werden darum verschiedene Gesichtspunkte des Layouts, wie Lesbarkeit und Wiedererkennbarkeit, Größe und Umfang der Seiten, Farben und Muster, Verwendung von Grafiken, Links und Navigationselementen, einer näheren Betrachtung unterzogen. Die folgenden Ausführungen basieren zum Teil auf Darstellungen in /Apitz95/: S. 77-111, /Ramm95/: S. 271-273, /Lemay95/: S. 52-63 und /Koch-Steinheimer95/: S. 152-155.

Lesbarkeit

Zu lange Seiten sind wegen des ständigen Scrollens nicht nur lästig, sondern sie verwirren den Leser auch. Darum sollte der Textumfang begrenzt werden (kurzer und präziser Ausdruck - keine Romane) und ggf. eine Aufteilung der Texte auf mehrere kleine vorgenommen werden. Allerdings ist eine zu große Fragmentierung auch nicht in jedem Fall empfehlenswert, z.B. wenn die gesuchte Information danach auf 10 Seiten verteilt ist.

Die verwendeten Gestaltungselemente (Formatierungen, Ausrichtungen, Absätze) sollen der Übersichtlichkeit dienen und konsequent einem einheitlichen Stil folgen, so daß die (Text-) Struktur für den Leser einfach zu durchschauen ist:

• Ein ausgewogener Einsatz von Text- und Grafikelementen unter Beschränkung auf das Wesentliche und Weglassung von überflüssigen Bestandteilen bringt Ruhe in die Darstellung der WWW-Seiten. Viele verschiedene, kreuz und quer angeordnete und ausgerichtete Elemente verdecken den eigentlichen Inhalt einer Seite und wirken auf den Betrachter zu unruhig.
• Die Texte können durch Absätze, Hervorhebungen und Überschriften übersichtlich strukturiert werden, dabei sollte man aber nicht zuviele Elemente auf einer Seite unterbringen wollen (weniger ist oft mehr).
• Ein Absatz sollte zum einen nicht nur ein kurzer Satz sein, aber zum anderen auch nicht eine ganze Seite füllen, denn ein ganzes Fenster ohne Absatz ist auch unübersichtlich.
• Weiterhin ist es sinnvoll, eine Ausrichtung des Textes auf bestimmten gedachten senkrechten und waagerechten Linien vorzunehmen.

Größe von WWW-Seiten

Ob eine Seite beim Leser auf wohlwollende Betrachtung stößt, hängt auch von ihrer Größe ab, und zwar von der Breite der Seite und von der Länge der Seite. Bei der Gestaltung von Seiten sind darum einige wichtige Punkte zu beachten:

• Die meisten verwendeten Monitore (14" und 15") besitzen Bildschirm-Auflösungen (Breite x Höhe) von 800 x 600 Pixeln bzw. 640 x 480 Pixeln. Darum sollte die Breite einer Seite generell auch auf ca. 600 Pixel beschränkt werden (Ränder für Browser mit eingerechnet), damit alle Nutzer - auch die mit der kleinsten Auflösung - nicht in der Breite scrollen müssen. Insbesondere betrifft dies die Gestaltung von Elementen mit festen Abmessungen wie Grafiken und Tabellen.
• Die Länge einer Seite sollte maximal 3 Bildschirm-Seiten (ca. 1,5 DIN
  A 4-Seiten) betragen, denn lange Dokumente benötigen eine längere Übertragungszeit als kürzere. Die dadurch enstehenden Kosten können Ärger beim Leser verursachen, vor allem, wenn er dann feststellt, daß er diese Information gar nicht gesucht hat.
• Da auch kein Leser gewillt ist, mehrere Bildschirm-Inhalte hintereinander durchzulesen, ist es besser, die Inhalte zu organisieren und durch Aufteilung auf kleinere Dokumente übersichtlich zu strukturieren. Der Inhalt läßt sich schneller überblicken, wenn er z.B. durch Menüs, ein Inhaltsverzeichnis oder einen Index thematisch unterteilt ist.

Farben und Muster

Bei der Verwendung von Farben und Mustern ist eine Orientierung an „normalen" Publikationen und an der menschlichen Natur sinnvoll. Zudem hat jede Farbe eine andere (psychologische) Wirkung. Das bedeutet:

• Keine dunklen Farben wie schwarz oder dunkelblau als Hintergrund und helle Schrift verwenden, denn dies ist für das menschliche Auge anstrengend.
• Keine anderweitig belegten Farben benutzen, z.B. die Warnfarbe Rot.
• Am besten eignen sich helle Farben wie weiß oder hellblau (kalt, sachlich) bzw. gelb oder beige (warm, freundlich) für den Hintergrund sowie dunkle Farben wie schwarz oder dunkelblau für den Text.
• Keine Grafik als Hintergrundmuster verwenden, denn diese kann zu unruhig und damit ermüdend auf den Leser wirken, und der eigentliche Inhalt ist dadurch schwerer lesbar bzw. erkennbar (Ablenkung vom Wesentlichen).

Bilder (Grafiken, Fotos)

„Ein Bild sagt mehr als tausend Worte. Aber ein Bild „wiegt" auch wesentlich mehr als tausend Worte." (/Apitz95/, S. 105)

Bilder sind Informationsträger und dienen der Veranschaulichung von Informationen. Sie tragen damit zum tieferen und leichteren Verständnis der Texte bei, lockern den Text auf und machen das Lesen angenehmer. Bilder können ein Blickfang sein, der auf Wesentliches hinweist, und der Seite ein besonderes Erscheinungsbild verleihen und dadurch einen positiven Gesamteindruck beim Leser erzeugen. Aber weniger ist auch hier mehr, denn große bzw. viele Bilder verursachen lange Ladezeiten und damit Kosten beim Leser, zumal viele Internetnutzer nur einen langsamen Modemanschluß besitzen.

• Bilder sollten sparsam, aber nicht geizig eingesetzt werden, denn Präsentationen ohne Bilder sind für den Leser langweilig und unattraktiv.
• Bilder nur dann verwenden, wenn sie auch wirklich den Text verdeutlichen bzw. zur Orientierung im Dokument dienen (nie als Selbstzweck).
• Keine Bilder verwenden, ohne die die Seite keinen Sinn gibt (an Textbrowser denken). In diesem Falle wäre es besser, dann eine Text- und eine Grafikversion anzubieten (allerdings höherer Verwaltungaufwand).
• Bei großen Bildern dem Leser die Auswahl überlassen, ob er das Bild sehen möchte, indem ein Minibild (Briefmarkenformat als Link) mit Angabe der Speichergröße (xxx kByte) des Bildes angeboten wird. Außerdem sollte man deren Abmessungen (Höhe x Breite in Pixeln) für den Browser angeben. Durch solche Größenangaben läßt sich der Ladevorgang beschleunigen (sie werden vom Browser als Platzhalter verwendet).
• Bei Inline-Grafiken kann der Leser nicht entscheiden, diese werden automatisch mit der Seite zusammen geladen (es sei denn, er hat die Grafikdarstellung im Browser abgeschaltet), darum sollte man auf jeden Fall die Größe der Bilder auf eine Bildschirmseite beschränken: maximal ca. 600 x 450 Pixel, so daß der Leser auch bei der kleinsten Bildschirm-Auflösung von 640 x 480 Pixeln das Bild ohne Scrollen in der Höhe / Breite sehen kann.
• Die Verwendung sich wiederholender gleicher Bilder, z.B. Logos, Icons zur Navigation, in mehreren Dokumenten ist sehr sinnvoll. Sie befinden sich nach dem ersten Laden im Cache-Speicher und müssen dann nicht jedesmal erneut vom Browser geladen werden.

• Zum einen läßt sich die Speichergröße durch Reduzierung der Farbpalette verringern: 256 Farben bei mehrfarbigen Bildern (auch bei Fotos) sind völlig ausreichend.
• Und zum anderen können die Bilder im Interlaced-Format (Gif 89a Interlaced) abgespeichert werden: „Interlaced-Grafiken sind Grafiken, die in verschiedenen Auflösungen gespeichert werden. [... Sie] werden in vier Durchgängen aufgebaut und geben die Impression eines sich nach und nach konkretisierenden Bildes. Da zunächst nur der Bildteil mit der niedrigsten Auflösung dargestellt wird, kann sehr schnell ein erster Eindruck einer Grafik vermittelt werden." (/Apitz95/, S. 108)

Links

Hypertext-Dokumente ermöglichen durch Links das schnelle Bewegen innerhalb und zwischen Dokumenten, aber viele Links allein machen noch kein Hypertext-Dokument. Die Wahl und Zusammenstellung der Links sollte deshalb wohl überlegt sein (Inhaltsverzeichnisse, Menüs, Index). Da Links vom Browser farbig, unterstrichen oder eingerahmt hervorgehoben werden, sollten sie zudem sehr sparsam eingesetzt werden, denn eine mit Links übersäte Seite ist zum einen sehr unangenehm zu lesen, und zum anderen hält der Leser jedes markierte Wort für besonders wichtig.

Navigationselemente

Navigationselemente (spezielle Links in Form von Symbolen / Icons oder Text) dienen der schnellen Bewegung innerhalb der Präsentation. Bei Verwendung von Symbolen sollten diese eindeutig interpretierbar sein, denn ein erschwerter Umgang mit den Dokumenten senkt die Bereitschaft, sich mit dem Inhalt auseinanderzusetzen (im schlechtesten Fall ist der Leser weg). Wenige Icons mit zusätzlicher Beschriftung sind deshalb besser zur Verständlichkeit. Wichtig ist es, mit Hilfe von Navigationselementen dem Leser immer die Möglichkeit zu bieten, an den Beginn der Präsentation, des Kapitels, des Themas oder zum Inhaltsverzeichnis bzw. zum Index zu gelangen und somit keine Sackgassen zu erzeugen, denn nur zurückblättern ist zeitraubend und frustrierend (siehe auch Abschnitt 3.2).

Wiedererkennbarkeit

Jede Seite sollte grundsätzlich so gestaltet werden, daß sie jederzeit für sich selbst bestehen kann, denn ein Leser kann auch mitten in die Präsentation hineinspringen und sollte dabei nicht im Chaos (Lost in Hyperspace) landen. Damit sich der Leser besser zurechtfindet, ist ein gleichartiges Aussehen aller Dokumente sinnvoll (siehe auch Aufbau einer Seite in Abschnitt 3.2). Dazu gehört die Verwendung von Logos und gleichbleibenden Navigationshilfen (Benennung, Aussehen, Anordnung) einheitlich in allen Dokumenten und die Hervorhebung der Zusammengehörigkeit von einzelnen Seiten durch Symbole oder kleine Erkennungszeichen. Damit wird auch das Verlassen der Präsentation für den Leser klar erkennbar, z.B. bei Verweisen auf andere Institutionen.