Email ist neben dem WWW die meist benutzte Anwendung des Internets. Die User kennen sich mit dem Vorgang des Emailschreibens aus und erwarten somit eine Emailadresse zur Kontaktaufnahme auf einer Webseite. Deshalb ziehen viele Benutzer den Anfrageformularen oft Email vor. Häufiger aber auch deswegen, weil sie sich nicht die Mühe machen wollen, vorgegebene Felder auszufüllen, während diese Daten in den Emails oft als Signatur automatisch eingefügt werden.
Die Emailadresse sollte als <mailto> auf jeder Seite zu finden sein, d.h. als Link zur Emailadresse, so dass das bevorzugte Mailprogramm geöffnet wird. Dabei sollte nicht nur der Name des Ansprechpartners genannt werden, sondern der Link sollte auch als Emailadresse sichtbar sein. Also nicht nur Hermann Mustermann, sondern z.B. hermann@mustermann.de wäre die bessere Alternative.

Auch sollte klar erkennbar sein, ob es sich um einen Link zu einem Kontaktformular oder einer Emailadresse handelt. Wird eine Emailadresse angekündigt, so sollte sich auch ein Link auf diese befinden und nicht auf ein Formular.
Die Emailadresse nicht mit einem <mailto> Link zu versehen, führt dazu, dass der User umständlich die Adresse markieren und diese in das Emailprogramm einfügen muss. Dies kostet wieder einige Sekunden kostbare Zeit.
Andererseits schützt es die Emailinhaber vor unerwünschten Werbemails, da die automatischen Sammelprogramme die Adresse nicht erfassen können.
Unter anderem nennt Jakob Nielsen diesen Grund, warum seine Emailadressen auf seiner Homepage keinen <mailto> Link folgen. Des weiteren möchte er sich vor unerwünschten Emails schützen, dessen Beantwortung viel Zeit in Anspruch nehmen. So geht er sicher, dass ihn nur ernstgemeinte Anfragen erreichen. Folgende Abbildung zeigt die Fußsignatur seiner Homepage.

Abbildung 27: Nicht verlinkte Emailadressen auf der Homepage von Jakob Nielsen [AM 15]

Für große Firmen ist diese Art der Kontaktaufnahme eine Möglichkeit, unerwünschte Anfragen (die meist sowieso nicht beantwortet werden) fern zu halten. Eine bessere Möglichkeit besteht darin, die Anfragen von vornherein zu kanalisieren, in dem z.B. ein Pulldown-Menü angeboten wird, über das die Benutzer ihr Feedback an bestimmte Abteilungen senden können.

Usability Tests von acht großen amerikanischen Shoppingseiten haben gezeigt, dass 43 % aller Einkäufe fehlschlagen. Größtes Problem ist hierbei der Checkout-Prozess: Der Kunde hat die gesuchte Ware gefunden, fügt diese in den Einkaufswagen und entscheidet die Bestellung abzuschicken. Unglücklicherweise sind viele solche Prozesse schwierig gestaltet und ermöglichen somit keine konsequente Bestellaufnahme. Die häufigsten Probleme dabei entstanden beim Anlegen eines neuen Accounts sowie schlecht markierte Fehlermeldungen. Dabei endete der Einkaufsbesuch in einer Sackgasse: Der potentielle Kunde verlässt die Seite und kommt selten ein zweites Mal zu Besuch.

Diese Schilderung zeigt, dass Webseiten nicht nur eine statische Architektur haben, sondern sie bestehen auch aus dynamischen und interaktiven Abläufen. Unter einem interaktiven Ablauf sollen in diesem Zusammenhang diejenigen Prozesse verstanden werden, bei denen der Besucher nicht nur klickt um zu navigieren, sondern eine komplexere Aufgabe erledigt. Typische Beispiele sind hierfür Onlineeinkäufe von Produkten, die Eingaben zur Personalisierung einer Nachrichtenseite oder das Heraufladen von Fotos zur Entwicklung auf Papier.
Obwohl dies meist relativ einfache Anwendungen mit linearen Abläufen sind, entstehen hier oftmals Probleme, die im schlimmsten Fall zum Abbruch des Vorgangs führen. Es ist daher notwendig, diese Abläufe so intuitiv und verständlich wie möglich zu gestalten.

Die Methoden, die zu einer Modellierung solcher Szenarien verwendet werden, kommen meist aus dem User-Interface-Design für Software, in der es vor allem um die Entwicklung von Interaktion und Abläufen geht. So auch die Methode des Cognitive Walkthrough. Diese Methode wird in Punkt 7.4.1.2 näher beschrieben.
Zu Beginn des Interaktionsdesigns sollte der Hauptzweck der Interaktion feststehen und das wichtigste Szenario gefunden sein. Beim Cognitive Walkthrough werden die vorher auf Papier skizzierten Abläufe geistig durchgearbeitet und auf Vollständigkeit und Bedienungsfreundlichkeit geprüft.

