Web-Design

 

Hinweise und Kontrollfragen
zur
Gestaltung von Angeboten im Internet

 

Timm Grams, Fulda

 

 

Adressat

Geht es darum, Betrachter erst für ein Anliegen zu interessieren?

Gute Werbung zeigt, wie es geht

Lieber mit einem prägnanten Titel nur 90% der Adressaten erreichen, als mit Weitschweifigkeit von vornherein 90% abstoßen

Weglassen, was sich der Leser selber denken (oder anderweitig besorgen) kann

Möglichst einen (!) Blickfang anbieten, der auf das Hauptanliegen verweist: Bild, Logo, Animation

Keine wohlfeilen Animationen für Nebensachen wie Adressen usw.

Sollen Betrachter angesprochen werden, die gezielt nach Informationen suchen?

Sparsam mit den Gestaltungselementen umgehen

Grundsätze zur Effizienz der Informationssuche beachten

Störende Blickfänge vermeiden

Wird der Zugang für bestimmte Benutzergruppen unnötig erschwert?

Regeln zur barrierefreien Gestaltung von Web-Seiten enthält

·        die „Verordnung zur Schaffung barrierefreier Informationstechnik nach dem Behindertengleichstellungsgesetz“ (BITV) und

·        die Seite der World-Wide-Web-Initiative unter dem Stichwort Accessibility.

 

 

Übersichtlichkeit

Sind die Möglichkeiten der Gruppierung von Informationen angemessen genutzt worden?

Textgestaltung

  • Absätze
  • Abschnitte mit Überschriften
  • Trennlinien und Tabellen

Prinzipien der guten Gestalt
("Sinnsuche des Wahrnehmungsapparats")

  • Prägnanztendenz nutzen:
    Zusammengehörendes in einfachen Grundformen organisieren (vorzugsweise Rechteck, seltener Dreieck oder Kreis)
  • Gesetz der Nähe nutzen:
    Logisch Zusammenhängendes gehört auch örtlich zusammen
  • Gesetz der Ähnlichkeit nutzen:
    Ähnliche Information ähnlich darstellen
  • Gesetz der Figur-Grund-Unterscheidung nutzen:
    Zusammengehöriges mit gleicher Farbe unterlegen.
    Vorzugsweise dunkle Schrift oder Figur vor hellem Hintergrund

Sind die Seiten in sich abgeschlossen?

Vorzugsweise nur ein Thema je Seite

Sind die Höhepunkte leicht auffindbar?

Sparsamer Einsatz von Hervorhebungen mittels

  • Farbe und Helligkeit (des Hintergrunds oder der Schrift)
  • Schriftart und Schriftgröße
  • Schriftauszeichnung (kursiv, fett, unterstrichen, ...)
  • Rahmen

 

 

Einfachheit

Wird der "Scheinwerfer der Aufmerksamkeit" auf die wirklich wichtigen Aussagen und Inhalte gelenkt?

Sind die verwendeten Gestaltungselemente notwendig?

Oder: Haben wir es mit einem Fall optischer Umweltverschmutzung zu tun? Wird der Wahrnehmungsapparat unnötig belastet?

Entlastung des Wahrnehmungsapparats durch schlichte und durchgängige Seitengestaltung:

  • Form follows function
  • Gestaltungselemente nach festen Regeln verwenden
  • Farbcode vorab festlegen
  • Beschränkung auf Bilder, die zum Thema passen und die die Darstellung unterstützen
  • Animationen sparsam und zweckgerichtet verwenden
  • Verzicht auf Schnickschnack, Höflichkeitsfloskeln und Vermenschlichung des Computers ("Ich fange mit der Lektion an, wenn Sie hier klicken.")

Ist die Sprache komplizierter als der Gegenstand, der damit beschrieben wird?

Sätze sollen kurz, prägnant und allgemeinverständlich sein

 

 

Schönheit und optische Reize

Ist es angenehm, die Seite zu besuchen? Oder kommt man sich vor wie in einer Wüste?

Unterstützung der Orientierung und der Lesbarkeit durch ansprechende visuelle Gestaltungselemente

Werden optische Reize zweckmäßig, unaufdringlich und nach dem Sparsamkeitsprinzip eingesetzt?

Wegen der "Sinnsuche des Wahrnehmungsapparats" erzeugen bereits einfache Reize recht eindrucksvolle Effekte der Gestalt-, Tiefen- und Bewegungswahrnehmung

Ist die Seite durch zu viele Farben, Formen und Bewegungen überladen?

Höchstens sieben verschiedene Farben verwenden

Nur zweckdienliche Bilder anbieten

Mehrere Animationen auf einer Seite wirken nicht als Blickfang; sie machen höchstens nervös

Werden die Grundsätze richtiger Farbwahl eingehalten?

 

