Das visuelle Design oder das grafische Interface ist sozusagen das ‘Look and Feel’ einer Webseite. Es ist das erste, was ein Besucher sieht, wenn er die Seite betritt. Bevor ein User merkt, wie schwer oder leicht eine Seite zu benutzen ist, wird er meist einschätzen können, ob er sich vom visuellen Aspekt wohlfühlen wird. Und obwohl das ‘Look and Feel’ eher diffus wahrgenommen wird, nimmt es Einfluss darauf, ob sich der Besucher von der Seite gelangweilt oder angeregt fühlt.

In Punkt 1.4 ‘Design versus Function‘ wurde das Design von Seiten der Usability-Experten als Mittel zum Zweck abgetan. Doch Design muss deshalb nicht langweilig sein.

Maria Grotenhoff, die sich mit Website-Konzeption befasst, bringt in diesem Zusammenhang den Begriff ‘Content-Inszenierung’ ins Spiel. Damit ist nicht zwangsläufig eine künstlich aufgeladene Animation der Inhalte gemeint, sondern der Aspekt der Angemessenheit. Abhängig von Aufgabenstellung, Inhalten und Zielgruppen kann der Inhalt verschiedenartig aufgebaut und somit präsentiert werden.

Nun soll auf weitere Einflüsse auf das Design eingegangen werden. Zunächst soll die Struktur der einzelnen Seite behandelt werden.

Würde man die Titelblätter der zehn meistverkauften Tageszeitungen nebeneinander legen, so würden man auf zehn fast identische Seiten schauen: eine Titelleiste mit dem Namen des Blattes, eine Aufmacher-Story mit Headline, mehrere kleine Artikel, ein großes Foto und vielleicht einige Werbeanzeigen im unteren Abschnitt. Diese Konvention hat sich mittlerweile durchgesetzt und der Leser hat sich an diesen Aufbau gewöhnt.
Dies macht es leicht (die sprachlichen Barrieren vernachlässigt) sich in jedem erdenklichem Staat eine Zeitung zu kaufen und ohne Probleme die interessanten Artikel herauszufiltern.
Ähnliche Konventionen entwickeln sich im Web, auch wenn sich Designer oftmals scheuen, Konventionen zu folgen. Denn die Ergebnisse könnten langweilig erscheinen. Konventionen werden bekanntlich nur Konventionen, wenn diese funktionieren und von den Usern angenommen werden. Dieser Vorgang braucht Zeit, doch wie so vieles im Netz, geschieht dies hier sehr schnell.
Eine solche Konvention ist mittlerweile die Anwendung einer dreigeteilten Seitenaufteilung. Dazu gehört, dass die Seite in klare definierte Bereiche aufgeteilt ist und somit logisch zusammengehörige Teile auch visuell gruppiert sind. Blickverlaufsstudien (Eyetracking) haben gezeigt, dass dies dem Verhalten des Users entgegenkommt. Demnach wird sehr schnell entschieden, welche Teile die nutzvollen Informationen bereitstellen, während die uninteressanten ausgeblendet werden.
Die folgende Abbildung zeigt das Grundmuster einer einfach gestalteten Webseite, die in drei Hauptregionen zerlegt ist.

Abbildung 7: Das dreigeteilte Layout ist die Grundlage vieler Webseiten.Quelle: eigene Darstellung in Anlehnung an Veen (2001), S.64.

Diese Einteilung basiert auf drei Fragen, die sich der Benutzer während seines Besuchs laufend stellen muss:

• Wo befinde ich mich? (Teil 1)
• Wohin kann ich gehen? (Teil 2)
• Worum geht es hier? (Teil 3)

Im Mittelpunkt steht hier, wie diese drei Fragen die grundlegenden Bedürfnisse und Erwartungen einer Webaudienz erfüllen, und nicht, wie eine möglichst ausgeklügelte Navigation oder intuitive Benutzerführung herzustellen ist.
Teil 1 in obiger Abbildung beantwortet die erste Frage “Wo befinde ich mich?” und dient der Identifikation. Da User nicht immer über die Homepage auf die Unterseiten gelangen, sondern oftmals über Bookmarks, Links oder Suchmaschinen ist es von großer Bedeutung zu zeigen, wo der User sich gerade befindet. Dabei findet die Lokalisation einerseits durch den Browser statt und andererseits durch das Logo und den Kopfteil der Seite. Der Browser stellt die URL und den Titel einer Seite dar , doch oftmals reicht diese Identifikation nicht aus. Entweder wurde der Seitentitel vom Webmaster nicht optimiert , die URL-Adresszeile wurde abgestellt oder dem User ist diese nicht bewusst und er ignoriert sie einfach.
Deshalb fällt diesem oberem Abschnitt auch besondere Bedeutung zu. Hier findet man eine weitere Konvention: ein Logo in der oberen Ecke steht als Link zur Homepage zur Verfügung, darunter evtl. eine Suchbox oder eine erweiterte Überschrift zur eindeutigen Identifizierung. Dies wurde bei einer Inspektion von 50 bekannten Homepages herausgefunden.
Der linke Streifen (Teil2 ) in obiger Abbildung sagt den Usern “Wo kann ich hingehen?” und ist ausschließlich für die Navigation reserviert. Hier hat sich ein vertikaler Streifen mit Hypertextverweisen eingebürgert. Diese Entscheidung ist unter anderem auf die Unwissenheit des Designers zurückzuführen: Dieser weißt nicht, welche Bildschirmauflösung der User benutzt und ebenso nicht wie weit sich das Fenster öffnen wird. Doch man weiß, dass der Seitenaufbau grundsätzlich oben links beginnt und in der westlichen Welt von links nach rechts gelesen wird. Somit ist gewährleistet, dass das Logo und die darunter liegende Navigation im Sichtfeld des Besuchers liegt.
Teil 3 ist schließlich für den eigentlichen Inhalt reserviert und beantwortet die Frage “Worum geht es hier?”. Die User sollten sofort erkennen, dass sie den Inhalt gefunden haben, nach dem sie gesucht haben. Allein für diesen Zweck stellt das gesamte Layout den ganzen Rest der Seite zur Verfügung.
Wenn man sich nun im Web umschaut, lässt sich dieses Grundschema auf die meisten Websites anwenden und man geht davon aus, dass der Benutzer mit dieser Struktur zurecht kommt.
Im Laufe der Zeit wurde diese Struktur erweitert und optimiert. So sieht man oftmals Drei-Spalten-Layouts, bei dem eine dritte Spalte rechts vom Inhalt hinzugefügt wurde, welches meist Zusatzfeatures wie Newsletter-Abos oder externe Links bereithält.
Wie im folgenden Schema zu erkennen ist, wurde im Yale Style Manual eine zusätzliche Fußzeile eingeführt, welche sich ebenfalls als Standard durchzusetzen scheint. Dabei sollte diese Fußzeile optisch getrennt sein vom Rest der Seite. Der Leser sucht somit oftmals automatisch am unteren Ende der Seite Basisinformationen wie das Datum der letzten Überarbeitung, Copyright-Rechte, Kontaktinformationen oder einen Link zur Emailadresse des Webmasters.

