Wettklicken

Inhaltsverzeichnis

Unter der Bezeichnung Webdesigner oder Informationsarchitekten arbeiten viele, die keine formale Qualifikation für ihre Tätigkeit mitbringen; manche meinen gar, sie sich nicht aneignen zu müssen und verkennen, dass neben der markenbildenden gestalterischen Freiheit auch quantitative und qualitative Prinzipien existieren, die sich zur Überprüfung der Qualität eines Webdesigns - und tatsächlich eines beliebigen Interaktionsdesigns - anwenden lassen.

Der vorliegende Artikel wendet einige dieser Methoden beim Vergleich typischer Websites aus dem etablierten Bereich Tageszeitungen an, weil in ihm Anwendungen existieren, die seit langer (Internet-)Zeit kontinuierlich weiterentwickelt werden konnten. Hinzu kommt, dass hier ohnehin ein reicher Erfahrungsschatz zum Informationsdesign und zum Schriftsatz vorliegt, der sich bei der Herstellung einer Internetpräsenz positiv auswirken sollte. Die Auswahl erstreckt sich ganz bewusst auf Angebote, die

• bereits mehrere Jahre am Markt sind und
• hinsichtlich der Qualität der Information als gut bis sehr gut gelten können.

Damit soll vermieden werden, Kinderkrankheiten einer neuen Internetpräsenz als generelle gestalterische Fehler misszuverstehen. Auch soll die - bei vielen, insbesondere noch nicht etablierten, Anbietern sicherlich vorhandene - mangelhafte Qualität der Information selbst nicht vom Gegenstand dieses Artikels, nämlich der Benutzbarkeit besagter Informationen, ablenken.

Qualitative und quantitative Prinzipien

Nach Raskin (siehe [1]) zeichnet sich eine gute Benutzerschnittstelle vor allem durch folgende Eigenschaften aus

• das Fehlen von Modi;
• Monotonie (= Gewohnheit);
• Geschwindigkeit.

Modi treten auf, wenn sich die Schnittstelle durch eine Interaktion in einen anderen Modus, also einen anderen Zustand, bringen lässt, zum Beispiel durch Drücken der Shift- oder Control-Taste. Modi auf Webseiten sind relativ selten und werden daher nicht weiter betrachtet.

Ein Schnittstelle ist monoton, wenn sich ein Ergebnis nur auf eine immer gleiche Art und Weise erzielen lässt. Geschwindigkeit ist eng verwandt mit der Größe der informationstheoretischen Effizienz E. Diese ist definiert als die minimale Anzahl von Informationseinheiten, die vom Benutzer eingegeben werden, um eine bestimmte Aufgabe durchzuführen, geteilt durch die Anzahl der Informationseinheiten, die zur Durchführung der Aufgabe nötig sind.

Struktur: auch der Navigation dienen

Zur grundsätzlichen Präsentation von Daten können die Lehrbücher von Tufte (siehe [2] und [3]) dienen. Zahlreiche Prinzipien lassen sich ihnen entnehmen. Es ist besonders darauf zu achten, dass Daten strukturiert sind, ihre grafische oder textuelle Darstellung keine Elemente enthält, die von den eigentlichen Daten ablenken, und die Information der Navigation dient.

Unter den zahlreichen Veröffentlichen zu Website-Design-Prinzipien sei hier insbesondere auf Nielsen [4] und Lynch et al. [5] hingewiesen. In diesen finden sich die oben erwähnten Prinzipien ergänzt um Internetspezifika wieder.

Eine gute Übersicht zu den quantitativen Prinzipien bietet Raskin (1). Drei davon seien hier betrachtet:

• GOMS-Analyse;
• Fitts Gesetz;
• Hicks Gesetz.

Das Modell über Goals, Objects, Methods and Selection Rules (GOMS) dient als heuristisches quantitatives Maß zur Berechnung von Interaktionszeiten. Dabei werden vier Interaktionsarten - K, P, H und M - gemäß der Tabelle unten unterschieden. Die angegeben Zeiten sind heuristische Werte.

