Authorin:
Andrea Langner

Gute Homepage-Gestaltung

Zuerst einmal stellt sich einem die Frage, was überhaupt eine "gute" Homepage ist. Welche Faktoren tragen dazu bei, ob ein Benutzer eine Homepage als "gut" empfindet? Würde man Leute danach fragen, bekäme man wohl Antworten, wie: Übersichtlichkeit, Benutzerfreundlichkeit, gute Lesbarkeit, ... , etc. Aber was macht eine Seite übersichtlich und gut lesbar? Hierzu sollen einige grundlegende Gestaltungshinweise gegeben werden.

Übersichtlichkeit entsteht durch Gleichförmigkeit, formalen Bezug der Elemente untereinander und auch durch genaue Anordnung der Elemente. Platzierung, Abstände, Einrücken, Schriftgrößen und -stile sind Mittel, um Ebenen der Information, die Anzahl und Reihenfolge der Themen und deren Wichtigkeit zu kodieren. Wenn diese Hinweise vorhanden sind, können Augenbewegungen und somit die Aufmerksamkeit des Benutzers einfach und effizient gesteuert werden. Hilfreich sind in erster Linie übersichtliche Strukturen, um insbesondere Text, Bilder und Tabellen zu formatieren. Ein klar gegliedertes und einheitliches Layout, in dem Schlüsselinformationen durch Hervorhebungen leicht zu finden sind, erleichtert es dem Leser einen Überblick über den Inhalt der Seite oder des Textes zu bekommen, und so eine schnelle Entscheidung zu treffen, ob ihn derselbige überhaupt interessiert.

Gehen wir zunächst näher auf die Gestaltung des Textes ein. Diese ist im Netz besonders wichtig, da die durchschnittliche Lesegeschwindigkeit etwa 20-30% niedriger ist, als bei Schrift auf gedrucktem Papier, und die Mehrheit der ‚Netz-Lesenden' den Text auch nicht lesen, sondern ihn erst einmal ‚scannen' indem sie einzelne Wörter und Sätze herauspicken, um den Inhalt zu erfassen um dann erst eine Leseentscheidung zu treffen. Hier wird die bereits erwähnte Hervorhebung von wichtiger Information von Bedeutung.

Fettdruck ist die beste Möglichkeit um Marken für das Auge zu setzen. Wer Farben verwenden möchte, sollte sich unbedingt an gesättigte Farben halten. Pastellfarben eigen sich nicht als Blickfänger. Nachteil: Farben gehen beim Kopieren oder Ausdrucken des Textes verloren, oder werden blasser. Kursive Schrift eignet sich kaum, da sie sich zu wenig vom Hintergrund abhebt. Auf Unterstreichungen zur Betonung von Inhalten sollte man allerdings besser verzichten, da dies bereits bei der Kennzeichnung von Wörtern als Links schon zum Standart geworden ist. Obwohl dies natürlich nicht verpflichtend ist, sollte man sich an solche impliziten Abmachungen halten, um aus den Erfahrungen, die der Nutzer auf anderen Seiten bereits gemacht zu profitieren, und ihn nicht damit zu verwirren indem man davon abweicht. Im Falle der Unterstreichung von ‚normalen' Wörtern würde das dazu führen, dass der Nutzer fälschlicherweise die Link-Funktionalität erwartet.

Egal wofür man sich entscheidet, man sollte dieses Mittel nur in Maßen benutzen und wirklich nur einzelne Wörter hervorheben. Betont man fast den ganzen Text, zieht der nicht-hervorgehobene Text (gemäß dem Ausnahmegesetz) die größte Aufmerksamkeit des Lesers auf sich. Zu viele verschiedene Hervorhebungen können einen Text auch unleserlich machen, und den Leser verwirren. Außerdem nimmt die Wirkung mit der Häufigkeit der Anwendung ab. Eine Faustregel zum Mischen von Schriften (z.B. normal, fett) in langen Textpassagen ist, dass möglichst nur zwei Schriftarten gemischt werden sollen. Diese sollten dann jedoch eindeutig verschieden sein.

Erwähnt sei hier noch eine weitere Möglichkeit, die sich ebenfalls gut eignet um Kerninhalte knapp darzustellen: die Listen.

Die Zeilenlänge (durchschnittliche Zeichenzahl je Zeile) sollte auch bei hohen Bildschirm-Auflösungen nicht zu groß sein. 60-70 Zeichen gelten nach den Standardregeln der Ergonomie noch als einigermaßen gut lesbar. Um zu verhindern, dass der Text über die ganze Bildschirmbreite umgebrochen wird, eignet sich die Darstellung von Texten in Tabellen mit fester Breite. Auch Layout-Raster, die den verfügbaren Platz auf der Seite einteilen (Kopf, Navigation, Text, Bilder, Tabellen, etc.), sollten dies berücksichtigen. Aber Vorsicht: Auch zu kurze Zeilen sind benutzerunfreundlich und können in Verbindung mit Blocksatz das Lesen durch zu große Abstände zwischen den Zeichen sehr erschweren.

