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.

Nach dem Besuch einer Theatervorführung hört man oftmals wie großartig das Stück gewesen ist. Und nur selten wie großartig die Kostüme waren. Natürlich gehören schöne Kostüme zu einem großartigem Theaterstück und drücken letztlich die Visionen der Künstler und Regisseure aus. Das Gleiche gilt im Internet: Der User kommt wegen des Inhalts und nicht wegen dem Design und der visuellen Aufbereitung des Contents.

Blickverlaufsstudien (Eyetracking) des Poynter Instituts haben gezeigt, dass fast alle Benutzer zuerst auf den Text schauen, bevor sie Bilder und Grafiken näher betrachten. Von den ersten drei Augenfixierungen konzentrierten sich 78% auf die Texte. Dies zeigt, dass der textuelle Inhalt weit wichtiger ist als Fotos und Grafiken.

Im folgenden Zusammenhang sollen unter Content auch Bilder, Grafiken und Multimediaelemente verstanden werden, da diese durchaus zur Informationsvermittlung gehören können.
Die Qualität des Contents gehört neben dem Auffinden der Information und der Anordnung der Seiten (siehe Kapitel 6 Site Design) zu den wichtigsten Determinanten des Web Usability. Doch was heißt dies für die Aufbereitung der Texte für das Medium Internet?

Im vorangegangenem Unterpunkt Typografie ging es um die Leserlichkeit des Textes (engl. legibility), also die visuelle Qualität der Buchstaben, Wörter und Sätze. Nun soll die Lesbarkeit (engl. readability) von Texten im Web, also wie verständlich oder unverständlich der Inhalt geschrieben ist, behandelt werden.

“The Internet will make every enterprise a publisher.”

Steve Case, chairman and CEO of AOL Time Warner

Dieses Zitat zeigt vereinfacht das Grundprinzip des World Wide Webs: Jede Person, jede Institution oder jedes Unternehmen kann auf einfachste Weise im Internet zum Autor werden. Es besteht ein großer Anreiz ein Dokument ins Web zu stellen, da es jeder auf der gesamten Welt abrufen kann. Kombiniert mit dem System von Links war dies der Grundgedanke von Tim Berners-Lee, dem Erfinder des World Wide Webs.

Aufgrund der im letzten Kapitel angesprochenen Schwierigkeiten beim Lesen auf dem Bildschirm und der Tatsache des Scannens unterscheidet sich das Schreiben eines Textes für ein Online-Medium von dem Schreiben für ein Printmedium. Dies wird meist beim Schreiben eines Onlinetextes nicht berücksichtigt bzw. dem Schreiber ist sich der Unterschiede nicht bewusst.

Grundsätzlich sollte der Inhalt auf drei Ziele ausgerichtet sein: den Leser möglichst leicht die Einführung ins Thema zulassen, die Orientierung erleichtern und letztlich Informationen an den Leser weitergeben. Um dies zu erreichen ist es nötig, den Inhalt interessant und dennoch einfach zu gestalten. Zusätzlich sollte die Zielgruppe und deren intendierte Aufgabenstellung unterstützt werden. Jakob Nielsen spricht hier von einer customer-focused language.

Dazu gehört auch eine leicht verständliche Sprache sowie die Vermeidung übertriebenen Fachjargons. Mit der steigenden Anzahl der unerfahrenen Nutzer steigt auch der Anspruch Texte zu schreiben, die von der Mehrheit verstanden werden. Fast immer besteht die Gefahr im eigenen Fachjargon hängen zu bleiben. Im gesamten Usability-Rahmen sollte hier besonderes Augenmerk auf die Zielgruppe gesetzt werden: Muss auf einer Seite für Großhändler der Begriff CPU nicht erklärt werden, so weiß nicht jeder PC-Interessent, dass damit der Prozessor des PCs gemeint ist. Auf diese Terminologie soll in Kapitel 6 noch näher eingegangen werden, wenn es um die Beschriftung von Links und Navigationselementen geht.