Abbildung 8 : Das klassische dreigeteilte Layout mit Fußzeile.Quelle: Lynch, Horton (1997a)

Selbstverständlich gibt es kein Allround-Muster eines Seitendesigns, das für alle Arten von Webpages angemessen ist. Diese dreigeteilten Layouts sind meist passend bei sehr textlastigen www-Informationssystemen. Solch ein System soll in Kapitel 8 dieser Arbeit inspiziert und überarbeitet werden. Das Layout sollte im Kontext zum Inhalt angemessen sein, unterstützend wirken und den Kenntnissen der Zielgruppe entsprechen.
Meist werden diese Seitenstrukturen mit Hilfe von Tabellen in HTML realisiert. Da hier auf diese Technik nicht näher eingegangen werden soll, soll stattdessen ein weiteres Element aus den Anfängen des www behandelt werden: Frames. Sie wurden 1995 von Netscape erfunden und in deren Navigator 2.0 implementiert, allerdings erst drei Jahre später in HTML 4.0 zum Standard erklärt. Die aktuellen Versionen der Browser garantieren dagegen eine – zumindest von Techniksicht aus gesehen – problemlose Handhabung.

Jakob Nielsen nennt die Verwendung von Frames eine der schwerwiegendsten Feh-ler im Webdesign. “Just say no!” lautet sein eindeutiges Statement zu dieser Tech-nik. Hier kann wahrscheinlich von einer der hitzig diskutiertesten Techniken bzgl. des Internets geredet werden. Bevor die auftauchenden Vor- und Nachteile beim Gebrauch aus dem Blickwinkel der Designer als auch der Benutzer erläutert werden, soll aufgezeigt werden, wie die User tatsächlich zu dieser Technik stehen.
Bei einer Umfrage an der Universität Siegen wurde herausgefunden, dass 31% der Nutzer Frames überhaupt niemals mögen und 35% durch die Benutzung solcher meist verwirrt werden. Dagegen sagte fast die Hälfte, dass sie Frames nur in einigen Fällen sinnvoll angewendet fänden. Bei der Wahl zwischen einer Frame-Version und einer Version ohne Frames, würden 65% den Auftritt ohne Frames bevorzugen.
Jared M. Spool fand bei Usability-Tests heraus, dass ein Gebrauch von Frames nicht zwingend Probleme verursachen muss. Die größte Gefahr bestehe allerdings darin, dass der User nach einem Klick nicht merkt, dass sich etwas verändert habe.
Mit der Frame-Technik ist es ebenfalls möglich, die oben beschriebenen dreigeteilten Layouts zu realisieren. In diesem Kontext soll auch von Frame-based-Design die Rede sein.

Ein Frame teilt eine Webseite in mehrere scrollbare Regionen ein. Dazu wird nicht wie bei einem auf Tabellen basierenden Layout lediglich eine Datei benötigt, sondern mindestens drei: Die Grunddatei enthält die Steueranweisungen, das sogenannte Frameset, welches für den gesamten Seitenaufbau zuständig ist, während für jeden einzelnen Frame eine weitere Datei benötigt wird, die den Inhalt liefert. Folgendes Schema soll dies verdeutlichen. Auffallend sind die zwei erscheinenden Scrollbalken und der horizontal verlaufende Rand unter der ersten Frameseite: Sobald die Inhaltsseiten zu groß sind, werden Scollleisten eingeschaltet und durchschneiden das Layout.

Abbildung 9: Das dreigeteilte Layout mit Hilfe von Frames.Quelle: eigene Darstellung

