ergo online
Arbeit im Büro gesund gestalten

Expertenwissen
Gestaltung und Konsistenz

Autor: Lothar Bräutigam

Übersicht  

  • Alle Seiten eines Webangebotes sollte in einem einheitlichen Stil gehalten sein, um den Nutzern Orientierung und Navigation zu erleichtern.
  • Dazu gehören einheitliche Farbwahl, Typografie und Navigationselemente.
  • Die geeignete Aufteilung eines Informationsangebots in verschiedene Webseiten und die Verknüpfung untereinander durch Hyperlinks sind wichtige Aufgaben beim Webdesign.
  • Webseiten sollen auch bei niedriger Bildschirmauflösung ohne waagerechtes Scrollen zu betrachten sein.


Ähnlich wie andere Software-Systeme sollte auch ein Informationsangebot im Web eine einheitliche Bedienungsoberfläche und ein einheitliches Layout aufweisen. Diese geforderte Konsistenz gehört zu den software-ergonomischen Gestaltungsgrundsätzen der Norm DIN EN ISO 9241 Teil 110.

Ein einheitlicher Aufbau erleichtert dem Nutzer die Orientierung in einem Webangebot, gleichartige Bedienelemente ermöglichen ein schnelleres Zurechtfinden innerhalb der Menüs und Navigationshilfen. Daraus resultiert eine Vielzahl konkreter Gestaltungsanforderungen, von denen hier nur die wichtigsten  angesprochen werden. Tips zur Navigation und zur Menüsteuerung gibt es in einem Extra-Dokument in ergo-online.

Empfehlungen

Einheitlichkeit der Gestaltungselemente

Das Layout eines zusammengehörigen Webangebotes sollte in einem einheitlichen Stil gehalten sein. Dies betrifft besonders die Farbwahl und die Typografie. Einheitlichkeit der Gestaltungselemente bedeutet weiterhin:

  • Gleiche Form und Anordnung von Navigationselementen auf allen Seiten.
  • Einheitliche und verständliche Bezeichnungen für Links zum gleichen Ziel verwenden: 
    Beispiel: Statt "Weiter? hier klicken!" besser "Zur Vertiefung zum Thema XY"
  • Die gleichen Schalter und Buttons mit einheitlicher Beschriftung auf allen Seiten benutzen:

Bild 1: Button "Rechtliche Anforderungen"  
Zum Beispiel verweist der nebenstehende Button in ergo-online grundsätzlich auf Dokumente  im Bereich "Rechtliche Anforderungen". Dies erleichtert die Orientierung.
  • Ungebräuchliche Abkürzungen vermeiden.

  • Blaue Schrift auf weißem Hintergrund sollte Hyperlinks vorbehalten bleiben, d.h. die Farben für Links sollten nicht geändert werden.

Ruhiges Layout

Zunächst sollte das Layout einer Webseite einen ruhigen Eindruck machen, um nicht durch überflüssige Eye-catcher, Hintergrundbilder oder typografischen "Schnickschnack" von den eigentlichen Inhalten abzulenken:

  • Bei allen Seiten, die schwerpunktmäßig Informationen bereitstellen, sollte als Hintergrundfarbe möglichst weiß eingestellt werden (mit scharzer Schrift). Ansonsten führt die vorgegebene Standardfarbe bei vielen Browsern zu einem grauem Hintergrund und damit zu Einbußen bei der Lesbarkeit.
  • Eye-catcher in Form von blinkenden Bildern (animierte GIFs) oder Schriften stören die Informationsaufnahme, es sei denn sie weisen auf etwas sehr Wichtiges hin.
  • Es sollte auch genügend freie Fläche in Form von Leerzeilen oder Abständen bleiben, die nicht für Text oder andere Inhalte genutzt wird.
  • Wichtig ist auch die Ausrichtung gleichartiger Elemente (z.B. Schalter) an einer gemeinsamen Fluchtlinie. Das ist besonders bei der Gestaltung von Formularen zu beachten.

 
Hyperlinks nutzen

Hyperlinks sind das zentrale Gestaltungselement im WWW. Sie sollten auch dazu genutzt werden, um die einzelnen Webseiten kurz und knapp zu halten. Details und Vertiefungen können in gesonderte Dokumente ausgelagert werden, auf die dann per Hyperlink verwiesen wird. Dies ermöglicht es dem Nutzer, sich entsprechend seiner Interessenlage und auch seiner meist knappen Zeit im Webangebot fortzubewegen. Man braucht kein langes Dokument von vorn bis hinten zu lesen, sondern wird im besten Fall per Links zu den gesuchten Inhalten geführt.