In die gleiche Kategorie von nicht optimierten Texten zählt der sogenannte Happy Talk des Usability-Experten Steve Krug. Darunter versteht er den Willkommenstext vieler Homepages, in dem meist keine sinnvollen Informationen weitergegeben werden und so nur den zur Verfügung stehenden Platz verschwenden. Auf vielen Seiten sieht man diese ‘Willkommen’-Meldungen, doch gelesen und gewürdigt werden sie selten. Die Seiteninhaber beachten nicht, dass der User keine Zeit hat zum Smalltalk und direkt zum Thema kommen möchte. Deshalb wird hier empfohlen, diese Art von Meldungen möglichst kurz zu halten und stattdessen eine Beschreibung des Inhalts zu liefern.

Eine allgemeine Regel für das Verfassen von Texten für das Internet lautet: Schreibe kurz und knapp! Aufgrund der Tatsache, dass Lesen am Bildschirm ungefähr 25% langsamer geschieht als auf dem Papier, scheint diese Regel äußerst plausibel. Nielsen empfiehlt Texte aus dem Printbereich bei einer Anpassung für das Web um ca. 50% zu reduzieren. Dies kommt ebenfalls dem Scannen der Informationen zu Gute. In einer Studie zusammen mit John Morkes wurde herausgefunden, dass 79% der Testpersonen den Inhalt der Seiten überflogen und nur wenige Personen Wort für Wort lesen.

Anhand eines Usability-Tests soll eine Optimierung für das Medium Internet veranschaulicht werden. Ein Text wurde fünfmal verschiedenartig aufbereitet. Morkes und Nielsen testeten die Usability der vier Texte im Vergleich zum Originaltext. Dabei wurde die Gebrauchstauglichkeit des letzten Textes um 124% verbessert. Messkriterien waren bei diesen Usertests die Zeit, die für eine Aufgabe benötigt wurde, die Fehleranzahl der falschen Antworten, Gedächtnisleistungen bzgl. späterer Wiedererkennung und die Seitenstruktur. Die nächste Seite zeigt die fünf verschiedenen Texte und deren Veränderung.

Abbildung 19: fünf Versionen eines Beipieltextes
Quelle: Nielsen (2000), S.105.

Text 1 stellt den Ursprungstext dar und wurde viermal verändert. Text 2 wurde um die Hälfte der Wörter gekürzt und zeigte eine Verbesserung von 58%. Text 3 wurde zur besseren Scannbarkeit umgeschrieben, was sich in der Listenaufzählung zeigt. Der vierte Text wurde in einer objektiven und nüchternen Sprache verfasst. Aus diesen drei Arten wurde der Text 5 kombiniert und zeigt die besten Ergebnisse.
Diese Studie zeigt, dass User knapp geschriebenen, leicht zu scannenden und objektiven Text bevorzugen.

Daraus resultieren drei Richtlinien:
1. Inhalt kürzen: Balance finden zwischen dem Beibehalten des sinnvollen und interessanten Teils des Textes und dem Kürzen von unnötigen Informationen.
2. Text scannbar machen: Hervorhebung von Schlüsselwörtern, Benutzung von Auflistungen, zusätzlichen Überschriften und kürzeren Absätzen.
3. Objektive Sprache verwenden: Marketing-Sprache, Modewörter und Adjektive vermeiden, stattdessen aktive Sprache verwenden.