Dies ist oft ein Grund, warum Frames nicht eingesetzt werden. Doch die heutige Implementierung in die Browsertechnik ermöglicht vielfältige Einstellungsmöglichkeiten. Die Ränder können abgestellt werden, so dass das Design nicht mehr durch störende Scrollbalken oder Ränder gestört wird. Und bei einer Änderung der Fenstergröße passen sich die Frames dynamisch an, was leichter zu realisieren ist als mit einer Tabellenstruktur.
Hauptargument der Befürworter von Frames ist, dass es möglich ist, eine immer sichtbare Navigationsleiste zu gewährleisten (in obiger Abbildung z.B. Frameseite2), auch wenn in einem anderen Frame gescrollt werden muss. In diesem Zusammenhang wird auch davon geredet, nur einmal eine Navigationsleiste zu implementieren und nicht auf jeder einzelnen Unterseite. Dieser anscheinende Vorteil hat sich bis heute relativiert, da dies mit anderen Techniken, z.B. SSI oder PHP, ebenso einfach zu modifizieren ist.

Je nach Aufwendigkeit der Webseiten ist eine bessere Performance zu erwarten, da nur Teile der Seite neu geladen werden müssen. Bei Navigationsleisten, die anzeigen, in welchem Bereich sich der User aufhält, muss ohnehin eine neue Seite geladen werden, so dass auch dieser Vorteil nur oberflächlich gelten kann. Außerdem lassen sich auch Seiten ohne Frames so optimieren, dass sich relativ schnelle Ladezeiten ergeben.
Diesen Vorteilen stehen eine Vielzahl von Nachteilen gegenüber.
Zunächst einmal verstößt der Frame Ansatz gegen wichtige Grundsätze des Internets, die der ‘Vater’ des Webs Tim Berners-Lee beim Gedanken an ein weltumspannendes Netz formulierte.

Unter einer eindeutigen Adresse (URL) sollte ein einziges Dokument abrufbar sein. Doch bei der Frametechnik sieht der User nur die Adresse der Seite mit dem Frameset und nicht die der einzelnen Inhaltsseiten. Somit funktioniert das Festhalten einer Frameseite in der Favoritenliste (auch bookmarken genannt) nicht mehr, da nur die URL der Startseite gemerkt wird. Wird nun innerhalb dieses Systems ein Bookmark gesetzt, so wird nur die URL der Startseite erfasst. Beim erneutem Aufruf dieses Bookmarks kommt der User nur auf die Startseite und muss sich so erneut auf die gewünschte Unterseite durchklicken.

Dies führt zu einer insgesamt erschwerten Navigation: Von Tim Berners-Lee war gedacht, dass bei jedem Klick sich der Inhalt des aktuellen Fensters ändert. Doch bei Frames ist dies nicht im Voraus klar in welchem Fenster sich etwas ändert. Dies kann zu Verwirrungen führen und der User klickt mehrmals auf den gleichen Link, da er keine Veränderung beobachtet hat. Somit geht auch das mentale Modell einer Seite verloren, der User wird somit unnötig belastet und muss sich auf eine neue Seitenstruktur einstellen.

Viele Benutzer drucken Internetseiten gerne zum Lesen auf Papier aus. Doch diese Funktion ist in diesem Kontext erschwert. Normalerweise wird beim Drucken der aktuelle Frame (oder bei framelosen Auftritten das aktuelle Fenster) ausgedruckt. Hat der Benutzer zuletzt im Navigations-Frame einen Link geklickt und möchte anschließend den Inhalt ausdrucken, so druckt er den Navigations-Frame aus. Ärgerlich ist dies, wenn der Ausdruck nicht sofort kontrolliert wird, der Benutzer weitersurft und erst später merkt, dass das Falsche ausgedruckt worden ist. Befürworter werfen nun ein, dass es mittlerweile genaue Einstellungsmöglichkeiten im Browser gibt. Doch die wenigsten stellen die Defaulteinstellungen im Browser um. Folgende Abbildung zeigt die Einstellungsmöglichkeiten der aktuellen Browser IE 6 und des NN 6.2 beim Ausdrucken von Frameseiten.

Abbildung 10: Druckoptionen im NN 6.2 und IE 6.0 im StandardzustandQuelle: eigene Darstellung

Beim IE 6.0 ist diese Einstellung auf einem untergeordnetem Register vorhanden, der Benutzer findet unter Umständen diese Einstellungsmöglichkeit nicht. Netscape hat dagegen diese Einstellung sichtbar auf dem Popup-Fenster angebracht. Außerdem unterscheiden sich die Standardeinstellungen: Beim NN werden alle Frames auf einer Seite gedruckt (”Wie auf dem Bildschirm dargestellt” in obiger Abbildung), beim IE dagegen nur der markierte Frame.

Auf weitere Probleme soll nicht mehr eingegangen werden, stattdessen stellt sich die Frage, ob der Einsatz überhaupt sinnvoll sein kann. Obwohl man nicht mehr allzu viele Auftritte mit Frames sieht (T-online bspw.), lassen sich genügend sinnvolle Anwendungen dafür anführen.
So lässt sich bei Dr. Web eine Guided Tour für Erstbesucher finden: Der Bildschirm wurde im unteren Drittel horizontal geteilt. Im unteren Frame findet man eine kurze Dokumentation der oben angezeigten Seite. So ist es möglich sich linear die wichtigsten Kategorien und Seiten erklären zu lassen.

