Hochschule Neu-Ulm - stefangrill.destefangrill.de/wp-content/uploads/2015/01/Diplomarbeit_StefanGrill.pdf · Die angesprochenen Erfolgsfaktoren dienen dabei einerseits der Interpretation

Erstkorrektor

Verfasser

Thema erhalten

Prof. Andrea Kimpflinger

Grill Stefan (135320), Auf der Halde 76, 87439 Kempten

Sperrvermerk

Erklärung

Beilagen

Hochschule Neu-UlmInformationsmanagement und Unternehmenskommunikation

Thema

Diplomarbeit gemäß § 35 der Rahmenprüfungsordnung für die Fachhochschulenin Bayern vom 20.07.2007

Arbeit abgeliefert 29.06.2010

1 CD

29.01.2010

Usability-orientiertes Webdesign: Theoretische Grund-lagen und praktische Anwendung anhand des BMW 5er Online Showrooms.

Die vorliegende Diplomarbeit von Grill Stefan enthältvertrauliche Daten. Sie unterliegt einer Einsichtssperre für Personen, die nicht mit der Korrektur der Arbeit beauftragt sind. Außerdem besteht über den Inhalt der Arbeit Stillschweigen.

Ich versichere, dass ich die vorliegende Diplomarbeit selbständig angefertigt, nicht anderweitig für Prüfungs-zwecke vorgelegt, alle benutzten Quellen und Hilfsmittel angegeben, sowie wörtliche und sinngemäße Zitate als solche gekennzeichnet habe.

Ort/Datum Unterschrift

Inhaltsverzeichnis

1. Einleitung 11.1. Die Neugestaltung der BMW Webseite . . . . . . . . . . . . . . . . . . . . . 2

1.2. Joy of Use - Die Erweiterung der Usability um emotionale Komponenten . . 4

2. Wahrnehmungspsychologische Faktoren im Webdesign 72.1. Kognitionspsychologische Grundlagen: Das Multi-Speicher-Modell . . . . . . 7

2.1.1. Reizaufnahme durch das Auge . . . . . . . . . . . . . . . . . . . . . 8

2.1.2. Sensorisches Gedächtnis (Ultra-Kurzzeitgedächtnis) . . . . . . . . . . 8

2.1.3. Kurzzeitgedächtnis . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8

2.1.4. Langzeitgedächtis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

2.2. Gestaltgesetze der Wahrnehmung . . . . . . . . . . . . . . . . . . . . . . . . 11

2.3. Aufmerksamkeitsgesetze . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16

3. Weiterführende Regeln zur Gestaltung von Webseiten 203.1. Inhalt . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20

3.2. Navigationsdesign . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20

3.2.1. Navigationsmöglichkeiten . . . . . . . . . . . . . . . . . . . . . . . . 21

3.2.1.1. Strukturelle Navigation . . . . . . . . . . . . . . . . . . . . 21

3.2.1.2. Assoziative Navigation . . . . . . . . . . . . . . . . . . . . . 23

3.2.1.3. Sondernavigation . . . . . . . . . . . . . . . . . . . . . . . . 25

3.2.2. Nutzererwartungen . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25

3.2.3. Ein�ussfaktoren für die Darstellung einer Webseite . . . . . . . . . . 27

3.2.4. Besonderheiten der Navigation in Rich Internet Applications . . . . 29

3.3. Interfacedesign . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33

3.3.1. Layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33

3.3.2. Texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34

3.3.3. Icons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35

3.3.4. Bilder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37

3.3.5. Bewegtbild . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37

4. Darstellung relevanter Techniken für die nachfolgende Usability-Studie 394.1. Blickverlaufsanalyse (Eyetracking) . . . . . . . . . . . . . . . . . . . . . . . 39

4.1.1. Grundlagen zur Interpretation von Blickbewegungsdaten . . . . . . . 39

4.1.1.1. Aufmerksamkeit und Informationsverarbeitung . . . . . . . 39

4.1.1.2. Foveales und peripheres Sehen . . . . . . . . . . . . . . . . 40

III

Inhaltsverzeichnis

4.1.1.3. Fixationen und Sakkaden . . . . . . . . . . . . . . . . . . . 42

4.1.2. Auswertungs- und Darstellungsmöglichkeiten für Blickbewegungsdaten 43

4.1.2.1. Heatmap/Alphamap . . . . . . . . . . . . . . . . . . . . . . 44

4.1.2.2. Area of Interest (AOI) . . . . . . . . . . . . . . . . . . . . . 45

4.1.2.3. Scanpfade/Gaze Plots . . . . . . . . . . . . . . . . . . . . . 46

4.1.3. Kritik am Eyetracking-Verfahren . . . . . . . . . . . . . . . . . . . . 46

4.2. Lautes Denken . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46

5. Usability-Studie BMW 5er Online Showroom 495.1. Beschreibung der Studie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49

5.1.1. Untersuchungsfragen . . . . . . . . . . . . . . . . . . . . . . . . . . . 49

5.1.2. Testumgebung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50

5.1.3. Zielgruppenpro�le . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51

5.1.4. Gestaltung der Testszenarien und Fragebögen . . . . . . . . . . . . . 53

5.1.4.1. Testszenarien . . . . . . . . . . . . . . . . . . . . . . . . . . 53

5.1.4.2. Fragebogen . . . . . . . . . . . . . . . . . . . . . . . . . . . 53

5.1.5. Testdurchführung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54

5.1.6. Gesammelte Daten . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55

5.2. Gefundene Usability-Probleme . . . . . . . . . . . . . . . . . . . . . . . . . . 56

5.3. Handlungs- und Gestaltungsempfehlungen . . . . . . . . . . . . . . . . . . . 68

5.4. Auswertung Fragebögen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72

5.4.1. Attrakdi�2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75

5.4.2. Wünsche, Anregungen der Testpersonen . . . . . . . . . . . . . . . . 77

5.5. Untersuchungskritik . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78

6. Zusammenfassung und Ausblick 796.1. Mobile Anwendungen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80

6.2. Alternative Eingabemedien . . . . . . . . . . . . . . . . . . . . . . . . . . . 81

7. Literaturverzeichnis 84

A. Anhang auf CD 90A.1. Usability-Studie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90

A.1.1. Fragebogen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90

A.1.2. Testprotokoll . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90

A.1.3. Auswertungsmatrix . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90

A.2. Auswertung Fragebögen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90

A.2.1. ISONORM 9240/110-S . . . . . . . . . . . . . . . . . . . . . . . . . . 90

A.2.2. Erklärung der Items zum ISONORM 9240/110-S . . . . . . . . . . . 90

A.2.3. Attrakdi�2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90

A.3. Berechnung des Durchschnittswertes für die darstellbare Fläche einer Web-

seite . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90

IV

Abbildungsverzeichnis

1.1. Aktuelle Webseite mit neuer Modellseite . . . . . . . . . . . . . . . . . . . . 3

1.2. Layout für den Relaunch der Webseite in 2011 . . . . . . . . . . . . . . . . . 4

2.1. Grundmodell der menschlichen Informationsverarbeitung . . . . . . . . . . . 7

2.2. Recognize-Act-Zyklus . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10

2.3. Gesetz der Nähe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12

2.4. Gesetz der Ähnlichkeit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

2.5. Gesetz der Geschlossenheit . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

2.6. Gesetz der guten Fortsetzung . . . . . . . . . . . . . . . . . . . . . . . . . . 14

2.7. Wechselwirkungen von Gestaltgesetzen . . . . . . . . . . . . . . . . . . . . . 15

2.8. Verdeckungs-/Tiefenwahrnehmung . . . . . . . . . . . . . . . . . . . . . . . 16

2.9. Redesign BMW Modellseite . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

3.1. Navigationsmöglichkeiten . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21

3.2. Hauptnavigation von Audi . . . . . . . . . . . . . . . . . . . . . . . . . . . 22

3.3. Ablenkung durch Distraktoren . . . . . . . . . . . . . . . . . . . . . . . . . 24

3.4. Angebotscharakter von Buttons . . . . . . . . . . . . . . . . . . . . . . . . . 24

3.5. Nutzererwartungen und Prioritätszonen . . . . . . . . . . . . . . . . . . . . 25

3.6. Suchfelder (Lexus und Audi) . . . . . . . . . . . . . . . . . . . . . . . . . . 27

3.7. Flächenaufteilung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27

3.8. BMW Startseite (Au�ösung 1024x768px) . . . . . . . . . . . . . . . . . . . . 28

3.9. Anwendungsbeispiele für Rich Internet Applications . . . . . . . . . . . . . 29

3.10. Kontextsensible Schalt�äche bei Mouse-Over . . . . . . . . . . . . . . . . . . 31

3.11. Anwendungsgesteuertes Pop-Up Fenster . . . . . . . . . . . . . . . . . . . . 32

4.1. Aufbau des Auges . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41

4.2. Maximale Anzahl an wahrnehmbaren Zeichen im fovealen Bereich . . . . . . 41

4.3. Fixationsmodell nach Viviani . . . . . . . . . . . . . . . . . . . . . . . . . . 43

4.4. Heatmap-Typen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45

5.1. Modellseite altes (links) und neues (rechts) Konzept . . . . . . . . . . . . . 49

5.2. Grundriss Usability-Labor Hochschule Neu-Ulm . . . . . . . . . . . . . . . . 50

5.3. Personas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51

5.4. Link �Informieren� . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57

5.5. Favoriten-Icon . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58

5.6. Links und Steuerelemente �Intergral-Aktivlenkung� . . . . . . . . . . . . . . 60

V

Abbildungsverzeichnis

5.7. Fehlendes Feedback des Systems . . . . . . . . . . . . . . . . . . . . . . . . 62

5.8. Mouse-Over E�ekt (n=4; Relative Fixationszeit, aufgabenbezogenes Schauen) 63

5.9. Motorangaben . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64

5.10. Kon�gurator: Wahl der Ausstattung . . . . . . . . . . . . . . . . . . . . . . 65

5.11. Layoutprobleme Kon�gurator . . . . . . . . . . . . . . . . . . . . . . . . . . 65

5.12. Die ersten fünf Sekunden der Suche nach BMW Zubehör (n=9; Absolute

Fixationszeit; aufgabenbezogenes Schauen) . . . . . . . . . . . . . . . . . . . 66

5.13. Gestaltungsvorschlag Detailseiten . . . . . . . . . . . . . . . . . . . . . . . . 68

5.14. Gestaltungsvorschlag Modellauswahl . . . . . . . . . . . . . . . . . . . . . . 69

5.15. Gestaltungsvorschlag �Ihr BMW� mit zusätzlichem Überblick über die Kon-

�guration . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70

5.16. Gestaltungsvorschlag Link �Informieren� . . . . . . . . . . . . . . . . . . . . 70

5.17. Ausfüllbeispiel für das Item �Wissensverfügbarkeit� . . . . . . . . . . . . . . 72

5.18. ISONORM 9240/110-S - Ergebnisse [n=10] . . . . . . . . . . . . . . . . . . 73

5.19. Attrakdi�2 - Ergebnisse [n=10] . . . . . . . . . . . . . . . . . . . . . . . . . 76

VI

Tabellenverzeichnis

5.1. Übersicht Testpersonen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52

5.2. Überblick Testaufgaben . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53

5.3. Schweregrad der Probleme . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56

5.4. Anzahl Fehlklicks (n=9) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57

VII

1. Einleitung

75 % der potenziellen Autokäufer starten ihre Suche im Internet.1 Allein diese Zahl macht

deutlich, wie wichtig es auch für einen Fahrzeughersteller ist, im World Wide Web prä-

sent zu sein. Durch die Entwicklung und den Einsatz neuer Technologien haben sich die

Möglichkeiten zur Präsentation von Inhalten signi�kant erweitert. Gleichzeitig sind damit

aber auch die Ansprüche der Nutzer an Webseiten enorm gewachsen. Sie wollen möglichst

schnell und einfach an relevante Informationen gelangen und dabei angemessen unterhalten

werden.2 Anforderungen, die nicht nur aufgrund der groÿen Nutzerheterogenität schwer zu

erfüllen sind.

Die vorliegende Arbeit hat es sich deshalb zum Ziel gemacht, Erfolgsfaktoren für eine

benutzerfreundliche Softwareentwicklung, insbesondere für Webseiten, zu ermitteln und

Wege zur Verbesserung des Nutzungserlebnisses (Joy of Use) aufzuzeigen.

Testgegenstand im praktischen Teil ist der BMW 5er Online Showroom. In einer Usability-

Studie wird das neue Modellseitenkonzept auf seine Benutzerfreundlichkeit und �Joy of Use�

analysiert. Die angesprochenen Erfolgsfaktoren dienen dabei einerseits der Interpretation

von Nutzerproblemen und andererseits der Ausarbeitung von konkreten Gestaltungs- und

Handlungsempfehlungen. Die Modellseite wird dabei in ähnlicher Form in den Relaunch des

BMW Internetauftritts (geplanter Start: Zweites Quartal 2011) integriert. Somit können

die Erkenntnisse nicht nur temporär, sondern auch zukünftig für die Entwicklung von neuen

Modellseiten genutzt werden.

Aufbau und Ziele

Nachdem im einleitenden Kapitel zunächst das neue Internetkonzept und die Wichtigkeit

von erlebnisorientierten Faktoren als Ergänzung der Usability betrachtet wird, beschäftigt

sich das zweite Kapitel mit wahrnehmungspsychologischen Faktoren im Webdesign. Es

wird erörtert, wie psychologische Grundlagen gezielt eingesetzt werden können, um eine

nutzerfreundliche Webgestaltung zu erreichen. Zusätzlich werden Möglichkeiten aufgezeigt,

diese auch produktiv umzusetzen.

Das dritte Kapitel versteht sich als Erweiterung des vorangegangenen Kapitels und beschäf-

tigt sich mit Gestaltungsaspekten, die auÿerhalb der psychologischen Grundlagen liegen.

1Diese Zahl geht aus einer Studie von Ipsos Mori 2009 hervor (entnommen aus einem internen Dokumentvon BMW)

2vgl. Brau et al. 2008: Usability Professionals 2008, S.3

1

1. Einleitung

Die Aufteilung in Inhalt, Navigations- und Interfacedesign soll die idealtypische Vorge-

hensweise bei der Entwicklung von Webseiten wiedergeben. Unter anderem werden hier

Empfehlungen zur konkreten Ausgestaltung von Inhalten und Navigationsmodellen aus-

gesprochen, sowie der Ein�uss von neuen Webtechnologien vorgestellt. Der Schwerpunkt

liegt darin, ein umfassendes Verständnis über die einzelnen Elemente einer Webseite zu

geben und diese für den Einsatz im usability-orientierten Webdesign zu spezi�zieren.

Im zweiten und dritten Kapitel werden dabei an verschiedenen Stellen aktuelle Layouts des

neuen Internetkonzepts zu Anschauungszwecken ein�ieÿen. Ein Prototyp (Klick-Dummy)

konnte für eine genauere Auswertung leider nicht zur Verfügung gestellt werden.

Kapitel 4 setzt sich kritisch mit den eingesetzten Methoden (Eyetracking und �Lautes Den-

ken�) für die nachfolgende Usability-Studie auseinander. Zunächst werden die physiologi-

schen Grundlagen für eine korrekte Interpretation von Blickbewegungsdaten beschrieben.

Im weiteren Verlauf werden die Stärken und Schwächen beider Methoden aufgelistet und

erläutert, warum diese letztendlich für den praktischen Test verwendet wurden.

Kapitel 5 behandelt die durchgeführte Usability-Studie und zeigt Handlungsempfehlungen

für die zukünftige Integration des BMW 5er Online Showrooms.

Die Arbeit schlieÿt mit einer Zusammenfassung der Ergebnisse und einem Ausblick über

potenzielle Ein�ussfaktoren für die Gestaltung von Webseiten ab.

Der Anhang enthält alle verwendeten Testmaterialien und Auswertungen. Er wird auf

CD mitgeliefert. Die Eyetracking-Daten und Videoaufzeichnungen sind auf einer externen

Festplatte archiviert.

1.1. Die Neugestaltung der BMW Webseite

Der BMW 5er Online Showroom als Zwischenschritt Die Modellseite der BMW 5er

Limousine (gestartet im Oktober 2009) zeigt schon heute, wie zukünftig die Fahrzeuge im

Internet präsentiert werden.3 Die Modellseite wird dabei unverändert oder leicht modi�-

ziert auch im Relaunch verwendet. Aus diesem Grund wird die Modellseite in Kapitel 5,

sozusagen als Mastervorlage, auf seine Usability überprüft.

3Aktuell wird dieses Konzept auch schon für das neue BMW 3er Coupé und Cabrio, sowie den neuen X5verwendet.

2

1. Einleitung

Abbildung 1.1.: Aktuelle Webseite mit neuer Modellseite

Relaunch der BMW Webseite Grundlage für die Neugestaltung der Webseite ist die

neue BMW Corporate Identity (CI), die mit der neuen Kommunikationsausrichtung �Story

of Joy� eingeführt wurde. Sie soll wieder stärker auf die Kernkompetenzen der Marke BMW

fokussieren. Die Schlüsselfaktoren für den Erfolg werden dabei wie folgt kommuniziert:4

� Eine klare Haltung durch einfache und prägnante Botschaften.

� Hohe Wiedererkennbarkeit durch ein unverwechselbares und di�erenzierendes Er-

scheinungsbild.

� Ein zukunftsorientierter, moderner Ansatz, bei welchem die typischen BMW Brand

Design Elemente neu interpretiert werden.

Die typischen Gestaltungsmerkmale der neuen CI sind das neue Weiÿraumkonzept, dass

einen hochwertigen und zugleich markanten Auftritt erzielen soll, sowie die Versalschreib-

weise für Headlines und Subheadlines.

Im Hinblick auf die User Experience5 sollen im Relaunch folgende Punkte realisiert werden:

� Umsetzung von �exiblen und dynamischen Seitenstrukturen.

� Gestaltung eines modernen Erscheinungsbildes, basierend auf der neuen CI.

� Entwicklung eines Layouts, dass sich über alle Themengebiete konsistent erstreckt.

� Verstärkte Integration von Web 2.0 Funktionalitäten.

4BMW Brand Identity [Stand: August 2009]5User Experience umfasst die Usability und die Erweiterung um den Joy of Use (siehe 1.2)

3

1. Einleitung

Abbildung 1.2.: Layout für den Relaunch der Webseite in 2011[Webdesign © 2010 interone GmbH]

1.2. Joy of Use - Die Erweiterung der Usability um emotionaleKomponenten

Lange Zeit stand die reine Usability6 im Fokus der Forschung zur Wahrnehmung von

Webseiten. Dabei konzentrierte man sich hauptsächlich auf die Aufgaben der Nutzer und

deren Optimierung hinsichtlich der Bedienbarkeit. Diese Betrachtung erlaubt aber nur eine

eingeschränkte Perspektive auf die Thematik, da sie die Gebrauchstauglichkeit als allein-

stehendes Erfolgsmerkmal identi�ziert. In den letzten Jahren hat sich deshalb immer mehr

durchgesetzt, dass neben Usability auch emotionale Ein�üsse diskutiert und beachtet wer-

den müssen. Diese Ein�üsse werden häu�g unter dem Begri� �Joy of use� subsumiert. Joy

of use beschreibt, dass Anwendungen mit einer attraktiven, anziehenden Gestaltung posi-

tive Auswirkungen auf das Nutzungsverhalten der Anwender haben. Benutzer sind dann

sogar bereit, über kleinere Schwächen in der Bedienung der Applikation hinwegzusehen.7

Dagegen kann ein negativ emotionaler Zustand dazu führen, dass speziell auf problemati-

sche Details fokussiert wird und so eher das Problem an sich, als dessen Bewältigung im

Vordergrund steht.8

Zu Joy of Use gibt es verschiedene theoretische Ansätze. Hassenzahl unterscheidet bei-

spielsweise zwischen der pragmatischen und hedonischen Qualität eines Produkts. Prag-

matische Qualität beschreibt hierbei die Fähigkeit eines Produktes zur Befriedigung der

Zielerreichung (entspricht somit weitestgehend der eigentlichen Usability). Erweitert ein

interaktives Produkt hingegen durch neue Funktionen die Möglichkeiten des Nutzers, sti-

muliert durch visuelle Gestaltung und neuartige Interaktionsformen oder kommuniziert

eine gewünschte Identität (modern, traditionell, etc.), besitzt es hedonische Qualitäten.9

Das Erlebnis beider Qualitäten eines Produkts führt zu dessen globaler Attraktivitäts-

6DIN EN ISO 9241-11 1998: Ergonomische Anforderungen für Bürotätigkeiten mit Bildschirmgeräten, S.4:Usability bezeichnet �das Ausmaÿ, in dem ein Produkt durch bestimmte Nutzer in einem bestimmtenNutzungskontext genutzt werden kann, um bestimmte Ziele e�ektiv, e�zient und zufriedenstellend zuerreichen�.

7vgl.Wack 2009: Produktionsnahe Applikationen und hedonische Qualitäten: K(ein) Widerspruch?, S.1418vgl. Ilmberger et al. 2009: Was verursacht den Zusammenhang zwischen Ästhetik und Usability?, S.3849vgl. Hassenzahl 2006: Interaktive Produkte wahrnehmen, erleben, bewerten und gestalten, S.151

4

1. Einleitung

bewertung. Hohe Attraktivität zieht ein bestimmtes Verhalten der Anwender nach sich,

wie z. B. verstärkte Nutzung oder Freude an der Nutzung. Eine Möglichkeit um die At-

traktivität quantitativ und reproduzierbar zu messen, ist der sogenannte, von Hassenzahl

entwickelte, Attrakdi�-Fragebogen.10 Er wird in der Usability-Studie in Kapitel 5 erläutert

und angewendet.

Die Wahrnehmung und Bewertung beider Qualitäten unterliegen aber spezi�schen Ein-

�ussfaktoren. Folgende Aspekte sollten gemäÿ Ilmberger et al. (2009) bei einer Auswertung

beachtet werden:11

� Bei längerer Nutzung können hedonische Aspekte schnell zur Gewohnheit werden,

während negative oder positive Aspekte in der Handhabung weiterhin au�allen. So-

mit würde sich der Ein�uss hedonischer Qualitäten mit zunehmender Nutzung redu-

zieren und der pragmatische Anteil ansteigen.

� Weiterhin kann auch die Nutzungsintensität die Gewichtung beein�ussen. Erfahre-

ne Nutzer arbeiten eher nicht zielgerichtet, sondern eher spielerisch und beurteilen

die Schnittstelle vorwiegend nach hedonischen Gesichtspunkten. Unerfahrene Nutzer

lassen beide Qualitäten ungefähr gleich in ihr Attraktivitätsurteil ein�ieÿen.

� Darüber hinaus stellte Thielsch (2008) in einer Studie fest, dass ältere Personen

hedonische Aspekte tendenziell positiver bewerten als jüngere.12

Hedonischer Faktor: Ästhetik Da in dieser Arbeit an verschiedenen Stellen Gestal-

tungssempfehlungen ausgesprochen werden, soll im Folgenden explizit die Bedeutung einer

ästhetischen Gestaltung für eine hohe hedonische Qualität gezeigt werden:13

� Ästhetik befriedigt die menschlichen Grundbedürfnisse. Für die meisten Menschen

besitzen ästhetische Produkte einen inneren Wert, unabhängig von ihrer Funktion.

� Ästhetische Urteile werden binnen Millisekunden gebildet, und sind somit entschei-

dend für den ersten Eindruck.

� Ästhetische Aspekte unterstützen die Funktionsweise eines Produkts.

� In vollen Märkten mit ähnlich funktionalen Produkten kann Ästhetik zum entschei-

denden Merkmal werden. Eine ästhetische Gestaltung hat damit auch einen wirt-

schaftlichen Nutzen.

Ästhetik ist somit nicht nur ein Selbstzweck. Noam Tractinscky (2000) geht sogar noch

weiter und behauptet, dass Nutzer ein ansprechendes Design gleichzeitig mit einer hohen

Gebrauchstauglichkeit verbinden (�What is beautiful is usable�). Die These wird unter-

stützt, dass der Mensch die meisten Informationen visuell aufnimmt.14 Dies würde aber

10vgl.Wack 2009: Produktionsnahe Applikationen und hedonische Qualitäten: K(ein) Widerspruch?, S.14211vgl. Ilmberger et al. 2009: Was mach studiVZ so attraktiv?, S.33112vgl. Thielsch 2008: Ästhetik von Websites, S.20713vgl. Thielsch 2008: Ästhetik von Websites, S.3714vgl. Dahm 2006: Grundlagen der Mensch-Computer-Interaktion, S.236

5

1. Einleitung

auch indizieren, dass eine mangelhafte Usability durch ansprechende optische Gestaltung

ausgeglichen werden kann. Nach einer Studie von Ilmberger et al. (2009) scheint dies nicht

möglich zu sein. Es ist aber ziemlich wahrscheinlich, dass die Erfahrung einer guten Be-

nutzbarkeit durch einem guten ästhetischen Eindruck zusätzlich verstärkt werden kann.

Die Probanden bewerten Ästhetik also auf Grundlage der wahrgenommenen Usability, was

somit eher der Aussage �What is good is beautiful� entspricht.15

Zusammenfassung In der Softwareergonomie darf eine ästhetische Gestaltung demnach

nicht vernachlässigt werden, da sie eine starke Eigendynamik entwickeln kann. Die Wahr-

nehmung von Ästhetik beruht neben dem subjektiven Emp�nden auch auf neurowissen-

schaftlichen und kognitiven Ansätzen. Da anzunehmen ist, dass kognitive Verarbeitungen

bei allen Menschen gleichgeschaltet sind, kann die Kritik an Ästhetik, dass Schönheit im

Auge des Betrachters liegt, teilweise entschärft werden.16

Im nächsten Kapitel werden nun wahrnehmungspsychologische Faktoren untersucht, die

sowohl die Usability als auch das ästhetische Emp�nden positiv beein�ussen.

15vgl. Ilmberger et al. 2009: Was verursacht den Zusammenhang zwischen Ästhetik und Usability?, S.383�16vgl. Thielsch 2008: Ästhetik von Websites, S.75

6

2. WahrnehmungspsychologischeFaktoren im Webdesign

In diesem Kapitel sollen zunächst zielgruppenunabhängige Anforderungen an eine benut-

zerfreundliche Produktentwicklung betrachtet werden. Dies erfordert eine Auseinanderset-

zung mit der generellen Leistungsfähigkeit des menschlichen Geistes.17

Viele Usability Probleme entstehen aus der unzureichenden Anpassung von Anwendungen

an die kognitiven Fähigkeiten der Nutzer.18 Im Folgenden werden deshalb einige psycholo-

gische Theorien und Erkenntnisse aufgezeigt, die für Usability, speziell Web-Usability, von

Belang sind. Die hier beschriebenen Aspekte werden teilweise später zur Begründung von

Gestaltungsempfehlungen herangezogen.

2.1. Kognitionspsychologische Grundlagen: DasMulti-Speicher-Modell

Das Fachgebiet der Kognitionspsychologie beschäftigt sich mit der Erforschung menschli-

cher Informationsverarbeitung.19 Aufgrund der hohen Komplexität des kognitiven Appa-

rats des Menschen lassen sich an dieser Stelle nur Grundlagen vermitteln. Vereinfacht lässt

sich aber ein idealtypisches Modell der Informationsverarbeitung wie folgt darstellen:

Arbeitsspeicher

Langzeit-gedächtnis

KOGNITIVES SYSTEM

SensorischesGedächntis

Kurzzeit-gedächntis

Sinn

esor

gane

Erst

e Re

izau

fnah

me

Abbildung 2.1.: Grundmodell der menschlichen Informationsverarbeitung[Eigene Darstellung: In Anlehnung an Schwan/Hesse 2004: Kognitionspsychologische Grundlagen, S.74]