Vor allem die Befolgung den Text zu kürzen ist schwierig, da es sein kann, Detailinformationen vorzuenthalten und somit einen Teil der Besucher zu verlieren.
Wie man in den Usability-Tests von Nielsen und Morkes gesehen hat, stellt die Kürze der Absätze einen wichtigen Punkt dar. Ein weiterer Punkt ist der inhaltliche Aufbau der Texte. Um Dokumente für das Medium Web effizient und attraktiv für den Leser zu gestalten ist es wichtig, dass die Struktur der Texte, also die Art und Weise, in der Absätze angeordnet sind, webgerecht für den Bildschirm optimiert werden.
Somit sieht es aus, als ob das Web seinen eigenen Schreibstil sucht, der allerdings nahe dem der Nachrichtenjournalisten liegt. Eine aussagekräftige Überschrift mit Schlüsselwörtern und ohne übertriebene Metapher sollte dem Besucher den ersten Anhaltspunkt geben, was ihn auf dieser Seite erwartet. Da der Webnutzer meist wenig Zeit hat sich durch ellenlange Seiten zu quälen, ist es wichtig die Hauptaussage kombiniert mit einem Überblick im ersten Absatz eines Artikels zu bringen. Im Fachgebrauch wird dieser Teaser genannt. Der Leser kann selbst entscheiden, ob er weiterliest oder auf eine andere Seite wechselt.

In den folgenden Abschnitten können dann nach und nach Details beschrieben werden. Obwohl der Besucher die Hauptidee erfassen konnte, ist es ihm jederzeit möglich auszusteigen. Diesen Aufbau nennen die Journalisten die inverse Pyramide. Folgender Bericht der Online-Ausgabe der Tageszeitung ‘Die Welt’ soll dies verdeutlichen.

Abbildung 20: Die inverse Pyramide [AM 9]

Der Leser weiß durch die Überschrift, dass Barrichello schneller als Ralf Schumacher war. Die Sub-Unterschrift sagt, dass Michael Schumacher Dritter beim Training zum Großen Preis von Österreich geworden ist. Im Teaser wird dies nochmals kurz zusammengefasst und schon erste Details preisgegeben, nämlich dass der Vertrag von Barrichello verlängert worden ist. In den folgenden Abschnitten werden weitere Hintergrundinfos wie Rundenzeiten und der Ausstrahlungstermin im Fernsehen bekannt gegeben.
Die Methode der inversen Pyramide trägt somit zwei webspezifischen Tatsachen Rechnung: Der User überfliegt den Text (scannt) und findet gleich am Anfang die relevanten Informationen. Dadurch ist es nicht unbedingt nötig nach unten zu scrollen, da die Hauptinformationen im oberen Teil des Bildschirms liegen.
Den meisten Online-Redaktionen ist dieses Vorgehen durchaus bewusst, sie können es allerdings schlecht umsetzen. So z.B. der folgende Artikel aus dem Online-Magazin Dr. Web.

Abbildung 21: Eine ‘falsche’ inverse Pyramide. [AM 10]

Einer Überschrift wird ein Teaser nachgestellt, der das Wichtigste des Dokuments zusammenfasst. Der zweite Abschnitt wiederholt allerdings einen Großteil des Teasers, was zu einer unnötigen Leseverzögerung führt und kostbare Zeit raubt, falls der Leser über den Teaser hinaus liest. Die Wiederholung wurde im obigen Bild gelb eingefärbt.
Ein anderer Fehler wird oftmals durch den Vorspann eines Textes als Kurzfassung auf einer vorgeschalteten Seite gemacht. Das ist zwar einfach zu realisieren, aber dennoch nicht netzgerecht.
Die Redaktion von AOL Deutschland veröffentlichte auf den Wirtschafts-Seiten eine anscheinende Kurzzusammenfassung eines Berichtes und bringt exakt den gleichen Wortlaut auf der Folgeseite. Der Leser merkt unter Umständen nicht, dass er diese Informationen schon gelesen hat und erst im zweiten Abschnitt ihn neue Hintergrunddetails erwarten.

Abbildung 22: Wiederholung des Textes auf vor- und nachgeschalteter Seite [AM 11]

Der obere Screenshot zeigt die Nachrichtenseite und der untere die Detailseite. Gelb eingefärbt wurde der übereinstimmende Text.