David Siegel führt hier die Möglichkeit an, eine Fotogalerie zu installieren, die im linken Frame kleine Vorschaubilder zeigt und bei einem Klick auf diese die Originalgröße im rechten Frame erscheinen lässt. Das Gleiche sei bei anderen Directorys (wie z.B. einer Rezeptdatenbank) sinnvoll.
Der PC-Hersteller Dell hat in seinen E-Commerce Seiten ein Tool eingebaut, bei dem sich im oberen Frame der PC konfigurieren lässt und im unteren der exakte Preis anzeigen lässt. Wählt man im oberen Frame eine andere Komponente aus, so wird der untere Frame aktualisiert und der aktuelle Preis verändert sich.
Nach diesen durchaus sinnvollen Anwendungen bleibt festzuhalten, dass es aufgrund der bekannten Nachteile sorgfältig abzuwägen ist, ob tatsächlich Frames benutzt oder auf eine modernere Technik (SSI oder PHP) gesetzt werden sollte.

Wichtig für die Umsetzung der oben besprochenen dreiteiligen Layouts ist Kenntnis über die Bildschirmgröße der Anwender. So kann eine Tabellenstruktur in HTML feste Größen zugeteilt werden und bestmöglichst an den User angepasst werden.

Unabhängig von der Größe des Monitors kann dieser auf einige wenige Bildschirmauflösungen eingestellt werden. Die überwiegende Anzahl der Anwender benutzen die Auflösungen 640×480 Pixel, 800×600 oder 1024×768. Anfangs optimierte man die meisten Webauftritte auf die Größe 640×480, die Tendenz weist nun allerdings auf die höheren Auflösungen. Folgendes Diagramm bestätigt diese Aussage. Es zeigt Statistiken der Seite ‘thecounter.com’, ein Dienst, der kostenpflichtige Zähler für Homepages anbietet und somit u.a. protokolliert welche Bildschirmgrößen von den Besuchern benutzt wird. Monatlich werden so ca. 4 Mrd. Seitenabrufe protokolliert und ausgewertet.

Demnach nehmen die Auflösungen bis 800×600 ab, während die höheren Auflösungen zunehmen.
Dabei wird die Wichtigkeit der Bildschirmgröße und somit die Optimierung oftmals unterschätzt: Abhängig von der Seitenauflösung wird eine Seite verschieden lang oder breit, was bedeutet, dass der Anwender horizontal oder vertikal scrollen muss um den Inhalt zu erfassen. Ebenfalls können sich Probleme beim Drucken der Seiten ergeben: ist die Tabelle zu breit, wird der rechte Rand abgeschnitten und der Text ist unvollständig.

Abbildung 11 : Bildschirmauflösungen 2000 bis 2002 [AM 5]Quelle: eigene Darstellung, Daten von thecounter.com

Im Yale Style Manual findet man eine fertige Designvorlage mit Empfehlungen welche Ausmaße eine Seite haben sollte. In diesem Kontext ist von sicheren und kritischen Seitendimensionen die Rede. Zum Drucken einer Seite liegt eine Tabellenbreite von 535 Pixeln zu Grunde. Dies ist die maximale Breite, die korrekt auf einer DIN A4 Seite abgedruckt werden kann. Dabei kann von einer sicheren Seitenbreite die Rede sein. Bei einer Auflösungsbreite von 1024 Pixeln ist dies allerdings reine Platzverschwendung. Hier ist es angemessen mit Hilfe von CSS oder SSI eine extra Druckversion, wie man sie mittlerweile oft im Web findet, anzubieten.

Abbildung 12 : Designvorlage Quelle: Yale Style Manual: Lynch, Horton (1997a).

Für eine Anpassung an den Bildschirm empfiehlt es sich grundsätzlich ca. 40 Pixel von der erwarteten Breite abzuziehen, da Platz für das Browserinterface wie z.B. den Scrollbalken vorhanden sein muss. Allerdings sollte man darauf achten, dass die Textzeilen nicht zu lang werden und somit die Lesbarkeit darunter leidet. Aus der Offline-Welt ist bekannt, dass pro Zeile ca. 30 bis 70 Zeichen am besten gelesen werden können.

Doch auch wenn alle möglichen Bildschirmauflösungen bekannt sind, heißt dies nicht, dass dieser ganze Platz genutzt wird. Denn auch die Größe der Fenster variiert: Ein Anwender bevorzugt den Vollbildmodus, ein anderer surft in einem 600×400 großen Ausschnitt im Web.
Der Designer sollte demnach die Seiten in verschiedenen Bildschirmgrößen testen. Erst hier wird wirklich klar, was die Anwender letztendlich sehen werden.

Gleichzeitig sollte aber nicht auf eine bestimmte Breite optimiert werden und die Anwender gezwungen werden, diese auch zu benutzen. Oftmals sieht man dies auf diversen Homepages wie folgende Abbildung zeigt. Fraglich ist, ob dies die Nutzer respektieren und ihre Auflösung demnach auch passend einstellen.

Abbildung 13 : Bevormundung der Nutzer bzgl. der Bildschirmgröße [AM 6]

Ebenso stellt sich die Frage, wie viele Benutzer überhaupt wissen, auf welche Auflösung ihr Monitor eingestellt ist. Eine Nutzerumfrage im Jahr 1998 hat ergeben, dass 14 % nicht wissen, welche Auflösung benutzt wird.
Offensichtlich kommen auch einige Webdesigner nicht damit zurecht, dass den Nutzern die Freiheit gebührt, selbständig die Größe des Fenster zu bestimmen. So öffnen sich vielfach neue Fenster mit vorgegebener Größe, die nicht veränderbar sind.