Welche Schwierigkeiten und Fehler bei einer solchen interaktiven Anwendung entstehen können, soll wie schon oben bei den Formularen anhand eines Beispiels gezeigt werden.
Auf den Internetseiten des Automobilkonzerns Volkswagen findet der interessierte Besucher einen sogenannten Konfigurator. Hier kann er sein Wunschauto zusammenstellen und sich anschließend ein Finanzierungsangebot unterbreiten lassen.
Die Abbildung auf der nächsten Seite soll auszugsweise diesen Prozess für das Modell Sharan darstellen.
Auf der jeweiligen Homepage des einzelnen Modells steht ein Link mit der Betitelung “Fünf Schritte zum Wunschauto.” bereit (Nr.1 in folgender Abbildung). Was genau unter diesem Konfigurator zu verstehen ist, wird dem Besucher nicht erklärt.
Nach einem Klick erscheint ein PopupFenster mit der Ãœberschrift “Der Sharan. Im Konfigurator”. Darunter findet man eine Erklärung zu den Eigenschaften des Fahrzeugs anstatt einer Erklärung des Konfigurators. Der Benutzer wird hier weiterhin im Unklaren gelassen, wie nun dieses Tool bedient wird und welche Vorteile es hat (Nr.2).
Auf der nächsten Webseite wird der Nutzer mit der Auswahl der Ausstattungen konfrontiert. Zur Auswahl stehen Basis, Comfortline, Highline und Trendline. Damit der Nutzer sich über die einzelnen Vorzüge der Ausstattungsvarianten informieren kann, steht ein winziger Button “i” bereit (Nr.3). Es öffnet sich wiederum ein kleines Fenster mit näheren Informationen (Nr.4). Einfacher wäre hier eine kurze Information unter der jeweiligen Auswahlmöglichkeit – der Platz wäre vorhanden gewesen. Mit einem Klick auf die Checkbox der jeweiligen Auswahlmöglichkeit und einem Klick auf Weiter im rechten Navigationsmenü wird der Nutzer zur Motorisierung geführt (Nr.5).
Sieben Möglichkeiten stehen hier zur Verfügung, darunter zum Beispiel Sharan Comfortline 4motion 1,8 l 5V turbo 110kw (150PS) 5 Gang. Diese werden zeilenorientiert angeboten, lediglich der Preis ist abgesetzt. Ãœbersichtlich erscheint dies nicht. Die Bezeichnung “Sharan Comfortline” kommt in jeder Zeile vor und würde lediglich als Ãœberschrift ausreichen. Hier wird die Datenbankstruktur, die hinter dem System steht deutlich. Doch Datenbankkonzepte sind nicht notwendigerweise benutzerorientiert. So fehlt eine Erklärung des Ausdrucks “4motion”, was mit einem einfachen Link auf dieses Wort leicht zu bewerkstelligen wäre.
Im Falle des VW-Konfigurators würde sich eine farbliche Gestaltung anbieten, wie dies beim grafischen Link auf der Homepage angedeutet wird (Nr.1). Die farbigen Quadrate könnten hier einen einzelnen Schritt darstellen.
Fährt man nun im Verlauf des Zusammenstellens des Wunschautos weiter, so fallen Inkonsistenzen im Bezug der zusätzlichen Informationen auf. Bei der Auswahl der Innenausstattungen stehen vier Sitzbezüge zur Auswahl. Die einzelnen Einträge sind Links zu einem neuen Fenster mit einer Abbildung der jeweiligen Muster (Nr.6). Dies ist eine gute Unterstützung, die Links sind allerdings nicht als solche erkennbar. Klickt man die jeweilige Checkbox davor an, so öffnet sich ebenfalls das Fenster mit der Abbildung des Musters. Bei den vorangegangenen Auswahlschritten passierte dies nicht. Die Einträge waren keine Links und beim Anklicken der Checkboxen öffnete sich kein Fenster. An diesen Stellen fehlt die Konsistenz der Bedienungsoberfläche.

Abbildung 28: Der VW Konfigurator im Ãœberblick. [AM 16]

In den folgenden Menüs bei der Auswahl der Sonderausstattungen kommt eine weitere Variante hinzu: Die Auswahlmöglichkeiten sind Links zu Fotos der Varianten, rechts daneben findet sich ein Koffersymbol, welches beim Klick eine Liste des Zubehörs öffnet (Nr.8). Die Fotos wirken teilweise unnötig, wie z.B. die Ansicht des Schlüssels (Nr.7).
Kommt im Verlauf der Zusammenstellung eine nicht bestellbare Kombination zustande, so wird eine Fehlermeldung angezeigt, die gut deutlich markiert ist (Nr.9) Allerdings ist die Erklärung unzureichend und schickt den Benutzer bei einer weiteren falschen Auswahl zurück an die jeweilige Stelle der Ausstattung ohne hier einen Fehler anzuzeigen oder die Auswahl aufzuheben.
Hat der Benutzer sich nun durch alle Einstellmöglichkeiten gehangelt, so wird er zu einem Endbildschirm weitergeleitet, der die rechte Navigation der Konfiguration auflöst und stattdessen neue Auswahlmöglichkeiten zur Finanzierung, der Händlersuche oder einer Neuwagenbörse anzeigt. An dieser Stelle ist der Besucher fertig mit der Konfiguration, was allerdings nicht mit einer Erklärung gewürdigt wird (Nr.10).
Während des gesamtem Prozesses ist eine Kontaktaufnahme zu einem Händler oder Firmenvertreter nicht möglich, spezielle Fragen muss der Benutzer sich notieren und später abklären.
Der Navigationsbereich (z.B. Nr. 5 in obiger Abbildung) liegt rechts von den Auswahlmöglichkeiten und zeigt an, an welcher Stelle der Benutzer sich gerade befindet. Allerdings weiß der Nutzer nicht, wie viel Schritte er bis zum Ende der Konfiguration hat. Da dieses Tool allerdings einen linearen Ablauf vorweist, ist es für den Benutzer einfacher auf jeder Seite angezeigt zu bekommen, in welchen Schritt dieser sich gerade aufhält und wie viele er noch vor sich hat. Amazon zeigt beim Bestellvorgang dem Benutzer eine grafisch gestaltete Leiste am oberen Rand der Seite.

Abbildung 29: Der lineare Bestellvorgang bei Amazon. [AM 17]

Zusammenfassend treten folgende Probleme beim VW-Konfigurator auf:

• eine unzureichende Erklärung des gesamten Vorgangs
• Marketingsprache ohne weiterführende Erklärung
• Datenbankstruktur ist nicht benutzerorientiert
• fehlendes Navigationskonzept: Wie viele Schritte bis zum Ziel?
• Inkonsistenz der Links für weiterführende Informationen
• unzureichende Fehlermeldung bzw. -erklärung
• fehlender Kontakt während der Konfiguration

Diese Anwendung zeigt stellvertretend für viele ähnliche Prozesse, dass augenscheinlich Kleinigkeiten zu Schwierigkeiten und somit zum Abbruch des Prozesses führen können.

Neben den Texten gehören auch Grafiken und Fotos zu den Informationselementen einer Website. Die Auswahl von Farben, Schriftgrößen, Schrifttypen, Grafiken, Fotos und Icons sollen dabei das inhaltliche Verständnis

“Ein Bild sagt mehr als 1.000 Worte”.