Letztendlich sollte auf eine optimale Zeilenlänge geachtet werden. Usabilitytests haben herausgefunden, dass die Zeilenlänge keinen Einfluss auf die Lesegeschwindigkeit hat. Die Ergebnisse zeigten jedoch, dass die Versionen mit kürzeren Zeilenlängen denen mit längeren Zeilenlänge bevorzugt werden.
Bei der Einschätzung der Leseeffektivität wurde dagegen die Version mit längeren Zeilenlänge bevorzugt, wahrscheinlich da weniger gescrollt werden muss.
Aus diesen Studien geht eindeutig hervor, dass bei Dokumenten für den Bildschirm Zeilenlängen über den ganzen Bildschirm unbedingt vermieden werden sollten. Es bieten sich mittlere Zeilenlängen von ca. 65 bis 75 Zeichen als optimale Zeilenlänge.

Eine Vergleichsstudie an der Universität von Ohio hat ergeben, dass Texte auf dem Bildschirm weniger glaubwürdig, überzeugend und schwerer zu verstehen sind als Texte auf Papier.

Glaubwürdigkeit ist somit ein weiterer Erfolgsfaktor einer Website. Der Verbraucher steht dem Problem gegenüber nicht alles glauben zu müssen was er liest und dementsprechend entscheiden kann, wo er welchen Artikel oder Dienstleistung erwirbt. Der Websitebetreiber muss sich also anstrengen einen möglichst glaubwürdigen und vertrauenserweckenden Eindruck zu hinterlassen. Dabei spielt die Usability einer Website eine übergeordnete Rolle.

Glaubwürdige Webseiten haben eine hohe wahrgenommene Vertrauenswürdigkeit in Verbindung mit einer hoch wahrgenommenen Fach- oder Sachkenntnis. Sobald einer dieser zwei Faktoren verletzt wird, sinkt die Glaubwürdigkeit.

Ein Forscherteam der Universität Stanford hat eine empirische Umfrage mit 1400 Testpersonen aus den USA und Europa durchgeführt und dabei gefragt, welche Faktoren die Wahrnehmung der Glaubwürdigkeit eines Internetangebotes steigern oder vermindern. Es wurden 51 Web Site Elemente in sieben Kategorien evaluiert und auf Grund dieser Ergebnisse weitreichende Empfehlungen für das Design eines Internetauftrittes ausgesprochen.

Folgendes Bild zeigt die Erkenntnisse:

Abbildung 23:Ergebnisübersicht einer Studie an Universität StanfordQuelle: Fogg et al. (2001a), Folie 8

Fünf Kategorien beschreiben Faktoren, die die Glaubwürdigkeit einer Internetseite steigern. Der dominanteste Faktor “Real World Feel” enthält solche Elemente, die zeigen, dass ein Unternehmen oder eine Person für den Auftritt verantwortlich ist und eine Interaktion zwischen Unternehmen und dem Besucher möglich ist. Schnelle Antwortzeiten auf Emailanfragen, Kontaktadressen und auch Fotos der Mitarbeiter erhöhen die Glaubwürdigkeit.

Der nächste Punkt betrifft die Usability, hier als “Ease of use” betitelt:

Es wurde für wichtig gehalten, dass eine Site professionell aussieht, eine sinnvolle Struktur hat, eine leicht nachvollziehende Navigation aufweist und schnell ladbar ist. Dies ist ein in dieser Arbeit bisher nicht erwähnter Grund, Zeit und Geld in die Usability einer Site zu investieren.
Ein weiterer positiver Faktor bezieht sich auf die Expertise, also das auf der Seite zur Verfügung gestellte Wissen. “Trustworthiness” bezieht sich auf das Vertrauen, das sich in Links von anderen Seiten oder auf die Empfehlung von Freunden zeigt. Der schwächste positive Einfluss auf die Glaubwürdigkeit besteht im “Tailoring”, der Personalisierung einer Seite. Dies zeigt sich, indem Bestätigungsmails nach einer Transaktion verschickt werden oder der Anerkennung, dass der Besucher schon einmal da war.
Dagegen wurden zwei Kriterien aufgestellt, die offensichtlich die Glaubwürdigkeit stören können. Der erste negative Faktor besteht in kommerziellen Elementen einer Website. So führen mehrere Werbebanner meist zu einer Unglaubwürdigkeit, wobei eine höchst kommerzielle Atmosphäre aufgebaut wird. Allerdings muss dies nicht immer der Fall sein , weit schwerer ist eine Vermischung von Inhalt und Werbung, da hier die Grenzen nicht mehr leicht zu erkennen sind.

Die schwerwiegendsten Fehler findet man unter der Kategorie “Amateurism”. Die Site hat keine eigene Topleveldomain, sondern ist bei Providern gehostet wie Aol oder Geocities, der Domainname passt nicht zum Angebot oder die Site besteht aus weniger als fünf Seiten. Kleinigkeiten wie Rechtschreibfehler und tote Links werden mit einer hohen Abwertung der Glaubwürdigkeit bestraft.

Letztlich ist eine seltene Aktualisierung des Inhalts ein Indiz für einen vernachlässigten und vom Betreiber nicht ernst genommenen Internetauftritt. Aufgrund dieser Wichtigkeit soll auf diesen Punkt näher eingegangen werden.

Aktualität ist streng mit Glaubwürdigkeit und Vertrauen verbunden. Im Vergleich zu den herkömmlichen Kommunikationsmedien verfügt ein Webangebot über ein erheblich größeres Aktualisierungspotential, weil Änderungen ohne große Verzögerung schnell und einfach vorgenommen werden können. Dies zeigen zum Beispiel Börsenkurse oder Wettermeldungen.

Daraus resultiert gleichzeitig eine bestimmte Erwartungshaltung des Besuchers: Wenn Content ins Netz gestellt wird, geht der Besucher davon aus, dass dieser auch gültig und aktuell ist. Ebenso wird erwartet, veralteten Inhalt zu löschen oder nur in einem Archiv abrufbar zu machen.
Mittlerweile findet man auf den meisten Seiten ein Änderungsdatum im Kopf oder dem Fuß der Seite. Wird allerdings ein weit zurückliegendes Datum angegeben, wird der Besucher selten eine Email schicken oder ein Formular ausfüllen, da davon ausgegangen werden kann, dass man keine Antwort erhält. Andere Möglichkeiten zur Präsentation eines Datums sind etwa Links wie “Neu auf diesem Server”, “News” oder “Pressemitteilungen”.

Eine Umfrage vom Dezember 2001 unter 700 Mittelstands- und Großunternehmen zeigte, dass ein geringer Aktualitätsgrad ein typisches Erscheinungsbild ist. Nur 27 Prozent der befragten Firmen-Websites präsentieren Content der jünger als einen Monat ist. Über die Hälfte der Verantwortlichen gab zu, vor mehreren Monaten zuletzt aktualisiert zu haben. Als wichtigster Grund hierfür wurde die fehlende Zeit (41%) angegeben. Eine ähnliche Studie fand heraus, dass zu hohe Personalkosten zur regelmäßigen Bearbeitung der Website ein Update verhindern. Als Konsequenz sollen in Zukunft die Inhalte eingeschränkt werden. Ein verringertes Informationsangebot ist dagegen keine adäquate Lösung. Passender wäre ein geeignetes Content-Managementsystem zur dynamischer Aufbereitung der Site und die Einsicht, dass aktueller Inhalt wichtig für das Image und die Präsentation der Unternehmung ist.
Dagegen gibt es einfache Möglichkeiten die fehlende Zeit oder Ressource zur Aktualisierung zumindest zu verkündigen. Auf KommDesign.de findet man bspw. im Mai 2002 auf der Homepage einen Hinweis, dass bis auf bestimmte Zeit keine neuen Beiträge oder Newsletter veröffentlicht werden.