Der Webdesigner muss also einen Mittelweg finden um den nötigen Bildschirmplatz bestens auszunutzen. Er sollte demnach für die Allgemeinheit konzipieren, also eher von einer niedrigen Auflösung ausgehen. So ist es ebenfalls denkbar variable Tabellen einzusetzen, die sich an den Bildschirm anpassen. Hier bestehen zwei Möglichkeiten: entweder man setzt einen prozentualen Wert, z.B. 80% Breite vom Bildschirm, oder man setzt z.B. eine Mindestbreite von 640 Pixel und eine Höchstbreite von 900 Pixel.

Denkbar ist auch eine Browserweiche, die anhand von Javascript den Besucher je nach Auflösung auf eine speziell angefertigte Seite weiterleitet. Dies scheint allerdings unangemessen aufgrund des größeren Aufwandes.
Bisher wurde nur auf die Breite eingegangen, wobei auch die Länge einer Seite ein Problem darstellen kann. Wird der Inhalt einer Seite nicht vertikal vollständig angezeigt, erscheint auf der rechten Seite eine Bildlaufleiste, mit dem der User den Inhalt nach unten bewegen kann. Bei einer Zeitung würde man nun von der sogenannten Falzmarke sprechen. Zeitungsredakteure versuchen meist, die wichtigsten Headlines über diese Falzmarke zu positionieren. Im Web ist allerdings nicht vorherzusehen, wo genau diese Falzmarke sich befindet.

Weitläufig ging man bisher davon aus, dass das Scrollen, also das vertikale Bewegen des Bildschirminhalts nicht erwünscht ist. Nielsen führte 1996 dafür an, dass die User noch zu unerfahren sind und somit selten auf den Scrollbalken achteten. Zudem lässt ungeschicktes Positionieren der Designelemente nicht erkennen, dass das Ende der Seite noch nicht erreicht ist. Mittlerweile scheint sich dies zu revidieren und die Abneigung gegen das Scrollen zu fallen.

Dies ist auch Jared Spool aufgefallen, der bei seinen Usabilitytests ausführlich auf dieses Thema eingegangen ist. Demnach verursacht das Scrolling keine größeren Probleme mehr, da User gemerkt haben, dass sie dadurch schneller zu den Informationen gelangen.
In diesem Zusammenhang ergeben sich zwei Möglichkeiten den Inhalt zu präsentieren. Die erste Möglichkeit besteht darin, viele kurze Seiten mit wenig Inhalt zu programmieren. Dies führt zu wenig oder gar keinem Scrollen aber zu vielen Klicks und immer wieder zu einer Wartezeit während des Ladens der Seite.

Die zweite Möglichkeit besteht darin, wenige aber lange Seiten mit viel Content zu präsentieren. Hier hat der User die Möglichkeit schnell einen Überblick über die Informationen zu gewinnen, anstatt auf vielen kleinen Seiten zu suchen. Somit wird das Ziel schnell erreicht und der User nimmt das Scrollen in Kauf. Dabei sollte beachtet werden, dass sich die wichtigsten Informationen im oberen Abschnitt befinden, da dieser Bildausschnitt am stärksten beachtet wird.
Nachdem ausführlich auf die Seitenstruktur eingegangen worden ist, soll nun das äußere Bild weiter vervollständigt und Farbe ins Spiel gebracht werden.

Schaut man sich im Internet um, so scheint es, dass oftmals wahllos Farbkombinationen verwendet werden, ohne im Kontext mit dem Inhalt zu stehen. Dabei suggerieren Farben unterschwellig eine eigene Botschaft und unterstützen oder verfälschen die dargebotenen Aussagen. Der Einsatz von Farben sollte dem Anwender die Informationsvermittlung erleichtern und keinesfalls die Wahrnehmung des Inhalts negativ beeinträchtigen. Somit kann die visuelle und kognitive Verarbeitung der dargebotenen Informationen durch den Einsatz von Farben erhöht werden.

Generell gibt es beim Einsatz von Farben am Bildschirm einiges zu beachten: Aufgrund technischer Restriktionen kann nie genau festgelegt werden, wie die Farben auf dem jeweiligem Monitor des Betrachters aussehen werden. Dies hängt von mehreren Faktoren ab und verleiht somit der Farbe auf dem Bildschirm eine gewisse Instabilität:

• Die Einstellung der Farbtiefe der Grafikkarte, also wie viele Farben dargestellt werden können.
• Die Einstellung der Helligkeit und des Kontrastes des jeweiligen Monitors
• Das verwendete Betriebssystem (z.B. Macintosh-Rechner stellen Farben heller dar)
• Die Gammaeinstellung (verantwortlich für das Leuchten und die Dunkelheit) und Farbkalibrierung des Monitors.
• Webbrowser garantieren nicht immer die korrekte Darstellung der Farben.

Der Webdesigner ist ebenso wie bei der Bildschirmauflösung der Willkür der Technik ausgesetzt. Doch gibt es eine websichere Palette von 216 Farben, die die Browser identisch anzeigen. Farben werden auf dem Bildschirm durch das RGB-System zusammengesetzt: Die drei Grundfarben Rot, Grün und Blau (RGB)Â erzeugen bei einer 8Bit Tiefe insgesamt 256 Farben, die von den meisten Computersystemen angezeigt werden. Die Browser NN und IE benutzen beide 216 Farben, die gemeinsam auf den Betriebssystemen von Microsoft und Macintosh angezeigt werden und somit als Browsersichere Farbpalette bezeichnet werden. ´