Dieses Sprichwort gilt auch im WWW. Doch aufgrund des Ladezeitproblems ist Vorsicht bei der Verwendung von Grafiken und Fotos geboten. Die verwendeten Grafiken sollten eine kommunikative Funktion haben und nicht nur Dekoration oder Platzverschwender sein. Die Tatsache, dass User im WWW den Inhalt scannen, kann eine klare Bild-Text-Sprache den Inhalt unterstützen. Zusätzlich ist darauf zu achten, dass Bild und Text immer in Beziehung zueinander stehen und einander ergänzen.

Dabei ist auch auf eine rhythmische Gestaltung zu achten: Texte und Bilder sollten so angeordnet sein, dass die freien und die bedeckten Flächen von unterschiedlicher Proportion und Größe sind. Somit wird eine visuelle Spannung erzeugt.

Zudem sollte die Funktion der einzelnen Grafik unmittelbar erkennbar sein: Ist diese nur Dekoration, Illustration oder Navigationselement? Dazu gehört auch eine adäquate Erläuterung oder Bildunterschrift.
Fotos können den User aktiv unterstützen: Auf einer Produktseite sollte stets ein Bild des Produktes erscheinen. Falls nur ein kleines Bild (Thumbnail) angezeigt wird, so sollte ein Link zu größeren Fotos erkennbar sein, da der User bei echtem Interesse gerne Fotos mit näheren Details zur Kaufentscheidung heranziehen würde.

Im oben besprochenen Konfigurator von Volkswagen erscheint bei der Auswahl der Außenlackierung automatisch eine Ansicht des Wagens, die den Benutzer animiert, verschiedene Farben auszuprobieren. Dies ist eine sinnvolle Anwendung von Fotos, allerdings wären hier zusätzlich Rundumsichten des Fahrzeuges denkbar und wünschenswert.
Bilder ziehen allgemein mehr Aufmerksamkeit auf sich als reiner Text und werden müheloser entschlüsselt. Ebenso ist die Gedächtnisleistung für Bildmaterial wesentlich besser, was die Orientierung innerhalb komplexer Websites vereinfachen kann. Markante Bilder können somit als Bookmark in der mentalen Landkarte abgespeichert werden, die die Benutzer während des Besuchs aufbauen. Somit können die Benutzer schon besuchte Seiten leichter wiedererkennen. Dies kann z.B. durch Gesichter oder andere Fotos geschehen.

Aus technischer Sicht sind bei der Verwendung von Grafiken und Fotos einige spezielle Tatsachen zu berücksichtigen.
Da Text vor Grafik geladen wird, ist bei der Einbettung von Grafiken in die HTML-Seite darauf zu achten, die Angabe der Höhe und Breite der entsprechenden Grafik mit anzugeben. Der Browser weiß somit, welche Dimensionen die Grafik hat und kann den Text ohne ruckeln auf der Seite darstellen. Der User kann sich somit schnellstmöglich eine Ãœbersicht über die Seite verschaffen. Allerdings ist hier die Originalgröße der Grafik anzugeben um ein Zoomen zu verhindern. In diesem Fall wird die Grafik entweder zu groß angezeigt, was zu einer qualitativ schlechten Darstellung führt oder zu klein, was unnötige Ladezeit nach sich zieht.
Für bestimmte Nutzergruppen, wie Sehbehinderte oder User, die die Grafikdarstellung im Browser deaktiviert haben, ist es nützlich, Grafiken mit einem alternativen Text zu versehen. Dies ist der gelbe Text, der bei Mausberührung über dem Objekt angezeigt wird oder bei einer nicht geladenen Grafik an dessen Stelle erscheint. Sehbehinderte Surfer, die sich den Inhalt von einem Scanner vorlesen lassen, können so bei einem geeigneten Text die Grafik wahrnehmen.
Somit sieht ein optimaler HTML-Code für die Einbettung eines Bildes folgendermaßen aus:

<img src=”augsburg.jpg” width=”300″ height=”100″ alt= “Fotovon Augsburg”>< /EM> < /STRONG>

Bei der Aufbereitung von Grafiken und Fotos für das Web ist es nötig qualitativ hochwertige Grafiken bei geringen Ladezeiten zu entwerfen.
Obwohl den Internetnutzern immer schnellere Downloadgeschwindigkeiten zur Verfügung stehen, sollte auf eine sehr gute Dateigrößenoptimierung der Grafiken und Fotos Wert gelegt werden. Sind mehrere Grafiken auf einer Seite herunterzuladen, so schwillt die herunter zu ladende Dateimenge schnell an.

Zwei Grafiktypen werden für das Web benutzt:

Bitmap- und Vektorgrafiken.
Vektorgrafiken sind z.B. Flashgrafiken und bestehen aus Flächen, welche durch Ausdehnung in die entsprechenden Größen skaliert werden. Diese Grafiken werden in mathematischen Werten (Vektoren) angegeben, dadurch sind deren Dateien kleiner als die optisch gleichgroßen Bitmapgrafiken.
Gif und Jpg Grafiken sind die gebräuchlichsten Bitmapgrafiken fürs Web. Im Gegensatz zu den Vektorgrafiken setzen sich Bitmapgrafiken aus einzelnen Pixeln zusammen, was sichtbar wird, wenn die Grafik vergrößert wird.
Jpg-Grafiken sind aufgrund der großen Farbtiefe von bis zu 16,7 Mio Farben (24 bit) besonders für Fotos geeignet. Somit sind auch komplexe Farbübergänge wie z.B. ein Sonnenaufgang optimal darzustellen.
Gif-Grafiken können dagegen nur 256 Farben (8 bit) darstellen und eignen sich nicht für Fotodarstellungen. Dieses Dateiformat ist am geeignetsten für Strichzeichnungen und Bilder, die nur geringe Farbtiefen aufweisen sowie viel gleichfarbige Flächen enthalten. Einige Besonderheiten machen dieses Dateiformat besonders geeignet für das Web. Es kann Interlaced abgespeichert werden, so dass während des Ladens das komplette Bild in einer niedrigen Auflösung gezeigt und nach und nach vollständig geladen wird. Der User meint dadurch, dass das Bild schneller lädt als eine non-interlaced Grafik. Vom Dateiumfang ist allerdings kein Größenunterschied erkennbar.
Des Weiteren kann eine transparente Farbe in einer Gif-Grafik definiert werden, was sich vor allem für Logos und Navigationselemente anbietet.
Ebenfalls sind animierte Grafiken möglich. Dies soll im Folgenden näher erläutert werden.

