Erfolg zu haben heißt auch Gewinn zu machen. Durch die Vorteile dieses neuen Usability-Ansatzes können Gewinne steigen während die Entwicklungskosten minimal bleiben. Doch zuvor müssen die Verantwortlichen davon überzeugt werden, diesen finanziellen Aufwand einzugehen und davon, dass jede investierte Ressource einen profitablen Return wiedergeben wird. Folgender Abschnitt soll dies nach betriebswirtschaftlichen Aspekten erläutern.

Berichte über Usability Probleme und den damit verbundenen Umsatzeinbußen häufen sich:

• Einer Studie aus dem Sommer 2000 zufolge, brechen 43% der Online Shopper ihren Einkaufsversuch ab. Dies bedeutet einen weltweiten Umsatzverlust von mehr als 14 Mrd. Dollar, der online verloren geht. Die meisten Gründe für einen Abbruch liegen in der schlechten Benutzbarkeit der E-Commerce Seiten. Gartner Group hat im gleichen Zeitraum festgestellt, dass die gesamten online-Umsätze 19,5 Mrd. Dollar betragen.
• Einer anderen Studie von Zona Research zufolge gaben sogar 62 % von Online Shoppern im Verlaufe des Einkaufes auf, da die gewünschten Artikel schlecht und gar nicht gefunden werden konnten.
• Forrester Research schätzte erhebliche Kosten aufgrund von schlechtem Webdesign: Die Hälfte von potentiellen Umsätzen geht verloren, da sich Einkäufer auf den Seiten nicht zurechtfinden. Dies führt dazu, dass 40% aller Besucher aufgrund von negativen Erfahrungen nicht mehr zurückkommen. Die sogenannten Repeat Visits würden erheblich zurückgehen und Kosten für neue Kunden somit steigen.

Um nun konkreter in die Ebene des einzelnen Unternehmens zu kommen folgendes Beispiel: Ein Designfehler in einem Anwendungsprogramm, welches in einer Firma benutzt wird, kostet bei jedem auftretendem Fehler 10 Sekunden Zeiteinbuße. Wenn dieser Fehler 25 mal pro Tag bei 50 Mitarbeitern auftritt, werden ca. 900 Stunden pro Jahr verschwendet. Der Usability-Experte Thomas Landauer von der Universität Colorado/USA fand zudem heraus, dass mindestens 40 solcher Fehler in jedem Softwareprogramm stecken. Dies würde für das obige Beispiel eine verschwendete Stundenzahl von 36.250 pro Jahr bedeuten.

Dies sind allerdings nur die Produktivitätseinbußen auf Benutzerseite. Um einen weitreichenderen Blick zu gewähren, soll eine Kosten-Nutzen Analyse weiteren Aufschluss geben.

Das Ziel einer solchen Analyse ist es, den finanziellen Mehrwert zu bestimmen, der auf Usability Engineering zurückzuführen ist. Eine typische Kosten-Nutzen Analyse besteht aus drei Hauptkomponenten:

1. Bestimmung des finanziellen Wertes von Aufwand und Nutzen
2. Analysieren der Beziehung zwischen Aufwand und Nutzen mit Hilfe von Auswahltechniken
3. Entscheidung über die Investitionshöhe

Deborah Mayhew zählt die geschätzten Kostenpunkte eines Usability-Projektes folgendermaßen auf, wobei sie von einem iterativen Entwicklungsprozess ausgeht:

• einmalige Labor- und Ausrüstungskosten
• Ermittlung von User Profilen mit Hilfe von Interviews
• Task Analysis anhand von Interviews, Fragebögen und Studien
• Entwicklung eines Style Guides um Standards festzuhalten
• Testen und Umgestalten des Prototyps
• Testen und Umgestalten des System User Interface.

Diese Punkte sind zur individuellen Anpassung nochmals in einzelne Unterpunkte unterteilt. Ein Beispiel-Szenario ergibt eine Kostenkalkulation von einmaligen 132.185 US-Dollar.

Während die Ermittlung der geschätzten Kosten relativ problemlos erscheint, ist der Nutzen etwas schwerer festzustellen. Dieser Nutzen kann in Zeiteinheiten ausgedrückt und anschließend in Geldeinheiten umgerechnet werden. Mayhew unterscheidet zwei Empfänger dieses Nutzenfaktors: eine interne Abteilung, die eine Entwicklungssoftware benutzt und ein Unternehmen, welches Software an den Endbenutzer verkauft.

Der Nutzen auf der Seite der internen Entwicklungsabteilung sieht folgendermaßen aus:

• gesteigerte Benutzerproduktivität
• sinkende Fehlerrate
• sinkende Trainingskosten
• sinkende Support- und Hotlinekosten
• Einsparungen durch Änderungen im frühen Produktstadium.