Es wird grundsätzlich empfohlen, Farben aus dieser Palette zu benutzen um eine einheitliche Darstellung zu gewährleisten. Verwendet ein Designer eine andere Farbe, so wird diese aus den drei Grundfarben gemischt, ein einheitliches Bild ist dadurch allerdings nicht mehr gewährleistet. Ein Abdruck dieser Farben in Verbindung mit den HTML -Hexadezimalcodes findet sich beispielsweise in Cailin Boyles Buch “Color Harmony for the web” (2001). Mittlerweile sind in den meisten Grafikprogrammen wie Photoshop 6.0 Farbwähler mit diesen 216 Farben enthalten und erleichtern somit die Auswahl dieser websicheren Farben.

Abbildung 14: Farbwähler in Adobe Photoshop 6.0

Aufgrund dieser technischen Problematik ist es ratsam auch der Farbendarstellung zuliebe die Seiten auf verschiedenen Systemen zu testen. Jill Morton berichtet bspw., dass bei einer Website für eine Fluglinie dunkelblau verwendet wurde, auf einigen Systemen stattdessen aber die Farbe Schwarz (Kulturabhängige Bedeutung!) angezeigt wurde.
Dieses Beispiel zeigt, dass Farben unterschiedliche Gefühle auslösen und vielfältige Bedeutungen haben. So assoziiert man z.B. mit der Farbe Rot automatisch Gefahr, Feuer oder Blut sowie Gefühle wie energisch, aufregend und leidenschaftlich. Schwarz steht dagegen in unserer Kultur für Tod. Auf einer Webseite drücken Farben somit Stimmung, Werte, Ziele und Persönlichkeit aus. Deshalb ist es besonders wichtig, dass die Farbpalette mit dem Inhalt harmoniert und die Aussagen verstärkt. Denkbar ist somit z.B. auf einer Gartenseite verschiedene Grün-Töne einzusetzen oder Blauabstufungen für Bootshersteller.

Oftmals stehen dagegen Marken für bestimmte Farben und einer eigenen Identität. Zu erinnern ist hier an das Rot von Coca-Cola (vgl. Abb 3), das Orange von Sixt oder das Lila von Milka. Dies zeigt, dass bestimmte Farben auf den Webseiten von Unternehmen erwartet werden und ein Einsatz anderer Farben den Wiedererkennungswert erschweren könnten. Somit gehört auch die Website eines Unternehmens zum Corporate Design.

Das Anpassen der Website an Minderheiten steht untrennbar im Kontext der Gebrauchstauglichkeit einer Website. Eine solche Minderheit stellen Farbenblinde Menschen dar, deren Fähigkeit Farben zu sehen eingeschränkt oder gar nicht vorhanden sind. Im ersten Augenblick scheinen diese Überlegungen ungewöhnlich, doch die DIN ISO Norm 9241 Teil 8 gibt an, dass ca. 10 % aller Menschen farbenblind oder -fehlsichtig sind. Die häufigste Variante ist die Rot-Grün-Farbschwäche.
Dies hat Auswirkungen auf die Gestaltung von Webseiten: Bei einer unglücklichen Farbwahl und einem geringen Kontrast werden einige Seiten nahezu unbrauchbar.

Hinsichtlich dieses Aspektes empfiehlt es sich, den Hintergrund und die Schrift möglichst kontrastreich zu gestalten. Bestes Beispiel ist hier schwarze Schrift auf weißem Hintergrund.
Doch dass eine Optimierung oftmals nicht leicht ist, zeigt folgendes Bild der Milka Homepage, welches mit Hilfe der Seite http://www.vischeck.com angefertigt wurde. Hier können Grafiken und Websites so angezeigt werden, wie sie Farbenblinde sehen.

Abbildung 15: Die Milka Homepage aus der Sicht eines Normalsehenden (hinten) und eines Farbenfehlsichtigen [AM 7]

Das Milka-Lila (hintere Abbildung) wird durch den Rotanteil zu einem Hellblau, welches den blauen Link zum Webmaster fast nicht mehr sichtbar macht.

Wie wichtig Farben auch für das Web sind, zeigt sich bei der Verwendung von Links: blau unterstrichene Wörter sind meist Links zu unbesuchten Seiten und lilafarbene Wörter zeigen zu besuchten Seiten.
Nun soll der erste Schritt Richtung Content-Design gemacht werden und eine sinnvolle und brauchbare Darstellungsweise von Schriften näher erläutert werden.

Der Inhalt sollte so geschrieben und visuell aufbereitet sein, dass dieser möglichst die Aufgaben und Ziele des Users unterstützt. Dabei sollte die Formatierung und die Anordnung der Texte das Lesen erleichtern. Hier ist speziell auf einige Eigenheiten des Internets einzugehen, die auf herkömmliche Druckerzeugnisse nicht zutreffen.

Obwohl im nächsten Teil dieser Arbeit näher auf das Schreiben fürs Web eingegangen wird, soll an dieser Stelle kurz etwas Elementares zum Verständnis der Schriftaufbereitung im Web vorgegriffen werden: Jakob Nielsen hat herausgefunden, dass der Leser am Bildschirm nicht haargenau jedes Wort liest, sondern den Text nur überfliegt. Somit versucht der Benutzer schnellstmöglich sich einen Überblick zu verschaffen um die Relevanz des Textes zu ermitteln und eventuell an die interessanten Informationen zu gelangen. Dies nennt man scannen. Es beeinflusst das Layout der Schrift und somit auch der Texte. Der User überfliegt den Text, sucht sich interessante Schlüsselwörter, Sätze oder Absätze heraus, während er andere Teile der Seite keine Bedeutung schenkt.
Der erste Grund warum User nicht lesen sondern scannen, ist der, dass das Bildschirmlesen mühsamer ist als Lesen auf dem Papier. Studien haben gezeigt, dass das Lesen am Bildschirm 25 bis 30 % langsamer ist und der Leser somit unkonzentrierter und ungenauer liest. Dies ist auch weiterhin ein Grund, warum Internetseiten oft ausgedruckt werden. Vom Lesen auf dem Papier sind wir sehr fein gestaltete, scharfe und klare Schriftbilder gewöhnt. Im Printbereich fängt die bessere Lesbarkeit bei 300 Punkte pro Inch (dpi) an, bei Büchern, Zeitschriften und anderen Drucksachen sind wir zwischen 1200 und 2400 dpi gewöhnt. Dagegen haben die herkömmlichen Monitore eine geringe Zeichenauflösung von 72 dpi beim Mac und 96dpi beim PC.