Vom Entwickler eines Webangebots erfordert das allerdings eine völlig andere Informationsstrukturierung. Im Internet gibt es keine sequentiell aufeinander folgende Seiten wie in einem Buch. Nach der ersten Seite im Buch folgt die zweite. Im Web gibt es soviele verschiedene "zweite" Seiten wie sich Links auf der ersten befinden. Geeignete Aufteilung eines Informationsangebots und geschickte Verlinkung untereinander sind wichtige Aufgaben beim Aufbau eines Webangebots.


Wichtiges am Ende einer Seite

Am Ende einer Webseite sollten einige wichtige Angaben zur Erleichterung der Orientierung zu finden sein:

  • die wichtigsten Links: zum übergeordneten Menü, zur Startseite und zu den wichtigsten Seiten mit weiterführenden Inhalten
  • das Datum der Erstellung und/oder der letzten Änderung
  • der Name des Autors oder der  Autorin, am besten mit eMail-Adresse, so daß auch die Möglichkeit der Kontaktaufnahme besteht.
Verschiedene Bildschirmauflösungen bedenken

Die konkrete Gestalt einer Webseite, so wie ein Nutzer sie sieht, hängt entscheidend von der Auflösung seines Bildschirms ab. Diese kann 640*480 Pixel bei einem 14- oder 15-Zoll Bildschirm betragen, oder 1600*1200 Pixel bei einem 19-Zoll Monitor beispielsweise: das ist eine ca. sechsmal so große Bildfläche. Die Tabelle oder das Bild, das am großen Monitor gut aussieht, paßt evtl. bei kleiner Auflösung gar nicht mehr auf den Bildsschirm und ist nur mit Hin- und Her-Scrollen zu betrachten. Insbesondere waagerechtes Scrollen sollte in jedem Fall vermieden werden.

Die wichtigsten Tipps:

  • Man sollte beim Webdesign möglichst von der kleinsten verfügbaren Auflösung (640*480 Pixel) ausgehen. Ohne waagerechtes Verschieben der Anzeige sollte dabei alles gut zu sehen sein. Viele Websites gehen heute alllerdings bereits von 800*600 Bildpunkten aus.
  • Keine Bilder oder Tabellen verwenden, die breiter als diese Auflösung sind.
  • Möglichst keine absoluten Größenangaben (z.B. Tabellenbreite) verwenden, sondern relative in Prozent.

        Beispiel: Tabllendefinition in HTML
        <TABLE BORDER="0" CELLPADDING="3" CELLSPACING="0" WIDTH="100%">

  •  Alle erstellten Seiten sollten an Bildschirmen verschiedener Auflösung mit verschiedenen Browsern getestet werden.


Der Servicebereich

Rechtsquellen und Normen

Gesetze und Verordnungen
  • Bildschirmarbeitsverordnung (BildscharV),  Anhang, Nr. 20 - 22
Normen
  • DIN EN ISO 9241:  Ergonomische Anforderungen für Bürotätigkeiten mit Bildschirmgeräten (bzw. neu: Ergonomie der Mensch-System-Interaktion)
    • Teil 12: Informationsdarstellung 
    • Teil 13: Benutzerführung

Literatur

 
Zur Vertiefung:
            
Harald Weinreich (Universität Hamburg, Fachbereich Informatik):
10 wichtige Leitlinien für die Gestaltung eines ergonomischen WWW-Informationssystems
http://vsys-www.informatik.uni-hamburg.de/ergonomie/index.html
Hamburg 1997, (enthält auch vertiefende Literaturhinweise) 

Fit für Usability
http://www.fit-fuer-usability.de/
Eine Online-Initiative des Fraunhofer-Instituts für Angewandte Informationstechnik FIT
Mit Tipps zur Software-Gestaltung und Web-Gestaltung 

Bücher und Broschüren zu Software-Ergonomie
 

Verwandte Themen

Letzte Änderung: 19.12.1999

Logo Ergo Online
© 2016 Beratungsstelle für Technologiefolgen und Qualifizierung (BTQ Kassel)

Rechtsquellen
  • DIN EN ISO 9241


mehr

Weiterlesen im www
Verwandte Themen
Inhaltsverzeichnis
Bezug des Regelwerks
Sponsoren

Der Artikel wurde gefördert von


Gewerkschaft ver.di


Rationalisierungs- und Innovationszentrum der Deutschen Wirschaft e.V.