Innerhalb von fünf Nutzungsjahren wird der Nutzen in dem angesprochenen Beispiel-Szenario auf 209.490 US-Dollar beziffert. Zugrunde gelegt wurde ein System, das von 250 Usern an 230 Tagen im Jahr benutzt wird. Der Nutzen überwiegt dem Aufwand somit um ca. 77.000 US-Dollar.

Der Nutzen auf der Seite des Verkaufsunternehmens sieht so aus:

• gesteigerte Verkaufszahlen
• geringerer Kundensupport
• Einsparungen durch Änderungen im frühen Produktstadium
• geringere Kosten des Trainings von Kunden

Hier beträgt der geschätzte Nutzen sogar US$ 592.635 innerhalb von fünf Jahren, wobei die Einsparungen durch geringere Trainingskosten den größten Vorteil ausmachen. Nutzenvorteile in Höhe von 460.450 US-Dollar stehen somit einem Aufwand von 132.185 US-Dollar gegenüber.

Allerdings bleibt anzumerken, dass diese Kostenpunkte nur Beispiele darstellen und gegebenenfalls an die Ziele der Organisation anzupassen sind. Des weiteren sollte oberstes Ziel der Usability-Maßnahmen die Verbesserung der Benutzerproduktivität sein, welches nicht direkt dem Verkaufsunternehmen nützlich erscheint. Dieses sollte eher interessiert sein, die Verkaufszahlen zu erhöhen und Kosteneinsparungen beim Kundensupport zu erreichen.

Doch besonders in kleinen Webprojekten steht nicht ein solch großes Budget wie oben erwähnt zur Verfügung. Sollte das Entwicklerteam auf Usability-Maßnahmen verzichten?

Mit dem neuartigen Ansatz Discount Usability Engineering versucht Jakob Nielsen das Verständnis und die Akzeptanz für den Einsatz von Usability Maßnahmen zu verstärken. Die hier verwendeten Methoden sollen kostengünstig und einfach durchführbar sein sowie wenig Zeit in Anspruch nehmen.

Dieser Ansatz basiert auf drei verschiedenen Techniken. Durch Anwendung von Szenarios soll die Komplexität der Funktionalität reduziert und besonderer Augenmerk auf das User Interface gelegt werden. In einer vereinfachten Form soll eine Thinking Aloud Methode (TAM) angewendet werden, wobei auf eine Videoaufnahme zu verzichten ist und drei bis fünf Testpersonen angehört werden. Das dritte Element besteht aus einer Heuristischen Evaluation, wobei vereinfachte Usability Guidelines benutzt werden.

Abbildung 4 zeigt einen Vergleich des Kosten-Nutzen-Verhältnisses von traditionellem Usability Testing (aus dem Beispiel von 2.2) und dem hier behandeltem Discount Usability Testing.

Grundsätzlich zeigt dieses Schaubild, dass der Nutzen um einiges höher ist als die Kosten, unabhängig davon wie viele Usability Tests durchgeführt wurden. Dies bestätigt zahlenmäßig das Praxisbeispiel aus 2.2.

Beispielsweise bedeutet ein Kosten-Nutzen Verhältnis von 50, dass bei Kosten in Höhe von 10.000 GE ein Nutzen von 500.000 GE erreicht wird. Das maximale Kosten-Nutzen Verhältnis wird beim Discount Usability Testing bei drei bis fünf Testpersonen erreicht.

Da das Niveau dieser Kurve deutlich höher ist als die des Deluxe User Testings kann tatsächlich, wie von Nielsen beabsichtigt, von einem großen Kosten-Nutzen Vorteils augegegangen werden. Somit ist dies eine kostengünstige Möglichkeit für kleinere Projekte, obwohl hier auf methodische Probleme nicht eingegangen wurde.

Abbildung 4: Vergleich des Kosten-Nutzen-Verhältnisses von Discount User Testing und Deluxe User Testing.Quelle: Nielsen (1994), S. 252.

Um diese Diskussion nicht einseitig erscheinen zu lassen, ist es nötig die möglicherweise auftretenden Risiken anzusprechen. Dabei ist es schwer, Nachteile oder Risiken von den führenden Usability-Experten aufgezählt zu bekommen.

Zunächst einmal ist es wichtig, dass die gefundenen Testdaten bzw. die darauf beruhenden Empfehlungen befolgt und umgesetzt werden. Ansonsten würden Ressourcen verschwendet und das Konzept der Usability erscheint unnötig.

Zweitens sollte Usability nicht als Antwort auf die Probleme des Kerngeschäftes verstanden werden. Eine Überschätzung als Allheilmittel kann ebenso gefährlich sein wie eine Vernachlässigung.