Hinzukommt das Flimmern des Bildschirms und die Tatsache, dass der Benutzer in eine Lichtquelle blickt und der Hintergrund nicht wie beim Papier die Lichtstrahlen reflektiert.
Für die Darstellung auf dem Bildschirm empfehlt es sich besonders einfache und stabil gestaltete Schriftarten zu verwenden. Grundsätzlich unterscheidet man in der Typografie Serifenschrift und serifenlose Schrift. Serifen sind die kleinen Häkchen und Schnörkel an den Buchstaben und haben die Aufgabe diese voneinander abzugrenzen. Allerdings sind bei 72 dpi und einer kleinen Schriftgröße nur wenige Pixel in Funktion und das Lesen fällt schwer. So gibt es verschiedene Schrifttypen, die speziell für die Bildschirmdarstellung optimiert wurden. Beim Mac sind das die Schriften Chicago, Geneva, Monaco und New York. Bei Windows waren das bisher die Arial und die Times, die allerdings immer mehr von der Verdana und Georgia abgelöst werden.

Problematisch ist in dieser Hinsicht, dass diese genannten Schriften beim Benutzer auf dem Rechner vorhanden sein müssen. Ist eine in HTML angegebene Schriftart nicht installiert, so wird diese durch eine ähnliche ersetzt. Deshalb ist die Wahl der Schrift nur auf einige wenige beschränkt. Man könnte die Schriften als Grafiken darstellen, doch dem stehen einige Probleme entgegen: die Ladezeit wird ansteigen, sie sind nicht editierbar und bei wechselndem Inhalt schwer zu aktualisieren und entsprechen so nicht dem Sinn von Hypertexten. Ebenso kann der Inhalt von Suchmaschinen nicht erfasst werden. Außer bei Corporate Design Elementen wie Firmenlogos sollte darauf weitgehend verzichtet werden.
Zu beachten ist zusätzlich, dass jede Schriftart einen eigenen Charakter hat, der eine Textaussage verstärken oder abschwächen kann. So sollte die Schriftart zum Inhalt passen, eine altertümliche Schriftart z.B. hat nichts auf einer PC-Shoppingsite zu suchen. Match the typeface to the content nennen dies die Amerikaner.

Eine weitere Frage ergibt sich bei der Wahl der Schriftgröße. Im Gegensatz zum Buchdruck sollte beim Screendesign mit einer größeren Schriftart gearbeitet werden. Eine Grundregel lautet hier: lieber zu groß als zu klein. Auch hier entsteht das Problem, dass Mac und PC Schriften in gleicher Punktgröße unterschiedlich groß darstellen. Folgende Screenshots auf der nächsten Seite zeigen einen Vergleich in unterschiedlichen Browsern. Klar zu erkennen ist, dass der Mac die Schriften kleiner anzeigt als ein Windows-PC. Die Serifenschrift Times ist zudem schwer leserlich.
Optimal wäre, den Benutzer selbst entscheiden zu lassen, wie groß die Schriftarten angezeigt werden sollen. Denn fast jeder hat andere Empfindungen, wann ein Text am besten lesbar ist. Die gängigen Browser lassen den User selbst entscheiden, wie groß der Text darstellbar sein soll. So lassen sich bspw. beim IE 6.0 über das Menü Ansicht à Schriftgrad die Größe der Schriften einstellen. Defaultwert ist hier Mittel, welches in HTML einer Größe von drei und auf dem Bildschirm einer Schrift von 12 Punkten entspricht. Doch fraglich ist, ob diese Browseroption beim User bekannt ist und auch benutzt wird.

Abbildung 16: Vergleich von Schriften auf PC und MacQuelle: http://www.upuauet.com/_webworld/typo/vergleich_02.html

Meist wurde die Schriftart- und größe per font- Anweisungen des HTML Standards angegeben. Dies wird heute immer öfters durch CSS ersetzt, welches 1996 erstmals in HMTL implementiert wurde und von der 4er-Browsergeneration weitgehend unterstützt wird. CSS bietet eine einfache Möglichkeit Texte zu formatieren. Dadurch sind vielfältige Möglichkeiten geboten, schränken den User allerdings auch ein. So funktioniert die oben beschriebene Schriftgrößen-Einstellung nicht und der Besucher ist auf die definierte Größe festgelegt.
Dagegen sind aber auch neue Möglichkeiten gegeben den User das Design bestimmen zu lassen. Bei www.css-design.de lässt sich z.B. aus acht verschiedene Designs wählen und somit das Erscheinungsbild verändern. Die folgende Screenshots zeigen eine Seite, auf der eine Option geboten wird, mit der der User die Schrift über einen Button größer einstellen kann. Falls der User die Browsereinstellung nicht kennt, wird er somit direkt hingewiesen, dass es möglich ist, die Schrift zu vergrößern.