17vgl. Raskin 2001: Das intelligente Interface, S.2018vgl. Raskin 2001: Das intelligente Interface, S.2919nach Mayer 2005: Einführung in die Wahrnehmungs,- Lern,- und Werbe-Psychologie, S.29 versteht man un-ter Informationsverarbeitung folgendes: �Informationsverarbeitung ist eine Bezeichnung für alle Vorgängemittels derer Informationen aufgenommen, bearbeitet, abgerufen, verglichen, beurteilt, mit anderen In-formationen verknüpft, eingeordnet und interpretiert werden. Ergebnisse dieser Informationsverarbeitungsind Urteile, Entscheidungen, Wissen, Handlungspläne, Problemlösungen, Zieländerungen etc.�

7

2. Wahrnehmungspsychologische Faktoren im Webdesign

Das Multi-Speicher-Modell des Menschen stellt die Art und Weise der Speicherung von

Informationen dar und erlaubt Rückschlüsse für eine optimierte Präsentation von Inhalten.

Die Unterteilung des Gedächtnisses in drei Komponenten konkretisiert den Umgang mit

Informationen. Zur Vereinfachung werden nur visuelle Prozesse betrachtet, da diese für das

Webdesign am relevantesten sind.

2.1.1. Reizaufnahme durch das Auge

Informationen, die über die Augen aufgenommen wurden, werden über Nervenbahnen an

den hinteren Teil der Groÿhirnrinde (Cortex) geschickt. In diesem Zusammenhang ist zu

beachten, dass sich die Nerven auf dem Weg überkreuzen und somit visuelle Informationen

aus dem rechten Gesichtsfeld an die linke Gehirnhälfte geschickt werden und umgekehrt.

Die linke Gehirnhälfte übernimmt dabei die analytische und berechnende Funktion, wäh-

rend in der rechten das bildhafte und ganzheitliche Denken sitzt. Für das Webdesign indi-

ziert dies, dass Navigations- und Bildelemente bevorzugt links und Texte rechts ausgerichtet

werden sollen.20

Im nächsten Schritt werden die aufgenommenen visuellen Reize zu Objekten zusammen-

gefügt. Dies geschieht nach den Gestaltgesetzen. 21 Sie werden in Punkt 3.2 anhand von

Praxisbeispielen des BMW Internetauftritts veranschaulicht.

2.1.2. Sensorisches Gedächtnis (Ultra-Kurzzeitgedächtnis)

Das sensorische Gedächtnis speichert durch die Sinnesorgane, in diesem Fall die Augen,

aufgenommene Reize. Das Speichervolumen ist dabei sehr hoch, die Speicherdauer dagegen

geringer als eine Sekunde (visuelle Signale können bereits nach 0,2 s verloren gehen22). Um

eine korrekte und fehlerfreie Aufnahme von Informationen auf einer Webseite zu erreichen,

ist es unter anderem von Bedeutung, dass sich die Zeilenlänge der Texte an der Aufnah-

mekapazität des sensorischen Gedächtnisses orientiert.23 40-60 Zeichen (inkl. Leerzeichen)

sind dabei ein ungefährer Richtwert.24 Wird dieser Wert gröÿer, kann es sein, dass der

Leser die nächste Zeile verliert.

2.1.3. Kurzzeitgedächtnis

Im Kurzzeitgedächtnis werden die erhaltenen Informationen zum ersten Mal bewusst verar-

beitet. Die Kapazität von ungefähr sieben Objekten (egal ob Zahlen, einzelne Buchstaben,

Worte, usw.) ist ebenfalls gering, kann jedoch durch sogenanntes Chunking erweitert wer-

den. Unter Chunking versteht man die Zusammenfassung einzelner Informationseinheiten20vgl. Weiland/Gizycki 2002: Wahrnehmungspsycholgische Erkenntnisse im Web-Design, S.3421vgl. Wertheimer 1923: Untersuchungen zur Lehre von der Gestalt II, S.301�22vgl. Preim 1999: Entwicklung interaktiver Systeme, S.18223vgl. Weiland/Gizycki 2002: Wahrnehmungspsycholgische Erkenntnisse im Web-Design, S.3824vgl. Runk 2006: Grundkurs Typogra�e und Layout, S.146; Dahm 2006: Grundlagen der Mensch-Computer-Interaktion, S.229

8


zu gröÿeren.25 Je unterschiedlicher diese sind, desto leichter fällt es sie sich zu merken.26

Durch eine klare und logische Strukturierung der Menüs, können Informationen optimiert

für das Kurzzeitgedächtnis aufbereitet werden. Konkret bedeutet dies, eine Einteilung in

sinnvolle Ober- und Unterpunkte, um eine schnelle Orientierung zu gewährleisten.27

Weiterhin entscheiden nach der Theorie der kognitiven Belastung von John Sweller (Co-

gnitive Load Theory) drei weitere Faktoren darüber, ob Informationen gut oder schlecht

aufgenommen werden:28

� Die Komplexität des Inhalts.

� Der Kenntnissstand des Medienrezipienten. Bei einem hohen Kenntnissstand zu ei-

nem bestimmten Thema fällt es dem Leser leichter, Informationen zu verarbeiten

und zu speichern.

� Die Art der Mediengestaltung. Nicht nur der Inhalt an sich beansprucht den Leser,

sondern auch dessen mediale Aufbereitung.

Da die kognitiven Ressourcen stark beschränkt sind (Sweller geht hier von einer maximalen

mentalen Kapazität aus), muss darauf geachtet werden, dass in der Summe die Schwie-

rigkeit des Inhalts und dessen gestalterischer Aufbereitung nicht den Speicher überlastet.

Somit gilt:

� Bei einfachen Inhalten führt auch eine hohe Belastung durch die Mediengestaltung

nicht zu einer Überforderung.

� Bei anspruchsvollen Inhalten sollte darauf geachtet werden, dass die Aufnahmefähig-

keit und Interpretation nicht zusätzlich durch eine aufwendige Gestaltung erschwert

wird.

2.1.4. Langzeitgedächtis

Der letzte Speicherort des vorgestellten Modells ist das Langzeitgedächtnis. Es hat eine

groÿe Speicherkapazität und eine lange Speicherdauer. Die Speicherdauer ist jedoch da-

von abhängig, in wieweit die neu aufgenommenen Informationen mit bereits vorhandenen

Informationen verknüpft werden können. Dabei werden die Inhalte im sensorischen Spei-

cher mit dem Langzeitgedächtnis verglichen, um Muster im Material zu erkennen.29 Die

nachfolgende Abbildung skizziert das Zusammenspiel der einzelnen Speicher:

25vgl. Sarodnick/Brau 2006: Methoden der Usability Evaluation, S.5426vgl. Thaller 2002: Interface Design, S.13127vgl. Weiland/Gizycki 2002: Wahrnehmungspsycholgische Erkenntnisse im Web-Design, S.3928vgl. Sweller 2005: Implications of cognitive load theory for multimedia learning, S.19�29vgl. Weiland/Gizycki 2002: Wahrnehmungspsycholgische Erkenntnisse im Web-Design, S.40

9


Arbeitsspeicher

Langzeit-speicher

SensorischerSpeicher

Kurzzeit-speicher

sensorischeInformation

symbolische Information

semantische und

episodische Information

Mustererkennung

Abbildung 2.2.: Recognize-Act-Zyklus[Gra�k nach Preim 1999: Entwicklung interaktiver Systeme, S.186]

Der sogenannte Recognize-Act-Zyklus lässt sich am Beispiel des Erkennens bekannter Zei-

chen wie Buchstaben und Zi�ern erklären. Die von einem Zeichen gewonnenen sensorischen

Daten aktivieren die Mustererkennung im Langzeitgedächtnis (recognize). Hier werden die

Daten mit gespeicherten Erfahrungen verglichen (semantische und episodische Informatio-

nen). Beispielsweise wird der Buchstabe H als Kombination zweier senkrechter Striche und

eines waagrechten Strichs aufgefasst. Das Ergebnis ist eine symbolische Repräsentation

des Wahrnehmungsgegenstandes im Kurzzeitgedächtnis (act). Erst die erkannten und im

Kurzzeitgedächtnis zur Verfügung stehenden Daten können Grundlage einer willkürlichen

Handlung sein. Durch mehrmaliges Erinnern gelangen die Informationen schlieÿlich in den

Langzeitspeicher.30

Eine Möglichkeit um die Mustererkennung für das Webdesign zu nutzen, wäre beispiels-

weise die Einhaltung von bereits gelernten Seitenstrukturen:31

� Platzierung des Firmenlogos oben links.

� Positionierung der Hauptnavigation am oberen Seitenrand oder mittig links.

� Klare Strukturierung der Inhalte (einheitliches Raster für Texte und Gra�ken, ein-

heitliche Schrift).

Darüber hinaus ist es sinnvoll auch eine Verbindung mit O�ine-Medien herzustellen, wie

etwa durch bereits bekannte und deswegen gelernte Corporate Design Elemente aus Print

und TV-Kampagnen32 (Farbwelten, Bildsprache).

Zusammenfassung Geht es nach den Grundsätzen der menschlichen Wahrnehmung,

sollte eine Webseite eine klare, reduzierte und prägnante Gestaltung aufweisen. Der Ein-

satz von gelernten Strukturen und Metaphern sowie eine einfache Darstellung der Inhalte

sorgen für eine rasche Informationsaufnahme und ermöglichen dem Nutzer eine schnelle

und fehlerfreie Interaktion.30vgl. Preim 1999: Entwicklung interaktiver Systeme, S.18631vgl. Nielsen; Pernice 2010: Eyetracking Web Usability, S.6632vgl. Weiland/Gizycki 2002: Wahrnehmungspsycholgische Erkenntnisse im Web-Design, S.40

10


2.2. Gestaltgesetze der Wahrnehmung

Nachdem die kognitionspsychologischen Grundüberlegungen für die Gestaltung kurz aufge-

zeigt wurden, sollen nun anhand der Gestaltgesetze weitere Handlungsempfehlungen dar-

gelegt werden. Bei den Gestaltgesetzen handelt es sich aber in naturwissenschaftlicher Be-

trachtung nicht um Gesetze im engeren Sinn. Vielmehr werden hier Grundsätze aufgezeigt,

nach denen unsere Wahrnehmung in Abhängigkeit von unseren Erfahrungen verläuft.33

Die menschliche Wahrnehmung arbeitet dabei nach möglichst klaren Strukturen und präg-

nanten Formen. Die Beachtung der Gestaltgesetze bei der Gestaltung von Bildschirmin-

halten unterstützt diese Arbeitsweise und reduziert dadurch die kognitive Belastung.34 So

können zusammengehörige Informationen auch als solche vermittelt werden und anderer-

seits verhindern, dass Beziehungen vermutet werden, die nicht vorhanden sind.

Im Folgenden sollen die wichtigsten Gesetze vorgestellt werden. Anhand von aktuellen Lay-

outs zum Relaunch der BMWWebseite (© interone GmbH) werden diese an verschiedenen

Stellen illustriert.

Trennung von Figur und Grund Die visuelle Wahrnehmung hat die Fähigkeit, bestimm-

te Objekte als Figuren aufzufassen und das restliche visuelle Umfeld als Hintergrund er-

scheinen zu lassen. Symmetrische und konvexe Elemente, kleine Flächen, vertikale und

horizontale Orientierungen sowie bedeutsame Gegenstände werden eher als Figur wahrge-

nommen. Die Di�erenzierung von Figur und Grund lässt aber zu einem Zeitpunkt nur eine

Interpretation zu. Entweder ist etwas Figur oder Grund, nicht aber beides zugleich. Die

Fähigkeit der Figur-Grund-Unterscheidung ist eine grundlegende Voraussetzung für eine

sichere und schnelle Orientierung und sollte bei der Gestaltung berücksichtigt werden.35

Hintergründe sind so zu wählen, dass sie sich deutlich vom Vordergrund unterscheiden (und

umgekehrt).

Gesetz der Nähe Räumlich nah zueinanderstehende Elemente werden als eine Einheit

wahrgenommen. Daher sollten zusammengehörige Objekte stets dicht zusammenstehen.36

33vgl. Mayer 2005: Einführung in die Wahrnehmungs,- Lern,- und Werbepsychologie, S.1434vgl. Thissen 2003: Kompendium Screen Design, S.15235vgl. Mayer 2005: Einführung in die Wahrnehmungs-, Lern-, und Werbepsychologie, S.3936vgl. Dahm 2006: Grundlagen der Mensch-Computer-Interaktion, S.60; Stapelkamp 2007: Screen- und In-terfacedesign, S.24

11


Abbildung 2.3.: Gesetz der Nähe[Eigene Darstellung, Webdesign © 2010 interone GmbH]

Im oben gezeigten Beispiel ist dies gut umgesetzt. Die Texte können sofort den entsprechen-

den Fahrzeugen zugeordnet werden. Durch die maÿstabsgetreue Abbildung der Fahrzeuge,

ergibt sich zudem eine sehr gute Vergleichbarkeit.

Die Logik, die hinter dem Gesetz der Nähe steckt und das gezeigte Beispiel machen klar,

dass auch Leere von unserer Wahrnehmung als Information gewertet wird. Leere hilft

Informationen sinnvoll zu ordnen und verständlich zu machen. Viele Informationen auf

kleinem Raum sollten demzufolge, auch aus ästhetischer Sicht, vermieden werden.

Exkurs: Die Duale Kodierungstheorie

Wie schon in 2.1.1 ausgeführt, besitzt das Gehirn zwei getrennte Speichersysteme. Es han-

delt sich um das verbale und das bildhafte Gedächtnis. Aufgenommene Inhalte werden

in beiden Systemen gespeichert. Zwischen diesen beiden Gehirnhälften bestehen Verknüp-

fungen. Die Inhalte einer Webseite sind optimal aufbereitet, wenn sie beide Gehirnhälften

ansprechen.37 Eine gemeinsame Darbietung von Modellnamen und Fahrzeugmotiven wie

in Abb. 2.3 steigert somit das Verständnis und die Erinnerungsleistung. Weiterhin soll das

Beispiel zeigen, dass das Bild in einem unmittelbaren Bezug zum Text stehen sollte.

Gesetz der Gleichartigkeit/Ähnlichkeit Ähnliche, beziehungsweise übereinstimmende

Objekte werden als zusammengehörig und damit als Figur wahrgenommen (Ähnlichkeit

kann sich durch Farbe, Helligkeit, Gröÿe, Orientierung oder Form ausdrücken). Treten

mehrere Ähnlichkeiten simultan auf, wirken sie meistens in der Reihenfolge dieser Aufzäh-

lung.38 Für das Webdesign hat dieses Gesetz eine besondere Bedeutung. Einerseits sorgt

es für die Konsistenz einer Ober�äche. Elemente, die gleich aussehen und sich deutlich

von anderen di�erenzieren, werden zu einer Gruppe zusammengefasst.39 Andererseits kann

37vgl. Wirth 2002: Missing Links, S.105f38vgl. Heinecke 2004: Mensch-Computer-Interaktion, S.6639vgl. Dahm 2006: Grundlagen der Mensch-Computer-Interaktion, S.59

12


Ähnlichkeit Objekte auch über eine gröÿere Distanz verbinden. Folglich sollten zusammen-

gehörige Elemente auch optisch ähnlich markiert werden.40

Abbildung 2.4.: Gesetz der Ähnlichkeit[Eigene Darstellung, Webdesign © 2010 interone GmbH]

In Abb. 2.4 wurde die Gestaltung der Buttons konsistent durchgesetzt. Zudem bekommt

der Button �Build your own� eine blaue Färbung. Durch die farbliche Kodierung wird

sofort ersichtlich, dass die beiden Elemente die gleiche Aktion, in diesem Fall den Aufruf

des Kon�gurators, auslösen.

Gesetz der Geschlossenheit Objekte mit nahezu geschlossener Kontur werden von un-

serer Wahrnehmung gruppiert. Das Innere wird zur Figur und das Äuÿere zum Hintergrund.

Jeder Frame, jede Tabellenzeile und jeder Button funktioniert nach diesem Prinzip.41

Abbildung 2.5.: Gesetz der Geschlossenheit[Eigene Darstellung, Webdesign © 2010 interone GmbH]

40vgl. Stapelkamp 2007: Screen- und Interfacedesign, S.2941vgl. Heinecke 2004: Mensch-Computer-Interaktion, S.67

13


Die Hauptnavigation und Subnavigation sind miteinander verbunden und trennen sich

gut vom Inhaltsbereich. Durch den Schlagschatten wird die Zusammengehörigkeit und die

Abgrenzung vom Hintergrund zusätzlich verstärkt.

Gesetz der guten Fortsetzung Objekte, die in einer Folge angeordnet sind, werden als

zusammengehörig und damit als Figur aufgefasst. In Abb. 2.6 werden zwei sich kreuzende

parabelförmige Linien wahrgenommen. Die gute Fortsetzung siegt hier über die Gleichheit

der Form. Färbt man eine der Folgen zusätzlich ein, vermindert sich der Eindruck der sich

kreuzenden Parabeln. Gute Fortsetzung dominiert in der Regel nicht die Gleichheit der

Farbe.42

Abbildung 2.6.: Gesetz der guten Fortsetzung[Eigene Darstellung, Webdesign © 2010 interone GmbH]

Für die Gestaltung von Menüs ist das Gesetz der guten Fortsetzung und Nähe wichtig. Die

Links sind in diesem Beispiel auf einer gedachten Geraden angeordnet und können dadurch

sehr schnell gelesen werden. Das Gesetz der Nähe wird aber nur unzureichend beachtet.

Durch die Einrückung wird zwar deutlich, dass sich die Links der Kategorie unterordnen,

allerdings sind die vertikalen Abstände zwischen den Kategorien und innerhalb einer Kate-

gorie gleich. Um die Zugehörigkeit besser zu visualisieren, sollten die Links näher zu ihrer

Kategorie stehen (in Abb. 2.6 rot hervorgehoben).

Gesetz der Symmetrie Symmetrisch zueinander stehende Objekte erscheinen als eine

Einheit. Symmetrische Strukturen werden dabei der Figur (Vordergrund) zugerechnet und

asymmetrische dem Hintergrund. Demnach sind symmetrische Objekte gut geeignet, um

klare Strukturen auf einer Webseite zu scha�en.43 In Abbildung 2.4 sind die Teaser ach-

sensymmetrisch angeordnet. Das Layout wirkt dadurch sehr ausgewogen.

42vgl. Heinecke 2004: Mensch-Computer-Interaktion, S.66f43vgl. Thissen 2003: Kompendium Screen-Design, S.154; Heinecke 2004: Mensch-Computer-Interaktion, S.67

14


Die Wechselwirkung von Gestaltgesetzen: Durch das Zusammenspiel von verschie-

denen Gestaltgesetzen können ihre E�ekte gesteigert oder auch reduziert werden. In der

folgenden Abbildung wird an drei Beispielen illustriert, wie sich die Gesetze gegenseitig

beein�ussen können.

Gleichheit <> Nähe:Die Gleichheit der Elemente setzt sich gegen die Nähe durch.In der rechten Abbildung �ndet eine vertikale Gruppierung statt.

Prinzip der guten Gestalt:Anstatt einer durchgängigen Linie, wird ein Quadrat und eine krumme Linie wahrgenommen.Hier wirken die Geschlossenheit und die Symmetrie der Teil�gur.

Der Faktor der gemeinsamen Region: Nach dem Gesetz der Nähe werden die Punkte in der oberen Reihe gruppiert. Durch die zusätzliche Ellipsen in der unteren Reihewird dieser E�ekt gebrochen. Die Punkte werden nun innerhalb der Ellipse (= gemeinsame Region) gruppiert.

Abbildung 2.7.: Wechselwirkungen von Gestaltgesetzen[Eigene Darstellung: In Anlehnung an Heinecke 2004: Mensch-Computer-Interaktion, S.66�; Mazarakis

2009: Kann zu viel Nähe schaden? S.405f]

Verdeckungswahrnehmung Vollständige Konturen erscheinen weiter oben bzw. näher

als unvollständige. Hier helfen besonders die Gesetze der guten Fortsetzung und der Ge-

schlossenheit, um festzulegen, welche Konturen vollständig sind.44

44vgl. Heinecke 2004: Mensch-Computer-Interaktion, S.70f

15


Abbildung 2.8.: Verdeckungs-/Tiefenwahrnehmung[Eigene Darstellung, Webdesign © 2010 interone GmbH]

Auf der BMW Webseite gibt es eine dreistu�ge Hierarchie. Auf der ersten Ebene be�ndet

sich der eigentliche Inhalt, auf der zweiten die Menüfelder und auf der dritten die CI Module

von BMW. Zusätzlich wird die Trennung der Ebenen durch Schattierungen hervorgehoben.

Schatten lassen Objekte plastischer wirken und vermitteln, wie diese zueinander stehen.45

Zusätzlich erzeugen sie einen Tiefeneindruck.46

Zusammenfassung Es lässt sich festhalten, dass Gestaltgesetze meistens nicht für sich

allein wirken, sondern die Kombination mehrerer den Bildeindruck beein�ussen. Die Kennt-

nis über alle Gesetze ist deshalb essenziell, um Fehler in der Gestaltung und damit Fehl-

interpretationen der Nutzer zu vermeiden.

2.3. Aufmerksamkeitsgesetze

Aufmerksamkeit stellt die Fähigkeit dar, einzelne Reize aus dem verschiedenartigen Reiz-

angebot der Umwelt herauszu�ltern und bevorzugt zu betrachten, andere dagegen zurück-

zuhalten, um ein geordnetes Handeln zu ermöglichen. Neben der Anordnung zu anderen

Reizen in seiner Umgebung (vgl. 2.2 Gestaltgesetze), spielen die Reize an sich eine wichtige

Rolle für die Aufmerksamkeitsplatzierung. Reize, die für den Mensch neu, intensiv, au�äl-

lig, unerwartet sind, oder plötzlich erscheinen, verschwinden, blinken, oder sich bewegen,

aktivieren die exogene Kontrolle der Aufmerksamkeit. Die physikalischen Eigenschaften ei-

nes Reizes, wie Farbe, Gröÿe, Kontur und Form können diese Kontrolle abschwächen oder

verstärken.47

45vgl. Stapelkamp 2007: Screen- und Interfacedesign, S.29; Heinecke 2004: Mensch-Computer-Interaktion,S.70f

46vgl. Dahm 2006: Grundlagen der Mensch-Computer-Interaktion, S.5647vgl. Kain 2007: Erfassung der Aufmerksamkeitsverteilung auf Webseiten, S.7

16


Wirth (2002) stellt Richtlinien für die Aufmerksamkeitszuwendung zu einem Reiz in Ab-

hängigkeit von dessen Reizmerkmalen auf. Er bezeichnet diese als Aufmerksamkeitsgesetze.

Im Folgenden soll eine Auswahl vorgestellt werden.48

Intensitäts- und Größengesetze Intensive Reize werden eher als wenig intensive Reize

betrachtet. Durch Gröÿe, Kontrast, Konturen, oder seine Komplexität kann die Intensität

bestimmt werden. Je stärker diese Eigenschaften di�erieren, desto höher ist die Wahr-

scheinlichkeit, den Reiz wahrzunehmen.49

Farbgesetze Nach Wirth (2002) sollte bei der Ober�ächengestaltung auf folgende Farb-

gesetze geachtet werden:50

� Es werden eher farbige als grauwertige Reize betrachtet.

� Reine Farben ziehen die Aufmerksamkeit eher an als gemischte Farben.

� Hoch gesättigte Farben werden eher als schwach gesättigte Farben registriert.

� Bunte Reize werden eher als einfarbige Reize wahrgenommen.

� Die Aufmerksamkeit richtet sich eher auf warme als auf kalte Farben aus.

Nach Ergonomiegesichtspunkten sind fünf Farben das absolute Maximum auf einer Websei-

te (von Bildern natürlich abgesehen). Für groÿe Flächen empfehlen sich aufgehellte Farben

mit geringer Sättigung. So kann die Aufmerksamkeit durch farbige Akzente gezielt ge-

lenkt werden. Idealerweise haben die Farben dabei eine konstante Bedeutung, so dass auf

ihre Funktionalität geschlossen werden kann (vgl. auch in Abschnitt 2.2 das Gesetz der

Ähnlichkeit).

Eines lässt sich festhalten: Eine gute Seite funktioniert auch dann, wenn sie in Graustufen

umgewandelt wird.51Daher sollte es vermieden werden, Informationen ausschlieÿlich über

Farbe zu kommunizieren. Menüpunkte können beispielsweise durch einen Formwechsel (ein-

gedrückter Button), oder einen Alternativtext ihren Status zusätzlich sichtbar machen.52

Bei einem internationalen Einsatz einer Webseite ist zu beachten, dass durch kulturelle

Unterschiede die Farben eine unterschiedliche Symbolik besitzen.

Ausnahmegesetz Derjenige Reiz, der sich von allen anderen unterscheidet, hat die

stärkste Zugwirkung für die Aufmerksamkeit. Das Ausnahmegesetz hat einen hohen Stel-

lenwert. Es kann sogar andere Gesetze auÿer Kraft setzen.53 In Abb. 2.9 oben rechts sticht

das eigentlich unscheinbare graue Quadrat aus der Menge heraus.

48vgl. Wirth 2002: Missing Links, S.14449vgl. Wirth 2002: Missing Links, S.14550vgl. Wirth 2002: Missing Links, S.14851vgl. Wirth 2002: Missing Links, S.14952vgl. Thesmann 2010: Einführung in das Design multimedialer Webanwendungen, S.26653vgl. Wirth 2002: Missing Links, S.173

17


Abbildung 2.9.: Redesign BMW Modellseite[Eigene Darstellung, Webdesign © 2010 interone GmbH]

Kombinationsgesetz Die vorangegangenen Aufmerksamkeitsgesetze schlieÿen sich ge-

genseitig nicht aus und können in Kombination zusammen oder gegeneinander wirken.

Nachdem bisher besprochen wurde wie die Aufmerksamkeit gesteigert werden kann, ist

auch die umgekehrte Herangehensweise, also Elemente gezielt unau�ällig zu gestalten,

wichtig. Da der Mensch nur eine begrenzte Menge an Informationen aufnehmen kann,

sollten unwichtige Elemente, bezogen auf das Nutzerziel, nicht in den Fokus gerückt wer-

den.54 In Abb. 2.9 wird die Fuÿleiste der Webseite durch ihre Positionierung am unteren

Bildschirmrand und dem abgeschwächten Kontrast der Schrift zurückhaltend gestaltet.

Bewegung Alles was sich bewegt erhält die höchste Priorität für die Aufmerksamkeit.

Die Registrierung einer Bewegung ist ein natürlicher Re�ex, der nicht willentlich gesteuert

werden kann.55 Selbst wenn es dem Nutzer gelingt, eine Animation zu ignorieren, werden

durch diese Anstrengungen Kapazitätsressourcen verschwendet. Deshalb sollte ihr Einsatz

54vgl. Wirth 2002: Missing Links, S.185f; Nielsen/Pernice 2010: Eyetracking Web Usability, S.15555vgl. Wirth 2002: Missing Links, S.135

18


gut geplant sein. Auf Webseiten ist Bewegung nur dann sinnvoll, wenn die Aufmerksam-

keit schnell auf einen bestimmten Punkt gelenkt werden soll, oder wenn die Animation

bestimmte Sachverhalte erklärt und somit selbst zum Inhalt wird.56

Regeln für den Einsatz von Animationen:57

� Ablenkende Endlosschleifen sind zu vermeiden.

� Animationen müssen kontrollierbar sein.

� Die störende Wirkung einer Animation kann durch sanfte Ein- und Ausblendungen

reduziert werden. Generell gilt, je abrupter der Reiz, desto stärker wird der Nutzer

alarmiert.

� Da sich das periphere Gesichtsfeld nur schlecht an unregelmäÿige Bewegungen an-

passen kann, sollten gleichmäÿige Bewegungen in Animationen bevorzugt werden.

� Auf einer Webseite sollte zeitgleich maximal eine Animation aktiv sein.

� Je weiter in der Peripherie sich eine Animation vollzieht, desto gröÿer sollte sie sein,

damit sie wahrgenommen wird.58