Grau oder Pastellfarben für den Hintergrund. Vorzugsweise schwarze Schrift. Helle Schrift auf dunklem Grund nur kleinflächig anwenden. Kein Blau für dünne Linien und schmale Konturen. Kein Rot oder Grün an den Rändern. Keine hochgesättigten, spektral gegensätzlichen Farben wie Rot und Blau nebeneinander (unterschiedliche Fokussierung)

Dieselbe Farbe bei derselben Bedeutung:

  • Rot für halt, heiß, Gefahr
  • Grün für weiter, sicher
  • Gelb für Vorsicht
  • Blau für kalt

Ist an Betrachter mit Farbsehschwäche gedacht worden?

Zur Hervorhebung je wenigstens zwei der Komponenten Farbe, Schriftauszeichnung und Helligkeit verwenden

 

 

Effizienz der Informationssuche

Lassen sich Stichwortlisten einfach durchmustern?

Stichwortlisten vorzugsweise linksbündig ausrichten

Muss man unnötigerweise blättern oder rollen?

Seite kompakt gestalten. Gesamtfläche nutzen. Zweidimensionale Anordnung der Information mittels Tabellen nutzen. Beispiel: Seite des Fachbereichs ET

Sind die angebotenen Verbindungen (Links) hilfreich?

 

Netz der Links nicht zu engmaschig knüpfen

Die einzelnen Seiten des Angebots vorzugsweise baumartig (hierarchisch) miteinander verbinden

Keine toten Seiten anbieten ("Web-Seite ist im Aufbau")

Werden Links zu den Ankerpunkten angeboten?

Verbindungen anbieten

  • zur Hauptseite
  • zum Seitenanfang
  • zur Seite der übergeordneten Organisation

Stößt man zu oft auf Unerwartetes?

Aussagestarke Überschriften wählen

Inneren Zusammenhang durch Gliederung deutlich machen

Sind Informationen über Sinn und Zweck der Seite, über die Urheberschaft und die Aktualität auffindbar?

Copyright-Vermerk bringen und gegebenenfalls mit Links ausstatten

 

 

Literaturhinweise

Balzert, H.: Lehrbuch der Software-Technik. Software-Entwicklung. Spektrum Akademischer Verlag, Heidelberg 1996
Gruppierungsregeln, Prinzipien der guten Gestalt ( S. 569 ff.)

Fellner, W. D.: Computer Grafik. BI Wissenschaftsverlag, Zürich 1988
Farbmodelle (S. 31 ff.): CIE, RGB, YIQ, CMY, HSU, HLS, CNS.

Goldstein, E. B.: Wahrnehmungspsychologie. Spektrum Akademischer Verlag, Heidelberg 1996
Farbwahrnehmung (S. 123 ff.), Objektwahrnehmung (S. 163 ff.), Wahrnehmung räumlicher Tiefe (S. 215 ff.), visuelle Bewegungswahrnehmung (S. 267 ff.)

Gulbins, J.; Kahrmann, C.: Mut zur Typographie. Ein Kurs für DTP und Textverarbeitung. Springer, Berlin, Heidelberg 1992
Schriftbild, Schriftgrößen, Schriftauszeichnung

Lambrecht, S.: Das Einsteigerseminar HTML 3.2 - Der methodische und ausführliche Einstieg. bhv Verlag, Kaarst 1996

Lemay, L.: Web Publishing mit HTML. Markt&Technik, Haar bei München 1995

Salvendy, G. (Edt.): Handbook of Human Factors and Ergonomics (2nd edition). John Wiley, New York 1997
Illumination, the CIE Colorimetric System (S. 858 ff.), Interface Design Guidelines (S. 1699)

Schönert, W.: Werbung, die ankommt. 199 Beispiele. Erfolgsregeln. Praktische Folgerungen. verlag moderne industrie. Landsberg 1977

Shneiderman, B.: Designing the User Interface. Addison-Wesley, Reading, Mass. 1998.
Guidelines for Data Display. Getting the user's attention. Presentation Styles: Balancing Function and Fashion. Nonanthropomorphic Design. Display Design. Color.

Zeidler, A.; Zellner, R.: Software-Ergonomie. Techniken der Dialoggestaltung. Oldenbourg, München 1992
Architektur von Menüsystemen(S. 45); Layoutgestaltung (S. 51 ff.), Gestaltgesetze; Mentale Modelle (S. 119 ff.), Architekturmodelle für Bedienoberflächen; Software-Ergonomie

Die World-Wide-Web-Initiative hat ihren Sitz in der Europäischen Organisation für Kernforschung (CERN, Genf). Sie setzt die Standards für das World Wide Web (WWW, W3).

© Timm Grams, 22.11.2005 (Erstfassung: 30.05.98)