Mit Gif-Grafiken ist es möglich kleine Animationen herzustellen, bei denen mehrere Einzelgrafiken hintereinander in einer Datei abgespeichert werden. Dadurch vergrößert sich die Dateigröße schnell und führt zu längeren Ladezeiten.

Grundsätzlich sollten solche Animationen, die man z.B. oft als Briefkasten, “drehendes @” oder Weltkugel sieht, sparsam eingesetzt werden. Alles was blinkt oder sich bewegt wird reflexartig erfasst, was wahrnehmungspsychologische Ursachen hat. Die Folge davon ist, dass der Mensch sich gar nicht solchem Blinken und Bewegen entziehen kann und somit vom eigentlichen Inhalt abgelenkt wird. Die Aufnahme, das Verarbeiten und das Behalten von Informationen wird somit erschwert. Dies ist wohl auch eine Erklärung, warum die meisten Werbebanner animiert und nicht statisch sind. Gleichzeitig entsteht hier die Gefahr die Animation zwar wahrzunehmen, aber zu ignorieren, da man denkt, es sei Werbung. Deshalb sollten keinesfalls wichtige Navigationselemente die Form eines animierten Banners haben.

Wenn trotzdem nicht auf Animationen verzichtet werden kann, so sollten einige Grundregeln beachtet werden, die wiederum auf wahrnehmungspsychologischen Eigenschaften beruhen:

• Regelmäßiges Blinken ist besser als unregelmäßiges.
• Glatte, saubere Bewegungen sind weniger beeinträchtigend als unruhige und ruckartige.
• Verfolgbare Bewegungen sind besser als schnelle.
• Möglichkeiten zum Ein- und Ausschalten sollten vorhanden sein.
• Der Benutzer sollte nicht den Eindruck haben, dass sich die Animation auf ihn zu bewegt.
• Animationen, die ein Ende haben, sind besser als solche, die in einer Endlosschleife laufen.

Natürlich gibt es auch sinnvolle Anwendungen, die eine Animation rechtfertigen. Komplexe Handlungsabläufe können so mediengerecht durch eine Animation erklärt werden. Auf der Seite Wetter.de können z.B. Satellitenfilme angeschaut werden und somit die Wetterentwicklung beobachtet werden. Ein weiteres Beispiel zeigt die Seite Mydailyyoga.com, auf dem Yoga-Ãœbungen vorgeführt werden. Bei Intervoice.de werden Ãœbungen zur Stimmtherapie vorgestellt.

Das bereits oben erwähnte Flash-Format bietet eine weitere Möglichkeit Animationen darzustellen. Allerdings wird diese Technik vor allem von den Usability-Experten als bloße Spielerei abgetan und vermindert grundsätzlich die Usability einer Website.

Jakob Nielsen sagt eindeutig “Flash: 99% bad”. Dafür nennt er drei Hauptgründe: Erstens würde Flash das Design in den Vordergrund stellen und den falschen Gebrauch von Design ermutigen. Dies zeigt sich z.B. in den neu kreierten Scrollbalken, wie man sie oft auf Flash-Seiten sieht. Typische, vor die Homepage gestellte Flash-Intros findet man immer wieder, sind allerdings im Laufe der Zeit auf ernstzunehmenden Seiten wieder entfernt worden.

Auch wenn diese Intros einen sogenannten Skip-Intro Button aufweisen, halten sie den Besucher vom eigentlichen Inhalt ab. Zudem ist es fraglich, ob im deutschsprachigen Gebrauch dieser Ausdruck verstanden wird. Selten findet man eine ins deutsche übersetzte Alternative. Eine repräsentative Studie der Münchener Medienagentur Die Argonauten zum Thema Navigations-Wording zeigt, dass 38 % diesen Ausdruck nicht oder falsch verstehen. 98% der Nutzer, die viel Interneterfahrung haben, verstehen diesen Begriff, aber lediglich 39% der Internetneulinge.

Die Autoren empfehlen letztendlich den Begriff nicht zu verwenden und diesen stattdessen durch eine verständlichere Variante wie “Intro überspringen” oder Ähnliches zu ersetzen.
Zweiter Grund für die Ablehnung von Flash ist, dass gewohnte Interaktionselemente des WWW nicht mehr funktionieren. So funktioniert der Back-Button des Browsers innerhalb der Flash-Seite nicht mehr, die Linkfarben sind außer Kraft gesetzt, die
Funktion den Text kleiner/größer stellen zu können ist deaktiviert und eine Suche-Funktion ist kaum möglich.
Der dritte Grund besteht darin, dass Flash vom eigentlichen Inhalt der Website ablenkt und ungenügend auf den Nutzen der User angepasst ist. Oftmals wurde der Inhalt einmal erstellt und dann niemals aktualisiert. Außerdem sei dieser oberflächlich und nie mit einem Gedanken an Usability entworfen worden.

Dagegen gehen Befürworter der Flashtechnik davon aus, dass Flash sogar die Usability einer Seite verbessern kann. Schlechte Navigation und langsame Downloads sind schließlich nicht nur Probleme von Flash, sondern generelle Probleme des Internets. Außerdem ist nicht die Technik Flash an sich schlecht, sondern die Designer wären verantwortlich für fehlende Usability.

Mittlerweile findet man einige Guidelines für bessere Flashseiten im WWW. Hier wird bspw. die Verwendung von Splash-Screens empfohlen, also einer Ankündigung, dass es sich hier um Flash-Seiten handelt (für die man das geeignete Plug-In braucht). Ebenfalls sollte immer ein Preloader benutzt werden, der den Fortschritt der übertragenden Datenmenge anzeigt. Die Intros sollten nicht zu lang sein und immer einen Skip-Button enthalten. So können Wiederholungsbesucher das Intro überspringen.

Doch man darf gespannt sein, ob Flash auch in Sachen Usability Fortschritte machen wird: Im Juni 2002 erfolgt die Meldung, dass Nielsen von Macromedia, den Programmierern der Software Flash, angeheuert wurde, um Richtlinien zur Verwendung von Flash zu erarbeiten.
Ebenfalls sind in der neuen 2002er Version Flash MX Features integriert, die das Browserinterface, wie z.B. den Back-Button, unterstützen.