Letztendlich könnten Barrieren zwischen den Designern und den Entwicklern dazu führen, dass Usability nicht anerkannt wird und somit die Anstrengungen umsonst gemacht wurden.

Nielsen führt zusätzlich an, dass unglücklicherweise die Kosteneinsparungen nicht direkt nach dem Produktstart sichtbar sind, sondern sich erst im Laufe des Lebenszyklus zeigen. Dies rechtfertigt auf den ersten Blick nicht die Investitionen und könnte somit kommende Usability – Aktivitäten gefährden.

Mit diesem Kapitel wurde das Augenmerk auf einen entscheidenden Aspekt des Usability-Testing gelenkt: dem finanziellen Aufwand. Es wurde gezeigt, dass der Nutzen im Normalfall überwiegt und somit das Usability Engineering einen festen Platz in der Entwicklung von Software als auch beim Web-Engineering eingeräumt werden sollte.

Was macht eine gebrauchstaugliche Webseite aus? Nach einem Blick auf die Gemeinsamkeiten und Unterschiede zwischen Web-Design und GUI- bzw. Print-Design sollen in den darauffolgenden drei Kapiteln die wesentlichen formalen Bestandteile eines Webprojektes nach Usability Kriterien vorgestellt und diese Frage zumindest im gegebenen Rahmen beantwortet werden.

Eine Website ist ein Konstrukt, welches aus vielen verschiedenen Bildschirmoberflächen besteht und meist eine komplexe Struktur aufweist. Die Seiten sind unterschiedlich gestaltet, haben einen unterschiedlichen Inhalt und sind meist auf unterschiedliche Weise kombiniert und verbunden. Dadurch entstehen drei Website-Dimensionen: Page-Design, Content-Design und Site-Design.

Page-Design handelt von der sichtbaren Oberfläche, also dem klassischen Web- Design. Alles, was zum äußeren Gesamtbild gehört und somit noch vor dem Inhalt wahrgenommen wird, zählt hier hinzu.

Zum Content-Design gehört die Darbietung und Aufbereitung des Inhalts. Der Besucher kommt auf eine Webseite und hat ein Ziel vor Augen, meist das der Informationsgewinnung. Somit scheint der Inhalt am wichtigsten zu sein und das visuelle Design zur Darbietung dieser Informationen.

Das Site-Design befasst sich letztlich mit der Anordnung der Seiten und der internen Struktur. Dadurch wird die Website zu einem Gesamtbild geformt.

Diese drei Website-Dimensionen sollen nacheinander nach Usability-Kriterien untersucht werden und die Grundlage zur Beantwortung der oben genannten Frage darstellen. In der Zusammenfassung der jeweiligen Kapitel soll dann auf die besonderen Anforderungen hinsichtlich seiner Usability eingegangen werden.

“If you are a designer, you’ll be glad to know that the same rules of design apply to the web as to print – or any other medium.”

Ben Benjamin

Seit über 30 Jahren werden Texte und Grafiken auf Computerbildschirmen dargestellt. Gutenbergs Erfindung des Buchdrucks liegt über 550 Jahre zurück und seit ungefähr 400 Jahren erscheinen Zeitungen. Warum sollte es dann Veränderungen beim Seitenlayout und Design im Internet geben? Studien haben ergeben, dass obiges Zitat des Designers Ben Benjamin heute nicht mehr hingenommen werden kann, denn es gibt durchaus beachtenswerte Unterschiede zwischen dem Webdesign und dem Design anderer Medien.

Teile der Richtlinien für Software-Anwendungen können wir auf das WWW übertragen, insbesondere die grundlegenden Erkenntnisse über Benutzertypen und die normierten Grundsätze der Dialoggestaltung. Der wesentlichste Unterschied zwischen traditionellem GUI-Design (Graphical User Interface) und Web-Design ist, das bei letzterem die Kontrolle über das Interface aufgegeben werden muss. Unter dem Ausdruck GUI ist eine Benutzeroberfläche zu verstehen, wie man sie von Desktop-Software kennt, wie z.B. Microsoft Office. Hier kontrolliert der Softwareprogrammierer die Benutzeroberfläche und weiß genau, wie das Programm auf dem Bildschirm des Benutzers aussehen wird. Er kennt das Betriebssystem, die installierten Schriftarten und typischerweise auch die zur Verfügung stehende Bildschirmgröße. Dies alles gilt im Web nicht mehr. Der User bestimmt mit welchem Browser und OS (Operation System) er surft, wie groß der Bildschirm ist, welche Schriften installiert sind (vgl. Abb.2), wie schnell sein Netzzugang ist und welche Erweiterungen (de)aktiviert sind.

Der einzige Weg, um dieses Problem meistern zu können, ist ein Zusammenspiel zwischen den Spezifikationen der Webseite und den Eigenheiten des Clientsystems zu gewährleisten. Tests auf verschiedenen Systemen und eventuellen Anpassungen sind hierfür nötig.