Paradoxerweise werden Animationen gerade wegen ihrer Au�älligkeit meistens von den

Benutzern ignoriert. Das liegt daran, dass Au�älligkeit oft ein Kennzeichen von Werbe-

bannern ist. Wenn sich animierte Elemente der Benutzerober�äche nicht deutlich genug

von der Werbung unterscheiden, ordnen viele Nutzer sie nach dem Gesetz der Ähnlichkeit

unbewusst in diese Kategorie ein und versuchen sie auszublenden.59

Zusammenfassung Die Aufmerksamkeitsgesetze ergänzen die Gestaltgesetze und lie-

fern weitere Hinweise für eine nutzerzentrierte Gestaltung. Eine sorgfältige Beachtung kann

die Aufmerksamkeit des Anwenders gezielt auf relevante Teile der Benutzerober�äche len-

ken, seine Orientierung verbessern und die Nachvollziehbarkeit von Abläufen fördern.

Das nächste Kapitel befasst sich mit dem Prozess von der Konzeption bis zur Gestaltung

einer Ober�äche und demonstriert schrittweise die nutzerfreundliche Gestaltung webspezi-

�scher Elemente.

56vgl. Nielsen 2001: Designing Web Usability, S.143�57vgl. Wirth 2002: Missing Links, S.135; Thissen 2003: Kompendium Screen-Design, S.130; Thesmann 2010:Einführung in das Design multimedialer Webanwendungen, S.332

58vgl. Weber/Immich 2009: Animation im Interface Design - Mehr als nur �Eye Candy�, S.15459vgl. Thesmann 2010: Einführung in das Design multimedialer Webanwendungen, S.333

19

3. Weiterführende Regeln zur Gestaltungvon Webseiten

Der Aufbau dieses Kapitels orientiert sich an der grundsätzlichen Vorgehensweise bei der

Entwicklung von Webseiten und baut auf den wahrnehmungspsychologischen Grundlagen

auf. Im Folgenden werden Handlungsanweisungen für die Gestaltung des Inhalts sowie für

das Navigations- und Interfacedesign erörtert.

3.1. Inhalt

Der Inhalt einer Webseite ist entscheidend für die Bedürfnisbefriedigung der Nutzer. Die

Navigation und Ober�ächengestaltung sind, nüchtern betrachtet, eigentlich nur das Gerüst.

Dementsprechend viel sollte in die inhaltliche Ausarbeitung investiert werden. Ziel ist es,

sowohl die Interessen des Anbieters (Anforderungen kommen häu�g aus dem Marketing)

als auch die der Nutzer zu berücksichtigen.

Die Inhalte sollten sich mit den Anforderungen der Zielgruppe decken und insbesondere

deren Interessen, (Vor-) Wissen und Fähigkeiten sowie Umgangsformen und Kommuni-

kationsregeln entsprechen.60 Instrumente wie Nutzerbefragungen, Contextual Inquiry (die

Nutzer werden im Umgang mit der Seite beobachtet) und Partizipatives Design (die Nutzer

werden aufgefordert die Inhalte nach ihren Wünschen zu gestalten) helfen, diesen Anfor-

derungen gerecht zu werden.

Das Schwierigkeitsniveau der Texte sollte leicht unterhalb der anvisierten Zielgruppe sein.61

Mit der konkreten Gestaltung von Texten beschäftigt sich Abschnitt 3.3.

3.2. Navigationsdesign

Die Voraussetzung für die Nutzung der de�nierten Inhalte ist eine funktionierende Navi-

gation. Erst durch sie können Inhalte gezielt angesteuert werden. Die Navigation sollte

ständig verfügbar sein und eine hohe Usability aufweisen. �Insbesondere ist sie unmit-

telbar verständlich (selbstbeschreibungsfähig), entspricht den Erwartungen der Benutzer

60vgl. Thesmann 2010: Einführung in das Design multimedialer Webanwendungen, S.29561vgl. Galitz 2007: The Essential Guide to User Interface Design, S.565

20

3. Weiterführende Regeln zur Gestaltung von Webseiten

(erwartungskonform) und gestattet dem Besucher, sein Ziel auf unterschiedliche Weisen zu

erreichen. (Steuerbarkeit)�.62

Hauptnavigation

Lokale Navigation

Weitere Untergliederungen

Assoziative Navigation

Sondernavigation

StrukturelleNavigation

Abbildung 3.1.: Navigationsmöglichkeiten[Gra�k nach Kalbach 2008: Handbuch der Webnavigation, S.88]

3.2.1. Navigationsmöglichkeiten

3.2.1.1. Strukturelle Navigation

Die strukturelle Navigation ermöglicht den Nutzern sich innerhalb einer Webseitenhierar-

chie nach oben und unten zu bewegen. Üblicherweise wird sie in die Haupt- und Subnavi-

gation gegliedert.63

Die Hauptnavigation stellt die Seiten auf der obersten Ebene der Website-Struktur dar

und hat folgende Aufgaben zu erfüllen:

Die Hauptnavigation...64

� liefert einen Überblick über das Angebot der Webseite (Produkte, Dienstleistungen)

� hilft bei der Orientierung

� ermöglicht einen schnellen Wechsel zu anderen Themen

� zeigt den Absender (Site-ID)

� bietet eine Suchfunktion

� ermöglicht eine einfache Rückkehr zur Startseite

� beinhaltet wichtige Ziele (Warenkorb, Login)

� sollte eine �ache Hierarchie aufweisen (zu viele Hierarchiestufen überlasten das Ar-

beitsgedächtnis)

� zeigt die wichtigsten Punkte am Anfang.

62Thesmann 2010: Einführung in das Design multimedialer Webanwendungen, S.36163vgl. Thesmann 2010: Einführung in das Design multimedialer Webanwendungen, S.36264vgl. Kalbach 2008: Handbuch der Webnavigation, S.88�; Krug 2006: Don't make me think, S.62; Stapel-kamp 2007: Screen- und Interfacedesign, S.531

21


Die Subnavigation oder auch lokale Navigation bietet Zugri� auf Inhalte innerhalb

einer Seite. Sie arbeitet in der Regel eng mit der Hauptnavigation zusammen. Sie kann

beispielsweise als horizontales und vertikales Menü oder direkt in die Hauptnavigation als

dynamisches Menü integriert werden.65

Ergänzend zur Hauptnavigation werden in der Praxis häu�g auch Navigationspfade

(Krümelleisten) eingesetzt. Sie zeigen den Weg von der Startseite bis zum aktuellen Auf-

enthaltsort. Jeder einzelne Pfad kann in dieser Leiste angewählt werden, um so in jede

Ebene des Verzeichnisses zurückspringen zu können. Durch ihren einfachen Aufbau sind

sie selbsterklärend und benötigen wenig Fläche. Folgende Merkmale haben sich für ihren

Einsatz bewährt:66

� Platzierung oben, wenn möglich in der Nähe der Hauptnavigation.

� Trennung der Ebenen durch ein �>�.

� Verwendung einer kleinen Schrift, um zu verdeutlichen, dass es sich nur um eine

Ergänzung handelt.

� Das letzte Item (entspricht der aktuell aufgerufenen Seite) sollte in der Leiste her-

vorgehoben werden.

Dass es aber auch anders funktionieren kann, zeigt die Webseite von Audi. Der Navigati-

onspfad tritt hier nicht ergänzend auf, sondern wird zum Hauptbestandteil der Navigation.

Durch die groÿe Schrift und die prominente Platzierung fällt er sofort auf und lässt sich

zielsicher bedienen.

Abbildung 3.2.: Hauptnavigation von Audi[http://www.audi.de/de/brand/de/neuwagen/a6/a6_limousine.html?frontend-debug=true, Stand:

19.05.10]

Menügestaltung Bei der Gestaltung von Menüs sollten die Erwartungen des Anwenders

berücksichtigt werden. Empfehlenswert sind Analogien, die sowohl aus dem Alltag bekannt

sind, aber dennoch zum Inhalt bzw. zu den Zielgruppen passen.67 In der Praxis wird in

Hauptnavigationen oft die Registerkarten-Metapher eingesetzt. Aufgrund von Erfahrungen

kann der Nutzer die Funktionsweise aus dem täglichen Leben auf die Anwendung übertra-

gen und sich deshalb schnell zurecht�nden.

Wichtig ist auch, dass der Nutzer sofort die Verbindung zwischen ausgewähltem Oberbe-

gri� und der Liste der zugehörigen Begri�e erkennt. Dabei unterstützt die Beachtung der

Gestaltgesetze68 (siehe 2.2).

65vgl. Kalbach 2008: Handbuch der Webnavigation, S.9166vgl. Krug 2006: Don't make me think, S.77�67vgl. Stapelkamp 2007: Screen- und Interfacedesign, S.53168vgl. Dahm 2006: Grundlagen der Mensch-Computer-Interaktion, S.261

22


Darüber hinaus sollten die Menübezeichnungen konkret und eindeutig sein. Auf Fachjargon

ist deshalb zu verzichten.69 Die Erfahrungen der Benutzer beein�ussen auch hier die Ge-

staltung. Die Wahrscheinlichkeit, dass zwei Menschen unter dem selben Begri� das gleiche

verstehen, ist eher gering. Ein gutes Instrument, um im Vorfeld die von der Mehrheit der

Nutzer präferierten Begri�e zu ermitteln, ist das sogenannte Card Sorting. Nutzer sortieren

bei dieser Methode Begri�e in für sie sinnvolle Gruppen.70

Eine weitere Möglichkeit ist die Nutzung von Website-Statistiken. Sie zeigen unter anderem

auf, welche Suchbegri�e eingegeben wurden und liefern damit Anhaltspunkte nach welchen

Navigationsbeschriftungen die Nutzer suchen.71 Zuletzt sollten die einzelnen Menüpunkte

für eine barrierefreihe Ausführung auch mit einer reinen Tastaturbedienung angesteuert

werden können.72

3.2.1.2. Assoziative Navigation

Die assoziative Navigation verbindet einzelne Seiten über mehrere Hierarchieebenen hin-

weg. Dies geschieht durch sogenannte Hyperlinks. Die Nutzer können dadurch beispiels-

weise zu verwandten oder weiterführenden Themen wechseln. Die Anzahl der Hyperlinks im

Internet hat sich im Zeitraum von 1996 bis 2007 nahezu verdoppelt und dementsprechend

werden die Benutzer mit immer mehr Interaktionsmöglichkeiten konfrontiert.73 Nun stellt

sich die Frage, wie die Nutzer relevante Inhalte aus dem vielfältigen Angebot heraus�ltern.

Nach Wirth (2002) wählen Nutzer Links nach ihrer Attraktivität (Motivation des Nutzers,

Streben nach Bedürfnisbefriedigung) und ihrer räumlichen Distanz aus. Ideal sind somit

Links, die für den Nutzer attraktiv und sofort erreichbar sind. Durch die komplexe Infor-

mationsarchitektur und die individuellen Bedürfnisse ist dies aber nur schwer zu erreichen.

Zudem werden die Nutzer durch abschweifende Links (sogenannte Distraktoren) abgelenkt.

In Abb. 3.3 ist links die Ausgangsposition dargestellt. Der Nutzer bewertet das Ziel für

sich als sehr attraktiv, die Distanz ist jedoch groÿ. In der rechten Abbildung hat er sich

schon in die Richtung des Ziels bewegt, läuft aber Gefahr durch einen Distraktor abgelenkt

zu werden. Die Attraktivität ist zwar nicht so hoch (oft weiÿ der Nutzer nicht wohin der

Link genau führt), allerdings ist die Distanz und somit der Aufwand für den Nutzer so

gering, dass in der Summe der Distraktor positiver bewertet wird. Schlieÿlich wird er

fälschlicherweise ausgewählt und der Nutzer kommt von seinem Weg ab.74 Nielsen (2010)

spricht hier auch von �Miscues�: Die falschen oder momentan nicht hilfreichen Elemente

ziehen Aufmerksamkeit auf sich.75

Durch klare und unmissverständliche Linkbezeichnungen kann diesem Problem begegnet

werden. Der Nutzer kann dadurch Ziele besser unterscheiden und bewerten.69vgl. Dahm 2006: Grundlagen der Mensch-Computer-Interaktion, S.25970vgl. Rubin/Chisnell 2008: Handbook of Usability Testing, S.1871vgl. Kalbach 2008: Handbuch der Webnavigation, S.18772vgl. Thesmann 2010: Einführung in das Design multimedialer Webanwendungen, S.36273vgl. Meier et al. 2009: Empirische Untersuchung der Designgeschichte des WWW, S.4874vgl. Wirth 2002: Missing Links, S.26075vgl. Nielsen/Pernice 2010: Eyetracking Web Usability, S.155

23


Attraktivitätdes Ziels

Nähe zum Ziel

Attraktivitätdes Ziels

Distraktor

Nähe zum Ziel

Abbildung 3.3.: Ablenkung durch Distraktoren[Gra�k nach Wirth 2002: Missing Links, S.260]

Gestaltung von Links und Buttons Links und Buttons müssen als solche erkannt wer-

den. Norman (1988) statuiert in diesem Zusammenhang, dass Nutzer ein bestimmtes Ver-

halten von einem Objekt erwarten. Jedes Objekt hat dabei eine spezi�sche wahrgenomme-

ne und tatsächliche A�ordance (Angebotscharakter).76 Stimmt das tatsächliche Verhalten

nicht mit dem wahrgenommenen überein, kann es passieren, dass der User ein Interface

erschwert, falsch oder gar nicht bedienen kann.77

Von einem Button erwartet man beispielsweise, dass man ihn drücken kann. Durch eine

dreidimensionale Anmutung kann dieser Eindruck verstärkt werden. In Abb. 3.4 hat somit

der linke Button die beste wahrgenommene A�ordance.