Abbildung 17: Möglichkeit zum Vergrößern der Schrift [AM 8]

Viele Grundsätze aus der traditionellen Typografie gelten auch beim Screen-Design. Dazu gehören solche Selbstverständlichkeiten wie die Vermeidung von GROSSBUCHSTABEN, Mischung von übermäßig vielen Schriftarten, überlange Zeilen mit mehr als 80 Buchstaben oder einer Vermeidung von dominierenden Hintergrundbildern. Darauf soll hier nicht näher eingegangen und stattdessen als gegeben voraussetzt werden.
Abschließend soll auf eine Studie eingegangen werden, die explizite Handlungsempfehlungen bzgl. des Webdesigns und an dieser Stelle speziell der Typografie gibt.

Ende 2001 haben Jakob Nielsen und Marie Tahir 50 Homepages untersucht und grundlegende Statistiken veröffentlicht. Dabei handelte es sich nicht nur um nordamerikanische Projekte, sondern Seiten aus allen Kontinenten. Wie sehr kulturabhängige Eigenheiten berücksichtigt wurden, bleibt allerdings unklar. So waren die meistbenutzten Schriften serifenlos. Lediglich 2 Homepages benutzten Schriftarten mit Serifen. Meist wurde eine Größe von 12 Pixel verwendet (Body-Text Size) und die Schrift schwarz auf weißem Hintergrund dargestellt. Nur 8 Seiten benutzen blaue oder graue Schrift für den eigentlichen Inhalt (Body-Text Color). Aus diesen Inspektionen leitet Jakob Nielsen einige Richtlinien ab, die der Lernförderlichkeit entgegenkommen, aber dennoch keine Axiome darstellen sollen. Dabei stützt er sich auf diese erwähnten 50 Homepage-Inspektionen als auch auf Erfahrungen aus anderen Usertests. Webseiten funktionieren am besten, indem bekannte Stilmittel eingesetzt werden, so der Gedanke Nielsen’s. User werden von anderen Internetseiten wissen, wie die jeweilige Seite zu benutzen ist.

Abbildung 18: Handlungsempfehlungen aus der Studie “50 Homepages Deconstructed”

Diese Tabelle zeigt die in diesem Zusammenhang wichtigsten Erkenntnisse. Die Stärke der Empfehlung wurde durch eine Sternchenrangfolge operationalisiert. Drei Sterne bedeuten, dass diese Richtlinie unbedingt befolgt werden sollte, ein Stern ist dagegen die niedrigste Stufe und kann gebrochen werden, wenn eine bessere Lösung sich anbietet. Im Teil 6.1 Homepage soll nochmals auf diese Studie verwiesen werden.

Die visuelle Gestaltung des Webauftritts ist Aufgabe des Page-Designs. Der Seitenaufbau folgt immer öfters Konventionen, die sich im Web eingebürgert haben. Durch die Annahme dieser Konventionen, bspw. dem Logo in der linken oberen Ecke, wird dem User die Orientierung erleichtert. Ein Aufbau eines mehrteiligem Spalten-Designs wird meist durch die Benutzung von HTML-Tabellen oder Frames realisiert. Dabei ist auf spezielle Probleme dieser Frame-Technik zu achten.
Durch die individuelle Farbgestaltung bekommt der Webauftritt eine besondere Note und unterstreicht die Stimmung des Anbieters. Letztlich ist die Präsentation der Schrift und somit der Inhalt die Aufgabe der Typographie. Es sollten spezielle Bildschirmschriften in adäquaten Größen eingesetzt werden und somit die Informationsvermittlung erleichtert werden.
Dabei darf nicht vergessen werden, dass es sich lediglich um Möglichkeiten handelt, eine gebrauchstaugliche Website zu gestalten. Diese Kriterien sind nicht für jede Zielgruppe gültig und es scheint angemessen wiederholt auf das It depends aufmerksam zu machen.
Erinnern wir uns nochmals an die drei Kenngrößen Effektivität, Effizienz und Zufriedenheit nach der DIN-Norm 9241-11. Was bedeuten diese Größe nun für das Page-Design?
Lediglich eine gestaltete Website ist Voraussetzung für die Effektivität. Verschiedenartig gestaltete Elemente unterscheiden die einzelnen Funktionen einer Website. Durch die Seitenaufteilung findet der User optische Anhaltspunkte und erhält somit eine Orientierung auf der Bildschirmoberfläche.
Das Design ist effizient, wenn der User eine optische Hierarchie erkennt und der Content dadurch optimal unterstützt wird. Um dies zu erreichen, kann der Designer verschiedene Mittel einsetzen, wobei gelernte Gestaltungsprinzipien und –elemente besonders beachtet werden sollten. So befindet sich die Primärnavigation meist links und unterstützt somit unsere natürliche Leserichtung von links nach rechts. Dies führt allerdings zu einer Angleichung der visuellen Gestaltung vieler Webseiten. Dadurch sind sie schwer zu unterscheiden und nur geringe Möglichkeiten bieten sich zur Absetzung zu anderen Angeboten.
Durch die Berücksichtigung der Nutzerzufriedenheit und des Geschmacks der jeweiligen Zielgruppe kann der Besucher allerdings durch ungewöhnliche visuelle Gestaltungsmöglichkeiten überrascht werden. Hierbei kann die Spanne der Möglichkeiten von einer eher schlichten bis hin zu einer farbenfrohen Gestaltung reichen.