Benötigte Zeit beim Browsen
K = 0,20 s	Tastendruck (K: keying); benötigte Zeit, um eine Taste auf der Tastatur zu betätigen.
P = 1,10 s	Zeigen (P: pointing); benötigte Zeit, um an einen Punkt auf den Bildschirm zu zeigen.
H = 0,40 s	Zielen (H= homing); benötigte Zeit, um die Hand von Tastatur zu Maus oder zurückzubewegen.
M = 1,35 s	geistige Vorbereitung (M: mentally preparing); benötigte Zeit, um sich geistig auf eine Aktion vorzubereiten.

In der Literatur sind Beispiele aufgeführt, wie diese Werte für verschiedene Einsatzgebiete miteinander kombiniert werden können. Insbesondere existieren Heuristiken, nach welchen Kriterien die weniger unmittelbar zu erkennenden geistigen Vorbereitungszeiten (M) eingesetzt werden sollten.

Fitts Gesetz gibt die Zeit an, die benötigt wird, um einen Cursor (Mauspfeil) zu einem Ziel, etwa einem Button oder einem Textlink, zu bewegen. Dabei ist die Entfernung D der Abstand in gerader Linie vom Startpunkt der Bewegung zum nächsten Punkt des Ziels und S die Größe des Ziels entlang dieser geraden Linie der Bewegung. Dann gilt:

Zeit/ms = a + b > log2 (D/S + 1)

a und b sind experimentell bestimmte Konstanten. Raskin gibt als grobe Werte a = 50 und b = 150 an.

Für eine effektive Benutzeroberfläche sind somit große Ziele und kurze Strecken optimal. Fitts Gesetz liefert die mathematische Beschreibung, wie sich die Interaktionszeiten verändern, wenn eine der beiden Variablen geändert wird.

Hicks Gesetz gibt an, wie lange benötigt wird, um eins von n alternativ angebotenen Elementen auszuwählen. Werden alle diese Elemente mit gleicher Wahrscheinlichkeit ausgewählt, so gilt

Zeit/ms = a + b > log2 (n + 1)

Eine interessante Folge dieses Gesetzes: Es ist in der Regel schneller, ein Element aus einem großen Menü auszuwählen, als es aus einer Menühierarchie auszuwählen, wenn alle Menüpunkte gleich wahrscheinlich sind.

Präsentation von Tageszeitungen

Im Folgenden sollen zwei typische Auftritte von Tageszeitungen im Internet diskutiert werden. Dies ist deshalb sinnvoll, weil Tageszeitungen jeweils ähnliche Funktionen anbieten. Typisch sind

• Inhalt der Printausgabe;
• aktuelle Informationen;
• Kleinanzeigen (eventuell mit Suchfunktion);
• Finanzinformation;
• Chat;
• Veranstaltungskalender;
• Hinweise auf lokale Dienstleister;
• Zeitungsarchiv.

Sicherlich gibt es Unterschiede im Angebot, die im Wesentlichen durch das aktuelle Branding des Printmediums bestimmt sind. Davon abgesehen unterscheiden sich Tageszeitungen hauptsächlich durch die Faktoren

• Umfang und Qualität der gebotenen Information;
• grafische Darstellung;
• Interaktionsdesign.

Der erste Punkt soll im Weiteren außer Acht bleiben. Zwei typische Vertreter mit starken lokalen Bindungen und überregionalem Anspruch sollen als Beispiele dienen: die Neue Zürcher Zeitung und die Rheinische Post aus Düsseldorf. Beiden Zeitungen ist gemein, dass ihr Kernvertriebsgebiet aus etwa gleich großen Orten, Städten von deutlich unter 1 Million Einwohnern liegt.

Gebot der Monotonie