Eng verwandt mit Animationen sind Audio- und Videofiles, auf die im Folgenden kurz eingegangen werden soll.

Auch hier steht der Nutzer dem Problem gegenüber, dass die Ãœbertragungsgeschwindigkeiten zu gering sind und somit Wartezeiten einkalkuliert werden müssen. Immer bessere Techniken mit immer besserer Qualität verlangen trotz allem nach viel Geschwindigkeit. Ist ein mp3-Soundfile in CD-Qualität 1 MB groß, so ist die gleiche Datei im Wave-Format ca. 10MB groß.

Deshalb sollten Videos- und Soundfiles äußerst spärlich eingesetzt werden.
Praktische Anwendungen für Videofiles sind Demonstrationen von TV-Shows oder Nachrichtensendungen. Audiofiles verschwenden keinen Bildschirmplatz und eignen sich deshalb am besten für Kommentare oder weiterführende Hilfen. Musicfiles, die automatisch im Hintergrund ablaufen, sollten vermieden werden und nur nach einem Klick auf einen Link gestartet werden.
Um dem Nutzer solche Dateien anzukündigen, sollten die wichtigsten Informationen zu den jeweiligen Dateien mit Vorschaubildern präsentiert werden. Dazu gehört die zeitliche Länge des Mediums, die Größe und das Format der Datei sowie eine Kurzbeschreibung des Inhalts. Informationen über die voraussichtliche Downloadzeit geben dem User eine Vorstellung, wie lange er zu warten hat.

Grundsätzlich unterscheidet man bei Multimedia-Dateien zwischen Streaming und Non-streaming Dateien. Streaming-Dateien können schon während des Herunterladens angeschaut oder angehört werden und lassen den Nutzer nur kurze Zeit warten. Bei niedrigen Ãœbertragungsgeschwindigkeiten ist dies allerdings nur für Audiodateien zu empfehlen, ansonsten ruckelt der Film oder wird völlig unterbrochen. Die gängigsten Dateiformate hierfür sind mp3 und real-video.
Non-streaming Dateien lassen sich erst nach einem kompletten Download anschauen und eignen sich auch für niedrige Ãœbertragungsraten. Beispiele sind Mpeg oder Avi-Dateien.

Meist benötigt der PC eine zusätzliche Software, um die jeweiligen Dateien abspielen zu können. Dies sind Zusatzprogramme für den Browser, sogenannte Plug-Ins, wie z.B. Apple Quicktime Player oder Realmedia-Player. Hier sollte man darauf achten, mindestens ein Jahr hinter der aktuellen Entwicklung zu sein, um eine möglichst hohe Verbreitung sicherzustellen. Ansonsten wird dem User ein Download des Plug-Ins vorgeschlagen, zudem er meist nicht bereit ist oder nicht die benötigten Rechte seitens der Netzwerkumgebung hat.

Content-Design ist eine der drei in dieser Arbeit erläuterten Websitedimensionen. Der dargebotene Inhalt stellt den Mittelpunkt einer Website dar. Um dem Nutzer den Umgang mit dem Content zu vereinfachen, ist es nötig, diesen medienadäquat aufzubereiten. Dazu gehört eine einfache und kurze Schreibweise, die durch Ãœberschriften und besonders hervorgehobene Schlüsselwörter ergänzt wird. Dies soll dem Nutzer das Scannen der Seite erleichtern.
Das WWW erfordert des weiteren bestimmte Anforderungen an die Aktualität sowie zur Steigerung der Glaubwürdigkeit.
Kommunikationsschnittstellen wie Formulare oder Email werden vom Benutzer auf einer Website automatisch erwartet und sollten leicht auffindbar und benutzbar sein. Interaktive Abläufe können ein Webprojekt um nützliche Funktionen erweitern und entscheidende Mehrwerte bieten.
Grafiken als auch Audio und Video können den Inhalt eines WWW-Angebotes sinnvoll erweitern. Dabei ist allerdings auf eine gewissenhafte Optimierung zu achten, als auch abzuwägen, ob die einzelnen Objekte überhaupt nötig sind.

Wie auch in der Zusammenfassung zum Page-Design soll im Folgenden speziell auf die Usability-Anforderungen nach der DIN EN Norm 9241-11 eingegangen werden.
Effektivität bezogen auf den Content besagt, dass der User die gesuchten Informationen vorfindet. Um den Inhalt besser überblicken zu können, ist dafür eine klare Gliederung erforderlich. Hier ist der Ãœbergang zwischen Effektivität und Effizienz fließend: Jede Aufbereitung des Contents zum leichteren Auffinden setzt einen bestimmten Ressourceneinsatz voraus. Effektivität im engeren Sinn bedeutet also lediglich, dass die Informationen vorhanden sind. Diese sind nutzlos, wenn sie nicht gefunden werden können.
Eine Website ist effizient, wenn die benötigten Inhalte mit einem vom Nutzer tolerierbaren Ressourceneinsatz gefunden werden können. In diesem Fall unterstützt die Scannbarkeit eines Textes diese Anforderung. Dazu gehört auch eine Kombination von Text und Grafik zur Unterstützung des Inhaltes.
Eine Hauptkomponente der Effizienz ist schließlich das Thema Ladezeit. Kürzere Ladezeiten werden vom Nutzer bevorzugt, wobei diese Dauer von der Präsentation des Inhalts abhängig ist. Grafik und Fotos benötigen mehr Zeit als reine Textdarstellung. Hier ist also Zielgruppenspezifisch abzuwägen, wie der Content präsentiert wird.
Zufriedenheit bedeutet im Zusammenhang mit Content, dass der Nutzer genau den Content geliefert bekommt, der für ihn am wichtigsten ist. Eine Individualisierung wie man sie z.B. von Amazon kennt, ist für den Nutzer allerdings noch keine Selbstverständlichkeit.
Weitere Anforderungen zur Zufriedenheit können Zusatzinformationen sowie detaillierte Informationen wie Fotos des Produktes sein.

Das Site-Design befasst sich letztlich mit der Anordnung der Seiten und der internen Struktur. Dadurch wird die Website zu einem Gesamtbild geformt. Die Homepage ist meist der Einstiegspunkt zu den angebotenen Informationen. Doch diese Informationen müssen geordnet sein und in einem Zusammenhang stehen.