Abbildung 24: Ein Hinweis, dass zur Zeit keine Seitenupdates möglich sind. [AM 12]

Dies ist eine einfache und zweckmäßige Art dem Besucher mitzuteilen, dass eine Person oder eine Unternehmung hinter dem Auftritt steht, diesen ernst nimmt und die Kommunikation mit dem Besucher nicht scheut.
Um Kommunikation zwischen dem Seitenbetreiber und dem Besucher soll es nun im folgenden Abschnitt gehen.

Das Web wird als Kommunikationsmedium empfunden und somit erwarten die Benutzer verschiedene Möglichkeiten zur Kontaktaufnahme auf der Website. Dies kann auf verschiedene Weise erfolgen: Der Besucher schickt eine Nachricht per Formular oder Email und ordert bestenfalls ein Produkt oder eine Dienstleistung. Letztlich sind Kommunikationsmöglichkeiten auch in interaktiven Abläufen zu finden.
Auf Diskussionsforen, Gästebücher oder Chats wird nicht näher eingegangen, da diese eher nicht gebräuchlich auf Informationsseiten sind, sondern verstärkt auf privaten Seiten eingesetzt werden.

Für die meisten kommerziellen Webseiten gehört zur wesentlichen Zielsetzung die Kontaktaufnahme zu den Besuchern. Da dies meist durch Formulare geschieht, soll im Folgenden näher auf diese eingegangen werden. Untenstehende Abbildung zeigt die wichtigsten Elementen eines Formulars.

Abbildung 25: Die Elemente eines Formulars [AM 13]

Texteingabefelder (Nr.1 in obiger Abbildung) sind die meist verwendeten Elemente und dienen zur freien Eingabe von Daten. In HTML können dies einzeilige oder auch mehrzeilige Felder sein. Sucheingabemasken verwenden, beispielsweise in Verbindung mit einem Button, diese Art von Element. Der kritischste Faktor ist dabei die Länge des Feldes. Die Länge, die angezeigt wird, sollte immer an die ungefähre Anzahl an Zeichen angelehnt sein, die der Benutzer eingeben wird. Zu lange Felder irritieren den Benutzer, da im Feld noch freier Platz sichtbar ist. Zu kurze Felder dagegen zwingen den Besucher zu scrollen und geben somit keine klare Kontrolle was nun eingegeben worden ist. Im obigen Formular wurde bspw. das Feld Geburtsdatum der Länge angepasst.