Betrachtet man nur die Homepages beider Zeitungen, sind unmittelbare Gemeinsamkeiten und Unterschiede feststellbar. Beide Publikationen stellen einen zentralen Bereich mit Nachrichten zur Verfügung. Bei der RP sind diese um Bilder ergänzt. Der häufige Benutzer wird auf der Homepage der RP feststellen, dass sich die Abfolge der Rubriken nach Aktualität ändern kann. Dies ist ein Widerspruch gegen das Gebot der Monotonie und führt zu einer Verunsicherung des Besuchers. In der Zeit, die der Benutzer typischerweise braucht, um sich auf der Seite zu orientieren, hat er nach einer klassischen GOMS-Analyse den ihn interessierenden Bereich bereits gewohnheitsmäßig erreicht. Beide Homepages stellen am linken Rand ein Menü zur Verfügung, das bei der RP durch Kleinschreibung auffällt, die man der künstlerischen Freiheit zuordnen kann. Am rechten Rand werden bei der RP ebenfalls Informationen platziert, bei der NZZ finden sich immer Links. Während die bei der NZZ aussschließlich durch Textlinks realisiert sind, gibt es bei der RP unterschiedliche Arten, einen bestimmten Artikel aufzufinden:

• Eine Überschrift ohne Text ist ein Link.
• Eine Überschrift mit Text ist kein Link. Der Volltext wird durch Klicken auf das Wort weiter erreicht.
• Die Rubriken im linken Menü sind Links, ihre Überschriften (News, Anzeigen) sind jedoch keine.
• Die Überschriften im rechten Menü sind keine Links, stattdessen kann man auf ihnen zugeordnete Icons klicken, um zum entsprechenden Artikel zu gelangen

Dieses Design führt aus verschiedenen Gründen zu Ineffizienz. Die Navigation ist nicht monoton, da derselbe Effekt auf unterschiedliche Art erreicht wird. Er kann daher nach Raskin nicht zur gewohnheitsmäßigen Bedienung führen. Insbesondere die Fälle, in denen der Link nicht direkt im Text liegt, erfordern Denkarbeit und führen daher zu geringerer Effizienz. Während die besuchten Textlinks farblich deutlich gemacht sind, ist ein besuchter Link im rechten Menü nicht hervorgehoben. Die Icons und das Wort ‘weiter’ sind darüber hinaus zur Erreichung der eigentlichen Ziele überflüssig. Hier hätte ein einfacher textueller Link sicherlich mehr leisten können.

Sowohl bei der RP als auch bei der NZZ sind die anzuklickenden Flächen für Links teilweise zu klein, entweder durch zu kleine Icons oder durch sehr kleine Schrifttypen. Dies bindet nach dem Hickschen Gesetz den Benutzer länger an die aktuelle Seite und führt schnell zu Frust und ineffektivem Navigieren. Bei der NZZ sind durch die vorwiegende Verwendung von Textlinks die besuchten Seiten deutlich zu sehen. Die Verwendung von Textlinks hat den Vorteil, dass die Gleichförmigkeit der Benutzerführung sich nicht nur auf die aktuelle Site erstreckt, sondern eine große Menge von Websites gleichermaßen betrifft. Bei der RP fällt nachteilig die Größe der Seite auf, die einen Scrollvorgang notwendig macht, um einen Großteil der Informationen überhaupt sichtbar zu machen. Nach Lynch [5] ist dies ein klarer gestalterischer Fehler. Die Anordnung der Hauptmenüs am linken Bildschirmrand ist dagegen sinnvoll, weil der Benutzer sich hier auf bekanntem Terrain schnell orientieren kann.

Unterhalb der Einstiegsseiten

Eine Subhomepage bezeichnet innerhalb einer Website eine übergeordnete Seite eines Unterbereichs. Bei Tageszeitungen handelt es sich hierbei typischerweise einerseits um die Rubriken, andererseits um die Homepages von Services, wie Anzeigen, Auktionen, Datenbanken et cetera.

Hier unterscheiden sich die beiden betrachteten Auftritte erheblich. Die NZZ verfolgt ein klar monotones Konzept. Alles findet sich am gewohnten Platz. Jede Seite (z. B. Feuilleton) bietet an gewohnter Stelle den Link zur Homepage zurück. Diese Gestaltung lässt sich schnell gewohnheitsmäßig benutzen. Die Information, der eigentliche Grund des Besuchs des Internetauftritts, kann in den Vordergrund treten.