Abbildung 3.4.: Angebotscharakter von Buttons[Gra�k nach Krug 2006: Don't make me think, S.15]

Weitere Anforderungen an die Gestaltung von Links und Buttons:

� Der Linktitel (Zusatzinformation im Mouse-Over-Status) sollte Details liefern, welche

Inhalte zu �nden sind.78

� Groÿe Link- oder Button�ächen verbessern den Bedienkomfort, können jedoch im

Layout störend wirken.79

� Mouse-Over-Zustände sollten immer mit ausreichendem Kontrast belegt sein (Bar-

rierefreiheit: Eine Kodierung allein durch die Farbe reicht nicht aus).80

� Durch Schrifttyp, Auszeichnung und/oder Farbe können Links vom restlichen Text

hervorgehoben werden.81

� Gleiche Interaktionsmöglichkeiten sollten auch immer gleich gestaltet sein.82

76vgl. Norman 1989: The design of everyday things, S.977vgl. Norman 1989: The design of everyday things, S.17978vgl. Nielsen 2001: Designing Web Usability, S.6079vgl. Scott/Neil 2009: Designing Web Interfaces, S.8080vgl. Kalbach 2008: Handbuch der Webnavigation, S.28181vgl. Dahm 2006: Grundlagen der Mensch-Computer-Interaktion, S.26482vgl. Norman 1989: The design of everyday things, S.179

24


3.2.1.3. Sondernavigation

Die Sondernavigation oder auch Utilitynavigation verbindet Nutzer mit speziellen Seiten,

Werkzeugen oder Features, die bei der Nutzung der Webseite unterstützen. Zu erwähnen

sind unter anderem Steuermöglichkeiten für Bildergalerien, Audio-, Video-, Animations-

elemente, oder Links zu Suchformularen und Hilfeseiten.83

3.2.2. Nutzererwartungen

Durch den Gebrauch des Internets entwickeln Nutzer Erwartungen hinsichtlich des Aufbaus

und der Interaktion mit Webseiten. Um eine gute Benutzerfreundlichkeit zu gewährleisten,

sollten etablierte Standards eingehalten werden, um die Suchzeiten zu reduzieren und die

Orienterung zu erleichtern.84 Nutzer kommen oft mit einem bestimmten Vorwissen auf eine

Webseite und �nden sich nur dann leicht zurecht, wenn sich die Webseite so verhält, wie

sie es von anderen Angeboten gewohnt sind.85

Priorität 1 Priorität 2 Priorität 3

Erwartungsgerechte Anordnung von Bildschirmelementen

prioritätszonen nach outing/ruel

In der Regel fällt der erste Blick auf den oberen linken Bereich und dort schweift er eine Weile umher. Erst nachgenauerer Prüfung des oberen Bereichs beginnt die Erkundung des restlichen Bereichs. Während im oberen Bereich genauer gelesenwird, tasten die Benutzer den unteren Bereich nur nach Eye-Catchern ab. Die Zonen höchster Priorität eignen sich am besteb um das Interesse des Benutzers zu wecken und ihm die Orientierung zu erleichtern,während Informationen, die sich im unteren Abschnitt be�nden, insbesondere wenn dazu gescrolt werden muss wenig beachtung �nden.Die Ergebnisse zeigen aber auch deutlich, das der Blickverlauf keineswegs einem starren Blickmuster folgt, sondern auch durch das Design beein�usst wird. thesmann s.202

Organisation of pages:Klares Design unterstützt das freie und leichte Explorieren einer Seite.Die Elemente einer Seite sollten in gelernter Weise angeordnet sein:- Hauptnavigation oben oder seitlich links- Logo oben links- Das Suchfeld in der rechten oberen Ecke- Warenkorb, Kontakt, Händlersuche ebenfalls oben rechts positionierenNielsen 2010, Eyetracking Web Usability,S.66

Logo/Startseite Hauptnavigation

Hauptnavigation

SucheHilfe

Linkliste

SitemapKontakt/Impressum

Navigationspfad Warenkorb

Abbildung 3.5.: Nutzererwartungen und Prioritätszonen[Eigene Darstellung. In Anlehnung an Outing/Ruel 2004: The Best of Eyetrack III: What We Saw When

We Looked Through Their Eyes 2004, WWW, vgl. Nielsen/Pernice 2010: Eyetracking Web Usability,

S.66]

Nach einer Studie von Outing/Ruel (2004) fällt in der Regel der erste Blick auf den oberen

linken Bereich und schweift dort eine Weile umher. Erst nach genauerer Musterung des

83vgl. Thesmann 2010: Einführung in das Design multimedialer Webanwendungen, S.362; Kalbach 2008:Handbuch der Webnavigation, S.100

84vgl. Wirth 2002: Missing Links, S.17185vgl. Krug 2006: Don't make me think, S.34

25


oberen Bereichs beginnt die Erkundung der restlichen Seite. Während im oberen Bereich

genauer gelesen wird, tasten die Benutzer den unteren Teil nur nach Eye-Catchern ab. Die

Zonen höchster Priorität eignen sich am besten, um das Interesse des Benutzers zu wecken

und ihm die Orientierung zu erleichtern.86 Am prominentesten wirken Inhalte direkt unter

der Hauptnavigation.87 Eher wenig Beachtung �nden Informationen, die sich im unteren

Abschnitt be�nden, insbesondere wenn dazu gescrollt werden muss.

Die Ergebnisse hängen jedoch stark vom Untersuchungsgegenstand ab und können deshalb

nur Anhaltspunkte liefern (obwohl auch aktuellere Untersuchungen, unter anderem die

Marktforschungsstudie 2006 von Shaikh und Lenz88, zu ähnlichen Ergebnissen kommen).

Um zu gewährleisten, dass Nutzer sich sofort zurecht�nden, sollten nach Nielsen (2010) die

Elemente einer Webseite in folgender Weise angeordnet sein:89 (vgl. auch 2.1.4)

� Logo oben links.

� Hauptnavigation oben oder am linken Rand.

� Suchfeld, Warenkorb und Händlersuche in der rechten oberen Ecke.

� Impressum, Sitemap am unteren Rand.

� Steuerelemente, die häu�g benötigt werden sollten am Beginn der Seite stehen. Um-

gekehrt sollten selten benutzte Elemente weiter unten stehen.

Generell lässt sich festhalten, dass Nutzer immer zuerst auf der linken Seite wichtige Be-

fehle erwarten. Wenn diese Befehle hier nicht zu �nden sind, müssen sie zusätzliche Blicke

investieren.

Trotz allen Vorteilen, die ein standardisiertes Layout bietet, kann fehlende Individualität

aber auch leicht in die Monotonie führen. Letztendlich ist es Aufgabe des Interfacedesigns

durch visuelle Stimuli den Blick zu steuern und dadurch auch alternative Bildschirmstruk-

turen möglich zu machen.90

Suchfelder Die Nutzer tendieren in den letzten Jahren dazu, längere Suchbegri�e bzw.

Suchkombinationen einzugeben. Nielsen hat ermittelt, dass 27 % der Anfragen so ausführ-

lich sind, dass sie nicht mehr in das Feld passen. Das Suchfeld sollte deshalb seiner Meinung

nach ca. 27 Zeichen lang sein (ausreichend für 90 % der Nutzeranfragen) und auÿerdem

auf jeder Seite platziert werden.91

Im Suchfeld von Audi �nden sogar 30 Zeichen Platz. Leider ist der Text so klein dargestellt,

dass man ihn nur mit Mühe lesen kann. Die Aufnahmekapazität des Suchfelds darf somit

86vgl. Outing/Ruel 2004 WWW: The Best of Eyetrack III: What We Saw When We Looked Through TheirEyes 2004

87vgl. Nielsen/Pernice 2010: Eyetracking Web Usability, S.7288vgl. Shaikh/Lenz 2006 WWW: Where's the search? Re-examining User Expectations of Web Objects89vgl. Nielsen/Pernice 2010: Eyetracking Web Usability, S.6690vgl. Thesmann 2010: Einführung in das Design multimedialer Webanwendungen, S.29691vgl. Nielsen/Loranger 2006: Prioritizing Web Usability, S.148

26


nicht zu Lasten der Lesbarkeit gehen. Das Textfeld von Lexus (links) hat dagegen eine

optimale Schriftgröÿe.

Abbildung 3.6.: Suchfelder (Lexus und Audi)

3.2.3. Einflussfaktoren für die Darstellung einer Webseite

Es soll an dieser Stelle kurz gezeigt werden, welche Faktoren die Darstellungsgröÿe einer

Webseite beein�ussen und welche Konsequenzen sich daraus ergeben. Beispielhaft wird von

einem Windows 7 Betriebssystem und einem Firefox 3.0 als Webbrowser ausgegangen. In

der folgenden Abbildung wird dargestellt, wie viel die einzelnen Komponenten bei einer

Bildschirmau�ösung von 1024x768 Pixel92 an Platz beanspruchen.

Abbildung 3.7.: Flächenaufteilung[Eigene Darstellung]

In diesem Beispiel bleiben für die eigentliche Darstellung der Webseite nur ca. 72 % der

maximal verfügbaren Fläche. Je nachdem welcher Browser und welches Betriebssystem

gewählt wird, können sich die Werte noch ändern (von der eingestellten Schriftgröÿe und

installierten Plugins ganz abgesehen). Ein Vergleich von drei Browsern und den gängigsten

Betriebssystemen hat gezeigt, dass im Durchschnitt ca. 163 Pixel in der Höhe verbraucht

werden.93

92vgl. Web-Barometer (Bildschirmau�ösungen) 2010 WWW: Nach dem Webbarometer von WebHits ist dieAu�ösung von 1024 x 768 Pixel mit einem Anteil von 39,1 % am weitesten verbreitet. (Stand: 26.03.2010)

93Die Au�istung und die Berechnung dieses Durchschnittswertes ist dem Anhang [A.3] zu entnehmen

27


Scrollen Passen aufgrund der Rahmenbedingungen nicht alle Inhalte gleichzeitig auf den

Bildschirm, muss der Nutzer die Scrollbalken benutzen. Es wird also vom Besucher eine

eigene Aktion erwartet. Studien haben gezeigt, dass nur 23 % der Nutzer bei ihrem ersten

Besuch scrollen. Generell �ndet der Scrollbalken wenig Beachtung (der Blick fällt erst

spät auf die rechte Seite, siehe 3.2.2.). Das hat unter anderem damit zu tun, dass bei der

e�ektiven Verarbeitung von Informationen nicht der gesamte Bildschirm betrachtet werden

kann.94

In vielen Fällen kann aber nicht verhindert werden, das Inhalte gescrollt werden müssen.

Gewöhnlich wird das vertikale Scrollen von bis zu drei Bildschirmen toleriert.95 Horizon-

tales Scrollen ist sehr unüblich und sollte vermieden werden. Besucher erwarten rechts am

Bildschirm keine weitere Funktion.96

Ob der Nutzer tatsächlich scrollt, hängt stark von der Platzierung kritischer Seitenelemen-

te ab. Be�ndet sich am Ende der Seite eine weiÿe Fläche, nehmen die meisten Betrachter

an, das Ende sei erreicht. Hier können sich auch die Gestaltgesetze gegeneinander aus-

spielen. Eine Linie, die zur Trennung von Absätzen gedacht war, kann als Ende der Seite

interpretiert werden.

Das gra�sche Design und Layout sollte daher Auslösereize bieten, die den Nutzer auf

weitere Informationen hinweisen. Elemente wie Texte und Bilder, die gerade noch sichtbar

sind, signalisieren zusätzliche Inhalte.97 Die Grenze ist jedoch schmal und kann aufgrund

vieler Ein�ussfaktoren nicht genau bestimmt werden. Um sicher zu stellen, dass wichtige

Elemente wahrgenommen werden, sollten sie deshalb möglichst weit oben platziert werden.

Das Layout zum BMW Relaunch lässt bei einer Au�ösung von 1024x768px nicht erkennen,

dass sich unterhalb der Seite weitere Inhalte be�nden. Durch den Weiÿraum wirkt die Seite

sehr abgeschlossen. Der einzige Indikator ist der Scrollbalken am rechten Rand.

Abbildung 3.8.: BMW Startseite (Au�ösung 1024x768px)[Eigene Darstellung, Webdesign © 2010 interone GmbH]

94vgl. Nielsen/Loranger 2006: Prioritizing Web Usability, S.32395vgl. Dahm 2006: Grundlagen der Mensch-Computer-Interaktion, S.26896vgl. Thesmann 2010: Einführung in das Design multimedialer Webanwendungen, S.29997vgl. Nielsen/Loranger 2006: Prioritizing Web Usability, S.324

28


3.2.4. Besonderheiten der Navigation in Rich Internet Applications

In den letzten Jahren verschwimmen zunehmend die Grenzen zwischen Webanwendungen

und Desktop Programmen. Rich Internet Applications (RIA) simulieren die Funktionalität

und den Look & Feel von gewöhnlicher Desktopsoftware und übertragen diese auf Weban-

wendungen. Verglichen mit normalen Webseiten bieten sie neue Funktionalitäten, Inhalte

und Interaktionsmöglichkeiten. 98 Im Automobilbereich werden RIAs unter anderem in

Online Specials und Fahrzeugkon�guratoren eingesetzt.

Abbildung 3.9.: Anwendungsbeispiele für Rich Internet Applications[Eigene Darstellung]

Eigenschaften von Rich Internet Applications:

Ein-Seiten-Modell Gewöhnliche Webseiten bestehen aus einer Verkettung von einzelnen

Seiten (Seitenmetapher). Bei jedem Klick wird nach einer kurzen Zeitverzögerung eine neue

Seite aufgerufen. Dabei macht es keinen Unterschied, ob der komplette Inhalt oder nur ein

Wort geändert wurde. Das macht dieses Prinzip vergleichsweise langsam. Allerdings haben

die Nutzer diese Seitenmetapher mittlerweile internalisiert und erwarten, dass eine Websei-

te nach diesem Muster funktioniert.99 Die Startverzögerung ist somit zu einem vertrauten

Mangel geworden.

Im Gegensatz dazu bedienen sich RIAs des Ein-Seiten-Modells. Durch neue Technlogien

wie AJAX100 und Flash können neue Seiten dynamisch in die bestehende geladen wer-

den.101 Dies geschieht oft so schnell, dass der Benutzer Veränderungen nicht wahrnimmt.

Umso wichtiger ist es deshalb, dem Nutzer Feedback zu geben, dass neue Inhalte geladen

98vgl. Kalbach 2008: Handbuch der Webnavigation, S.34999vgl. Linder 2009: Die Usability von Rich Internet Applications, S.85

100Stapelkamp 2007: Screen- und Interfacedesign, S.277: �Durch den Einsatz der AJAX-Technologie ist es mög-lich, die Website interaktiver und benutzerfreundlicher zu gestalten. AJAX steht für asynchrones Javascriptmit XML und beschreibt eine Programmiertechnik, durch die Internetseiten ähnlich wie Desktopanwen-dungen funktionieren. So wird nicht bei jedem Klick die komplette Seite neu geladen und im Browseraufgebaut, sondern immer nur die Bereiche und Daten, die es betri�t.�

101vgl. Kalbach 2008: Handbuch der Webnavigation, S.349

29


wurden.102 Es kann sogar sinnvoll sein, eine Ausführung bewusst zu verzögern, um dem

Nutzer Zeit zu geben, sich auf die aktualisierten Inhalte zu konzentrieren.103

Weitere Komplikationen ergeben sich durch die mangelhafte Browserunterstützung des Ein-

Seiten-Modells. Der häu�g benutzte �Zurück-Button� funktioniert bei RIAs meistens nicht,

bzw. kann einen ganzen Prozess auch ungewollt abbrechen. Deshalb sollten Eingaben und

Einstellungen der Nutzer ständig zwischengespeichert und Warnmeldungen ausgegeben

werden, wenn Daten verloren gehen können.104

Echtzeit-Manipulation In RIAs ist es möglich Inhalte direkt auf der Webseite zu editie-

ren. Zur Bearbeitung muss also nicht, wie sonst üblich, eine neue Seite geö�net werden.

Es existiert keine Trennung von Input und Output. Das User Interface reagiert direkt

auf die Nutzeraktion und liefert dadurch eine bessere User Experience.105 Die wichtigsten

Manipulationen sind:106

� In-Page-Editing: Texte können direkt auf der Seite bearbeitet und abgespeichert

werden.

� Direkte Auswahlen: Ähnlich dem Desktop können mehrere Elemente ausgewählt

(durch ziehen eines Mausrahmens) oder durch Tastenkombinationen verschiedene

Objekte selektiert werden.

� Echtzeit-Filterung von Inhalten.

� Drag and Drop Optionen: Wie bei normalen Desktopanwendungen können Ele-

mente in RIAs verschoben werden. igoogle nutzt dieses Feature auf seiner Startseite.

Wichtig ist, dass der Nutzer erkennen sollte, welche Objekte er verschieben kann

(Hinweistext).107 Während des Verschiebens sollte das Objekt leicht durchsichtig

sein, um andere Elemente der Homepage nicht zu verdecken. Durch klares visuel-

les Feedback muss der Nutzer schlieÿlich erkennen können, wo er das Objekt neu

platzieren kann.108

� Schwenken und Zoomen von Bildern.

Kontextsensible Schaltflächen Kontextsensible Schalt�ächen entsprechen der Funkti-

onsweise von Kontextmenüs in Desktopumgebungen. Es können zwei Darstellungsmöglich-

keiten unterschieden werden:

Sichtbarkeit bei Mouse-Over: Erst wenn der Nutzer ein bestimmtes Objekt berührt,

ö�net sich ein Kontextmenü. Funktionen werden somit erst sichtbar, wenn sie gebraucht

102vgl. Kalbach 2008: Handbuch der Webnavigation, S.355103vgl. Puscher 2009: Leitfaden Web-Usability, S.167104vgl. Kalbach 2008: Handbuch der Webnavigation, S.357105vgl. Scott/Neil 2009: Designing Web Interfaces, S.1�106vgl. Scott/Neil 2009: Designing Web Interfaces, S.25�; Kalbach 2008: Handbuch der Webnavigation, S.361�107vgl. Kalbach 2008: Handbuch der Webnavigation, S.362108vgl. Scott/Neil 2009: Designing Web Interfaces, S.25�; Kalbach 2008: Handbuch der Webnavigation, S.25�

30


werden. Die Anzahl der dargestellten Elemente wird reduziert und das Layout wird über-

sichtlicher.109 Nachteile: Der Nutzer muss das Interface erst absuchen, um an die Kontext-

menüs zu gelangen. Mouse-Over-E�ekte können je nach Ausführung zudem benachbarte

Elemente verdecken.110 Hat der Nutzer aber die Funktionsweise verstanden, ist diese Dar-

stellung sehr e�ektiv. Um den Nutzer bei der freien Exploration auf der Seite nicht zu

stören, sollte der Mouse-Over-E�ekt um ca. 0,5 Sekunden verzögert werden. Ansonsten

würden stetig neue Fenster aufspringen. Wenn der Mauszeiger die Schalt�äche verlässt,

sollte sie sofort verschwinden.111

Abbildung 3.10.: Kontextsensible Schalt�äche bei Mouse-Over[http://www.amazon.com/Designing-Digital-Age-Human-Centered-

Products/dp/0470229101/ref=pd_sim_b_1]

Ständige Sichtbarkeit: Sie haben den Vorteil, dass sie sofort au�allen und sind damit vor

allem für wichtige und neuartige Funktionen geeignet. Sie beanspruchen aber viel Fläche

und stehen in Konkurrenz zu den anderen Elementen auf dem Bildschirm.112

Anwendungsgesteuerte Pop-Up-Fenster In RIAs können Pop-Up-Fenster direkt in

die Anwendung eingebunden werden. Sie ö�nen sich dadurch sehr schnell und das Erschei-

nungsbild kann bestimmt werden. Sie werden oft genutzt um Eingabeoptionen aufzuzeigen,

Fortschritte darzustellen, oder Instruktionen zu geben.113 Durch gleichzeitige Abdunklung

des Hintergrunds und/oder Schattierungen kann erreicht werden, dass die Fenster in den

Vordergrund rücken und die Aufmerksamkeit des Nutzers �xiert wird.114

In Abb. 3.11 verwendet amazon.com das Fenster um Bücher im Detail vorzustellen.

109vgl. Scott/Neil 2009: Designing Web Interfaces, S.85110vgl. Scott/Neil 2009: Designing Web Interfaces, S.88111vgl. Scott/Neil 2009: Designing Web Interfaces, S.114112vgl. Scott/Neil 2009: Designing Web Interfaces, S.82f113vgl. Scott/Neil 2009: Designing Web Interfaces, S.106114vgl. Scott/Neil 2009: Designing Web Interfaces, S.109

31


Abbildung 3.11.: Anwendungsgesteuertes Pop-Up Fenster[http://www.amazon.com/Designing-Digital-Age-Human-Centered-

Products/dp/0470229101/ref=pd_sim_b_1#reader_0470229101]

Gezielte Lenkung der Aufmerksamkeit Durch die vielen Interaktionsmöglichkeiten in

einer Rich Internet Application kann der Nutzer leicht den Überblick verlieren. Ein e�ekti-

ves Stilmittel zur Lenkung der Aufmerksamkeit sind Animationen. Sie können dazu dienen

den Nutzer auf systemseitige Ereignisse aufmerksam zu machen und/oder ihn auf Ereignis-

se in der Peripherie des Interfaces hinzuweisen.115 Sie sollten aber bewusst kurz gehalten

werden, um die Interaktion nicht zu behindern.116 Besonders sinnvoll sind Animationen

die den Fortschritt kommunizieren, bedeutungsvolles Feedback geben und Prozesse und

Konzepte verdeutlichen.117

In der Realität erscheinen oder verschwinden Dinge nicht abrupt. Das Interfacedesign soll-

te dies berücksichtigen.118 Norman (1989) spricht hier vom Natural Design. Natürliche

Signale werden natürlich interpretiert und ohne groÿen Aufwand verarbeitet.119 Bezogen

auf Animationen sind dies beispielsweise:120

� wenn ein Objekt langsam verschwindet, weiÿ der Nutzer, dass das Objekt bald nicht

mehr verfügbar ist

� wenn ein Objekt langsam erscheint, weiÿ der Nutzer, dass das Objekt bald zur Nut-

zung bereit ist

� wenn ein Objekt schnell erscheint, wird es als wichtiger empfunden, als wenn es

langsam erscheint

� wenn sich ein Objekt vergröÿert (also auf den Benutzer zukommt), wird es wichtiger

angesehen, als wenn es sich verkleinert und damit wegbewegt

115vgl. Weber/Immich 2009: Animation im Interface Design - Mehr als nur �Eye Candy�, S.153116vgl. Scott/Neil 2009: Designing Web Interfaces, S.231117vgl. Apple 2010 WWW: Apple Human Interface Guidelines, S.42f118vgl. Scott/Neil 2009: Designing Web Interfaces, S.234119vgl. Norman 1989: The design of everyday things, S.4120vgl. Scott/Neil 2009: Designing Web Interfaces, S.234

32


Animationen helfen demnach in zweierlei Hinsicht die Qualität der User Interfaces zu ver-

bessern. Erstens durch eine Verringerung der mentalen Arbeitsbelastung, weil Animationen

Fragen wie: �Wo kommt das her?; Wo führt mich das hin?� implizit erklären. Zum zweiten

wird die wahrgenommene Attraktivität der Bediensituation erhöht (stete Dynamik lädt

zur Interaktion ein).121

Induktive Designtechniken Nutzer müssen auf Anhieb verstehen wie eine Seite funktio-

niert. Die Lernkurven sollten deshalb so kurz wie möglich sein. �Induktive Designtechniken

strukturieren den Task�ow einer Applikation (...) und teilen komplexe Aktionen in kleine-

re, überschaubare Schritte.�122 Sie greifen somit die Seitenmetapher auf. Für jede Aufgabe

gibt es eine neue Seite. Während der Bearbeitung sollte immer klar sein, wann die aktu-

elle Aufgabe abgeschlossen ist und die nächste angefangen werden kann. Weiterhin sollte

der Gesamtfortschritt permanent sichtbar sein. Die Technik bietet speziell für unerfahre-

ne Nutzer viel Führung. Um an das Ziel zu kommen, müssen sie sich nur an den Ablauf

halten. Für erfahrene User ist der Prozess aber zu ine�zient, da sie an den vorgegebenen

Weg gebunden sind.123 In der Praxis wird die Technik oft im Kaufprozess eingesetzt.

Zusammenfassung Gutes Navigationsdesign ermöglicht es dem Nutzer einen individu-

ellen Zugang zu den gewünschten Informationen zu erhalten. Er fühlt sich stärker in die

jeweiligen Zusammenhänge integriert und begibt sich weg von statischen Inhalten hin zu

dynamischen Informationswelten. Es gilt die Vielfalt und Vielseitigkeit der Anwendung mit

Erfahrungen der Nutzer zu verbinden, um neue positive Erlebnisse zu ermöglichen.

3.3. Interfacedesign

Während das Navigationsdesign die Funktionalität einer Internetseite de�niert, stellt das

Interfacedesign die Form der Präsentation dar. Es existiert aber keine klare Trennung. Form

und Funktion wirken aufeinander ein und beein�ussen sich gegenseitig. Ein gutes Beispiel

ist das Design von Schalt�ächen, worüber schon im letzen Abschnitt gesprochen wurde.

Das Interfacedesign hat somit unter anderem die Aufgabe, die funktionalen Aspekte eines

Produkts zu konkretisieren und zu unterstützen. Im Folgenden sollen Gestaltungsempfeh-

lungen zu weiteren elementaren Elementen des Interfacedesigns formuliert werden.

3.3.1. Layout

Um dem Nutzer die Orientierung in einer Webseite zu erleichtern, sollte auf eine konsisten-

te Gestaltung geachtet werden. Dies gewährleistet ein Gestaltungsraster. Es de�niert die

121vgl. Jacob 2009: Usable Motion - Das Usabilitypotenzial bewegter Gra�k, S.148122Kalbach 2008: Handbuch der Webnavigation, S.376123vgl. Kalbach 2008: Handbuch der Webnavigation, S.377f

33


genaue Gliederung von Flächen und die Platzierung und Gröÿe von einzelnen Elementen.

Die festgelegten Normen werden in einem sogenannten Styleguide festgehalten.124

Flächen und Elemente werden dabei besonders ästhetisch und harmonisch empfunden,

wenn ihre Proportionen bestimmten Gesetzmäÿigkeiten folgen. Die bedeutenste Proporti-

onsregel ist der Goldene Schnitt. Er berechnet sich folgendermaÿen: Der kleinere Teil einer

Strecke verhält sich zum gröÿeren Teil, wie der gröÿere Teil zur Gesamtstrecke. Die Regel

lässt sich dabei beliebig weit unterteilen.125

3.3.2. Texte

Text ist immer noch die bedeutenste Form der Informationsübertragung. Die Gestaltung

eines gut lesbaren Textes ist deshalb Grundvoraussetzung zur Sicherung einer ergonomi-

schen Qualität. Zunächst ist zu beachten, dass Text am Bildschirm einem ganz anderen

Rezeptionsverhalten unterworfen ist als Text auf Papier. Am Bildschirm ermüden die Au-

gen viel schneller, weshalb die Leser dazu neigen, den Inhalt zuerst grob zu über�iegen

und nach besonders markanten Informationen wie beispielsweise Überschriften zu suchen.

In diesem Zusammenhang spricht man auch vom �Scannen�, in der die schwebende Auf-

merksamkeit hoch aktiv ist. Bei der schwebenden Aufmerksamkeit werden sehr viele In-

formationen in kurzer Zeit aufgenommen, allerdings mit einem hohen Verlust an Qualität.

Wird ein Teil des Inhalts nach dem Scannen als relevant bewertet, wechselt das Lesever-

halten in das sogenannte �Skimmen�. Die Geschwindigkeit wird reduziert und die Menge

der aufgenommenen Informationen nimmt zu. Es werden nun auch Teile des Flieÿtextes,

Zusammenfassungen oder Hervorhebungen erfasst. Das eigentliche Lesen beginnt erst in

der letzten Phase. Die Geschwindigkeit nimmt weiter ab und der Nutzer beginnt die In-

formationen systematisch und vollständig aufzunehmen.126 Da die meisten Nutzer nach

diesem Schema Webseiten absuchen, sollten die Inhalte so aufbereitet sein, dass sie das

Scannen und Skimmen möglichst gut unterstützen:

� Klare Struktierung des Textes. Das Wichtigste sollte am Anfang stehen. Bei längeren

Texten Zwischenüberschriften verwenden.127

� Durch Absätze optische Einheiten bilden (visual chunks).128

� Der Zeilenabstand sollte 1,5 bis 2 betragen.129

� Das Layout nicht überfüllen. Durch leere Flächen bekommt der Text mehr Präg-

nanz.130

� Texte, bedingt durch den Lese�uss, linksseitig ausrichten.131

124vgl. Stapelkamp 2007: Screen- und Interfacedesign, S.262125vgl. Thesmann 2010: Einführung in das Design multimedialer Webanwendungen, S.213126vgl. Wirth 2002: Missing Links, S.207127vgl. Wirth 2002: Missing Links, S.207128vgl. Thissen 2003: Kompendium Screen Design, S.98129vgl. Thissen 2003: Kompendium Screen Design, S.98130vgl. Thissen 2003: Kompendium Screen Design, S.99131vgl. Galitz 2007: The Essential Guide to User Interface Design, S.578

34


� Zu hohen und zu geringen Kontrast vermeiden. Durch einen weiÿen Hintergrund

ermüden die Augen noch schneller. Geeignet für den Texthintergrund sind entsättigte,

helle Farben.132

� Zum schnellen Über�iegen bieten sich Listen an. Wichtige Elemente sollten am An-

fang oder am Ende positioniert werden. Dort werden die Elemente besser behalten.133

� Relevante Inhalte hervorheben.134

� Für das Scannen sind ungefähr 50 Zeichen pro Zeile ideal. Für eine schnelle Lesbarkeit

ca. 75-100.135

Allgemeine Empfehlungen zur typogra�schen Umsetzung von Texten am Bildschirm:

� Eine Schriftgröÿe von 0,3-0,5 Grad Sehwinkel hat sich als optimal für eine e�ziente

Erkennung von Flieÿtext erwiesen. Für einen Bildschirm in 50 cm Entfernung bedeu-

tet dies eine Schrifthöhe von 4,4 mm (entspricht bei einer Au�ösung von 1024x768px

ungefähr einer Schriftgröÿe von 10-12 Punkt). Die Bildschirmarbeitsverordnung emp-

�ehlt sogar 14-16 Punkt.136

� Bei Schriften unter 12 Punkt sollte zugunsten der Lesbarkeit auf Kantenglättung

verzichtet werden. Ansonsten verschwimmen die Buchstaben.137

� Serifenbehaftete Schriften sind für die Darstellung am Bildschirm eher ungeeignet,

da ihre feinen Serifen durch den leuchtenden Hintergrund überstrahlt werden.138

� Versalien eignen sich hauptsächlich für Überschriften. Durch ihre geringen Unterschie-

de im Erscheinungsbild sollten sie in längeren Texten nicht verwendet werden.139

� Es sollten maximal zwei bis drei Schriftarten in einem Text kombiniert werden. An-

sonsten leidet die Lesegeschwindigkeit.140

Zusammenfassend betrachtet sollten bei der Gestaltung von Informationen die Inhalte

und nicht die Typogra�e im Vordergrund stehen. Gute Typogra�e unterstützt und ergänzt

Informationen. Wenn sie erfolgreich gestaltet wurde, werden Inhalte leicht und sogar gerne

nutzbar.

3.3.3. Icons

Auf vielen Webseiten werden bildliche Darstellungen von Objekten und Funktionen ein-

gesetzt, anstatt sie sprachlich zu beschreiben. Im Gegensatz zu Texten sind Icons damit

meistens kulturübergreifend interpretierbar.141

132vgl. Thesmann 2010: Einführung in das Design multimedialer Webanwendungen, S.311133vgl. Galitz 2007: The Essential Guide to User Interface Design, S.79134vgl. Thesmann 2010: Einführung in das Design multimedialer Webanwendungen, S.307135vgl. Galitz 2007: The Essential Guide to User Interface Design, S.580136vgl. Heinecke 2004: Mensch-Computer-Interaktion, S.133137vgl. Nielsen/Loranger 2006: Prioritizing Web Usability, S.220138vgl. Thesmann 2010: Einführung in das Design multimedialer Webanwendungen, S.304139vgl. Thesmann 2010: Einführung in das Design multimedialer Webanwendungen, S.294140vgl. Lotterbach et al. 2009: Typogra�e und Gebrauchstauglichkeit: Benutzerfreundliche Schriftgestaltung,

S.116141vgl. Thesmann 2010: Einführung in das Design multimedialer Webanwendungen, S.364

35


Ein wesentliches Ziel bei der Gestaltung von Icons ist es, dass der Benutzer die Funktion

eindeutig aus dem Icon ableiten kann. Durch den Einsatz bildlicher Metaphern kann ein

hoher Grad an Selbsterklärungsfähigkeit erreicht werden.142

Die ausschlieÿliche Verwendung von Icons kann jedoch zu Missinterpretationen führen.

Es gibt nur wenige allgemeinbekannte Icons (z. B.: Warenkorb, Lupe, Briefumschlag), die

auch ohne zusätzliche Beschreibung funktionieren. Von den meisten Nutzern wird eine

Kombination von Icon und Text bevorzugt. Der Text kann dabei direkt neben dem Icon

stehen, oder als Tooltipp dargestellt werden.143

Bei der Gestaltung von Icons für Internetseiten sind folgende Punkte zu beachten:

� Ein Icon sollte so einfach wie möglich gestaltet werden, um die kognitive Belastung

mit Infomationen so gering wie möglich zu halten.144 Ein hoher Grad an Abstraktion,

prägnante Formen und wenige Farben lassen die Bedeutung schnell erkennen. Zudem

funktionieren sie auch noch in sehr kleinen Gröÿen.145

� Zu viele Icons auf einer Seite verwirren und sollten vermieden werden.

� Ein Icon sollte sich deutlich vom Hintergrund trennen.146

� Ein ausgewähltes Icon sollte sich deutlich von den anderen abheben.147

� Zusammengehörige Icons sollten in einer Gruppe angeordnet werden. Dabei ist es

wichtig, dass die Icons zwar als zusammengehörig empfunden werden, sich aber trotz-

dem deutlich voneinander unterscheiden. Mehr als sieben Icons sind nicht zu emp-

fehlen (siehe 2.1.3). Zuletzt sollten sie in sinnvoller Reihenfolge angeordnet sein.148

� Zur Förderung der Konsistenz sollte auf bereits vorhandene Icons zurückgegri�en

werden. Etablierte Motive sind tendenziell besser als neue, da sie über Jahre gelernt

wurden. Im Gegensatz zu normaler Software sind Internetnutzer nämlich nicht bereit,

die Funktionen einzelner Icons zu erlernen.149

Bei einer Neuentwicklung von Icons kann durch den Einsatz von Nutzerbefragungen die

Akzeptanz und das Verständnis überprüft werden. Testpersonen können zum Beispiel unter

bestimmten Vorgaben eigene Vorschläge skizzieren.150 Eine zerti�zierte und systematische

Vorgehensweise bietet das ISO-Testverfahren für gra�sche Symbole. Probanden werden

in einem sogenannten Icon-Judgement-Test zuerst verschiedene Icons mit de�nierten Ver-

wendungszwecken vorgelegt. Danach werden die Nutzer aufgefordert, jedes Symbol nach

Verständlichkeit zu bewerten, indem sie die prozentuale Wahrscheinlichkeit angeben, dass

es auch von andere Personen verstanden wird. Icons mit besonders vielen positiven Bewer-

tungen und dementsprechend hohen Erkennungsraten werden abschlieÿend von Experten142vgl. Thesmann 2010: Einführung in das Design multimedialer Webanwendungen, S.363143vgl. Wirth 2002: Missing Links, S.96f144vgl. Eibl 2006: Schein und Sein der Bedienbarkeit, S.132145vgl. Thesmann 2010: Einführung in das Design multimedialer Webanwendungen, S.364146vgl. Thaller 2002: Interface Design, S.131147vgl. Thaller 2002: Interface Design, S.131148vgl. Stapelkamp 2007: Screen- und Interfacedesign, S.179149vgl. Galitz 2007: The Essential Guide to User Interface Design, S.659150vgl. Stapelkamp 2007: Screen- und Interfacedesign, S.183

36


sondiert (Icon-Comprehension Test). Zur Auswahl der besten Alternative können folgende

Kriterien herangezogen werden:151

� Das Icon mit dem höchsten durchschnittlichen Verständniswert.

� Das Icon, dessen Verwechslungsgefahr mit anderen Icons am niedrigsten eingeschätzt

wird (z. B. bei der Erweiterung einer Werkzeugpalette).

3.3.4. Bilder

Bilder sind neben Texten der wichtigste Informationsträger und sollten dessen Inhalt re-

�ektieren. Bilder sind die stärksten kompositorischen Mittel auf einer Webseite, da sie die

Aufmerksamkeit stärker binden als andere Elemente. Sie beein�ussen die Blickführung und

damit die Informationsaufnahme entscheidend.152 Bestenfalls unterstützen sie den Nutzer

bei der Zielerreichung.

Die Auswahl von Bildern sollte nutzerorientiert erfolgen. Produktabbildungen in hoher

Qualität transportieren ein positives Image. Auf Verlangen sollten verschiedene Ansichten

und Detailgrade angeboten werden.153

Die Positionierung von Bildern hängt vom Layout ab. Für eine gute Wirkung ist jedoch

ausreichend Freiraum notwendig. Allgemein ist zu empfehlen, weniger und dafür gröÿere

Motive einzusetzen. Die Gröÿe eines Bildes sollte dabei analog zu seiner Wichtigkeit sein.154

3.3.5. Bewegtbild

Bewegtbild ist besonders dafür geeignet, um komplexe Vorgänge oder Funktionen zu il-

lustrieren.155 Videos und Animationen werden hier synonym betrachtet. Sie unterscheiden

sich gröÿtenteils nur in der Produktion.156

Bevor eine Animation startet (dies sollte erst nach einer expliziten Nutzeranforderung ge-

schehen), sollte dem Nutzer kurz erläutert werden, was ihn erwartet. Längere Animationen

sollten in einzeln anspringbare Segmente zerlegt werden. Eine Abspielleiste vermittelt dabei

zusätzlich den Status.157 Die Aufmerksamkeit des Nutzers kann durch stilistische Mittel

auf inhaltlich relevante Elemente gelenkt werden (in Animationen können zum Beispiel

unwichtige Details einfach ausgeblendet werden).158

Durch den Ein�uss von Videoportalen haben sich Nutzer an Animationen bis zu einer

Dauer von vier Minuten gewöhnt.159

151vgl. Wol�/Götzfried 2009: �I can�-Design: Methodik für das benutzerzentrierte Design nicht standardisierterIcons, S.122f

152vgl. Hammer/Bensmann 2009: Webdesign für Studium und Beruf, S.254153vgl. Puscher 2009: Leitfaden Web-Usability, S.134�154vgl. Wirth 2002: Missing Links, S.93155vgl. Galitz 2007: The Essential Guide to User Interface Design, S.681156vgl. Niegemann et al. 2008: Kompendium multimediales Lernen, S.264157vgl. Galitz 2007: The Essential Guide to User Interface Design, S.682158vgl. Niegemann et al. 2008: Kompendium multimediales Lernen, S.246159vgl. Thesmann 2010: Einführung in das Design multimedialer Webanwendungen, S.330

37


Zusammenfassung So sehr auch versucht wird, eine Webseite durch die Beachtung

sämtlicher Regeln zu gestalten und somit optimal an die Nutzer anzupassen, kann letzt-

endlich nur eine Usability-Studie darüber entscheiden, ob eine Webseite funktioniert. Die

bisher ausgeführten Grundlagen bilden zwar die Vorraussetzung für eine hohe Benutzer-

freundlichkeit, sie garantieren allerdings noch keine zielgruppenadäquate Gestaltung.

Im folgenden Kapitel werden zunächst die verwendeten Techniken der Usability-Studie

vorgestellt.

38

4. Darstellung relevanter Techniken für dienachfolgende Usability-Studie

4.1. Blickverlaufsanalyse (Eyetracking)

Die Blickverlaufsanalyse oder auch Blickregistrierung hat sich in den vergangenen Jahren

als geeignete Methode etabliert, um kognitionspsychologische und ergonomische Fragestel-

lungen anhand von Augenbewegungen und Blickverläufen und damit implizit die visuelle

Informationsaufnahme des Menschen experimentell zu untersuchen. Darüber hinaus sind

Eyetrackingdaten längst in der psychologischen Grundlagenforschung anerkannt.160

Durch die Entwicklung von berührungslosen Eyetrackern ist die praktische Durchführung

sehr einfach geworden.161 Die Deutung der Ergebnisse ist dagegen kompliziert und von vie-

len Faktoren abhängig.162 Im folgenden Abschnitt soll nun die Basis für die Interpretation

von Blickbewegungen gelegt werden.

4.1.1. Grundlagen zur Interpretation von Blickbewegungsdaten

4.1.1.1. Aufmerksamkeit und Informationsverarbeitung

Eine psychologische Grundannahme zur Nutzung von Blickbewegungsdaten ist, dass Infor-

mationen, die visuell aufgenommen werden, auch gleichzeitig kognitiv verarbeitet werden.

Die Informationen einer Fixation werden demnach in das Kurzzeitgedächtnis eingelesen

und dort kognitiv verwertet. Dabei gelten zwei Grundannahmen:163

� Unmittelbarkeitshypothese (immediaty assumption): Alle Auswertungsprozesse

laufen schnellstmöglich und unmittelbar ab.

� Auge-Geist-Hypothese (eye-mind-assumption): Der Blick wird immer zuerst auf

Objekte von hohem Interesse bzw. Nutzen gelenkt. Das Auge �xiert die Objekte so

lange, wie sie verarbeitet werden. Das bedeutet, ein Element wird so lange angesehen,

wie es interessiert bzw. kognitiv ausgewertet wird. Diese Beziehung gilt allerdings nur

bei dem sogenannten �aufgabenbezogenen Schauen�. Den Probanden werden dabei

160vgl. Bente et al. 2007: Im Auge des Nutzers. Eyetracking in der Web-Usability-Forschung, S.186161vgl. Schmeiÿer 2009: Eyetracking � Mit den Augen der Nutzer sehen, S.264162vgl. Schmeiÿer 2009: Eyetracking � Mit den Augen der Nutzer sehen, S.270163gemäÿ Just/Carpenter [A theory of reading, zitiert nach Bente et al. 2007: Im Auge des Nutzers. Eye-

tracking in der Web-Usability-Forschung, S.190]

39

4. Darstellung relevanter Techniken für die nachfolgende Usability-Studie

konkrete Aufgaben vorgegeben, unter denen sie eine bestimmte Szene betrachten164

(etwa einem bestimmten Link auf einer Webseite).

Für die Analyse von Webseiten haben sich diese Theorien etabliert.

Als nächstes stellt sich die Frage, wie das Auge die reizvollsten und vielversprechensten Al-

ternativen identi�ziert. Die Antwort hängt eng mit der Gestaltung des Stimulus zusammen.

Hier gibt es wiederum zwei Ansätze:

� Bottom-Up: Der Stimulus an sich bestimmt die Informationsverarbeitung. Es wer-

den die Orte präferiert, an denen sich ein Merkmal stark von den umgebenden Stimuli

unterscheidet.165 Eine Webseite kann hier maÿgeblich durch den Einsatz von Farben,

Formen, Text und Bewegung das Blickverhalten beein�ussen166 (siehe 2.2 und 2.3:

Gestalt- und Aufmerksamkeitsgesetze für konkrete Gestaltungsempfehlungen).

� Top-Down: Das Auge wählt aus sämtlichen Information diejenigen aus, die am

zielführendsten erscheinen und gleichzeitig handlungsrelevant sind (aufbauend auf

Erfahrungen und dem Wissen des Nutzers).167

Nach Theeuwes (1993) setzt sich der Bottom-Up-Ansatz gegenüber den Top-Down-Ansatz

leicht durch.168 Augenbewegungen sind demnach weniger als Selektionsprozesse zu betrach-

ten, sondern als Ergebnis eines attentionalen Prozesses, der diesen vorausgeht.169

Würde allerdings nur der Bottom-Up-Ansatz gelten, könnten wir keine willentlichen Au-

genbewegungen auf ein Objekt ausführen. Deswegen müssen auch Top-Down-Prozesse be-

achtet werden. Der räumliche Auswahlprozess wird durch das Wissen des Nutzers, sowie

über die visuellen Eigenschaften der Benutzerober�äche beein�usst170 (z. B. das Hauptme-

nü ist meistens links positioniert). Die zwei Ansätze verlaufen also nicht isolierend, sondern

beein�ussen sich wechselseitig.

4.1.1.2. Foveales und peripheres Sehen

In der Mitte der Netzhaut sitzt die Fovea centralis, die Stelle des schärfsten Sehens und

der intensivsten Farbwahrnehmung. Sie dient der genauen Auswertung visueller Reize. Das

Blickfeld der Fovea beträgt ungefähr 1/10000 des Gesichtsfeldes171 (+-1º in der Vertikalen

und Horizontalen).172 Bei einer Entfernung von 50 cm zum Computerbildschirm entspricht

das ungefähr der Gröÿe einer 1-Euromünze.173

164vgl. Bente 2004: Erfassung und Analyse des Blickverhaltens, S.306165vgl. Rosendahl 2001: Der Ein�uss au�älliger Reize auf die Aufmerksamkeit, S.54166vgl. Bente 2004: Erfassung und Analyse des Blickverhaltens, S.309167vgl. Schmeiÿer 2009: Eyetracking � Mit den Augen der Nutzer sehen, S.266168gemäÿ Theeuwes [Visual selective attention, zitiert nach Bente 2004: Erfassung und Analyse des Blickver-

haltens, S.309]169vgl. Bente 2004: Erfassung und Analyse des Blickverhaltens, S.309170vgl. Schmidts 2007: Usability-Evaluation, S.64�171nach Schenk/Rigoll 2010: Mensch-Maschine-Kommunikation, S.50 ist das Gesichtsfeld der Bereich, der mit

ruhendem Kopf und Auge gesehen werden kann172vgl. Schiersch 1997: Betrachtung von Entscheidungsprozessen mittels Blickbewegungsanalyse, S.59173vgl. Wirth 2002: Missing Links, S.128

40


Netzhaut

Fovea

optische Achse

Linse

Maximales vertikales Gesichtsfeld (ca. 60 )

horizontal max. 110

+-

1-

1

27

-33FOVEAL

PERIPHER

PERIPHER

+

Abbildung 4.1.: Aufbau des Auges[Eigene Darstellung: In Anlehnung an Heinecke 2004: Mensch-Computer-Interaktion, S.60; Wirth 2002:

Missing Links, S.128]

Geht man von einer normalen Textgröÿe und durchschnittlichen Zeilen und Buchstaben-

abständen aus, können im fovealen Bereich ca. 88 Zeichen aufgelöst werden174 (aufgeteilt

in sieben Zeilen, mit einer maximalen Zeilenlänge von 15 Zeichen in der Mitte).

321312354321212345

6543211123456765432101234567

654321112345654321212345

3213123

Abbildung 4.2.: Maximale Anzahl an wahrnehmbaren Zeichen im fovealen Bereich[Gra�k nach Galitz 2007: The Essential Guide to User Interface Design, S.80]

Auÿerhalb des fovealen Bereiches nimmt das Au�ösungsvermögen rasch ab.175 Bei einer

Abweichung von 3º reduziert sich die Sehschärfe um die Hälfte (bei 6,5º bleiben nur noch

25 % der Sehschärfe übrig). Um ein Objekt scharf zu sehen, sind somit schon bei gerin-

gen Abständen Augenbewegungen erforderlich. Maÿgeblich für das Eyetracking sind die

Makrobewegungen (die Bewegung von einer Fixation zur nächsten).176

Der verbleibende Teil der Netzhaut dient dem peripheren Sehen, das besonders sensitiv

für schnelle Veränderungen der Lichtintensität und plötzliche Bewegungen ist.177 Es dient

dazu die Ausrichtung unserer Aufmerksamkeit zu steuern. Hier werden bereits Konturen

174vgl. Galitz 2007: The Essential Guide to User Interface Design, S.80175vgl. Bente 2004: Erfassung und Analyse des Blickverhaltens, S.303176vgl. Schiersch 1997: Betrachtung von Entscheidungsprozessen mittels Blickbewegungsanalyse, S.59177vgl. Bente 2004: Erfassung und Analyse des Blickverhaltens, S.303

41


und Formen des Stimulus erkannt und die nächsten Blicksprünge (Sakkaden) vorbereitet.178

Durch das periphere Sehen werden zwar keine Details wahrgenommen, aber zum Beispiel

die grobe Struktur einer Webseite.179

Die eigentliche Verarbeitung �ndet aber erst statt, wenn das Auge auf dem Stimulus ruht

und den Reiz �xiert. Hier spricht man von Fixationen180 (diese sind der eigentliche Ge-

genstand einer Blickmessung, da nur hier Umweltinformationen wahrgenommen und ver-

arbeitet werden).181

4.1.1.3. Fixationen und Sakkaden

Die Dauer einer Fixation variiert je nach Person und Reizsituation und dauert im Mittel

mindestens 100 bis 600 Millisekunden (sie kann aber auch mehrere Sekunden andauern).

Kurze Fixationen (100-200ms) deuten auf eine �üchtige Rezeption von bildhaftem Inhalt

hin, während längere Fixationen (>200ms) benötigt werden, um anspruchsvollere Inhalte

wie Texte wahrzunehmen.182

Die Sprünge zwischen den Fixationen werden Sakkaden (Dauer: 10-100ms183) genannt.184

Während einer Sakkade �ndet keine Wahrnehmung statt.185 Und ist diese einmal einge-

leitet, kann ihr Verlauf und ihr Sprungziel nicht mehr verändert werden.186 Die Länge

einer Sakkade hat dabei Ein�uss auf die Fixationsdauer. Je länger sie ist, desto länger die

nachfolgende Fixationsdauer.187 Lange Sakkaden sind deswegen für eine schnelle Informa-

tionsaufnahme zu vermeiden.

Obwohl die Anzahl und die Länge der Sakkaden auch zum Ausdruck bringen, wie gut ein

Stimulus funktioniert, werden in der Praxis meist nur Fixationen in die Analyse einbezogen.

Wie zuvor erwähnt, �ndet nur hier die Informationsverarbeitung statt.188

Für die Beurteilung von Aufmerksamkeits- und Informationsprozessen kommt der Unter-

scheidung von Fixationen und Sakkaden also eine besondere Bedeutung zu.189 Das Fixati-

onsmodell nach Viviani verdeutlicht noch einmal den Zusammenhang von Fixationen und

Sakkaden:

178vgl. Schmeiÿer 2009: Eyetracking � Mit den Augen der Nutzer sehen, S.271179vgl. Nielsen/Pernice 2010: Eyetracking Web Usability, S.8180vgl. Bente et al. 2007: Im Auge des Nutzers. Eyetracking in der Web-Usability-Forschung, S.190181vgl. Schmeiÿer 2009: Eyetracking � Mit den Augen der Nutzer sehen, S.271; Bente 2004: Lehrbuch der

Medienpsychologie, S.303182vgl. Schmeiÿer 2009: Eyetracking � Mit den Augen der Nutzer sehen, S.271183vgl. Nielsen/Pernice 2010: Eyetracking Web Usability, S.7; Duchowski 2007: Eyetracking Methodology,

S.42184vgl. Schmeiÿer 2009: Eyetracking � Mit den Augen der Nutzer sehen, S.271185vgl. Schiersch 1997: Betrachtung von Entscheidungsprozessen mittels Blickbewegungsanalyse, S.60;

Duchowski 2007: Eyetracking Methodology, S.42186vgl. Surakka et al. 2003: Voluntary Eye Movements in Human Computer Interaction, S.476; Duchowski

2007: Eyetracking Methodology, S.43187vgl. Schiersch 1997: Betrachtung von Entscheidungsprozessen mittels Blickbewegungsanalyse, S.60188vgl. Schmeiÿer 2009: Eyetracking � Mit den Augen der Nutzer sehen, S.271189vgl. Bente et al. 2007: Im Auge des Nutzers. Eyetracking in der Web-Usability-Forschung, S.190

42


70-150 ms

100-600 ms

FIXATION

Verarbeitung der visuellen Informationen

Musterung des peripheren Blickfelds

Planung + Vorbereitung der nächsten Sakkade

SAKKADE

Abbildung 4.3.: Fixationsmodell nach Viviani[Gra�k nach Goldberg/Kotval 1999: Computer Interface Evaluation Using Eye Movements, S.186]

Die visuellen Informationen werden zunächst detailliert über die foveale Wahrnehmung

analysiert. Über die parafoveale Wahrnehmung wird das periphere Blickfeld gemustert, um

nachfolgende ROIs (Regions of Interest) zu bestimmen. Die nächste Sakkade wird geplant

und eingeleitet. Die daraufhin ausgeführte Sakkade erzeugt einen neuen Fixationsort. Der

Kreislauf beginnt von vorne. Die beschriebenen Abschnitte überlagern sich und können

auch parallel laufen. Dadurch sind auch kürzere Zeiten für eine Fixation nachvollziehbar.

Während einer Fixation bleibt die Wahrnehmung also nicht nur ausschlieÿlich auf dem

�xierten Objekt gebunden, sondern es wird auch gleichzeitig das periphere Blickfeld inspi-

ziert.190

4.1.2. Auswertungs- und Darstellungsmöglichkeiten fürBlickbewegungsdaten

Grundsätzlich können Blickdaten über drei Ebenen ausgewertet werden:191

1. Räumliche Areale (Areas of Interest): Hier wird die Webseite in einzelne, für das Un-

tersuchungsziel interessante Elemente eingeteilt, für die Aufmerksamkeitsparameter

ausgewiesen werden können.

2. Nutzergruppen: Können sich Neueinsteiger ebenso gut zurecht �nden wie erfahrene

Benutzer?

3. Zeitphasen: Von der Orientierungsphase (die ersten Sekunden des Kontakts) bis zur

längeren Verweildauer auf einer Seite.

Moderne Auswertungssoftware gewährleistet problemlos die Zusammenführung aller drei

Ebenen.

190vgl. Schmidts 2007: Usability-Evaluation, S.68191vgl. Schmeiÿer 2009: Eyetracking � Mit den Augen der Nutzer sehen, S.272

43


Für die Visualisierung der Ergebnisse gibt es verschiedene Möglichkeiten. Folgende Aus-

führungen beziehen sich auf einen Artikel aus der Human Computer Interaction 2009.192

4.1.2.1. Heatmap/Alphamap

Die aggregierte Blickspur mehrerer Nutzer wird durch eine sogenannte Heatmap (Tempe-

raturkarte) dargestellt. Sie zeigt, wie viel Aufmerksamkeit die verschiedenen Seitenareale

im zeitlichen Verlauf erhalten. Das Farbspektrum reicht von Rot (= �heiÿ� = intensive Be-

trachtung) bis Grün (geringe Betrachtung). Die Alphamap funktioniert nach dem gleichen

Prinzip, nur wird hier eine abgedunkelte Webseite durch eine Blickspur freigewischt.

Die Wahl der richtigen Heatmap hängt vom Untersuchungsziel ab. Soll zum Beispiel be-

stimmt werden, wie viele Fixation nötig waren, um ein bestimmtes Objekt zu �nden, ist

die Fixation Count Heatmap geeignet.

Für die Interpretation ist es deshalb wichtig, drei Typen zu unterscheiden:

Fixation Count Heatmap Die Fixation Count Heatmap visualisiert die Anzahl aller

Fixationen der Probanden. Jede einzelne Fixation wird dabei als ein Wert interpretiert

und in die Färbung der Karte einbezogen.

Probleme:

� Alle Fixationen werden gleich gewichtet, egal ob die Fixation von langer oder kurzer

Dauer war. Somit kann nicht gesagt werden, ob Bereiche mit derselben Farbe auch

dieselbe Fixationszeit erfahren haben.

� Die Aussagekraft der Darstellung kann durch einzelne Probanden stark beein�usst

werden.

� Zuletzt muss auch die absolute Verweildauer beachtet werden. Eine Person, die sich

doppelt so lange auf einer Webseite aufhält, wird wahrscheinlich auch annähernd

doppelt so viele Fixationen erzeugen und das Gesamtergebnis verfälschen.

Absolute Gaze Duration Heatmap: Im Gegensatz zur Fixation Count Heatmap wird

hier die Zeit der einzelnen Fixationen der Probanden gemessen. Somit bekommt beispiels-

weise eine Fixation mit 900 ms eine neunmal höhere Gewichtung als eine Fixation mit

100 ms. Dementsprechend bekommt sie auch eine stärkere Färbung. Da die Fixationsdauer

ein Indikator für die kognitive Verarbeitung ist193, zeigt dieser Typ auch die Bereiche, die

besonders hohe kognitive Anstrengungen erforderten.

Probleme:

192vgl. Bojko 2009: Informative or Misleading? Heatmaps Deconstructed, S.30�193vgl. Schmidts 2007: Usability-Evaluation, S.68; Kain 2007: Erfassung der Aufmerksamkeitsverteilung auf

Webseiten, S.14

44


Da nur Zeiten ermittelt werden, wird eine 900 ms Fixation gleich stark wie neun 100 ms

Fixationen dargestellt. Ein Beispiel: Die Darstellung bzw. die Färbung der Karte macht

nicht klar, ob

� eine Person das Element 900 ms �xiert,

� eine Person das Element neun mal für 100 ms �xiert,

� oder neun verschiedene Personen das Element für jeweils 100 ms �xieren.

Auÿerdem muss auch hier die absolute Verweildauer beachtet werden.

Relative Gaze Duration Heatmap Um das Problem der absoluten Verweildauer zu lö-

sen, wurde die Relative Gaze Duration Heatmap eingeführt. Sie macht die Gewichtung

der Fixationen abhängig von der Zeit des Gesamtaufenthalts auf einer Seite. Ein Beispiel:

Proband A hält sich 30 Sekunden (Proband B: 15 s) auf einer Seite auf und betrachtet die

Navigation 10 Sekunden (B: 5 s). Die Heatmap setzt nun beide Werte in ein Verhältnis: In

diesem Fall �xieren beide Probanden die Navigation ein Drittel der Gesamtzeit. Die Werte

werden gleich gewichtet.

In der folgenden Darstellung wird gezeigt, wie sich die gleiche Datengrundlage (n = 10

(Testpersonen); t = Zeit bis zum ersten Klick) unter den verschiedenen Heatmap-Typen

auswirken kann:

Abbildung 4.4.: Heatmap-Typen[Eigene Darstellung]

4.1.2.2. Area of Interest (AOI)

Mit diesem Werkzeug können Bereiche (Hauptnavigation, Texte, Bilder, usw.) einer Web-

seite separat ausgewertet werden. Mit geeigneter Eyetrackingsoftware können die AOIs für

jede Seite getrennt bestimmt werden.

45


4.1.2.3. Scanpfade/Gaze Plots

Das Prinzip dieser Darstellungstechnik ähnelt der Heatmap. Der Blickpfad kann allerdings

noch genauer nachverfolgt werden. Die einzelnen Fixationen werden durch Kreise visuali-

siert und der Durchmesser spiegelt die Fixationsdauer wieder. Zudem sind sie nummeriert,

um die Reihenfolge der Blicke beurteilen zu können. Die Punkte sind jeweils mit Linien

verbunden, die den Sakkaden entsprechen. In der Praxis wird oft das �Slow-Motion Ga-

ze Replay� genutzt. Durch die verlangsamte Abspielgeschwindigkeit können auch kleinste

Details analysiert werden.194

4.1.3. Kritik am Eyetracking-Verfahren

Wie zuvor erwähnt, ist die akkurate Trennung von Fixationen und Sakkaden entscheidend

für die Aussagekraft von Blickdaten. Die Genauigkeit und Zuverlässigkeit dieser Trennung

ist abhängig von der räumlichen und zeitlichen Messau�ösung des Eyetrackers. In Folge

können abgeleitete Maÿe wie Dauer von Fixationen, oder auch die Geschwindigkeit und

Amplitude von Sakkaden mit unterschiedlich hohen Genauigkeiten, oder auch Messfehlern

belastet sein.195

Zudem fehlen immer noch Standards zur Bestimmung der Fixations- und Sakkadenpara-

meter, wie etwa ab wie vielen Millisekunden eine Fixation als solche gewertet wird. Darum

sollten immer alle Mess- und Berechnungsverfahren o�engelegt werden, um die Vergleich-

barkeit sowohl innerhalb einer Studie als auch zu anderen Studien zu gewährleisten.196

Weiterhin kann nur ein eingeschränkter Kreis an Testpersonen untersucht werden. Je nach

System können keine Brillen- oder Kontaktlinsenträger getestet werden und sie dürfen

nicht zu kleine und/oder zu dunkle Augen haben. Auch ein hochfrequenter Lidschlag kann

zu Fehlmessungen führen. Werden die Lidschlüsse nicht richtig interpretiert, führt dies zu

zusätzlichen Fixationen.197

Ungeachtet dieser Nachteile sind Eyetracking-Systeme die aktuell präzisesten Instrumente

um Blickverläufe nachvollziehen zu können.

4.2. Lautes Denken

Ein oftmals eingesetztes Verfahren zur Aufdeckung von Usability-Problemen ist die Metho-

de des lauten Denkens. Das Prinzip: Während des Tests sollen die Personen verbalisieren,

was sie im Augenblick ausführen und was sie dabei denken und fühlen. Dabei ist es wichtig,

dass das Sprechen kontinuierlich ist und es den Personen überlassen wird, was sie sagen

194vgl. Nielsen/Pernice 2010: Eyetracking Web Usability, S.11195vgl. Bente et al. 2007: Im Auge des Nutzers. Eyetracking in der Web-Usability-Forschung, S.197f196vgl. Bojko 2009: Informative or Misleading? Heatmaps Deconstructed, S.34f197vgl. Kain 2007: Erfassung der Aufmerksamkeitsverteilung auf Webseiten, S.24f; Bente et al. 2007: Im Auge

des Nutzers. Eyetracking in der Web-Usability-Forschung, S.198

46


und wie sie es sagen. Rubin und Chisnell (2008) nennen folgende Vorteile der Methode des

lauten Denkens:198

� Teilnehmer können sofort Rückmeldung geben, warum etwas für sie funktioniert oder

nicht.

� Die Technik hilft manchen Probanden, sich auf die Aufgaben zu fokussieren.

� Missverständnisse werden sofort o�ensichtlich.

� Die Methode ist für den Probanden und Moderator leicht erlernbar und benötigt nur

wenig Übung.

� Die Methode lässt Aussagen über die Zufriedenstellung der Testpersonen zu.

Demgegenüber stehen zahlreiche Nachteile:

� Lautes Denken ist unrealistisch.199

� Lautes Denken hat Auswirkungen auf den Entscheidungsprozess. Unter anderem kön-

nen dadurch Leistungssteigerungen erzielt und Fehlerraten minimiert werden.200

� Der Charakter einer künstlichen Situation wird verstärkt.201

� Lautes Denken wird oft missverstanden: Viele Personen erklären ihr Handeln, anstatt

ihre momentanen Gedanken zu äuÿern. 202 Auÿerdem tendieren Personen dazu, den

Bildschirm abzulesen.203 Deswegen sollte die Technik am Anfang des Tests vorgeführt

werden.204

� Lautes Denken ist ungewohnt: Viele Personen verfallen nach kurzer Zeit wieder in

das Schweigen.205 Durch gezielte Zwischenfragen kann dem entgegengewirkt werden.

Allerdings ist hier zu beachten, dass eine längere Ruhephase ein Anzeichen für ho-

he Konzentration sein kann. Der Proband sollte dann nicht gestört werden und im

Anschluss an die Sitzung mit dem Problem konfrontiert werden.206

� Doppelbelastung durch lautes Denken: Die zeitgleiche Aufgabenlösung und Gedan-

kenäuÿerung senkt die Bearbeitungsgeschwindigkeit und macht eigene Inkonsistenzen

im Denken eher bewusst. Dies führt dazu, dass weniger, weitere oder andere Fehler

gemacht werden, als sie in natürlicher Form vorkommen würden.207

198vgl. Rubin/Chisnell 2008: Handbook of Usability Testing, S.204199vgl. Snyder 2003: Paper Prototyping, S.181200vgl. Schiersch 1997: Betrachtung von Entscheidungsprozessen mittels Blickbewegungsanalyse, S.53; Du-

mas/Redish 1994: A Practical Guide to Usability Testing, S.279; Sarodnick/Brau 2005: Methoden derUsability Evaluation, S.163

201vgl. Schiersch 1997: Betrachtung von Entscheidungsprozessen mittels Blickbewegungsanalyse, S.53202vgl. Schiersch 1997: Betrachtung von Entscheidungsprozessen mittels Blickbewegungsanalyse, S.53203vgl. Dumas/Redish 1994: A Practical Guide to Usability Testing, S.279204vgl. Rubin/Chisnell 2008: Handbook of Usability Testing, S.205205vgl. Dumas/Redish 1994: A Practical Guide to Usability Testing, S.280206vgl. Rubin/Chisnell 2008: Handbook of Usability Testing, S.205207vgl. Schiersch 1997: Betrachtung von Entscheidungsprozessen mittels Blickbewegungsanalyse, S.163; Niel-

sen 1993: Usability Engineering, S.196

47


Sonderfall BMW 5er Online Showroom Grundsätzlich wird bei der Bewertung eines

Produkts zwischen formativen und summativen Evaluationsmethoden unterschieden.208

Die formative Evaluation wird in frühen Designstadien eingesetzt, weshalb auch Methoden

wie das laute Denken verwendet werden, um das subjektive und ästhetische Emp�nden

zu ermitteln.209 Summative Evaluationsmethoden, wie ein Usability-Test mit Eyetracking,

werden eher am fertigen Produkt angewendet.210 Der Usability-Test des BMW 5er Onli-

ne Showrooms stellt in dieser Beziehung eine Sonderform dar. Er ist zwar schon online,

und somit �fertig�, er verkörpert jedoch auch eine Zwischenlösung zum �nalen Internetauf-

tritt im nächsten Jahr. Aus diesem Grund werden in der folgenden Usability-Studie beide

Methoden, trotz ihrer spezi�schen Nachteile, miteinander kombiniert.

208vgl. Sarodnick/Brau 2005: Methoden der Usability Evaluation, S.20209vgl. Thielsch 2007: Ästhetik von Websites, S.157210vgl. Sarodnick/Brau 2005: Methoden der Usability Evaluation, S.20

48

5. Usability-Studie BMW 5er OnlineShowroom

5.1. Beschreibung der Studie

Parallel zum Kommunikationsstart der neuen BMW 5er Limousine wurde auch das Online-

Konzept der Modellseiten weiterentwickelt.211 Das neue Layout unterscheidet sich dabei

relativ stark von den bisherigen Modellseiten. Die Menüs zur Navigation wurden komplett

überarbeitet und teilweise neu platziert. Bei der nachfolgend dargestellten Usability-Studie

gilt es, anhand von alltagsnahen Testaufgaben herauszu�nden, wie e�ektiv das neue Kon-

zept seine Inhalte kommuniziert, welche Probleme bei der Bedienung auftauchen und wie

gut das neue Layout bei der Zielgruppe ankommt. Hierfür wurden unter anderem Unter-

suchungsfragen erstellt, welche in Punkt 5.1.1 beschrieben werden. Auf Basis der Tester-

gebnisse sollen am Ende Handlungs- und Gestaltungsempfehlungen abgeleitet werden.

Abbildung 5.1.: Modellseite altes (links) und neues (rechts) Konzept[Eigene Darstellung]

5.1.1. Untersuchungsfragen

� Verstehen die Nutzer was klickbar ist?

� Wie einfach und schnell gelangen sie an die gewünschten Informationen?

� Kommen die Nutzer leicht zur Ausgangsseite/zuletzt gewählten Seite zurück?

211Mittlerweile wurde dieses Konzept auch bei den Modellen BMW 3er Cabrio/Coupé und BMW X5 einge-führt.

49

5. Usability-Studie BMW 5er Online Showroom

� Verstehen die Nutzer die dargestellten Symbole? Werden diese überhaupt wahrge-

nommen?

� Sind die Linktexte verständlich (Informieren; Highlight erleben)?

� Ziehen speziell positionierte Hinweise, Produkt-Teaser ausreichend Aufmerksamkeit

auf sich?

� Finden sich die Nutzer sofort zurecht?

� Werden genug Hilfefunktionen angeboten?

� Werden die Menübezeichnungen verstanden?

5.1.2. Testumgebung

Die Studie wurde im Usability-Labor der Hochschule Neu-Ulm durchgeführt. Das Labor

ist folgendermaÿen ausgestattet:

� Zwei Videokameras im Testraum zur Aufzeichnung des Bildschirms und der Mi-

mik/Gestik der Testpersonen

� Eine Webcam

� Einwegspiegel zur Beobachtung der Testpersonen

� Tobii T60 Eyetracker zur Blickbewegungsregistrierung (in Abb. 5.2 blau dargestellt)

� Zwei Computer (jeweils einer im Test- und Beobachtungsraum)

Testraum

Beobachtungsraum

Abbildung 5.2.: Grundriss Usability-Labor Hochschule Neu-Ulm[Eigene Darstellung]

50


Die Probanden arbeiteten an einem Tobii T60 Eyetracker (17 Zoll, Au�ösung 1024x768px).

Als Internetbrowser wurde der Internet Explorer 7 verwendet. Der Computer war mit ei-

nem Intel Core2Duo Prozessor ausgestattet und an eine Hochgeschwindigkeitsinternetver-

bindung angebunden. Alle erforderlichen Plugins zum Betrieb der Webseite wurden im

Vorfeld installiert (Java (TM) 6 Update 18, Adobe Flash Player 10 Plugin).

5.1.3. Zielgruppenprofile

Die Usability eines Systems ist immer von den jeweiligen Benutzern abhängig.212 Um eine

Überprüfung der Benutzerfreundlichkeit vornehmen zu können, sollte deshalb eine mög-

lichst genaue Beschreibung vorliegen. Zu diesem Zweck wurden auf Basis der Marketing-

guidelines der BMW 5er Limousine Personas213 erstellt, welche die Nutzer der Internetseite

repräsentieren.

Persona 01

Persona 02

Alter: 38 Beruf: Manager in einem größeren Unternehmen mit mittlerem bis hohem Einkom-menBeschreibung: Er strebt nach hohem sozialem Status und sehnt sich nach Ansehen und Anerkennung. Prestigeträchtige Marken erfüllen dieses Verlangen. Statussym-bole sind ihm sehr wichtig. Seine Besitztümer sollen seinen Erfolg re�ektieren. Zudem ist er Vorreiter in neuen technischen Errungenschaften.Er hat gute bis sehr gute Internetkenntnisse, will seine wertvolle Zeit aber nicht mit sinnlosem Suchen verbringen. Er fordert klare Strukturen und eine technisch fehlerfreie Umsetzung.

Alter: 59Beruf: Obere Führungsposition in kleinen bis mittleren Unternehmen mit hohem EinkommenBeschreibung: Er sieht seinen sozialen Status und seine �nanzielle Unabhängigkeit als sehr wichtig an, muss ihn aber nicht zur Schau stellen. Entschlossenheit und Fleiß stellt für ihn den Grundstein für Erfolg dar. Er genießt die angenehmen Dinge des Lebens und hat ein reichhaltiges soziales und kulturelles Leben. Er hat normale Kenntnisse im Internetbereich. Er nimmt sich auch gerne mal etwas länger Zeit, um sich zu informieren. Ihm gefallen eine einfache Handhabung und ein vielseitiges Angebot an qualitativ hochwertigen multimedialen Inhalten.

Abbildung 5.3.: Personas[Eigene Darstellung]

Insgesamt nahmen zehn Personen an dieser Usability-Studie teil. Die Rekrutierung führte

das Teststudio Ulm214 durch.

212vgl. Sarodnick/Brau 2005: Methoden der Usability Evaluation, S.21213Eine Persona ist eine �ktive Person, die Eigenschaften eines bestimmten typischen Anwenders in sich

vereinigt und repräsentiert. Vgl.: Dahm 2006: Grundlagen der Mensch-Computer-Interaktion, S.317214Marktforschungspartner von BMW ist Psyma. Psyma beauftragte das Teststudio Ulm den Autor bei der

Suche nach geeigneten Probanden zu unterstützen.

51


Auswahlkriterien:

� Geschlecht nur männlich

� Alter verteilt zwischen 40 & 60 Jahren

� Autofahrer, für die BMW als Marke des nächsten Fahrzeuges in Frage kommt

� Nutzung des Internets als Informationsquelle für den Autokauf

Ausschlusskriterien:

� Beru�iche Beschäftigung mit Marketing, Marktforschung, IT, Automobil

� Personen, die seltener als 1x wöchentlich im Internet sind

� Überdurchschnittliche Beschäftigung mit dem neuen BMW 5er Online Showroom

Anmerkung: Es konnten hier nicht exakt alle Eigenschaften, welche zuvor in den Personas

de�niert wurden, als Rekrutierungskriterien herangezogen werden. Der Aufwand der Suche

nach idealen Testpersonen wäre dann zu groÿ gewesen und hätte in keinem Verhältnis zum

Nutzen gestanden.

Die endgültig ausgewählten Testpersonen sind in folgender Tabelle aufgelistet:

T1

T2

T3

T4

T5

T6

T7

T8

T9

T10

50

39

47

41

59

44

57

61

46

43

Dipl. Verwaltungswirt

Datenschutzbeauftragter

Industriemechaniker

Physiker

Lehrer

Bezirksdirektor

Kaufmann

Dipl. Verwaltungsfachwirt

Selbstständig

Dipl. Elektroing.

Stadt Ulm

IT

Maschinenbau

Grundlagenforschung

Finanzen

Textil

Landwirtschaftsministerium

Maschinenbau

Telekommunikation

nein

1x

nein

1x

> 1x

nein

nein

1x

nein

nein

Zeit am Bild-schirm / Tag in Std

StundenzahlInternet/Woche

> 5

> 5

2-5

2-5

< 2

2-5

< 2

< 2

> 5

2-5

20

10

10

8

2-3

20

1

1

12

1

Testperson Alter Beruf Branche Erfahrung mit Usability Studien

Tabelle 5.1.: Übersicht Testpersonen

52


5.1.4. Gestaltung der Testszenarien und Fragebögen

5.1.4.1. Testszenarien

Neben der Auswahl der Teilnehmer entscheidet die Auswahl der Aufgaben über die Aussa-

gekraft der erhobenen Daten.215 Ziel war es, möglichst realistische Szenarien zu entwickeln,

die dem tatsächlichen Nutzungskontext nahe kommen. Bei der Auswahl wurde zudem be-

rücksichtigt, dass die Probanden auch mit kritischen Stellen in Kontakt kommen, um unter

anderem Antworten zu den Untersuchungsfragen zu liefern. Insgesamt gab es sieben Auf-

gaben. Allerdings konnten nur zwei Personen die letzte Aufgabe bearbeiten, da diese einen

erfolgreichen Abschluss der zweiten Aufgabe voraussetzte.

Sie interessieren sich für die neuen Motortechnologien die für die BMW 5er Limousine angeboten werden. Informieren Sie sich über einen Motor Ihrer Wahl so ausführ-lich wie möglich.

Wird der „Informieren“-Button erkannt?Wird verstanden was klickbar ist?Wird der Pfeil zur Maximierung des Textes gefun-den?

Sind die Menübezeichnungen verständlich?Werden die Symbole gefunden?

Werden die Symbole gefunden?

Ist das Wording verständlich (“Informieren“/“Highlight erleben“)?Wird verstanden was klickbar ist?

Finden sich die Nutzer im Kon�gurator sofort zurecht? Gibt es genug Rückkehrmöglichkeiten?Wie einfach und wie schnell gelangen die Nutzer an gewünschte Informationen?Wird genug Unterstützung angeboten?

Werden die benötigten Buttons schnell gefunden?

Wo suchen die Nutzer nach Zubehör?Welche Inhalte nutzen Sie?

Sie möchten gerne wissen wie der neue BMW 5er von innen aussieht. Sehen Sie sich den Innenraum an und merken Sie sich die Seite.

Sie sind zudem besonders an der Integral-Aktivlenkung interessiert. Sehen Sie sich die Videos zu diesem Thema an und kehren Sie danach wieder zur Startseite zurück.

Stellen Sie sich vor, Sie wollen morgen zum BMW Händler. Vorab wollen Sie sich aber schon einmal ihr Wunschauto zusammenstellen. Stellen Sie eine Muster BMW 5er Limousine mit folgenden Ausstattungsmerkmalen zusammen:

Fordern Sie einen Katalog zum neuen BMW 5er an und laden Sie sich zusätzlich die passende Preisliste herunter.

Sie haben gehört, dass es exklusives Zubehör für Ihren BMW zum Nachrüsten gibt.Finden Sie Original BMW Zubehörfelgen für die BMW 5er Limousine.

Rufen Sie die Innenraumdetailseite, welche Sie zuvor abge-speichert haben, wieder auf.

1

2

3

4

7

6

5

Nr. Aufgabe Intention

Tabelle 5.2.: Überblick Testaufgaben

5.1.4.2. Fragebogen

Zum Abschluss wurde den Probanden ein Fragebogen vorgelegt. Er bestand aus folgenden

Teilen:

1. ISONORM 9240/110-S

215vgl. Sarodnick/Brau 2005: Methoden der Usability Evaluation, S.156; Rubin/Chisnell 2008: Handbook ofUsability Testing, S.183

53


2. Attrakdi�2

3. Persönlicher Gesamteindruck

Erklärungen zu den einzelnen Teilen �nden sich unter 5.4.

5.1.5. Testdurchführung

Die gesamte Studie pro Person bestand aus drei Blöcken:

1. Begrüÿung, Vorbesprechung (ca. 5 Min.)

2. Usability-Test (ca. 35 Min.)

3. Bearbeitung der Fragebögen, Nachbesprechung (ca. 10 Min.)

Getestet wurde jeweils in den Abendstunden, da fast alle Probanden ganztätig berufstätig

waren (Zeitraum: 15.03.2010 - 18.03.2010).

1. Vorbesprechung Nach der Begrüÿung und einer kurzen Einführung in das Thema

wurden die Testpersonen gebeten, die Erlaubnis zur Video- und Tonaufzeichnung sowie

die Geheimhaltungserklärung zu unterschreiben. Danach wurde Ihnen der genaue Testa-

blauf vorgelesen (siehe Anhang [A.1.1]). Das war wichtig, da alle Probanden die gleichen

Voraussetzungen erhalten sollen.216 Die Testpersonen wurden aufgefordert, laut zu denken,

also Ihre Schritte und Gedanken in Worte zu fassen. Dadurch konnten in nachfolgenden

Analysen ihre Entscheidungen besser nachvollzogen werden.217 Zuletzt wurde darauf hin-

gewiesen, dass nicht sie getestet werden, sondern allein die Webseite.218 Damit sollten

eventuelle Ängste und Hemmungen im Vorfeld genommen und ein natürlicheres Verhalten

erreicht werden.

2. Usability-Test Anhand von zuvor de�nierten Testaufgaben sollte sich jeder Proband

mit dem BMW 5er Online Showroom beschäftigen. Die Reihenfolge der Aufgaben war für

alle Personen gleich. Die weniger wichtigen Aufgaben wurden am Ende bearbeitet, falls ein

Proband mehr Zeit als geplant für die ersten Aufgaben benötigen sollte. Die Aufgabenbe-

schreibung erschien dabei auf dem Bildschirm. Die Probanden sollten ein Zeichen geben,

sobald sie die Aufgabe verstanden haben. Da neben der Blickaufzeichnung zusätzlich das

Prinzip des lauten Denkens eingesetzt wurde, animierte der Moderator während des Tests

Gedanken laut auszusprechen. Nach jeder Aufgabe folgte eine kurze Besprechnung.

War eine Person absolut auf dem falschen Weg oder auch nach wiederholten Versuchen

nicht in der Lage weiterzumachen, gab der Moderator Hinweise (je nach Problemgrad vage

bis spezi�sch). Diese wurde im Protokoll für die spätere Auswertung notiert. Abschlieÿend

wurden die Probanden mit ihren Problemen während der Bearbeitung konfrontiert.

216vgl. Rubin/Chisnell 2008: Handbook of Usability Testing, S.220217vgl. Nielsen 1993: Usability Engineering, S.209218vgl. Stoessel 2002: Methoden des Testings im Usability Engineering, S.83

54


3. Bearbeitung der Fragebögen, Nachbesprechung Nachdem die Probanden mit den

Aufgaben fertig waren, wurde ihnen noch ein Fragebogen vorgelegt. Während der Bearbei-

tung stellte der Moderator an kritischen Stellen Fragen. Am Ende wurde jeder Proband zu

seinem Gesamteindruck (positive wie negative Kritik) und nach Verbesserungsvorschlägen

befragt.

5.1.6. Gesammelte Daten

Es wurden sowohl quantitative als auch qualitative Daten gesammelt.

Quantitative Daten:

� Erfolgsrate pro Aufgabe (wie weit kam der einzelne Proband bei einer Aufgabe)

� Klickraten (Anzahl Fehlklicks)

� Blickbewegungsdaten

� Fragebögen (ISONORM 9240/110-S; Attrakdi�)

Qualitative Daten:

� Beobachtungen während des Tests: Reaktionen der Probanden.

� Sämtliche Kommentare (�Lautes Denken�, Besprechung nach jeder Aufgabe, abschlie-

ÿende Besprechung sowie das Ausfüllen der Fragebögen) wurden per Video dokumen-

tiert.

55


5.2. Gefundene Usability-Probleme

Die Au�istung der Probleme erfolgt analog zur Reihenfolge der Aufgabenbearbeitung. Je-

des Problem erhält dabei einen eigenen Schweregrad.219 Dieser setzt sich wie folgt zusam-

men:

90 % - 100 %

51 % - 89 %

11 % - 50 %

0 % - 10 %

4

3

2

1

4

3

2

1Das Problem kann sehr leicht umgangen werden. Kosmetisches Problem.

Nutzerziel kann mit leichten Problemen erreicht werden.

Nutzerziel kann mit erheblichen Problemen erreicht werden.

Nutzerziel kann nicht erreicht werden.

Anzahl betro�enerProbanden:

Index A Gewichtung des Problems

Schweregrad des Problems = Wert Index A + Wert Index B

Index B

Tabelle 5.3.: Schweregrad der Probleme[Eigene Darstellung]

Probleme mit einem hohen Schweregrad sollten möglichst schnell korrigiert werden und

sind zur Hervorhebung rechts auÿen mit einem �!� markiert.

Aufgabe 1: Motortechnologien:

Teilnehmer: 10 von 10

Die Probanden sollten sich bei dieser Aufgabe über einen Motor Ihrer Wahl so aus-

führlich wie möglich informieren. Gestartet wurde von der BMW Deutschland Startseite

(www.bmw.de).

1. Platzierung des Links "Informieren" nicht prominent genug. !

Schweregrad: 5 (3+2)

Sieben von zehn Probanden haben diesen Link nicht sofort erkannt. T1 und T6 ver-

suchten zunächst über einen Klick auf den beschreibenden Text an die gewünschten

Informationen zu gelangen. T2, T5, T7, T9 und T10 wollten dagegen durch einen

Klick auf die Überschrift an das Ziel zu kommen. Kommentar T1: "Schlecht gemacht,

sollte eigentlich automatisch aufgehen, wenn ich einen Doppelklick mache."

219vgl. Rubin/Chisnell 2008: Handbook of Usability Testing, S.262f

56


Abbildung 5.4.: Link �Informieren�

Exkurs: Messung der Entwicklung der Fehlklickraten von Aufgabe 1 bis

3.

(Anzahl der Klicks bis die Links �Informieren� oder �Highlight erleben� benutzt wur-

den) Hier ist zu erkennen, dass mit zunehmender Benutzung das Prinzip verstanden

wird und sich die Fehlklicks drastisch reduzieren.

Anmerkung: Proband T8 wurde aufgrund seiner geringen Interneterfahrung und den

daraus resultierenden hohen Fehlklickraten aus dieser Messung herausgenommen, um

das Endergebnis nicht zu verfälschen.

Überschrift

Text

Weißer Hintergrund

Gesamt

pro Testperson

7

6

1

14

1,6

4

0

0

4

0,4

1

0

0

1

0,1

Fehlklicks Aufgabe 1 Aufgabe 2 Aufgabe 3

Tabelle 5.4.: Anzahl Fehlklicks (n=9)

2. Unzureichende Rückkehroptionen innerhalb der Webseite.


T6 bemängelte, dass nicht genug Rückkehrmöglichkeiten angeboten werden (z. B.

von der Motordetailseite zur Motorübersichtsseite).

Weitere Beobachtungen:

T6 kritisierte, dass es auf der Motorenübersichtsseite keine Möglichkeit gibt, Motoren zu

57


vergleichen. T6 und T9 vermissten konkrete Angaben zu den einzelnen Motoren. (Drehzahl,

Beschleunigung, Elastizität, usw.).

Aufgabe 2: Interieur

Teilnehmer: 10 von 10

Ausgehend von der Startseite des BMW 5er Online Showrooms sollten sich die Probanden

über das Interieur der BMW 5er Limousine informieren und die Interieur-Detailseite für

einen späteren Wiederaufruf speichern.

1. �Favoriten-Icon� unverständlich und unau�ällig positioniert. !


Es gelang nur zwei von zehn Probanden (T2 und T4) mit Unterstützung des Mode-

rators das Icon auf der Internetseite zu �nden und zu benutzen (Kommentar T2: �Da

wär ich nie drauf gekommen. Das Symbol kenn' ich nicht.�). Die meisten Proban-

den versuchten über die Favoritenleiste des Browsers die Seite abzuspeichern. Trotz

Hinweis des Moderators, dass sich eine Möglichkeit zum �Merken� der Seite auf der

Internetseite be�ndet, konnte das Icon zu 80 % nicht gefunden werden. T6 und T8

suchten vergeblich einen Möglichkeit zur Abspeicherung unter �Mein BMW� in der

Hauptnavigation.

Abbildung 5.5.: Favoriten-Icon[Eigene Darstellung]

2. Menübezeichnungen teilweise nicht konkret genug.


T7 und T8 vermuteten zunächst, die Informationen unter Komfort zu �nden. T5

zögerte relativ lange (10s) bis er auf �Design� klickte. Kommentar: �Innenraum könnte

sich sowohl unter Design als auch Komfort be�nden�.

58


3. Platzierung des Links "Informieren" nicht prominent genug.


Wie schon bei der letzten Aufgabe treten immer noch Probleme mit dem Link �In-

formieren� auf. T8 und T9 versuchten erneut durch einen Klick auf die Überschrift

weiterzukommen.

Aufgabe 3: Highlight Integral-Aktivlenkung

Anzahl Teilnehmer: 10 von 10

Die Probanden sollten sich bei dieser Aufgabe die Videos zur Integral-Aktivlenkung anse-

hen und danach wieder zur Ausgangsseite zurückkehren.

1. Der Begri� "Highlight erleben" ist zu vage formuliert. !


Anmerkung: Proband T7 entschied sich für einen alternativen Weg und kann des-

halb nicht in die Wertung einbezogen werden. Nur zwei der neun Probanden wählten

gleich im ersten Schritt den Link �Highlight erleben� unter Integral-Aktivlenkung.

Sieben von neun Probanden entschieden sich zuerst über �Informieren� die Seite auf-

zurufen, um dann im nächsten Schritt den Link �Highlight erleben� unter �Verwandte

Themen� zu benutzen. Ein Proband kam nicht zur gewünschten Seite.

Kommentare: T5: �Da hätte ich nicht drauf geklickt, dass sich da Videos verbergen

verspricht der Titel leider nicht.� T6: �Schlecht beschriftet: Unter Highlight erleben

kann man sich nichts vorstellen.�

2. Unzureichende Rückkehroptionen über die BMW Seite.


T1 versuchte vergeblich, die Interieur-Detailseite über den Zurück-Button des Brow-

sers zu verlassen. Viele Probanden zögerten über das �x� zurückzugehen (siehe Abb.

5.5).

3. Links in Animationen nicht sofort erkennbar.


Anmerkung: Bei T1 wurde der Flash-Film nicht geladen, deshalb können hier nur die

Ergebnisse von neun Probanden bewertet werden. Zwei von neun Probanden bemerk-

ten sofort, dass auf einen der drei Texte geklickt werden muss, um die folgenden Filme

abzuspielen. Die restlichen Probanden konnten zwar auch die Links erkennen, aber

erst nach teilweise langen Wartezeiten: 10s � 35s. T8: Kommentar: �Das war jetzt

nicht schlüssig.� T5: Kommentar: �Die Pause veranlasst nicht dazu draufzuklicken.�

4. Steuerelemente auÿerhalb des sichtbaren Bereichs (geringe Bildschirm-

au�ösungen beachten).


T8 suchte Steuerbuttons zur Kontrolle des Videos: Diese sind zwar vorhanden, je-

doch auÿerhalb des sichtbaren Bereichs. Dadurch konnte auch nicht getestet werden,

59


ob der Button �Highlight beenden� entdeckt und benutzt wird (dieser war bedingt

durch die Au�ösung ebenso unterhalb des sichtbaren Bereichs).

Abbildung 5.6.: Links und Steuerelemente �Intergral-Aktivlenkung�[Eigene Darstellung]

1. �Bilder und Videos�: Mouse-Over mit nützlichen Informationen anrei-

chern.


Anmerkung T2: Der Mouse-Over Status der Videos lässt nur erkennen, dass sie ab-

spielbar sind, jedoch nicht was sich dahinter verbirgt.


Die Überschriften versprechen präzisere Inhalte. Kommentar T8 zum Video: �Auch ein

Fiat Punto fährt so um die Kurven.� Die im Text angesprochenen Vorteile werden in den

Videos nicht wirklich gezeigt.

Aufgabe 4: Konfigurator

Die Probanden sollten sich bei dieser Aufgabe mit dem Kon�gurator (Breitbandversion)

auseinandersetzen. Sie mussten eine BMW 5er Limousine mit de�nierten Ausstattungs-

umfängen zusammenstellen. Anschlieÿend sollte die Kon�guration gespeichert und in einer

Gesamtübersicht betrachtet werden (die genaue Aufgabenbeschreibung ist dem Anhang

[A.1.2] zu entnehmen).

1. Fehlendes Feedback des Systems:

60


a) Kein Fortschrittsbalken beim Ladevorgang des Kon�gurators.


Das Laden des Kon�gurators dauert verhältnismäÿig lange. Gerade dann ist

es sinnvoll vom System eine Rückmeldung zu erhalten, dass noch gearbeitet

wird. Ein Proband war so irritiert, das er nach drei Sekunden mit der Aussage:

�Mhhm, da erreich ich nichts� den Ladevorgang abbrach und danach verzweifelt

nach weiteren Möglichkeiten suchte die BMW 5er Limousine zu kon�gurieren.

b) Irritierendes Introbild der BMW Welt.


Zu diesem Abbruch beigetragen hat auch die unpassende Wahl des Introbildes.

Das Motiv hat nichts mit der Kon�guration eines Fahrzeuges zu tun.

c) Fehlende Hinweise zum Beenden eines Vorgangs. !