Die Beschriftung sollte oberhalb oder links vom Eingabefeld erfolgen, ansonsten besteht die Gefahr, dass das jeweilige Feld der Beschriftung nicht zuzuordnen ist.
Das Eingabeformat eines Textfeldes stellt sich oft als Problem dar, so z.B. wenn es um eine Datumsangabe geht. In solchen Fällen bietet es sich an, dies expliziert anzugeben oder eine Vorgabe zu machen. Im obigen Formular ist dies mit Hilfe von drei kurzen Felder umgesetzt.
Die Checkbox (Nr. 3) ist ein weiteres Element und vermittelt, dass mehrere Einträge aus einer Liste möglich sind. Die Beschriftung sollte rechts liegen und positiv formuliert werden. In einem Onlineshop zum Beispiel wäre eine doppelte Verneinung wie “Nicht als Geschenk verpacken” schwieriger zu verstehen wie “Als Geschenk verpacken”.
Nr. 4 in obiger Abbildung stellt einen Radiobutton dar. Diese vermitteln, dass genau ein Eintrag aus mehreren ausgewählt werden kann. Oftmals wird dieser Button allerdings angewendet, eine Funktion auszulösen. Der Radiobutton wird angeklickt und obwohl der User normal nichts erwartet, wird bspw. eine neue Seite geöffnet.
Die Beschriftung sollte sich hier ebenfalls rechts vom Button befinden, und mehrere stets untereinander statt nebeneinander. Somit ist eine bessere Übersicht gewährleistet und es wird deutlich, dass diese eine Gruppe darstellen.
Als Alternative zu einem Radiobutton kann ein Pulldown-Menü (Nr.2) eingesetzt werden. Diese sollten ab einer Auswahlmöglichkeit von drei Elementen benutzt werden, wobei die Obergrenze aufgrund des Kurzzeitgedächtnisses eine Anzahl von sieben plus minus zwei Items beschränkt sein sollte. Für weniger als drei Elemente sollten Checkboxen benutzt werden. Solche Pulldown-Menüs sieht der Benutzer oft als Navigationselement, wobei problematisch erscheint, dass die zur Verfügung stehenden Alternativen erst bei einem Klick auf den Pfeil zum Vorschein kommen und somit kein primäres Scannen möglich ist.
Jedes Formular verlangt als klaren Abschluß einen Button (Nr.5) am unteren Ende des Formulars. Meist werden die dem User bekannten HTML-Buttons verwendet. Dies ist auch zu empfehlen, obwohl mit Hilfe CSS Farbe und Aussehen verändern werden können. Doch alles was durch Konditionierung gelernt worden ist, so z.B. das Aussehen der typischen Windows-Buttons, sollte auch benutzt werden. Deshalb wird empfohlen die herkömmlichen HTML Buttons weiterhin zu verwenden, ansonsten kann es passieren, dass der Benutzer vergeblich nach einem grauen Button sucht und den vorhandenen anders aussehenden übersieht.
Die ideale Beschriftung der Buttons ist das Ansprechen der Aktion die durch das Drücken ausgelöst wird. Ein einfaches “OK” ist bei einer Absendung einer Bestellung also zu wenig, ein aussagekräftiges “Bestellen” ist vorteilhafter. Der Besucher versteht somit den jeweiligen Vorgang besser.

Fraglich ist, ob ein Button zum löschen der Eingaben nötig ist. Oftmals ist dieser Reset-Button (beschriftet mit “Eingaben löschen”) so angebracht, dass er direkt neben dem Absendbutton liegt und somit schnell verwechselt werden kann. Diesem Problem kann durch weit auseinanderliegende Positionierung entgegengewirkt werden.
Bei kurzen Formularen kann dieser Button sicherlich weggelassen werden. Anders sieht es dagegen bei immer wiederkehrenden Aktionen aus, z.B. bei einer Telefonnummernabfrage, bei der unterschiedlichen Daten hintereinander abgefragt werden.
Nachdem das Formular ausgefüllt und abgeschickt worden ist, ist eine Validierung der eingegebenen Daten möglich. Zuvor sollten alle Eingaben nochmals zur besseren Übersicht auf einer neuen Seite dargestellt werden. Dies gilt vor allem bei Formularen, die sich über mehrere Seiten erstrecken.

Doch auch eine angeblich so leichte Überprüfung einer fünfstelligen Postleitzahl bereitet Probleme: sollte ein Österreicher das Formular benutzen, würde dies zu einer Fehlermeldung führen, da dieser sicherlich eine vierstellige Zahl eingeben würde.
Auszufüllende Mussfelder sollten mit einem roten Stern gekennzeichnet werden und äußerst vorsichtig eingesetzt werden. Die Internetbesucher überlegen mittlerweile genauer, welche persönlichen Daten sie von sich preisgeben. Deshalb sollten alle unnötigen Angaben wie z.B. Beruf oder Einkommen ganz weggelassen werden oder zumindest eine optionale Eingabe sein. Dies soll der Forderung der Aufgabenangemessenheit aus der DIN-Norm 9241 Rechnung tragen.