Anders die Unterseiten der RP. Eine typische Rubrikenseite wie ‘Kultur’ scheint sich strukturell von der Homepage nicht zu unterscheiden. Doch der Teufel steckt im Detail. Das linke Menü hat sich bei näherem Hinsehen subtil verändert. Der Link zurück auf die Homepage ist zwar riesengroß, aber nur durch Erraten oder Bewegen des Cursors zu ermitteln. Hier ist der Benutzer im wahrsten Sinne des Wortes auf sich gestellt.

Etwas verwirrender wird es bei RP-Online, wenn andere Links im linken Menü betätigt werden. Ein Klick auf ‘Wirtschaft’ führt mitnichten zur Wirtschaftsseite der Rheinischen Post, sondern zu einer Art Börseninformationssystem. Sicherlich praktisch, wahrscheinlich populär, aber unerwartet. Darüber hinaus ist diese Subhomepage in einem anderen Design gehalten. Als Benutzer ist man zunächst verwirrt, zudem auch die Navigation in dieser Subhomepage etwas anders realisiert ist. Der Klick auf Anzeigenannahme führt auf eine grafisch anders gestaltete aber funktionale Seite. Hier stellt sich die Frage, ob sich an dieser Stelle das Online-Medium optisch und organisatorisch von der Printversion differenzieren sollte. Der Benutzer ist bestenfalls erstaunt, schlimmstenfalls genervt und verärgert. Auch dass der Klick auf Leserbriefe keineswegs Leserbriefe anzeigt, sondern ein ‘mailto’ beinhaltet, erscheint mysteriös.

Unterschiede im Schriftsatz

Wie aus obigen URLs ersichtlich ist, unterscheiden sich die Internetseiten auch im Schriftsatz. Wohlwollend lässt sich registrieren, dass sich die Seiten unter verschiedenen Betriebssystemen im Wesentlichen gleich präsentieren. Lediglich in der Wahl der extrem großen Typen für Überschriften ist RP-Online ein kleiner Lapsus unterlaufen, der die Schrift unter Unix-Systemen arg pixelig erscheinen lässt. Die Darstellungen sowohl mit dem Internet Explorer als auch mit Netscape Navigator unter Windows und Macintosh haben diesbezüglich keine Mängel. Beide Kandidaten erreichen damit eine gute Note. Keine Benutzergruppe wird aufgrund ihres Betriebssystems oder ihrer Browser-Vorliebe von der Benutzung der Auftritte ausgeschlossen.

Bei der Auswahl der Schriftarten scheiden sich die Geister. Es gilt allgemein als gesichert, dass Serifenschriften sich im Fließtext einer höheren Lesbarkeit erfreuen (sie ‘führen’ den Blick). Man hört aber auch oft ohne eine schlüssige Begründung die Meinung, dies treffe auf Präsentation von Text am Bildschirm nicht mehr zu. Für entsprechend kurze Textelemente besitzen serifenlose Schriften jedoch mehr Klarheit. Zudem lassen sich serifenlose Schriften besser in GIF komprimieren und sind daher als Label in einem Menü gut geeignet.

Die NZZ setzt bei Textelementen praktisch nur auf Schriften mit Serifen. Dies führt in den langen Textpassagen trotz eines relativ kleinen Schriftgrads zu guter Lesbarkeit. Das Menü am rechten Bildschirmrand verliert aber an Klarheit und Struktur. Die Links in den Bildern des linken Menüs sind mit serifenlosen Schriften gestaltet, was zu höherer Klarheit der Darstellung und schnelleren Ladezeiten führt.

Bei der RP setzt man zunächst konsequent auf serifenlose Schrift. Dies vermindert zwar zunächst die Lesbarkeit der langen Artikel, aber Zeilenlänge und Schriftgrad sind kürzer beziehungsweise größer als bei der NZZ, was letztlich zu einem Effekt größerer Lesbarkeit führt. Die Menüs sind aufgrund der serifenfreien Schrift entsprechend klarer als die der NZZ. Hier scheint sich die RP konsequent dem wichtigen Prinzip der Monotonie verschrieben zu haben - zu Recht. Leider wird man beim Betrachten der Subhomepages von einem Schriftartenpotpourri erwartet. Auf der Seite der Anzeigenannahme ersetzt konsequent serifenbehaftete Schrift das Design, die Wirtschaftsseite hat beide Schriftarten im Angebot. Diesmal mit Serifenschrift im Menü. Der Benutzer kann so nicht bestimmte Stilmittel des Schriftsatzes als Indikator für Funktionen erkennen.