Des weiteren unterscheiden sich die Navigationsmöglichkeiten auf Webseiten und in Softwareprogrammen. GUI’s bestehen aus Menüleisten, Icons, Listen, Dialogen und verfügen meist über keine Wartezeiten der Interaktion. Dem Programmierer ist es allein vorbehalten Schaltflächen zu deaktivieren oder den Weg des Benutzers vorzugeben. Zudem bewahrt die Anwendung von Style Guides, z.B. dem Windows oder Apple Macintosh Styleguide, eine gewisse Konsistenz der Oberflächen. Auch wenn der User noch nie mit Word 2000 gearbeitet hat, findet er sich mit dem Menü in folgender Abbildung auf Anhieb zurecht und weiß, wie eine Datei zu öffnen ist.

Abbildung 5: Bewahrung der Konsistenz: Menüfenster in Word 2000.Quelle: eigene Darstellung aus Word 2000

Dies alles ist im Web nicht gegeben. Es gibt keine anerkannten Styleguides und dem User bleibt durch die verschiedensten Hyperlinks vorbehalten welchen Weg er beschreitet. Dies erklärt auch die Wichtigkeit einer intuitiven Navigationsführung. Der Besucher kann Wege gehen, die der Webdesigner nicht beabsichtigte, z.B. von einer Suchmaschine kommend direkt in eine Unterseite gehen ohne jemals die Homepage gesehen zu haben.

Da Webseiten im wesentlichen Textseiten sind, muss der Webdesigner ebenso Richtlinien aus dem konventionellen Printdesign beachten, z.B. keine gleichzeitige Anwendung vieler Schriftarten und –größen zur Bewahrung der Konsistenz.

Im Folgenden soll noch auf die relevantesten Unterschiede zum klassischen Design von Printmedien aufmerksam gemacht werden.

Hier ist es sehr bedeutsam, sich klar zu machen, dass der Webbenutzer nicht Wort für Wort des Inhalts liest, sondern nur den Text scannt und das Wichtigste versucht zu erfassen. Da dies in diesem Kontext nur sekundär den Webdesigner betrifft und in Punkt 5.1 dies näher behandelt wird, soll hier nicht weiter darauf eingegangen werden.

In der Fachliteratur wird empfohlen White-Space, also weißen Raum, zu verwenden. Studien im WWW haben dagegen gezeigt, dass dies das Lesen am Bildschirm erschwert. Umso mehr weißer Raum sichtbar war, um so schlechter wurde die gesuchte Information gefunden. Ebenso bewerteten Testpersonen Seiten aufgrund eines hohem weißen Anteils bzgl. der Leichtigkeit des Lesens, des Suchens, der Produktivität und des Gesamteindrucks schlechter. Ein Grund dafür ist die geringe Auflösung der Bildschirme sowie die Hintergrundbeleuchtung . Dies erklärt auch das Phänomen, dass User oftmals Webseiten ausdrucken um diese offline zu lesen.

Eine umfassende Lösung für die Vermeidung von White Space wurde noch nicht gefunden. Jacob Nielsen empfiehlt dagegen grundsätzlich weißen Raum einzusetzen, damit das Auge leichter erkennt, wie die Informationen angeordnet sind.

Folgende Abbildung zeigt ein von der Society for News Design (SND) ausgezeichnetes Zeitungsdesign. Dem Zeitungslayouter steht eine riesige und immer gleichgroße Fläche zur Verfügung, während Webdesigner mit einer viel kleineren Arbeitsfläche zu kämpfen haben. Das Layout einer doppelseitigen Zeitung ist innerhalb von Sekunden erfasst, während der Benutzer am Bildschirm abhängig von seinen Leseeigenschaften meist nach unten scrollt um den kompletten Inhalt erfassen zu können.

Abbildung 6: Auszug der ‘Expansion’ [AM 4]

Während der obige Zeitungsausschnitt über Chile demonstriert, dass Gedrucktes ein 2-Dimensionales Medium ist, würde man im Internet eine interaktive Landkarte Chiles mit Links zu den einzelnen Städten und Regionen finden. Hier zeigt sich die Mehr-Dimensionalität des WWW, die allerdings die Schwierigkeit der Navigation durch den Hypertext aufzeigt.

Zurückblickend auf Benjamin Bens Zitat vom Anfang dieses Kapitels lässt sich sagen, dass der Designer sich dem jeweiligem Medium anpassen muss und auf die Spezifikationen mit möglichst vielen Vor- und Nachteilen Acht geben sollte. Obwohl sich viele Gemeinsamkeiten in der Gestaltung der unterschiedlichen Medien finden ließen, zeigt das Internet völlig neue Möglichkeiten.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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