""Everything should be made as simple as possible, but not simpler."
(Albert Einstein)
Die von mir aufgeführten Kriterien wurden zum größten Teil aus folgender Quelle direkt übernommen und frei übersetzt: Thomas R. Williams: "Guidelines for Designing and Evaluating the Display of Information on the Web" In: Technical Communication (2000) Vol. 47, No. 3 (Sonderheft)
Wie ordnen Sie Informationselemente so an, dass ein Besucher sie sieht, als Einheiten interpretiert und den logischen Zusammenhang zwischen ihnen versteht?
Ihr Besucher versucht, jedem Wechsel im Erscheinungsbild Ihrer Website eine Bedeutung beizumessen:
sollen das inhaltliche Verständnis unterstützen und nie unmotiviert wechseln.
Die hier aufgeführten Kriterien wurden zum größten Teil aus folgender Quelle direkt übernommen und frei übersetzt: Technical Communication: Journal of the Society for Technical Communication 47 (2000) 3 (Sonderheft)
1.1 Größe
Sind alle Elemente groß genug, um auf dem Bildschirm lesbar zu sein; d.h. werden sie entdeckt, und kann man sie leicht entziffern?
1.2 Kontrast
Reicht der Kontrast zwischen den Elementen und ihrem Hintergrund aus, um sie lesbar zu machen? Zu vermeiden sind:
2.1 Die Informationsstruktur
Gutes Webdesign zeigt dem Besucher die Struktur der Informationspräsentation - sowohl die der ganzen Website als auch der einzelnen Seite. Spiegeln die visuellen Muster die logischen und funktionalen Beziehungen zwischen den Informationselementen wider? Sind Anteile und Größe der Informationselemente in einem ausgewogenen Verhältnis zueinander?
2.2 Gruppierung
Sind verwandte Elemente durch 'white space', grafische Begrenzungen, gleiche Helligkeit, Farbe oder Textur gruppiert? Sind nicht-verwandte Elemente optisch voneinander unterschieden oder räumlich voneinander getrennt?
2.3 Abstufung von Bedeutung
Wird die Abstufung der Bedeutung einzelner Elemente im Verhältnis zu anderen Elementen grafisch unterstützt? Farbgebung, Platzierung, Größe, Isolierung, Komplexität und Kontrast erregen besonders leicht Aufmerksamkeit.
2.4 Konsistenz und Vorhersagbarkeit
Ist das Design konsistent und vorhersagbar? Werden Elemente, die logisch oder funktional gleich sind, optisch gleich behandelt? Ist das Platzierungsmuster der Elemente auf den Seiten konsistent? Ist der Hintergrund konstant?
2.5 Reihenfolge
Unterstützt das Design die Reihenfolge, in der der Besucher die Informationselemente wahrnehmen soll?
3.1 Wahl der Schrifttype
Wird eine serifenlose Schrift verwendet, z.B. Verdana oder Arial?
3.2 Schriftgröße
Wird für Text, der am Bildschirm gelesen werden soll, eine 12- oder 14-Punkt-Schrift verwendet? Nielsen/Loranger 2006, S. 221 empfehlen:
| 10-12 Punktschrift für | übliche Websitebesucher |
| 12-14 Punktschrift für | Senioren und Sehbehinderte |
| 12-14 Punktschrift für | Kinder und Leseanfänger |
| 10-12 Punktschrift für | Teenager und junge Erwachsene |
3.3 Fett- und vor allem Kursivdruck sowie mehr als 2 unterschiedliche Schriftfarben
... sollen nicht übermäßig eingesetzt werden.
3.4 Text in Großbuchstaben
... soll ganz vermieden werden. Wörter in Großbuchstaben sind sehr viel schlechter lesbar.
3.5 Textausrichtung
Text für die Lektüre am Bildschirm soll linksbündig und am rechten Rand im Flattersatz gesetzt sein. Die Lesbarkeit wird durch unregelmäßige Wortabstände und Textanfänge verringert.
3.6 Zeilenlänge
Sind die Zeilen zwischen 40 und 60 Zeichen lang?
3.7 Zeilenabstand
Der Zeilenabstand soll zwischen 50% und 100% der Schriftgröße betragen. Das ist mehr als bei gedrucktem Text.
3.8 Absätze
Absätze sollten durch Leerzeilen voneinander getrennt sein und nicht durch Einrückung. So nimmt der Leser jeden Absatz als optischen 'Happen' wahr.
3.9. Überschriften
Verdeutlichen Überschriften und Unterüberschriften die Beziehungen zwischen den Textteilen, die sie ankündigen? Werden die unterschiedlichen Hierarchieebenen durch Größe, Fettdruck, Groß-/Kleinschreibung und Einrückungen verdeutlicht?
Haben die verwendeten Grafiken eine kommunikative Funktion?
4.1 Dekorative Grafiken
... sollen vermieden werden.
4.2 Erläuternder Text
Sind alle Grafiken beschriftet, so dass sie so interpretiert werden, wie Sie es beabsichtigt haben?
4.3 Informationsstruktur
Werden Grafiken verwendet, um die Struktur oder die Organisation von Dingen oder Ideen zu verdeutlichen - insbesondere, wenn die Struktur nicht linear ist?
4.4 Vermittlung von Aussehen und Wahrnehmung
Grafiken (Fotos, Illustrationen) sind sinnvoll, wenn sie zeigen sollen, wie etwas aussieht. Sie sind sinnvoll, wenn sie Wahrnehmungsqualitäten beschreiben: Farbe, Textur, Muster, Form, relative Größe, Standort, Orientierung, Anordnung oder Aussehen.
4.5 Funktion
Die Funktionen der Grafiken sind unmittelbar erkennbar (z.B. Illustration, Navigation, Dekoration ...)
Kein Design-Element sieht aus wie eine Seitenendemarkierung, wenn die Seite weiter gescrollt werden muss; dies gilt insbesondere für Werbung und white space. Dagegen suggerieren Überschriften oder Text am unteren Bildschirmrand, dass die Seite gescrollt werden muss.
4.6 Ladezeit
Sind die Grafik-Dateien minimiert? Werden alle Grafiken angezeigt?
Wenn zweckmäßig (z.B. Warenpräsentation) werden Grafiken zunächst als Thumbnails angeboten, die bei Bedarf im Großformat betrachtet werden können.
Es ist keinesfalls so, dass Icons einfach zu interpretieren sind oder einheitlich interpretiert werden, nur weil sie grafisch sind.
5.1 Beschriftung
Sind alle Icons beschriftet und mit Text in alt-Tags versehen?
5.2. Vertrautheit
Ist die Bedeutung der verwendeten Icons allgemein bekannt oder wirklich selbsterklärend?
5.3 Unterscheidende Funktion
Sind die Icons so verschieden voneinander, dass sie schnell und präzise interpretiert werden können?
Animierte Elemente ziehen den Blick an. Allerdings werden sie leicht als Werbung wahrgenommen und schnell ignoriert. Viele Besucher fühlen sich durch Animationen gestört.
Animationen sind sinnvoll, wenn
[Update: 01. Februar 2009 - Prof. Ursula Schulz, HAW Hamburg, Department Information]