Nach Betrachtung einiger qualitativer Aspekte nun zu einem typischen Anwendungsfall. Vorausgesetzt sei ein Benutzer, der mit dem jeweiligen Auftritt vertraut, jedoch nicht dediziert an ihn gewöhnt ist, sodass keine anfängliche Orientierungsphase auftritt. Angenommen sei, dass dieser Kunde nacheinander die folgenden Tätigkeiten durchführt:

• Er navigiert auf die Homepage und liest die Hauptsportnachrichten;
• liest den Gesamtbericht zur Sport-Top-Meldung;
• navigiert in den Kulturteil und;
• liest den Gesamtbericht zur Kultur-Top-Meldung.

Beispielhafte quantitative Analyse

Beim Auftritt der RP fallen nach der GOMS-Analyse folgende Tätigkeiten an: Der Besucher scrollt bis zu den Sportmeldungen. Hierzu muss er sich zunächst vergegenwärtigen (M), dass er navigieren muss, dann bewegt er die Maus (P) zum Scrollbalken und sucht die Sportrubrik. Hier lässt er die Maus los (MK). Er kann nun die Top-Meldung lesen. Zum Weiterlesen muss er sich vergegenwärtigen, dass er auf ‘weiter’ klicken muss und den entsprechenden Punkt auswählen (MP).

Insgesamt ist die entsprechende Abfolge also ‘MPMKMP’. Damit ergibt sich für die Dauer der Interaktion unter Vernachlässigung der Zeiten zum Lesen und Scrollen selbst folgende Summe

d = MPMKMP 
  = 1,35 + 1,1 + 1,35 + 0,2 + 1,35 + 1,1 s 
  = 6,25 s

Zur Rubrik Kultur muss er sich wiederum im linken Menü orientieren und den Eintrag für Kultur auswählen (MP). Hier orientiert er sich in der relativ langen Zusammenfassung zum Klicken des ‘Mehr dazu’ Link (MP). Die Abfolge lautet also ‘MPMP’, die Dauer ergibt sich zu

d = MPMP 
  = 1,35 + 1,1 + 1,35 + 1,1 s 
  = 4,9 s

Beim Auftritt der NZZ fallen dagegen folgende Tätigkeiten an. Der Benutzer navigiert wie bei der RP zum Sportteil und kann dort aufgrund der Sitestruktur sofort den entsprechende Link zur Top-Meldung klicken. Die Abfolge reduziert sich aufgrund der kurzen Homepage auf ‘MPKP’, da der Besucher sich das Ende des Scrollprozesses gar nicht zu vergegenwärtigen braucht. Zudem entfällt ein Zeitverlust durch das Lesen der Zusammenfassung. Die Dauer der Interaktion beträgt

d = MPKP 
  = 1,35 + 1,1 + 0,2 + 1,1 s 
  = 2,75 s

Um zum Feuilleton zu gelangen, kann der Benutzer das monoton gleiche Menü am oberen Rand verwenden und dort den obersten Link auswählen. Somit ist die entsprechende Interaktion MPP.

d = MPP 
  = 1,35 + 1,1 + 1,1 s 
  = 3,55 s

Die Unterschiede zwischen beiden Auftritten sind hinsichtlich der Navigationsdauer beachtlich. Dies ist nach den obigen qualitativen Betrachtungen nicht verwunderlich. Eine Navigation auf andere Seiten hätte diesen Unterschied möglicherweise größer ausfallen lassen, da andere Seiten im Auftritt von RP-Online noch stärker vom gewohnten Design abweichen.