Dies ist Aufgabe der Information Architecture und wichtigster Bestandteil des Site-Designs. Denn somit wird der Grundstein für die Navigation gelegt. Von dieser ist abhängig, ob das Surfen auf den Seiten in einem Flow endet und somit leicht von Inhalt zu Inhalt navigiert werden kann.

Tipp:
Mit einem Hompage Baukasten lässt sich am einfachsten eine eigene Webseite basteln, auch wenn dann das Site-Design nicht immer optimal ist.

“The home page is the flagship of the site and should therefore be designed differently from the remaining pages.”

Jakob Nielsen

Aus diesem Grund soll auf die erste Seite eines jeden Internetauftritts – die Homepage – näher eingegangen werden. Dieser Seite kommt eine ganz besondere Rolle zu.

Oftmals wird von der Homepage geredet, wenn der gesamte Internetauftritt gemeint ist. In den folgenden Ausführungen soll unter der Homepage nur die Startseite verstanden werden. Also die erste Seite, die bei Eingabe der entsprechenden URL im Browser erscheint.

Im obigen Zitat ist die Rede davon, dass die verbleibenden Seiten, also die inneren Seiten einer Präsenz, anders gestaltet sein sollten wie die Homepage. Natürlich sollten alle Seiten dem gleichen Style und Grundaufbau folgen, allerdings ergeben sich einige kleine Unterschiede. So sollte auf jeder Unterseite ein deutlicher Link auf die Homepage vorhanden sein. Doch wenn der User denkt, er befindet sich auf der Homepage und findet einen “Home”-Button, so wird er verwirrt sein. Also sollte auf der Homepage auch kein “Home”-Button vorhanden sein. Dies ist eigentlich selbstverständlich, wird aber immer wieder unterschätzt.
Dabei entstehen zwei Fragen: 1) Wie soll der Link oder Button auf den unteren Seiten betitelt werden und 2) an welcher Stelle sollte dieser Link stehen.

Die Münchener Agentur “Die Argonauten” befragten in der bereits oben erwähnten Umfrage (zum Thema Animation, Kap. 5.6.) zum Navigationswording Nutzer, wie dieser Link betitelt sein sollten. 50 % der Befragten urteilten, dass die erste Seite “Startseite” heißen sollte, gefolgt von “Homepage” (26%) und “Home” (17%). Andere Alternativen wie “Start”, “Frontpage”, “Heimseite” wurden nur selten genannt.
Eingebürgert hat sich mittlerweile das Firmenlogo als alleiniger Link zur Homepage. Usability Tests haben ergeben, dass aber nur die Hälfte der Nutzer diese Konvention kennen. Deshalb sollte zusätzlich ein Textlink vorhanden sein.

Weitere Aufgaben des Logos des Unternehmens liegen in der eindeutigen Identifikation sowie in der Vermittlung des Zweckes der Seite. User kommen oftmals von einem Suchmaschinenergebnis auf die Seite und verlieren somit schnell den Ãœberblick. Doch User möchten sofort wissen, auf welchen Seiten sie sich befinden und welche Möglichkeiten ihnen offen stehen. Dies ist die wichtigste Funktion einer Startseite. Zur weiteren Kenntlichmachung sollte das Logo auf der Homepage größer als auf den anderen Seiten erscheinen.
Der Zweck der Seite kann durch eine kurze Zusammenfassung oder einen einprägsamen Satz oder Spruch erfolgen. Folgende Abbildungen zeigen einige gelungene bzw. weniger gelungene Beispiele.

Abbildung 30: Diverse Logos von Unternehmen auf Webseiten. [AM 18]

Während bekannte Anbieter wie Amazon.de keine weitere Unterschrift benötigen, benutzen andere Unternehmen Werbefloskeln zur Seitenidentifikation. So z.B. Wetter.de mit einem plakativem Himmel und General Electric (unten links). Solche Marketing gesteuerten Unterschriften verwirren den Benutzer allerdings und führen schlimmstenfalls zur Unglaubwürdigkeit.

Gute aussagekräftige Untertitel findet man bei ebay (“Der weltweite Online-Marktplatz”), Cnet.com (“The source for computing and technology”), global sources (“Product and trade information for volume buyers”) und expedia.de (“Das große Online-Reisebüro”). Dies sind gute und direkte Zusammenfassungen und beschreiben passend was den Nutzer erwartet.

Andere Unterschriften hingegen wie “What you need to know About” scheinen kurz und flüssig zu sein, sagen allerdings nichts über den Zweck der Seite aus.
Jakob Nielsen empfiehlt in seiner Veröffentlichung “50 Homepages deconstructed” das Logo in die linke obere Ecke zu platzieren, damit es bei jeder Fenstergrößen gesehen werden kann. Nur knapp 16 % der getesteten Seiten platzieren das Logo an einer anderen Stelle.

Des Weiteren soll der Zweck und die angebotenen Möglichkeiten durch den Content auf der Homepage klar gestellt werden. Da es sich um die meistbesuchte Seite des Projekts handelt, sollten die Hauptfeatures, Nachrichten und Hauptkategorien deutlich erkennbar und möglichst schnell erreichbar sein. Dabei bietet es sich an, den Content durch Beispiele aufzuzeigen. Dies hilft dem Leser sofort sich in das Thema hineinzufinden und die Tiefe und die Qualität des Contents einzuschätzen. Dabei hilft beim Schreiben bspw. die Methode der inversen Pyramide.

Die meisten Besucher kommen auf die Seite, um etwas zu suchen oder zu erledigen. Eine Reiseseite wie expedia.de verkauft Reisen und Flüge. Deshalb ist die Suchfunktion deutlich im Mittelpunkt der Seite anzusiedeln. Folgende Abbildung auf der nächsten Seite zeigt links die komplette Ãœbersicht über die Homepage und rechts zwei Bildschirmausschnitte bei einer Auflösung von 800×600 Pixel.