Das Pop-Up-Fenster �Finanzierung� musste erst geschlossen werden, um den

nächsten Schritt bearbeiten zu können (T9: �Das will ich nicht wissen�). Bleibt

das Fenster o�en (geschehen bei einem Proband), sind die anderen Inhalte nicht

klickbar (siehe Abb. 5.7). Der Proband wollte in der unteren Navi mehrmals das

Modell auswählen, das ging aber folglich nicht, entsprechend war der Proband

verwirrt. Erst nach nochmaligem Durchlesen wurde der Hinweis weggeklickt.

Dieses Problem taucht auch noch an anderen Stellen des Kon�gurators auf:

Be�ndet sich ein Proband in der Motorwahl, z. B. im 5er GT und möchte an-

schlieÿend zur 5er Limousine zurückkehren, wird keine Möglichkeit angeboten

den Vorgang zu beenden, bzw. das Fenster zu schlieÿen (das �x� ist auÿerhalb

des sichtbaren Bereichs). Es musste erst ein Motor gewählt werden, um dieses

Fenster verlassen zu können. Dies führte zu groÿer Verunsicherung und Verär-

gerung. Kommentare: T5: �Mir ist nicht ganz klar wie ich da zurückkomme.�

T1: �Ich will doch nur zurück.� Dieses Problem betraf vier Probanden.