Natürlich erscheint die absolute Dauer der Interaktion und ihrer Unterschiede relativ gering. Die besonders bei der RP nötige mentale Aktivität hat jedoch zahlreiche Seiteneffekte, die die aufgewendete Zeit potenzieren können. Insbesondere verschiebt der Benutzer hierbei leicht seine Aufmerksamkeit von der eigentlichen Aufgabe, der Extraktion von Informationen aus dem Artikel, zur Navigation. Bei der Rückkehr zur eigentlichen Aufgabe fallen dabei in der Regel immer einige Sekunden an, bis die Aufmerksamkeit wieder beim ursprünglichen Ziel angelangt ist. Diese Zeit ist umso länger, je mehr die Aufmerksamkeit einem anderen Gegenstand gegolten hat. Beachtet man die Zeit, die noch mit dem Scrollen oder mit dem Lesen einer Zusammenfassung verbracht wird, kann dies auch zu einem signifikanten Verlust im Kurzzeitgedächtnis führen, das auf etwa sechs Gegenstände und etwa 10 bis 20 s beschränkt ist. Die Arbeit mit einer gut benutzbaren Seite wird also auch als angenehmer und produktiver empfunden, weil das Kurzzeitgedächtnis geschont wird.

Fazit

Die Benutzbarkeit von etablierten Websites im deutschsprachigen Raum variiert stark. Webmaster können durch Anwendung qualitativer und quantitativer Kriterien die Usability einer Website vergleichsweise objektiv bewerten. Insbesondere können sie die Effizienz der Navigation einer kritischen Bewertung unterziehen. Es muss nicht verwundern, dass eine ‘konservativ’ gestaltete Website eine höhere Effizienz bietet als eine ‘moderne’. Ein konservativer Baukasten hat aufgrund weniger Elemente einen inhärent höheren Hang zur Monotonie und wirkt damit effizienzsteigernd. Dabei muss Monotonie nicht fantasielos sein - man hört vielfach, dass sich mit den einfacheren Lego-Steinen die schöneren Modelle bauen lassen.

Konsequenz darf jedoch nicht der dogmatische Verzicht auf neue Features und Techniken sein. Vielmehr müssen deren Nutzen und Benutzbarkeit kritisch und objektiv abgeschätzt und in Tests überprüft werden. Eine rein emotionale Entscheidung für eine ‘coole’ Technologie kann auch nach hinten losgehen, wenn, wie im Fall boo.com, auch noch so viele animierte Turnschuhe und Fleecepullover die Zahl der Käufer nicht signifikant zu steigern vermochten.

Karl F. Banke
ist EDV-Berater für Java und webbasierte Systeme. Nach zahlreichen Projekten für die GFT AG ist er jetzt Gesellschafter der iternum GmbH, Frankfurt/Main.

Literatur

[1] Jeff Raskin; The Humane Interface; Reading, AM (Addison-Wesley) 2000

[2] Edward R. Tufte; Envisioning Information; Mai 1990 (Graphics Press)

[3] Edward R. Tufte; Visual Explanations; Images and Quantities, Evidence and Narrative, März 1997 (Graphics Press)

[4] Jakob Nielsen; Designing Web Usbaility; The Practice oif Simplicity; Indianapolis, IN (New Riders) 1999

[5] Patrick J. Lynch, Sarah Horton; Web Style Guide, Basic Design Principles for Creating Web Sites, März 1999 (Yale University Press)

[6] Bernard J. Baars; A Cognitive Theory of Consciousness; Cambridge 1988 (Cambridge University Press)

[7] Jared M. Spool, Tara Scanlon, Will Schroeder, Carolyn Snyder, Terri DeAngelo; Web Site Usability; A Designer’s Guide; San Francisco, CA 1999 (Morgan Kaufmann)

Mehr Infos

iX-TRACT

• Neben der markenbildenden gestalterischen Freiheit existieren quantitave und qualitative Prinzipien für die Überprüfung der Qualität von Webdesign.
• Die GOMS-Analyse sowie Fitts und Hicks Gesetze bieten unterschiedliche quantitative Berechnungsmöglichkeiten.
• Zwei Tageszeitungs-Websites zeigen, wie die Verletzung einfacher Regeln bei Benutzern Irritation bewirken kann.

(hb)