Deutlich erkennbar unter der horizontalen Primärnavigation findet man die Suchfunktion, in die man Abflug- und Ankunftsort sowie das Datum eingibt. Bei einer Bildschirmauflösung von 800×600 Pixel findet man diese Suchmaske über der Falzmarke, der User sieht also auf den ersten Blick das Hauptfeature. Darunter findet man ausgewählte bebilderte Angebote (also Beispiele des Inhalts) und links davon die Sekundärnavigation. Die rechte Spalte zeigt weitere ausgewählte Angebote ohne Beschreibung mit Preisangaben.
Der User wird nur mit dem Nötigsten konfrontiert und findet auf den ersten Blick das Hauptfeature, nämlich die Auswahlmöglichkeit einer Reise.

Abbildung 31: Die Reiseseite expedia.de stellt die Suchfunktion in den Mittelpunkt. [AM 21]

Diese Homepage hat eine Gesamtgröße von 795 x 1014 Pixel, was bedeutet, dass maximal ein Bildschirm bis nach unten ans Ende gescrollt werden muss um den gesamten Inhalt zu erfassen. Jakob Nielsen hat in seiner oben genannten Inspektion von 50 Homepages eine Spannweite von 634 Pixel bis 1334 Pixel Länge ausgemacht und empfiehlt maximal eine Länge von 2 Bildschirmgrößen zu verwenden. Ansonsten empfindet der User eine Unübersichtlichkeit und ist unfähig die Hauptfeatures zu identifizieren.
Bei einem hierarchischen Aufbau sind alle Websites um die Homepage angeordnet, die als logisches Entree zu den einzelnen Webseiten fungiert. Somit sollte die Seite einen Linkbereich zu allen übergeordneten Bereiche haben, der gut erkennbar für den User ist. Im obigen Beispiel stellen horizontal angeordnete Registerkarten die Links zu den anderen Hauptmenüs dar. Weitere Ausführungen sollen im nächsten Abschnitt “Navigation” erfolgen.
Letztlich soll noch kurz von Splashscreens die Rede sein. Dies sind inhaltslose Startseiten mit Willkommensmeldungen, Logos oder speziellen Effekten wie Flash-Intros. Solche Bildschirme zwingen den Nutzer zu einem überflüssigen Mausklick, um zur eigentlichen Homepage zu gelangen. Abhängig von der Leserschaft können solche Bildschirme den Nutzer verärgern: Sind es vor allem Stammnutzer wie auf Suchmaschinen oder Veranstaltungskalender zu erwarten sind, sind solche Splash-screens zu vermeiden. Folgende Abbildung zeigt die Startseite der Online-Fernsehzeitschrift TvMovie. Bis auf den Hinweis einer Software findet der User nichts bemerkenswertes. Wenn man öfters wiederkommt, um sich über das Fernsehprogramm zu informieren, scheint dieser Bildschirm äußerst unangebracht.

Abbildung 32: Der Splashscreen von TVMovie.de. [AM 22]

Das Navigationssystem einer Website sollte dem Benutzer helfen, sich auf dieser zurechtzufinden. Dabei stellen vier Fragen die Eckpunkte des Navigationsverständnisses dar:

1. Wo bin ich?
2. Wohin kann ich gehen?
3. Wie kann ich dorthin kommen?
4. Wie kann ich dahin zurück gehen, wo ich herkomme?

Diese Schlüsselfragen sind der erste Schritt zum Verstehen eines guten Navigationsdesigns und sollen sich somit durch dieses Kapitel wie ein roter Faden ziehen. Weiterhin soll gefragt werden, woraus eine effektive Navigation besteht.

Des weiteren weist die Navigation noch weitere Eigenschaften auf: Navigation gibt dem Benutzer etwas zum Festhalten und zeigt, was ihn erwartet, indem es einen Ãœberblick über den Inhalt gibt. Wenn die Navigation gut ist, sieht der Anwender, wie die Seiten zu benutzen sind. Somit sollte keine weitere Hilfestellung nötig sein. Letztlich hinterlässt eine durchdachte Navigation einen guten Eindruck beim Besucher und steigert das Vertrauen zu den Machern der Seiten.

Ein wichtiger Schritt bei der Planung einer Website ist die Anordnung des Informationsangebotes. Mit diesem Thema befasst sich das Gebiet der Information Architecture (im folgenden IA genannt).
Selbst wenn der eigentliche Inhalt klar und treffend formuliert ist, wird die Site die Ansprüche der Benutzer nicht befriedigen können, wenn die Site nicht auf einem logisch aufgebautem Fundament basiert. Solch ein Fundament stellen Organisationssysteme dar.

Der Informations-Architekt Lou Rosenfeld teilt Organisationssysteme von Webseiten in zwei Dimensionen ein: Organisationsschemata und –strukturen.
Zum einen soll das Organisationsschemata zusammengehörige Inhalte zu logischen Gruppen zusammenführen. Hier kann man wiederum zwischen exakten (eindeutigen) und mehrdeutigen Schemata unterscheiden.

Ein (alphabetisches) Telefonbuch ist die einfachste Variante eines exakten Schemas. Weiß man den Nachnamen, so wird man kaum Probleme haben, die entsprechende Telefonnummer zu finden. Chronologische und geografische Schemata sind weitere Formen. Beispiele hierfür sind ein Verzeichnis von Presseberichten oder eine Auflistung eines Händlernetzes nach PLZ geordnet. Diese drei Arten sind alltäglich und sind somit leicht zu verstehen.
Anders hingegen sind mehrdeutige Schemata, die oftmals wichtiger und sinnvoller erscheinen. Hier werden Dinge zusammengefasst, die auch zusammengehören. Sie sind gerade in diesen Fällen so wichtig, in denen wir uns nicht sicher sind, was wir denn überhaupt suchen. In Fällen, in denen wir die Schreibweise nicht genau kennen oder nur vage Informationen haben, sind diese mehrdeutigen Schemata ebenfalls von Bedeutung.

Die vier wichtigsten mehrdeutigen Schemata sind themenorientiert (z.B. die gelben Seiten), aufgabenorientiert (z.B. Onlinebanking) , zielgruppenspezifisch (z.B. Geschäfts- und Privatkunden) oder Metapher-orientiert (z.B. der Papierkorb auf dem PC-Desktop).
Des weiteren gibt es noch Mischformen zwischen ein- und mehrdeutigen Schemata, die zunehmend im Webbereich angewendet werden. Diese hybriden Modelle lassen den Benutzer im Gegensatz zu den ein- und mehrdeutigen Schemata kein mentales Modell der Seite aufbauen. Stattdessen ist der Besucher gezwungen, alle Menüpunkte durchzugehen und sich für eine oder mehrere Optionen zu entscheiden. Beispiele für hybride Schemata findet man genügend im Web, da die Verantwortlichen sich meist nicht auf ein Muster einigen können. Stattdessen findet der Besucher auf der Homepage einen komplizierten Mix aus verschiedenen Schemata.