61


Abbildung 5.7.: Fehlendes Feedback des Systems[Eigene Darstellung]

d) Speicherung der Kon�guration.


Es gibt vom System keinen Hinweis, ob und wohin das bisher kon�gurierte

Fahrzeug gespeichert wird. Kommentar T2: �Ich fühle mich unwohl, ich weiÿ gar

nicht wo er meine ganzen Sachen hin hat.�; �Mir fehlt eine parallele Au�istung

was ich jetzt schon alles ausgewählt habe. Schade.� �Ich ho�e er speichert das.�

Generell war er unzufrieden mit der Bedienung.

2. Keine Anpassung des Kon�gurators an geringe Bildschirmau�ösungen:

a) Menü zur Auswahl der Ausstattung unterhalb des sichtbaren Be-

reichs.


Drei Probanden (T1, T4 und T8) hatten groÿe Probleme das untere Menü zu �n-

den. Erst nach langer Suche erkannten sie, dass heruntergescrollt werden muss,

um die Einstellungen zu erreichen. Die restlichen Probanden entdeckten es nach

kurzer Suche. Dennoch sollten wichtige Elemente sofort und dauerhaft sichtbar

sein.

b) Pop-Up-Fenster wurden abgeschnitten.


Einige Probanden waren sich ihres aktuellen Scrollzustandes nicht bewusst. So

fand ein Proband das Symbol zum Schlieÿen des Fensters nicht wieder, da er

wenige Zentimeter nach unten gescrollt hatte und somit gerade der obere Sei-

tenbereich nicht sichtbar war.

62


c) Die Pfeile zur Auswahl der Ansichten des Fahrzeuges waren nicht

sichtbar.


3. Unnötige Fahrzeugdarstellung. !


Alle Probanden waren iritiert, dass neben der BWM 5er Limousine auch noch andere

Modelle in Seitenansicht präsentiert wurden. Zudem konnten drei Personen nicht

erkennen, dass es sich hier um verschiedene Modelle handelt. Die unklare Darstellung

verzögerte die Aufgabenbearbeitung.

4. Mouse-Over-E�ekt der Fahrzeuge lenkt von der Motorenauswahl ab.


Der Button �Andere Motorisierung� wurde nicht gesehen. Der Blick wurde durch

die groÿen weiÿen Informationsfenster über den Fahrzeugen nach oben gelenkt. Im

nachfolgenden Screenshot wird der Moment gezeigt, als sich die Probanden mit der

Maus über ein Fahrzeug (im Beispiel die BMW 5er Limousine) bewegten. Es ist zu

erkennen, dass der obere Bereich des Informationsfensters die meiste Aufmerksam-

keit erhalten hatte und dann das Fahrzeug an sich.

Abbildung 5.8.: Mouse-Over E�ekt (n=4; Relative Fixationszeit, aufgabenbezogenesSchauen)

[Eigene Darstellung]

63


5. Die Fahrzeuge in der Seitenansicht zeigen immer die Grundmodelle, auch

wenn eine andere Motorisierung ausgewählt wurde. Sehr verwirrend. !


Abbildung 5.9.: Motorangaben[Eigene Darstellung]

6. Untermenüpunkte zu unau�ällig. !


Alle Probanden hatten Schwierigkeiten bei der Suche nach den Interieurleisten. Das

lag zum einen daran, dass die Auswahlpunkte visuell zu schwach in die obere Leiste

integriert sind. Zum anderen erscheinen die Auswahlpunkte oberhalb des Menüs. Die

Nutzer mussten sich dadurch auf ein abweichendes Anwendungsverhalten einstellen.

Kommentar T5: �Mhhm, warum kommt da jetzt nichts, ich bin doch schon bei den

Interieurleisten. Ahh, da muss man nochmal draufklicken. Mir kam es jetzt so vor als

wären diese schon angezeigt.� T2: �Es ist nicht deutlich, welche Texte klickbar sind

und welche nicht.�

7. Die Bezeichnung "Ihr BMW" ist missverständlich.


Drei Probanden versuchten die Kon�guration über �Ihr BMW� in der unteren Navi-

gation zu speichern. Kommentar T5: �Da hätte ich mir gewünscht, dass hier meine

Kon�guration ist.� Die restlichen Probanden konnten das Diskettensymbol zum Zwi-

schenspeichern der Kon�guration relativ schnell �nden. Die kleine Darstellung wurde

aber kritisiert (siehe nächster Punkt).

64


8. Symbolpalette klein und nicht au�ällig genug. !


Drei Probanden gelang es nicht, ihre bisherige Kon�guration in einer Gesamtüber-

sicht anzusehen. Die anderen Testpersonen hatten Schwierigkeiten die Funktion des

Icons aus der Darstellung abzuleiten.

Abbildung 5.10.: Kon�gurator: Wahl der Ausstattung[Eigene Darstellung]


T4 und T10 wählten den allgemeinen Einstieg des Kon�gurators in der Hauptnavigation.

Der Kon�gurator ist nicht passgenau in das Layout integriert. Der typische Schatten (rot

markiert) unterhalb der Hauptnavigation wird unterbrochen. Zudem kann der Button