Eine Fehlermeldung sollte klar vom Inhalt abgesetzt werden und als solche erkennbar sein. Zudem sollten die entsprechenden Felder als Fehler markiert sein. Ansonsten fragt sich der User, was passiert ist, und ob das Formular auch abgeschickt worden ist.
Folgendes Bild zeigt einen typischen Ablauf einer Bestellung per Formular und soll einige unscheinbare Probleme demonstrieren. Bei diesem Formular sind alle Felder auszufüllende Mussfelder, was man an der Fehlermeldung rechts oben erkennt, eine Kennzeichnung im Formular selbst fehlt allerdings.

Auf den ersten Blick sieht dieses Formular sehr übersichtlich aus, was wünschenswert ist. Negativ auffallend ist die kleine weiße Schrift und die Tatsache, dass bis auf ein Feld alle gleich lang sind, was wiederum nicht zum erleichterten Überblick beiträgt. Hilfslinien oder eine andere Hintergrundfarbe könnten zudem das letzte Feld “Anzahl der Gutscheine” von den Daten des Bestellers abgrenzen.
Der Reset-Button liegt genau neben dem Abschickbutton und sollte besser mit “Eingaben löschen” betitelt sein. Fraglich ist, ob bei diesen relativ wenigen Eingaben überhaupt solch ein Button nötig ist. Nach Druck auf den Button “Beförderungsbestimmungen” öffnet sich ein Windows-Warnfenster mit den allgemeinen Beförderungsbestimmungen. Ein Link, welches ein neues Fenster öffnet, wäre besser und man könnte diesen Text ausdrucken.

Nachdem der Abschickbutton (Nr.1 in der Abbildung) gedrückt worden ist, erscheint ein Hinweisfenster mit der Auflistung aller Eingaben, welches zu einer guten Kontrolle führt. Nach einem weiteren Klick auf “OK” erscheinen nochmals die Beförderungsbestimmungen (Nr.2). Bestätigt man dieses Fenster, so öffnet sich der Hinweis, dass die Eingaben per Email und nicht sicherheitsverschlüsselt verschickt werden (Nr.3). Nach diesem Vorgang über 4 Mausklicks bleibt es dem potentiellen Kunden offen, die Bestellung abzuschicken. Optimierte Formularsysteme kommen mit höchstens zwei Klicks aus und kosten dem User somit weniger Zeit.

Abbildung 26: Verlauf einer Bestellung über ein Formular [AM 14]

Einen weiteren Vorteil von Formularen kann dieses Beispiel nicht ausnutzen. Kontaktformulare sollten auch von Benutzern abgesendet werden können, wenn diese sich nicht an ihrem eigenen PC aufhalten. Ist der potentielle Käufer an einem anderen Arbeitsplatz oder gar in einem Internetcafe, so ist es meist nicht möglich oder wäre zu zeitaufwendig, den eigenen Email-Account in einem Mailclient zu konfigurieren. Kostenlose Emailadressen wie man sie bei GMX oder Web.de einrichten kann, werden meist über das Browserinterface bedient und der Nutzer kennt selten seine Accountdaten.

Im obigen Fall merkt der Benutzer evtl. erst am Schluss, dass ein letztendliches Abschicken aufgrund fehlender konfigurierter Emailadresse nicht möglich ist. Der gesamte Vorgang wäre dann auf Grund der vielen Klicks und des Zeitaufwands nicht effektiv und effizient und würde auch den Benutzer nicht zufrieden stellen.
Nebenbei sei auf etliche Rechtschreibfehler in den Warnfenstern hingewiesen (vor allem missachtete Groß- und Kleinschreibung sowie vertauschte Buchstaben), was nicht zum Vertrauensaufbau und einer hohen Glaubwürdigkeit beiträgt.

Neben solchen Kontaktformularen sollte man dem Interessenten aber dennoch einen Link zur Emailadressen anbieten können.