Die folgende Abbildung zeigt die Homepage der Sportmesse ispo 2002 mit der linken Navigationsleiste. Hier wurden verschiedene Schemata miteinander vermischt. So wurde eine Themenorientierung vorgenommen (“Produkte & Marken”, “Tour de France”), eine zielgruppenspezifische Auswahl getroffen (“ispo-Aussteller”), eine Metapher-orientierte (“Sports Communities”) und eine chronologische (“ispo live day 2″). Dies sorgt keineswegs zu einer besseren Ãœbersicht. Der Besucher steht einem viel zu langem Menü gegenüber und kämpft sich durch 19 anklickbare Möglichkeiten.
Usabilitytests haben ergeben, dass eine sinnvolle Rubrizierung mit 5 bis 6 Punkten vollkommen ausreicht, um sich auf den meisten Seiten zurechtzufinden.

Ein gutes Beispiel zur Strukturierung von Artikeln findet man, wenn man auf “Produkte & Marken” klickt. Hier findet der Besucher drei Suchkategorien und eine Volltextsuche: Warenverzeichnis nach Produkten, ein alphabetisches Warenverzeichnis und ein Markenverzeichnis. Diese eindeutigen Organisationsschemata unterstützen den Informationsbedarf bestens und erleichtert die Suche nach einem bestimmtem Item.

Abbildung 33: Das Navigationssystem der Website der ISPO 2002 [AM 21]

Die zweite Dimension von Organisationssystemen besteht in der Festlegung von Organisationsstrukturen, die Beziehungen zwischen den einzelnen Inhalten und den zugehörigen Gruppen aufzeigen sollen.
Websites werden nach bestimmten Prinzipien strukturiert. Diese Architektur ist ausschlaggebend für die Konzeption der Navigation und prägt die Vorstellung der Benutzer von der Anordnung der Informationen.
Die folgende Abbildung zeigt die vier wichtigsten Strukturmodelle: sequentiell, hierarchisch, als Raster (Grid) oder in Form eines Netzes (Web). Diese vier Modelle sollen nun kurz erläutert werden. Das Diagramm zeigt diese vier Arten in Beziehung zur Linearität und Komplexität des Inhalts.
Die einfachste Form besteht in einer linearen Präsentation zusammenhängender Seiten. Diese eignet sich vor allem für alphabetische Listen, Enzyklopädien und Glossare aber auch für Trainingsseiten, auf denen ein bestimmter Stoff vermittelt werden soll. Selbst umfangreiche Seiten können sequentiell aufgebaut werden, indem die Seiten des Hauptstrangs Links zu weiteren Seiten enthalten.

Abbildung 34: Organisationsstrukturen von WebseitenQuelle: Lynch, Horton (1997e)

Das Raster ist besonders für Webseiten, dessen Zielgruppe ein bestimmtes Fachpublikum ist, geeignet. Handbücher, Vorlesungsverzeichnisse oder medizinische Fallbeschreibungen lassen sich am besten mit dieser Struktur darstellen. Somit können mehrere Variablen miteinander verbunden werden. Denkbar ist z.B. ein zeitlicher Ablauf, der mit historischen Daten verknüpft ist. Diese können wiederum verschiedenen Sparten zugeordnet sein. Voraussetzung zur vollen Funktionalität ist allerdings, dass diese Einheiten in über- und untergeordnete Themenbereiche gegliedert sind. Ansonsten verliert der Benutzer die Ãœbersicht oder kann sich erst gar kein mentales Modell der Seite aufbauen. Diese Struktur eignet sich deshalb auch besonders für erfahrene Nutzer oder solche, die sich in der jeweiligen Thematik auskennen.

Eine hierarchische Struktur ist die am meisten benutzte Art, Webseiten anzuordnen. Da die meisten Sites sich um eine Homepage gruppieren, bietet sich diese Art für das Web geradezu an und kann so gut wie auf jede Art von Site angewendet werden. Leicht nachvollziehbar ist die Hierarchie auch deswegen, da sie in wirtschaftlichen und institutionellen Bereichen häufig verwendet wird.

Aufgrund der Wichtigkeit soll hier auf einige Schwierigkeiten aufmerksam gemacht werden. Die Balance zwischen der Tiefe und der Breite innerhalb der Informations- Architektur sollte sich die Waage halten. Bei einer zu tiefen Hierarchie muss der User zu oft klicken, um unter Umständen zum Ziel zu gelangen. Bei einer zu flachen Anordnung muss der User zwar nicht oft klicken, steht aber vielen Rubriken und Möglichkeiten gegenüber. Die Kunst besteht darin, eine möglichst ausgewogene Struktur zu entwerfen. Dies sollte vor allem bei neu entworfenen Websites ein Problem darstellen, die im Inhalt erweitert werden sollen. Die folgenden Abbildungen sollen dies zeigen.

Abbildung 35: Die hierarchische Struktur einer Webseite: zu tief, zu flach und ausgewogene StrukturQuelle: Lynch, Horton (1997e)

Die vierte Art besteht in einer netzartigen Anordnung der Seiten. Diese Struktur schöpft zum vollsten Maße die Eigenschaften des Hypertextes aus. Jede Seite ist mit jeder verbunden. Deshalb eignet sich diese Struktur vor allem für kleine überschaubare Seiten oder reine Linklisten. Doch diese Netzstruktur kann leicht verwirren, da sie unvorhersehbar ist und schwer verständlich bei größeren Seiten erscheint.
Die vorhergehenden Ausführungen zeigten, welche Möglichkeiten es bei der IA einer Website gibt und sollte bei der Entscheidung der Auswahl der besten Navigationsorganisation helfen.

Hat der Informations-Architekt sich nun entschieden, welches System verwendet werden soll, besteht der nächste Schritt im Design des Navigationslayouts. Die Struktur legt somit den Grundstein für das Aussehen und die Funktionalität der Navigation.