�BMW 5er� nicht benutzt werden, obwohl ein Handsymbol das indiziert.

Abbildung 5.11.: Layoutprobleme Kon�gurator[Eigene Darstellung]

65


Aufgabe 5: Katalog und Preise

Die Probanden wurden aufgefordert einen Katalog zu bestellen und die passende Preisliste

herunterzuladen.

Hier gab es keine Schwierigkeiten. Die Buttons in der unteren Navigationsleiste sind gut

sichtbar und sinnvoll angeordnet.

Aufgabe 6: Original BMW Zubehör

Die Probanden sollten hier Zubehörfelgen für die neue BMW 5er Limousine �nden.

1. Link zu �Original BMW Zubehör� schwer au�ndbar.


Das Hauptmenü ist mit relativ viel Text belegt. �Service und Zubehör� fällt nur

wenig auf. Zwei Probanden stiegen über den �Shop� ein. Die restlichen Probanden

fanden den Link, mussten aber relativ lange danach suchen (bis zu 40 s). Sieben

von neun Probanden suchten zuerst ausführlich in den Menüs des BMW 5er Online

Showrooms, bevor Sie in die obere Hauptnavigation wechselten. Ein Proband ging

den Weg über das Menü �Design� und �Verwandte Themen�.

Abbildung 5.12.: Die ersten fünf Sekunden der Suche nach BMW Zubehör (n=9; AbsoluteFixationszeit; aufgabenbezogenes Schauen)


66


2. Auswahlmenü �Zubehör und Service� vergleichweise überladen und ohne

Mouse-Over-Zustände.


Alle Probanden hatte Schwierigkeiten sich in diesem Menü zu orientieren. Es ent-

standen teilweise lange Fixationszeiten.

3. Teasertext "Zubehör Showroom Online" für einen Laien nicht verständ-

lich.


Der Link auf der Startseite von �Original BMW Zubehör� wurde von T5 zwar längere

Zeit �xiert, aber nicht benutzt.

4. Deeplinking optimieren.


Der Proband, der als einziger den Weg über den BMW 5er Showroom genommen

hatte, kam trotzdem wie alle anderen auf die allgemeine Startseite des Zubehör

Showrooms. Hier sollte die BMW 5er Limousine und die Kategorie �Exterieur� schon

vorselektiert sein.

5. Unzureichende Mouse-Over Informationen.


Der Felgenkon�gurator unter �Original BMWZubehör� zeigt imMouse-Over-Zustand

der Leichtmetallräder nur deren Namen an (die Zollgröÿe und der Preis fehlt). So

musste ständig auf �Angebot anfordern� geklickt werden, um die gewünschte Infor-

mation zu erreichen. Zudem verwirrte das Wording �Angebot anfordern�. T6 Kom-

mentar: �Eigentlich total bescheuert.�

Aufgabe 7: Wiederaufruf Favoriten

Nur zwei Personen konnten diese Aufgabe durchführen. Diese hatten aber beim Aufruf der

zuvor abgespeicherten Seite keine Schwierigkeiten.

67


5.3. Handlungs- und Gestaltungsempfehlungen

In diesem Abschnitt sollen aufgrund der identi�zierten Probleme, Handlungs- und Gestal-

tungsempfehlungen dargelegt werden. Bei den Gestaltungsempfehlungen ist zu berücksich-

tigen, dass sie nicht die technische Umsetzbarkeit und die Anforderungen der BMW CI

beachten.

Layout Detailseiten

1. �Favoriten-Icon� unverständlich und unau�ällig platziert. !

Empfehlung: Ein allgemein verständliches Icon zum Speichern von Detailseiten ver-

wenden und au�älliger positionieren. Weiterhin sollte in der Erklärung zu Favoriten

nicht dessen Platzierung beschrieben sein, sondern die Darstellung des Symbols an

sich.

2. Unzureichende Rückkehroptionen über die BMW Seite.

Empfehlung: Statt des �x� einen �zurück-Button� an den Detailseiten anbringen.

Das �x� wurde nur sehr selten benutzt. Es wird nicht klar, ob nur dieses Fenster oder

der gesamte Vorgang geschlossen wird.

Abbildung 5.13.: Gestaltungsvorschlag Detailseiten[Eigene Darstellung]

Konfigurator:

1. Irritierendes Introbild der BMW Welt.

Empfehlung: Einsatz eines kontextbezogenen Bildes (je nachdem über welche Mo-

dellseite eingestiegen wird sollte sich das Motiv anpassen).

68


2. Kein Fortschrittsbalken beim Ladevorgang des Kon�gurators.

Empfehlung: Einfügen einer Fortschrittsanzeige.

3. Ablenkende Fahrzeugdarstellung. !

Empfehlung: Klare Kennzeichnung des gewählten und damit aktiven Fahrzeuges

(durch Hervorhebung/Transparenz).

Abbildung 5.14.: Gestaltungsvorschlag Modellauswahl[Eigene Darstellung]

4. Untermenüpunkte zu unau�ällig. !

Empfehlung: Die Texte sollten nicht abrupt erscheinen. Durch eine animierte Ein-

blendung der Texte kann der Nutzer leichter nachvollziehen, dass neue Auswahl-

punkte verfügbar sind. Auÿerdem wäre es hilfreich, wenn die Kategorien Mouse-

Over-Zustände erhalten (Modell, Editionen und Pakete, Exterieur, usw.). Die Nutzer

würden somit direkt den Zusammenhang und damit das Navigationsprinzip erken-

nen.

5. Symbolpalette klein und nicht au�ällig genug. !

Empfehlung: Ausdrucksstärkere und/oder allgemein bekannte Symbole verwenden.

Zudem sollte der Mouse-Over-Text gröÿer sein.

6. Die Fahrzeuge in der Seitenansicht zeigen immer die Grundmodelle, auch

wenn eine andere Motorisierung ausgewählt wurde. Sehr verwirrend. !

Empfehlung: Das Grundmodell nur am Anfang abbilden. Dann sollten sich die

gewählten Motoreinstellungen anpassen.

7. Fehlende Hinweise zum Beenden eines Vorgangs. !

Empfehlung: Ein kleines Hinweisfenster könnte bei einem Klick auf einen inaktiven

Bereich mit folgender Meldung erscheinen: �Bitte wählen Sie zuerst einen Motor oder

schlieÿen Sie das Fenster.� (Meldung je nach Kontext)

8. Unter der Bezeichnung "Ihr BMW" wird die Gesamtübersicht der Kon�-

guration vermutet.

Empfehlung: Zusätzlichen Button für die aktuell laufende Kon�guration einfügen.

9. Mouse-Over-E�ekt der Fahrzeuge lenkt von der Motorauswahl ab.

Empfehlung: Je nachdem welches Ziel verfolgt wird, sollte entweder die Positionie-

rung für �Andere Motorisierung� oder das Informationsfenster angepasst werden.

69


Abbildung 5.15.: Gestaltungsvorschlag �Ihr BMW� mit zusätzlichem Überblick über dieKon�guration


10. Keine Rückmeldung über die Speicherung der Kon�guration.

Empfehlung: Parallele Au�istung über die bisherige Kon�guration. Optimalerweise

als ausklappbares Menü.

11. Undeutliche Auszeichnung von klickbaren Inhalten.

Empfehlung: Navigationselemente sollten sich deutlich von rein informativen In-

halten abheben.

Platzierung und Benennung von Menüs und Links:

1. Link "Informieren" nicht au�ällig genug. !

Empfehlung: Erstens sollte man auch durch einen Doppelklick auf das Feld in die

�Informieren�-Seite kommen. Zweitens muss der Link �Informieren� deutlicher als sol-

cher zu erkennen sein. Er weist eine schlechte A�ordance220 auf. Eine dunkle Fläche

würde dem Link mehr Gewicht verleihen (analog für �Highlight erleben�).

Abbildung 5.16.: Gestaltungsvorschlag Link �Informieren�[Eigene Darstellung]

2. Der Begri� "Highlight erleben" ist zu vage formuliert. !

220vgl. 3.2.1.2 Gestaltung von Links und Buttons

70


Empfehlung: Hier würden allgemeinverständliche Begri�e wie �Video�, oder �Film�

wahrscheinlich höhere Klickraten bringen.

3. Menübezeichnungen teilweise nicht konkret genug.

Empfehlung: Durch das sogenannte Card Sorting sortieren Nutzer Begri�e in für sie

sinnvolle Gruppen. So können die mehrheitlich präferierten Begri�e ermittelt werden.

4. Link zu �Original BMW Zubehör� schwer au�ndbar.

Empfehlung: Falls Zubehör mehr in den Fokus gerückt werden soll, wäre es sinnvoll,

einen Menüpunkt in der seitlichen Navigation anzubringen (aufbauend auf Eyetracking-

Daten; siehe Abb. 5.12). Hier wurde am meisten danach gesucht.

5. Links in Animationen nicht sofort erkennbar.

Empfehlung: Durch visuelle Rückmeldung (schriftliche Anweisung: �Bitte wählen

sie einen der drei Texte� oder pulsierender Text) kann mehr Aufmerksamkeit auf die

Texte gelenkt werden.

Anpassung der Webseite an geringe Auflösungen:

1. Steuerelemente auÿerhalb des sichtbaren Bereichs.

Empfehlung: Hier wäre es sinnvoll, die Buttons nicht in den Flash�lm einzubetten,

sondern in HTML darüber zulegen, damit sie sich dynamisch an die Fenstergröÿe

anpassen können.

2. Pop-Up-Fenster werden aufgrund der geringen Au�ösung oben abgeschnit-

ten.

(das �x� zum Schlieÿen war dadurch nicht sichtbar)

Empfehlung: Die Fenster sollten sich dynamisch an geringere Au�ösungen anpas-

sen.

3. Menü zur Auswahl der Ausstattung unterhalb des sichtbaren Bereichs.

Empfehlung: Wichtige Menüs oben platzieren, oder zumindest dynamisch �oaten

lassen.

Mouse-Over Informationen

1. Menü: �Bilder und Videos�.

Empfehlung: Im Mouse-Over-Zustand das genaue Linkziel beschreiben.

2. Original BMW Zubehör Startseite: Felgenkon�gurator Sommerkomplett-

räder.

Empfehlung: Im Mouse-Over-Zustand zusätzlich Zollgröÿe und Preis integrieren.

Sonstiges: Deeplinking optimieren.

Analog zu den anderen Modellen sollte sich die Vorauswahl im Zubehör Showroom Online

nach dem Modelleinstieg richten.

71


Wünsche/Anmerkungen der Nutzer Aufgabe 1: (Motortechnologien)

T6 bemängelte, dass es bei der Motorenübersichtsseite keine Möglichkeit gibt, Motoren zu

vergleichen. T6 und T9 vermissen konkrete Angaben zu den einzelnen Motoren (Drehzahl,

Beschleunigung, Elastizität, usw.).

Aufgabe 3: (Highlight Integral Aktiv-Lenkung)

T8: Die Überschriften versprechen präzisere Inhalte. Kommentar zum Video: �Auch ein

Fiat Punto fährt so um die Kurven.� Die im Text angesprochenen Vorteile werden in den

Videos nicht wirklich gezeigt.

5.4. Auswertung Fragebögen

ISONORM 9240/110-S Der ISONORM 9240/110-S (S steht für Short) wurde von Prof.

Dr. Jochen Prümper entwickelt. Der Fragebogen greift die sieben Grundsätze der Dia-

loggestaltung in Kurzfassung auf. Jeder einzelne Grundsatz wird durch drei vorgegebene

Aussagen bewertet. Dementsprechend mussten die Probanden zu insgesamt 21 Items221

Stellung nehmen.

Die Bewertung der einzelnen Items erfolgt durch eine bipolare, siebenstu�ge Skala von 1

(�) bis 7 (+++).222 Ein Beispiel:

Die Software ...

erfordert, dass man sichviele Details merken muss.

Die Software ...

erfordert nicht, dass man sichviele Details merken muss.

--- -- - -/+ + ++ +++

x

Abbildung 5.17.: Ausfüllbeispiel für das Item �Wissensverfügbarkeit�[Eigene Darstellung: In Anlehnung an Prümper 1997: Der Benutzungsfragebogen ISONORM 9241/10,

S.254]

Die gesamte Au�istung und Erklärung der Items ist dem Anhang [A.2.2] zu entnehmen.

Die Auswertung der Daten erfolgt durch die Bildung von Mittelwerten der enthaltenen

Grundsätze.223

221In einem Fragebogen wird die schriftliche Zusammenstellung von Aussagen in Form sogenannter Itemsverstanden

222vgl. Prümper 1997: Der Benutzungsfragebogen ISONORM 9241/10, S.254223vgl. Hamborg 2004: Usability Professionals 2004, S.92

72


4,6

4,23,9

5,2 5,04,8 4,8

Top 5 Items: [Mittelwerte]

Flop 5 Items: [Mittelwerte]

Aufgaben-angemessenheit

Selbst-beschreibungs-

fähigkeit

Erwartungs-konformität

Lern-förderlichkeit

7

6

5

4

3

2

1

[Mit

telw

erte

]

[Grundsätze]

Steuerbarkeit Fehlertoleranz Individualisier-barkeit

Bedien-konsistenz (3,8]

Unterstützungs-möglichkeit [3,9]

Transparenz [4,0]

Gestaltungs-konsistenz [4,0]

Wissensver-fügbarkeit (5,7]

Flexibilität [5,6]

Erschließ-barkeit [5,5]

Wechsel-möglichkeit [5,0]

Aufgaben-�exibilität [5,0]

Aufwands-minimierung [4,3]

3,95

kein

Han

dlun

gsbe

darf

Han

dlun

gsbe

darf

Abbildung 5.18.: ISONORM 9240/110-S - Ergebnisse [n=10][Eigene Darstellung: In Anlehnung an Prümper 1997: Der Benutzungsfragebogen ISONORM 9241/10,

S.254]

Bewertung In der Gesamtbetrachtung (Kumulierung der Mittelwerte aller Items) mit

einem Ergebnis von 97,5 Punkten gibt es aktuell keinen Grund, bezüglich der Nutzer-

73


freundlichkeit Veränderungen an der Webseite vorzunehmen.224 Dennoch sollten hier auch

die Extreme betrachtet werden. Das Dialogprinzip �Erwartungskonformität� erreichte im

Test nur durchschnittliche Werte. Dies ist darauf zurückzuführen, dass die Internetseite

kein durchgängig einheitliches Layout verwendet und sich die Probanden dadurch immer

wieder auf neue Bedingungen einstellen mussten.

Die negativsten Aussagen im Überblick:

1. Bedienkonsistenz: (die Internetseite lässt sich eher nicht durchgängig nach einem

einheitlichen Prinzip bedienen)

Erklärung: Das Layout ist nicht konsistent.

2. Unterstützungsmöglichkeit: (die Internetseite bietet auf Verlangen nur sehr wenige

situationsspezi�sche Erklärungen, die konkret weiterhelfen)

Erklärung: Viele Probanden vermissten Hilfestellungen bei komplexeren Handlungen

(vor allem im Fahrzeugkon�gurator).

3. Transparenz: (die Internetseite informiert nur im durchschnittlichen Maÿe darüber,

was sie gerade macht)

Erklärung: Fehlende Ladebalken, keine parallele Au�istung, was kon�guriert wurde.

Kritik am ISONORM 9240/110-S:

� Die Qualität der Beantwortung der Fragen hängt stark vom Erinnerungsvermögen,

der Selbstwahrnehmung und der Aufmerksamkeit des Probanden ab. Dadurch kön-

nen Verfälschungen entstehen.225 Somit sollte der Zeitraum zwischen Interaktion mit

dem System und Ausfüllen des Fragebogens möglichst gering sein.226 Zudem sichert

nur eine hinreichende Auseinandersetzung mit dem System eine aussagekräftige Eva-

luation.227

� Durch die sehr spezi�schen Fragestellungen tre�en nicht alle Items auf jedes Produkt

zu.228

� Die Zufriedenheit (Joy of Use) wird nicht gemessen.

� Der ISONORM hat nur einen Hinweischarakter. Er zeigt in welchen Bereichen Schwach-

punkte von den Nutzern wahrgenommen werden, liefert aber keine Hinweise wie diese

behoben werden sollen.229

224vgl. Seikumu 2010 WWW: Anleitung zur Benutzung der Auswertungsmatrix der ISONORM Befragung,S.3

225vgl. Hamborg 2004: Usability Professionals 2004, S.94226vgl. Nielsen 1993: Usability Engineering, S.209227vgl. Sarodnick/Brau 2005: Methoden der Usability Evaluation, S.169228vgl. Hamborg 2004: Usability Professionals 2004, S.94229vgl. Sarodnick/Brau 2005: Methoden der Usability Evaluation, S.174

74


5.4.1. Attrakdiff2

Zusätzlich zu den ergonomischen bzw. pragmatischen Qualitäten ermittelt der Attrak-

di�2 (entwickelt von Marc Hassenzahl) die Attraktivität eines interaktiven Produkts.230

Hassenzahl geht davon aus, das ein gebrauchstaugliches Produkt alleine nicht ausreicht,

um den Nutzer zu befriedigen. Zusätzlich müssen sogenannte Hedonische Faktoren be-

rücksichtigt werden. Die Hedonische Qualität bezeichnet dabei zum einen die Stimulation

(Neuartigkeit, Herausforderung) und zum anderen die Identi�kation mit einem Produkt.

Die Wahrnehmung beider Qualitäten beein�usst das Gesamturteil der wahrgenommenen

Attraktivität231 (siehe 1.2).

Beurteilt werden vier Dimensionen:232

1. Pragmatische Qualität (PQ):

Sie beschreibt die Benutzbarkeit eines Produktes und verdeutlicht, wie gut der Nutzer

seine Ziele mit Hilfe des Produktes erreichen kann. Sie entspricht somit der eigentli-

chen Usability.233

2. Hedonische Qualität - Stimulation (HQ-S):

Die Menschen wollen überrascht und gefordert werden. Diese Dimension misst inwie-

weit neuartige, interessante Funktionalitäten, Inhalte und Interaktionsmöglichkeiten

angeboten werden.

3. Hedonische Qualität - Identität (HQ-I):

Klärt die Frage, ob sich der Nutzer mit dem Produkt identi�zieren kann.

4. Attraktivität (ATT):

Globale Bewertung aufgrund der wahrgenommenen Qualität.

Der Fragebogen besteht aus 28 gegensätzlichen Begri�spaaren (je sieben pro Dimension).

Das Ausfüllprinzip ist dabei äquivalent zum ISONORM. Die Bewertung unterscheidet sich

aber. Die Skala reicht hier von -3 bis +3.

Anmerkung zum Aufbau des Fragebogens: Die Platzierung der Adjektive wechselt. Manch-

mal steht das positive rechts (hässlich - schön) und in anderen Fällen links (angenehm -

unangenehm).

Der Skalenwert für jede Dimension ergibt sich aus dem Mittelwert der zugehörigen Items.

230vgl. Sarodnick/Brau 2005: Methoden der Usability Evaluation, S.179231vgl. Burmester 2003: Ist das wirklich gut? Bedeutung der Evaluation für die benutzerzentrierte Gestaltung,

S.108232vgl. Hassenzahl 2004: Usability Professionals 2004, S.96233vgl. Schmitz 2008: Kompendium Medieninformatik, S.265

75


PragmatischeQualität

Hedonische QualitätIdentität

Hedonische QualitätStimulation Attraktivität

3

2

1

0

-1

-2

-3

0,029

1,086 1,114 1,243

[Mittelw

erte]

[Dimensionen]

Begri�spaare - Top 5 [Mittelwerte]:

Begri�spaare - Flop 5 [Mittelwerte]:

technisch - menschlich [-1]

kompliziert - einfach [-0,2]

unpraktisch - praktisch [-0,1]

umständlich - direkt [0,1]

trennt mich - bringt mich näher [-0,3]

phantasielos - kreativ [1,9]

schlecht - gut [1,7]

minderwertig - wertvoll [1,7]

laienhaft - fachmännisch [1,7]

stillos - stilvoll [1,5]

Bedeutung: Die Bewertung tendiert stark zu kreativ.

Bedeutung: Die Bewertung tendiert eher zu technisch.

Abbildung 5.19.: Attrakdi�2 - Ergebnisse [n=10][Eigene Darstellung: In Anlehnung an Hassenzahl 2004: Attrakdi�, S. 23]

Testergebnis: Selbstorientiert

PQ Mittel (zwischen -1 und 1), HQ234 Hoch (gröÿer 1)

Das Produkt fasziniert, stimuliert und macht neugierig, bietet aber nur im

durchschnittlichen Maÿe Unterstützung bei der Zielerreichung.

234HQ = mittlere Ausprägung aus Stimulation und Identität

76


Kritik am Attrakdiff2:235

� Die Begri�spaare können von den Nutzern unterschiedlich aufgefasst werden. Durch

die hohe Anzahl von sieben Items pro Dimension und der Mittelwertbildung wird

versucht dies zu kompensieren. In die Auswertung sollten deshalb weniger die Ein-

zelwerte, sondern die Skalenwerte ein�ieÿen.

� Die Bedeutung der Begri�spaare ist abhängig vom untersuchten Objekt.

� Durch den breit angestrebten Einsatzbereich passen manche Begri�spaare nur be-

dingt auf das jeweilige getestete Produkt.

� Der Fragebogen ist rein subjektiv. Jede Person emp�ndet anders.236

� Der Attrakdi�2 liefert keine Gestaltungsempfehlungen. Er kann nur in Verbindung

mit weiteren Methoden, wie beispielsweise einem Usability Test, Hinweise liefern.

� Problem der impliziten Vergleichsstandards: Eine Person wird ein Produkt immer

mit seinen Vorerfahrungen vergleichen. Was die eine Person als innovativ ansieht,

kann für die andere schon Standard sein.

Aktuell wird an einer Kurzversion, dem AttrakDi� mini, gearbeitet. Er bewertet nur noch

zehn Items (vier pragmatische, vier hedonische und zwei Attraktivitätsitems). Die verkürz-

te Version soll das wiederholte Messen von Wahrnehmungen und Bewertungen während

eines Usability-Tests ermöglichen. Die Messergebnisse werden dadurch nicht nur zuverläs-

siger, sondern ermöglichen auch die Dokumentation von Trends.237

5.4.2. Wünsche, Anregungen der Testpersonen

Gesammeltes Feedback der Testpersonen:

Positives Feedback:

� Moderne und klare Gestaltung, ansprechende Aufmachung

� Interessante Inhalte (3D-Animationen und Videos zu Fahraufnahmen)

� Sehr hoher Qualitätsanspruch (sehr gute Fotogra�en, professionelle Umsetzung)

� Umfangreich, viele Informationen, sehr gute Beschreibung von Details

� Das Produkt an sich

Negatives Feedback:

� Teilweise komplizierter Aufbau, unübersichtlich und umständlich (Kon�gurator)

� Keine durchgängige Logik (Menüaufbau)

� Schlechte Bedienung

235vgl. Hassenzahl 2004: Usability Professionals 2004, S. 97f236vgl. Holzinger 2008: HCI and Usability for Education and Work, S.25237vgl. Hassenzahl et al. 2009: Der User Experience auf der Spur: Zum Einsatz von www.attrakdi�.de, S.81

77


� Der aktuelle Aufenthaltsort ist nicht ersichtlich

� Wichtige Menüs sind zu unau�ällig

� Durchschnittliches Anbieten von Möglichkeiten und Funktionen

� Zu wenig Führung

� Ständiges Scrollen im Kon�gurator

Wünsche der Probanden:

� Einheitliche Bedienelemente

� Klare Strukturen, einfache Darstellung

� Alle wichtigen Elemente auf einen Blick (kein Scrollen)

� Einfache Handhabung

� Schneller Aufbau der Seiten (wenn nötig Verzicht auf Multimedia)

� Hilfestellung (Einführungsvideo zur Bedienung des Kon�gurators auf Abruf)

� Krümelleiste (siehe 3.2.1.1)

5.5. Untersuchungskritik

Nicht alle theoretisch geplanten Untersuchungen konnten im Test auch praktisch umgesetzt

werden. Während der Tests traten immer wieder kleine Probleme auf, die an dieser Stelle

kurz erläutert werden sollen:

� Viele Probanden konnten nicht dauerhaft zum �lauten Denken� angeregt werden.

� Fehler auf der BMWWebseite: Teilweise wurden Bilder und Icons abgeschnitten oder

ganze Bildershows (Interieur-Design) nicht angezeigt.

� Zeitmessungen waren oft nicht sinnvoll, da lautes Denken die Ergebnisse stark ver-

fälscht.238 Deswegen wurden für die Auswertung nur kleine Zeitabschnitte gewählt

(zum Beispiel die ersten Sekunden des Kontakts mit der Seite, denn hier wurde noch

nicht laut nachgedacht).

� Die zuletzt besuchte Webpage nach Beendigung einer Testaufgabe konnte in Tobii

Studio239 nicht dynamisch geladen werden. So musste bei jeder Aufgabe wieder von

der Startseite des BMW 5er Online Showrooms angefangen werden. Bei einem Pro-

banden stürzte die Software ab.

� Eine Person musste aufgrund zu geringer Internetkenntnisse ab Aufgabe fünf aus

dem Test genommen werden.

� Die Qualität der Eyetracking-Daten variiert stark (negativen Ein�uss hatten hori-

zontale und vertikale Kopfbewegungen und das Tragen von Gleitsichtbrillen).

238vgl. Rubin/Chisnell 2008: Handbook of Usability Testing, S.80239Tobii Studio ist eine Software zur Aufzeichnung und Auswertung von Eyetracking Daten (die aktuelle und

auch für die Auswertung verwendete Version ist 2.05)

78

6. Zusammenfassung und Ausblick

Die Usability-Studie zum BMW 5er Online Showroom hat Optimierungspotenziale vor al-

lem hinsichtlich pragmatischer Kriterien aufgezeigt. Die Probanden bemängelten die teil-

weise schwierige Identi�kation von anwählbaren Inhalten sowie die vereinzelt undeutlichen

Menübezeichnungen und symbolischen Darstellungen. Desweiteren wurde mehr Kontrolle

über die Anwendung, eine bessere Übersicht und kontinuierliches Feedback über den aktuel-

len Aufenthaltsort innerhalb der Seitenstruktur gefordert. Die Auswertung des ISONORM-

und Attrakdi�2-Fragebogens konnte diese Beobachtungen bestätigen. In diesem Zusam-

menhang muss allerdings beachtet werden, dass viele Probleme, vor allem im Kon�gurator,

infolge der vorgegebenen Bildschirmau�ösung entstanden sind. Alle Probanden empfanden

die geringe Au�ösung als unangenehm und einschränkend. Durch die rasante technische

Entwicklung im Bildschirmbereich sollte deshalb erwogen werden, in Zukunft höhere Tes-

tau�ösungen zu verwenden. Die hedonische Qualität der Webseite war dagegen überdurch-

schnittlich und hat bei allen Probanden ein nachhaltig positives Nutzungserlebnis erzeugt.

Die in der Zielstellung bereits angesprochenen und im Verlauf der Arbeit de�nierten Er-

folgsfaktoren einer benutzerfreundlichen Webseitengestaltung haben einen maÿgeblichen

Teil zur erfolgreichen Identi�kation und Interpretation von Problemfeldern sowie deren

Ableitung in konkrete Handlungsempfehlungen beigetragen. Die erarbeiteten Grundlagen

verstehen sich somit nicht nur als Best Practice-Sammlung für die usability-orientierte Ent-

wicklung von Webseiten, sondern sie lassen sich auch für die Evaluation von Applikationen

nutzen. Der Einsatz des Eyetrackings lieferte dabei weitere wertvolle Erkenntnisse über die

erfolgskritische Platzierung von Seitenelementen.

Weiterhin konnten durch die Kombination mit der Methode des lauten Denkens während

der Bearbeitung hedonische und pragmatische Urteile der Nutzer erfasst und �xiert wer-

den. Dies war insofern von Vorteil, da die Probanden ihre Kritik zeitnah und am Ort