Weitere wichtige Layoutkriterien bei Textpassagen sind die Schriftausrichtung oder Satzart, der Schrifttyp (Font), der Schriftgröße (Schriftgrad), den Zeilenabstand (Freiraum zwischen Zeilen) und die Laufweite der Schrift (Raumverbrauch in der Waagrechten).

Es gibt vier verschiedene Ausrichtungen:
-linksbündig
-zentriert (Mittelachsensatz)
-rechtsbündig
-Blocksatz

Für längere Texte werden, auf Grund unserer Leserichtung (links->rechts), nur linksbündiger und Blocksatz eingesetzt. Sie sind am kompaktesten und eignen sich deshalb gut für lange Textpassagen. Rechtsbündiger und Mittelachsensatz sind hier nicht angebracht, da sich der Zeilenanfang der nächsten Zeile nur schwer finden lässt. Sie eignen sich besser für kurze Textabschnitte, um den Text aufzulockern, Dynamik reinzubringen oder besondere Aufmerksamkeit darauf zu lenken.

Auch die Wahl des Schrifttyps beeinflusst die Lesekomfortabilität enorm. Es sollte eine Schrift gewählt werden, die zum einen auf möglichst vielen PCs verfügbar ist (z.B. Arial, Courier, Times) und zugleich auch den Lesebedürfnissen am Bildschirm entgegenkommt. Auf Grund einer durchschnittlichen Bildschirmauflösung von 72 dpi verschlechtert sich die Darstellung je feiner die Linien und geringer die Schriftgröße ist. Aber auch aus ergonomischen Gründen, und weil der Abstand zum Gelesenen größer ist als bei gedrucktem Text, sollte am Bildschirm grundsätzlich ein größerer Schriftgrad eingesetzt werden.

Formale Anforderungen an die Bildschirmlesbarkeit eines Schrifttyps sind:
1. die konstante Höhe der Kleinbuchstaben ohne Ober- und Unterlänge im Verhältnis zur Gesamthöhe der Schrift sollte möglichst groß sein (große x-Höhen).
2. ausgeglichener Weißraum innerhalb und zwischen den Zeichen (offene Binnenräume)
3. gleichmäßige Balkenstärken.

Bei der Verwendung von Grafiken und Bildern muss darauf geachtet werden, dass diese nicht unvorteilhaft ins Gewicht fallen, indem sie die Aufmerksamkeit des Lesers zu sehr vom eigentlichen Inhalt ablenken, oder ihm das Lesen unnötig erschweren. Lesen von Texten auf Hintergrundgrafiken mit wechselnder Helligkeit, Kontrast oder Farbe ist für die Augen sehr ermüdend. Motive können die Aufmerksamkeit zu sehr vom Text weglenken und stören das flüssige Lesen. Überhaupt sollten Grafiken nur sparsam eingesetzt werden, um gelesenes zu illustrieren und besser verständlich zu machen, oder den Text etwas aufzulockern, damit sie den Leser nicht erdrücken. Auf Animationen sollte man am besten ganz verzichten. Blicken und Bewegung ziehen die Aufmerksamkeit des Lesers zu sehr auf sich und stören im Blickfeld des Textes die Konzentration und das Leseverhalten. Zudem erhöhen sie die Ladezeit meist beträchtlich.

Zum Schluss sei noch gesagt, dass es nichts nützt, wenn alle Einzelteile noch so schön gestaltet sind, wenn sie im Ganzen nicht zusammenpassen. Von Anfang an muss auf ein einheitliches Design geachtet werden, ein Schema, in das alle Einzelteile sich einfügen und als Ganzes erscheinen. Wichtig ist, dass sich Inhalt und Form entsprechen. Die Positionierung der einzelnen Elemente soll hierbei den Gestaltungsraum zu einer Einheit verschmelzen lassen. Das Seitenlayout soll im gesamten Dokument einheitlich sein, so dass die Einheit des Dokuments betont und Zusammengehörigkeit der einzelnen Abschnitte und Kapitel erkannt wird.



Quellen:
http://www.kommdesign.de/texte/aufmerk6.htm http://www.darmstadt.gmd.de/~crueger/webdesign/design.html
http://www.darmstadt.gmd.de/~crueger/webdesign/bilder.html
http://www.useit.com/alertbox/9710a.html
http://www.lehrerfortbildung-bw.de/werkstatt/produktion/website/4gestaltungsaspekte/gestalt_website_3.htm
http://www.ideenreich.com/struktur/wahrnehmung_02.shtml
http://www.fpk.tu-berlin.de/manuals/graphics/multimedia/06_Layout_Richtlinien/node10.html#SECTION00632000000000000000
http://www.fpk.tu-berlin.de/manuals/graphics/multimedia/06_Layout_Richtlinien/node12.html
http://www.fpk.tu-berlin.de/manuals/graphics/multimedia/06_Layout_Richtlinien/node13.html