des Entstehens mitteilen konnten. Somit wurden Fehlinterpretationen, die durch eine aus-

schlieÿliche Betrachtung von Eyetracking-Aufzeichnungen möglicherweise entstanden wä-

ren, minimiert.

Der Relaunch des BMW Internetauftritts im nächsten Jahr wird mit seiner neuen, ein-

heitlichen Struktur und Gestaltung viele der aufgetretenen Usability-Probleme beheben

können. Um einen späteren Vergleich mit dem neuen Konzept zu ermöglichen, wurde die

vorliegende Studie entsprechend konzipiert und dokumentiert.

Den Abschluss dieser Arbeit bildet ein kurzer Überblick über potenzielle Ein�ussfaktoren

für die zukünftige Webseitengestaltung.

79


6.1. Mobile Anwendungen

Die Akzeptanz und Nutzung von mobilen Webangeboten ist in den letzten Jahren, nicht

zuletzt durch die Einführung populärer Geräte wie dem iPhone und Blackberry, stark

gestiegen.240 Seit 2008 haben sogar mehr Menschen über mobile Geräte Zugang zum In-

ternet als über stationäre Desktops (1,6 Milliarden zu 1,1 Milliarden).241 Die Aufbereitung

von Webseiten für den mobilen Bereich sollte demnach nicht vernachlässigt werden. Die

Entwicklung und Gestaltung steht aber vor zahlreichen neuen Herausforderungen:

� Mobile Endgeräte sind in ihrer Ausführung sehr heterogen. Displaygröÿe, Betriebs-

system, Prozess- und Speicherleistung, Tastatur bzw. Bedienkonzept sowie Browser-

funktionalität sind je nach Gerät unterschiedlich.242

� Im Vergleich zum stationären Internet haben sie immer noch limitierte Datenüber-

tragungsraten.

� Umweltein�üsse wie beispielsweise Lärm, Bewegung und unterschiedliche Lichtver-

hältnisse schränken die Nutzung ein.

� Aufwendige Webapplikationen verbrauchen vergleichsweise viel Akkukapazität.

� Abweichendes Nutzerverhalten: Aufgrund von Übertragungskosten und der geringen

Displaygröÿe versuchen Nutzer so e�zient wie möglich nach relevanten Inhalten zu

suchen. Die Surfzeiten sind somit viel kürzer.

� Mobile Webbrowser können schlecht formatierte Webseiten oft nur bedingt oder gar

nicht darstellen.

� 90 % der im Umlauf be�ndlichen Geräte können kein Java Script oder Ajax darstel-

len.243

Da das mobile Web die Anlagen des �stationären� Webs nutzt, können viele Gestaltungs-

grundlagen adaptiert werden. In verschiedenen Teilbereichen müssen diese aber dennoch

modi�ziert werden:

� Inhalte müssen noch e�zienter kommuniziert werden. Kurze Artikellängen und ein

hoher Kontrast zum Hintergrund sind noch stärker zu berücksichtigen.244

� Navigationselemente müssen sich noch deutlicher vom restlichen Inhalt abheben.245

� Statische und lineare Navigationskonzepte sind nur bedingt anwendbar, da sie viel

Fläche verbrauchen. Besser sind dynamische Navigationen, die sich je nach Kontext

anpassen.246

240vgl. Fling 2009: Mobile design and development, S.18241vgl. Fling 2009: Mobile design and development, S.30242vgl. Fling 2009: Mobile design and development, S.6�243vgl. Frederick/Lal 2009: Beginning Smartphone Development, S.5244vgl. Cordes 2007: Design und Usability im mobilen Zeitalter, S.45245vgl. Cooper et al. 2007: About Face 3, S.312246vgl. Cordes 2007: Design und Usability im mobilen Zeitalter, S.40

80


� Scrollbare Listen eignen sich sehr gut, um mehrere Auswahlmöglichkeiten zu präsen-

tieren (pro Zeile ein Link).247

� Bei Touchscreen-Geräten sollten die Interaktions�ächen möglichst groÿ sein und am

unteren Bildschirmrand platziert werden, damit das Display bei der Bedienung nicht

verdeckt wird. Die Sekundärnavigation wird oben erwartet. Bei tastaturbasierten Ge-

räten hingegen sollte sowohl die Haupt- als auch die Sekundärnavigation am oberen

Bildschirmrand ausgerichtet sein, um das Scrollen mit dem Steuerkreuz zu erleich-

tern.248

Natürlich ist es erstrebenswert, dass Webseiten von jedem Gerät, egal ob Desktop oder

Mobiltelefon, gleich gut zu bedienen sind. Es sollte dabei aber berücksichtigt werden, dass

nicht alle Dienste im gleichen Maÿe mobil genutzt werden. Basierend auf den Bedürnissen

der Zielgruppe sollte gezielt selektiert werden, welche Inhalte sinnvoll sind. Ein mobiler

Fahrzeugkon�gurator wäre sicher ein falscher Ansatz.

6.2. Alternative Eingabemedien

Touchscreen In letzter Zeit drängen immer mehr Touchscreen-Computer, vor allem für

den Privatgebrauch, auf den Markt. Die Multi-Touch-Funktionalitäten dieser Geräte sollen,

ähnlich wie früher die Maus, die Bedienung revolutionieren. Die folgenden Ausführungen

beziehen sich auf einen Beitrag aus dem Band der Usability Professionals 2009.249

Der wesentliche Vorteil dieses Eingabemediums liegt in der direkten Medienmanipulation.

Das bedeutet, dass die Ein- und Ausgabe über dasselbe Medium läuft und Bildschirminhal-

te direkt berührt werden können. Die Interaktion mit dem System geschieht viel intuitiver.

Gewöhnliche Systeme lassen sich nur indirekt über ein Artefakt bedienen. Dieser wesentli-

che Unterschied erfordert aber ein Umdenken in der Interaktionsgestaltung und damit eine

Anpassung der Präsentation von Informationen. Vorhandene Bedienkonzepte können nicht

einfach kopiert, sondern müssen individuell für die Handbedienung angepasst werden.

Herausforderungen der Interaktionsgestaltung von Applikationen für die Touchscreen-Bedienung:

� Klickverhalten: Es kann nicht zwischen Mouse-Over- oder Klickzustand unterschieden

werden. Jede Berührung entspricht einer Aktion. Tooltipps können demzufolge nicht

angezeigt werden.

� Bei komplexeren Aufgaben, wie etwa einer Tabellenkalkulation, stöÿt die Technik an

ihre Grenzen. Die Bedienung per Hand wird zu ungenau.

� Bei längeren Strecken zum Ziel wird die Benutzung anstrengend.

Das Interfacedesign muss also Hinweise liefern, mit welchen Gesten der Nutzer welche

Aktionen auslösen kann. Wie schon in 3.2.1.2 besprochen, müssen klickbare Elemente eine

247vgl. Cordes 2007: Design und Usability im mobilen Zeitalter, S.41248vgl. Fling 2009: Mobile design and development, S.123f249vgl. Hanke et al. 2009: Usability und User Experience von Multitouch-Applikation, S.69�

81


A�ordance aufweisen. Geri�elte Ober�ächen deuten schon über ihre �Materialität� an, dass

sie bewegt werden können. Ansonsten gelten für eine hohe Benutzerfreundlichkeit ähnliche

Anforderungen, wie für die Tastatur- und Mausbedienung.

Die Touchscreen-Bedienung ist sicherlich auch eine interessante Möglichkeit für die Inter-

aktion mit Webseiten. Die Entwicklung spezieller Usability-Grundsätze steht aber noch am

Anfang. Ob sich die Technik durchsetzen wird, hängt von der Akzeptanz der Nutzer ab.

Traditionelle Eingabegeräte werden jedoch weiter bestehen. Sie haben sich über Jahrzente

etabliert und erlauben eine schnellere Bedienung.

Eyetracking-Systeme als Steuerungsinstrument Noch direkter als ein Touchscreen

funktioniert die blickgesteuerte Bedienung einer Benutzerober�äche. In speziellen Bild-

schirmen sind Kameras eingebaut, die die Blicke der Nutzer registrieren. Die Vorteile lie-

gen zunächst auf der Hand. Gegenüber der Handbedienung spart sich der Nutzer einen

Arbeitsschritt. Nachdem er sein Zielobjekt entdeckt hat, kann er es direkt auswählen. Er

muss die Strecke nicht zusätzlich mit der Hand zurücklegen, was sich bei zunehmender

Länge lohnt250 (Fitt's Law251). Darüber hinaus können dem Nutzer Informationen gezielt

präsentiert werden. Der Computer interpretiert die Blickdauer und kann so beispielsweise

an das gewünschte Objekt heranzoomen, unwichtige Inhalte (dabei) abblenden oder mehr

Informationen zu einem bestimmten Thema zeigen.252

In der praktischen Umsetzung treten jedoch einige Probleme auf. Das sogenannte intentio-

nale manipulatorische Schauen liegt vor, wenn der Blick gezielt auf eine Stelle des Inter-

faces gelenkt wird, um bestimmte Aktionen zu bewirken.253 �Hierbei stellt sich die Frage,

inwieweit das in groÿem Maÿe umwelt-reaktive menschliche Sehverhalten als willkürlicher

motorischer Akt soweit zu internalisieren und zu trainieren ist, dass mit Hilfe der Augenbe-

wegungen etwa die Manipulation von Bildschirmobjekten möglich wird.�254 Oft schweifen

Nutzer ab und lassen ihre Augen auf einer Stelle ruhen, ohne etwas zu beabsichtigen. Das

System wird dann fälschlicherweise die Fixation als für den Menschen interessant bewerten

und das Objekt hervorheben oder selektieren.255 Um dies zu verhindern sollte eine mini-

male Verweildauer de�niert werden, ab der ein Objekt ausgewählt wird. Die Bemessung

des richtigen Zeitfensters gestaltet sich aber als schwierig. Ist es zu groÿ, verlängert sich

die Bearbeitungszeit, ist es zu klein, werden Elemente eben unbeabsichtigt selektiert.256

Die ausschlieÿliche Steuerung durch Blicke ist somit schwierig zu lösen. In einer Studie

von Salvucci und Anderson (2000) wurde deshalb die Blicksteuerung mit einem physischen

Element kombiniert. Die Nutzer �xierten das Objekt zwar wie bisher über Ihren Blick, je-

doch konnte nur ein Tastendruck eine Aktion auslösen. Die Selektionsgeschwindigkeit war

250vgl. Surakka et al. 2003: Voluntary Eye Movements in Human Computer Interaction, S.475251Fitts' Law besagt, dass die Zeit für die Auswahl eines Objekts von dessen Entfernung und Gröÿe abhängt

(vgl. Thissen 2003: Kompendium Screen-Design, S.222).252vgl. Nielsen/Pernice 2010: Eyetracking Web Usability, S.18253vgl. Bente 2004: Erfassung und Analyse des Blickverhaltens, S.307254Bente 2004: Erfassung und Analyse des Blickverhaltens, S.307255vgl. Nielsen/Pernice 2010: Eyetracking Web Usability, S.19256vgl. Surakka et al. 2003: Voluntary Eye Movements in Human Computer Interaction, S.481

82


signi�kant besser, verglichen mit der reinen Blicksteuerung.257

Zusammenfassend betrachtet scheint der Einsatz des Eyetracking als ergänzendes Ein-

gabemedium am wahrscheinlichsten. Zu viele Faktoren beeinträchtigen derzeit noch eine

ausschlieÿliche Blicksteuerung. Ebenso wie bei der Touchscreen-Bedienung, sind noch keine

konkreten Usability-Normen de�niert worden. Es ist aber davon auszugehen, dass bisherige

Gestaltungsregeln auch für diese Technik anwendbar sind.

257vgl. Surakka et al. 2003: Voluntary Eye Movements in Human Computer Interaction, S.482

83

7. Literaturverzeichnis

Apple: Apple Human Interface Guidelines (OSXHIGuidelines.pdf), heruntergeladen von

URL: http://developer.apple.com/mac/library/documentation/userexperience/conc

eptual/applehiguidelines/XHIGIntro/XHIGIntro.html, letztmalig abgerufen am 13.06.10

Beaird J.: Gelungenes Webdesign. Eine praktische Einführung in die Prizipien der Web-

seitengestaltung, dpunkt.verlag GmbH, Heidelberg 2008

Bente G.: Erfassung und Analyse des Blickverhaltens. In: Mangold R., Vorderer P., Bente

G. (Hrsg.): Lehrbuch der Medienpsychologie, Hogrefe-Verlag, Göttingen 2004

Bente G., Eschenburg F., Fürtjes M.: Im Auge des Nutzers. Eyetracking in der Web-

Usability-Forschung. In: Welker M., Wenzel O. (Hrsg.): Online-Forschung 2007 -

Grundlagen und Fallstudien, Halem-Verlag, Köln 2007

Bojko A.: Informative or Misleading? Heatmaps Deconstructed. In: Jacko J. (Hrsg.): Hu-

man Computer Interaction - New Trends - 13th International Conference - HCI In-

ternational 2009 , San Diego 2009

Burmester M.: Ist das wirklich gut? Bedeutung der Evaluation für die benutzerzentrierte

Gestaltung. In: Machate J., Burmester M. (Hrsg.): User Interface Tuning - Benut-

zungsschnittstellen menschlich gestalten, Software und Support Verlag, Frankfurt am

Main 2003

Cooper A., Reimann R., Cronin D.: About face 3, The Essentials of Interaction Design,

Wiley Publishing, Inc., 2007

Cordes B.: Design und Usability im mobilen Zeitalter, Potenziale von hybriden Netzen,

Verlag Dr. Müller, Saarbrücken 2007

Dahm M.: Grundlagen der Mensch-Computer-Interaktion, Pearson Studium, München 2006

DIN EN ISO 9241-11 1999-01: Ergonomische Anforderungen für Bürotätigkeiten mit Bild-

schirmgeräten. Teil 11: Anforderungen an die Gebrauchstauglichkeit - Leitsätze. Deut-

sche Fassung EN ISO 9241-11, Beuth-Verlag, Berlin 1998

Duchowski A: Eyetracking Methodology. Theory and Practice. Second Edition, Springer-

Verlag, London 2007

Dumas J., Redish J.: A Practical Guide to Usability Testing. Revised Edition, Paper-

back, 1994

84


Eibl M.: Schein und Sein der Bedienbarkeit. In: Eibl M., Reiterer H., Stephan P., Thissen

F. (Hrsg.): Knowledge Media Design. Theorie, Methodik, Praxis, 2. Au�age, Olden-

bourg Wissenschaftsverlag GmbH, München 2006

Galitz W.: The Essential Guide to User Interface Design. An Introduction to GUI Design.

Principles and Techniques, 3rd Edition, Wiley Publishing, 2007

Goldberg J., Kotval X.: Computer Interface Evaluation Using Eye Movements: Methods

and Constructs. In: International Journal of Industrial Ergonomics, Vol. 24, No. 6,

Elsevier, 1999

Hamborg K. C.: Fragebögen zur Bestimmung der ergonomischen Qualität von Softwa-

re. In: Hassenzahl, Peissner et al. (Hrsg.): Usability Professionals 2004, Fraunhofer

Verlag, Stuttgart 2004

Hammer N., Bensmann K.: Webdesign für Studium und Beruf, Webseiten planen, gestal-

ten und umsetzen, Springer-Verlag, 2009

Hanke M., Toussaint C., Leonardt W., Schubert U.: Usability und User Experience von

Multitouch-Applikation - Erfahrungen aus einem Pilotprojekt für die DATEV eG. In:

Brau H., Diefenbach S., Hassenzahl M., Kohler K., Koller M., Peissner M., Petrovic

K., Thielsch M., Ullrich D., Zimmermann D. (Hrsg.): Usability Professionals 2009.

Erleben gestalten, Fraunhofer Verlag, Stuttgart 2009

Hassenzahl M.: Interaktive Produkte wahrnehmen, erleben, bewerten und gestalten. In:

Eibl M., Reiterer H., Stephan P., Thissen F. (Hrsg.): Knowledge Media Design. Theo-

rie, Methodik, Praxis, 2. Au�age, Oldenbourg Wissenschaftsverlag GmbH, München

2006

Hassenzahl M.: Mit dem Attrakdi� die Attraktivität interaktiver Produkte messen. In:

Hassenzahl, Peissner et al. (Hrsg.): Usability Professionals 2004, Fraunhofer Verlag,

Stuttgart 2004

Hassenzahl M., Burmester M, Koller F.: Der User Experience auf der Spur: Zum Ein-

satz von www.attrakdi�.de. In: Brau H., Diefenbach S., Hassenzahl M., Kohler K.,

Koller M., Peissner M., Petrovic K., Thielsch M., Ullrich D., Zimmermann D. (Hrsg.):

Usability Professionals 2009. Erleben gestalten, Fraunhofer Verlag, Stuttgart 2009

Heinecke A.: Mensch-Computer-Interaktion, Fachbuchverlag Leipzig im Carl Hanser Ver-

lag, 2004

Holzinger A.: HCI and Usability for Education and Work. 4th Symposium of the Work-

group Human-Computer Interaction and Usability Engineering of the Austrian Com-

puter Society, USAB 2008 Graz, Austria, November 2008, Proceedings, Springer Ver-

lag, 2008

Ilmberger W., Schrepp M., Held T.: Was verursacht den Zusammenhang zwischen Ästhe-

tik und Usability? In: Wandke H., Kain S., Struve D. (Hrsg.): Mensch & Computer

2009: Grenzenlos frei!?, 9. fachübergreifende Konferenz für interaktive und koopera-

tive Medien, Oldenbourg Wissenschaftsverlag, München 2009

85


Jacko J. (Hrsg.): Human Computer Interaction. New Trends, 13th International Confe-

rence, HCI International 2009, Springer Verlag, San Diego 2009

Jacob F.: Usable Motion - Das Usabilitypotenzial bewegter Gra�k. In: Brau H., Diefen-

bach S., Hassenzahl M., Kohler K., Koller M., Peissner M., Petrovic K., Thielsch M.,

Ullrich D., Zimmermann D. (Hrsg.): Usability Professionals 2009. Erleben gestalten,

Fraunhofer Verlag, Stuttgart 2009

Kain S.: Erfassung der Aufmerksamkeitsverteilung auf Webseiten, Verlag Dr. Müller, Saar-

brücken 2007

Kalbach J.: Handbuch der Webnavigation, O'Reilly Verlag, Köln 2008

Krug S.: Don't make me think. A common sense approach to web usability, Second Edition,

New Riders Publishing, 2006

Linder J.: Die Usability von Rich Internet Applications. In: Blumauer A., Pellegrini T.

(Hrsg.): Social Semantic Web. Web 2.0 - Was nun?, X.media.press, 2009

Lotterbach S., Wagner C., Marek M.: Typogra�e und Gebrauchstauglichkeit: Benutzer-

freundliche Schriftgestaltung. In: Brau H., Diefenbach S., Hassenzahl M., Kohler K.,

Koller M., Peissner M., Petrovic K., Thielsch M., Ullrich D., Zimmermann D. (Hrsg.):


Mayer, H.: Einführung in die Wahrnehmungs-, Lern-, und Werbepsychologie, 2. überar-

beitete Au�age, Oldenbourg Wissenschaftsverlag GmbH, 2005

Mazarakis A.: Kann zu viel Nähe schaden? - Revisionen zum split-attention e�ect. In:

Wandke H., Kain S., Struve D. (Hrsg.): Mensch & Computer 2009, 9. fachübergrei-

fende Konferenz für interaktive und kooperative Medien, Oldenbourg Wissenschafts-

verlag, München 2009

Meier F., Will, S., Wolff C.: Empirische Untersuchung der Designgeschichte des WWW.

In: Wandke H., Kain S., Struve D. (Hrsg.): Mensch & Computer 2009: Grenzenlos

frei!?, 9. fachübergreifende Konferenz für interaktive und kooperative Medien, Olden-

bourg Wissenschaftsverlag, München 2009

Niegemann H., Domagk S., Hessel S., Hein A., Hupfer M., Zobel A.: Kompendium mul-

timediales Lernen, Springer-Verlag, 2008

Nielsen J.: Designing Web Usability, Markt+Technik Verlag, München 2001

Nielsen J.: Usability Engineering, Academic Press, San Diego 1993

Nielsen J., Loranger H.: Prioritizing Web Usability, New Riders, 2006

Nielsen J., Pernice K.: Eyetracking Web Usability, New Riders, 2010

Norman D.: The design of everyday things, A currency book, Published by Doubleday,

1989

Outing S., Ruel L.: The Best of Eyetrack III: What We Saw When We Looked Through

Their Eyes 2004. In: Eyetrack III Online News Consumer Behaviour in the age of

86


multimedia. URL: http://www.poynterextra.org/eyetrack2004/main.htm, letztmalig

abgerufen am 25.05.10

Preim B.: Entwicklung interaktiver Systeme. Grundlagen, Fallbeispiele und innovative An-

wendungsfelder, Springer-Verlag, 1999

Prümper J.: Der Benutzungsfragebogen ISONORM 9241/10: Ergebnisse zur Reliabilität

und Validität. In: Liskowsky R., Velichkovsky B.,Wünschmann W. (Hrsg.): Software-

Ergonomie '97 - Usability Engineering: Integration von Mensch Computer-Interaktion

und Software-Entwicklung, Stuttgart 1997

Puscher F.: Leitfaden Web-Usability - Strategien, Werkzeuge und Tipps für mehr Benut-

zerfreundlichkeit, d.punkt Verlag, Heidelberg 2009

Raskin J.: Das intelligente Interface, Neue Ansätze für die Entwicklung interaktiver Be-

nutzerschnittstellen, Addison-Wesley Verlag, 2001

Rosendahl I.: Der Ein�uss au�älliger Reize auf die Aufmerksamkeit, Diss., Herbert Utz

Verlag, München 2001

Rubin J.; Chisnell, D.: Handbook of Usability Testing. How to Plan, Design, and Conduct

E�ective Tests, Second edition, Wiley Publishing Inc, Indianapolis, Indiana 2008

Runk C.: Grundkurs Typogra�e und Layout, 1. Au�age 2006 (korrigierter Nachdruck 2007),

Galileo Press, Bonn 2006

Sarodnick F., Brau H.: Methoden der Usability Evaluation - Wissenschaftliche Grundla-

gen und praktische Anwendung, 1. Au�age 2001, Verlag Hans Huber (Hogrefe AG)

2005

Shaik A., Lenz K.: Where't the search? Re-examining User Expectations of Web Objects.

In: Usability News, Software Usability Research Laboratory, Wichita State Univer-

sity URL: http://www.surl.org/usabilitynews/81/webobjects.asp, letztmalig abgeru-

fen am 29.04.10

Schenk J., Rigoll G.: Mensch-Maschine-Kommunikation. Grundlagen von sprach- und bild-

basierten Benutzerschnittstellen, Springer-Verlag, 2010

Schiersch K.: Betrachtungen von Entscheidungsprozessen mittels Blickbewegungsanalyse.

Diss., Verlag Dr. Kovac, Hamburg 1997

Schmeißer D.: Eyetracking � Mit den Augen der Nutzer sehen. In: Reese F. (Hrsg.):

Website-Testing - Conversion Optimierung für Landing Pages und Online-Angebote,

Business Village, Göttingen 2009

Schmidts H.: Usability-Evaluation. Eine Studie zur Identi�zierung von Nutzungsproble-

men mittels Eye-Tracking-Parametern, Verlag Dr. Müller, Saarbrücken 2007

Schmitz R.: Kompendium Medieninformatik, Springer-Verlag Berlin Heidelberg, 2008

Schwan S., Hesse F.: Kognitionspsychologische Grundlagen. In: Mangold R., Voderer P.,

Bente G. (Hrsg.): Lehrbuch der Medienpsychologie, Hogrefe-Verlag, Göttingen 2004

87


Scott B., Neil T.: Designing Web Interfaces, O'Reilly Media, 2009

Seikumu: Anleitung zur Benutzung der Auswertungsmatrix der ISONORM-Befragung,

heruntergeladen von URL:

http://www.seikumu.de/de/dok/dok-echtbetrieb/Anleitung-Auswertungsmatrix-ISO

NORM-Befragung.pdf, letztmalig abgerufen am 12.04.10

Sherman P.: Usability success stories. How Organizations improve by making easier-to-

use software and web sites, Gower Publishing Limited, Burlington 2006

Snyder C.: Paper Prototyping. The fast and easy way to design and re�ne user interfaces,

Morgan Kaufmann Publishers, An imprint of Elsevier Science, 2003

Stapelkamp T.: Screen- und Interfacedesign. Gestaltung und Usability für Hard- und Soft-

ware, Springer-Verlag, 2007

Stoessel S.: Methoden des Testings im Usability Engineering. In: Beier M., Gizycki V.

(Hrsg.): Usability - Nutzerfreundliches Web-Design, Springer-Verlag Berlin Heidel-

berg, 2002

Sweller J.: Implications of cognitive load theory for multimedia learning. In: Mayer R.

(Hrsg.): The Cambridge Handbook of Multimedia Learning, Cambridge University

Press, New York 2005

Thaller G.: Interface Design - Die Mensch-Maschine-Schnittstelle gestalten. Konzepte für

Programm- und Web-Ober�ächen, Software & Support Verlag GmbH, Frankfurt 2002

Thesmann S.: Einführung in das Design multimedialer Webanwendungen, Viehweg und

Teubner, GWV Fachverlage GmbH, Wiesbaden 2010

Thielsch M.: Ästhetik von Websites, Wahrnehmung von Ästhetik und deren Beziehung zu

Inhalt, Usability und Persönlichkeitsmerkmalen, Diss., MV-Verlag, 2008

Thissen F.: Kompendium Screen-Design, 3. überarbeitete Au�age, x.media.press Reihe,

Springer-Verlag, 2003

Wack K.: Produktionsnahe Applikationen und hedonische Qualitäten: K(ein) Wieders-

rpuch? In: Brau H., Diefenbach S., Hassenzahl M., Kohler K., Koller M., Peissner

M., Petrovic K., Thielsch M., Ullrich D., Zimmermann D. (Hrsg.): Usability Profes-

sionals 2009. Erleben gestalten, Fraunhofer Verlag, Stuttgart 2009

Weber M., Immich T.: Animationen im Interface Design - Mehr als nur �Eye Candy�. In:

Brau H., Diefenbach S., Hassenzahl M., Kohler K., Koller M., Peissner M., Petrovic

K., Thielsch M., Ullrich D., Zimmermann D. (Hrsg.): Usability Professionals 2009.

Erleben gestalten, Fraunhofer Verlag, Stuttgart 2009

WebHits: Web-Barometer (Bildschirmau�ösungen),

URL: http://www.webhits.de/deutsch/index.shtml?webstats.html, letztmalig abge-

rufen am 12.05.10

88


Weiland S.; Gizycki V.: Wahrnehmungspsycholgische Erkenntnisse im Web-Design. In:

Beier M., Gizycki V. (Hrsg.): Usability - Nutzerfreundliches Web-Design, Springer-

Verlag Berlin Heidelberg 2002

Welker M., Wenzel O. (Hrsg.): Online-Forschung 2007 - Grundlagen und Fallstudien, Halem-

Verlag, Köln 2007

Wertheimer M.: Untersuchungen zur Lehre der Gestalt II. Psychologische Forschung, 4,

1923

Wirth T.: Missing Links. Über gutes Webdesign, Carl Hanser Verlag, München 2002

Wolff C., Götzfried S.: �I can�-Design: Methodik für das benutzerzentrierte Design nicht

standardisierter Icons. In: Brau H., Diefenbach S., Hassenzahl M., Kohler K., Kol-

ler M., Peissner M., Petrovic K., Thielsch M., Ullrich D., Zimmermann D. (Hrsg.):


89

Documents

Hochschule Neu-Ulm - stefangrill.destefangrill.de/wp-content/uploads/2015/01/Diplomarbeit_StefanGrill.pdf · Die angesprochenen Erfolgsfaktoren dienen dabei einerseits der Interpretation