Date post: | 05-Apr-2015 |
Category: |
Documents |
Upload: | moritz-werner |
View: | 111 times |
Download: | 0 times |
Navigation auf dem World Wide Web
Disputationsvortrag „User Interface, Navigation Design, and Content Representation: Three Perspectives on World Wide Web Navigation“
17. März 2010 | Stefan Leuthold
Navigation auf dem World Wide Web
Disputationsvortrag „User Interface, Navigation Design, and Content Representation: Three Perspectives on World Wide Web Navigation“
17. März 2010 | Stefan Leuthold
Inhalt
Folie 3
Navigation auf dem World Wide Web | Stefan Leuthold | 17. März 2010
Definition “Navigation”
Navigation als Bereich von Mensch-Maschine Interaktion
Überblick über die Arbeiten
Einführung
Theoretischer Hintergrund
Hypothesen
Resultate
Methode
Diskussion
Studie “Vertikale versus dynamische Menus”
Inhalt
Folie 4
Navigation auf dem World Wide Web | Stefan Leuthold | 17. März 2010
Einführung
Definition “Navigation”
Navigation als Bereich von Mensch-Maschine Interaktion
Überblick über die Arbeiten
Studie “Vertikale versus dynamische Menus”
Theoretischer Hintergrund
Hypothesen
Resultate
Methode
Diskussion
Navigation: Prozess, GUI-Elemente, Verhalten
Quelle: Kalbach (2007); Rosenfeld und Moreville (2006) Folie 5
Navigation auf dem World Wide Web | Stefan Leuthold | 17. März 2010
Navigation
GUI-Elemente: Bestandteile von Webseiten, welche
Benutzer führen
Prozess: Zielgerichtetes Suchen und Verorten von „verlinkter“ Information
Verhalten: Wie sich Benutzer von Seite zu Seite bewegen
auf dem WWW
GUI-Elemente: Bestandteile von Webseiten, welche
Benutzer führen
Wo warich?
Wo kann ich überall hin?
Wo binich?
Inhalt
Folie 6
Navigation auf dem World Wide Web | Stefan Leuthold | 17. März 2010
Einführung
Definition “Navigation”
Navigation als Bereich von Mensch-Maschine Interaktion
Überblick über die Arbeiten
Studie “Vertikale versus dynamische Menus”
Theoretischer Hintergrund
Hypothesen
Resultate
Methode
Diskussion
Kognitionswissenschaft (*1956)
Wie betrachtet man „Navigation“ aus einem kognitionswissenschaftlichen Blickwinkel?
Navigation im Kontext von PC Programmen und WWW
Folie 7
Navigation auf dem World Wide Web | Stefan Leuthold | 17. März 2010
Quellen: Gardner (1985); Braun und Kaiser (1999); Kent (2008); eigene Darstellung
Mensch-Maschine-Interaktion (*1962)
„PC Programme“ (*1977/1981)
World Wide Web (*1989)
Navigation
Alle drei Studien setzen bei der Wahrnehmung an und messen Verarbeitung und Aktion.
Kognitive Architektur zur Modellierung von Benutzern
Folie 8
Navigation auf dem World Wide Web | Stefan Leuthold | 17. März 2010
Quellen: Card, Moran, und Newell (1983); Mindell (2002)
AktionVerarbeitungWahrnehmung
Aussenwelt
Langzeitspeicher
Arbeitsspeicher
Sensorische Speicher(visuell und auditiv)
MotorischerProzessor
Wahrnehmungs-prozessor
KognitiverProzessor
Inhalt
Folie 9
Navigation auf dem World Wide Web | Stefan Leuthold | 17. März 2010
Einführung
Definition “Navigation”
Navigation als Bereich von Mensch-Maschine Interaktion
Überblick über die Arbeiten
Studie “Vertikale versus dynamische Menus”
Theoretischer Hintergrund
Hypothesen
Resultate
Methode
Diskussion
Leuthold, S., Schmutz, P., Bargas-Avila, J. A., Tuch, A. & Opwis, K.
Vertical versus dynamic menus on the World Wide Web: Eye tracking study measuring the influence of navigation design and task complexity on user performance and subjective preference.[submitted to the International Journal of Human Computer Studies; in revision]
Überblick über die drei Studien meiner Dissertation
Folie 10
Navigation auf dem World Wide Web | Stefan Leuthold | 17. März 2010
Benutzer-oberfläche
Navigations-design
Inhalts-darstellung
Leuthold, S., Bargas-Avila, J. A. & Opwis, K. (2008).
Beyond web content accessibility guidelines: Design of enhanced text user interfaces for blind internet users. International Journal of Human Computer Studies, 66(4), 257-270.
Pauwels, S. L., Hübscher, C., Leuthold, S., Bargas-Avila, J. A., & Opwis, K. (2008).
Error prevention in online forms: Use color instead of asterisks to mark required fields. Interacting with Computers, 21(4), 257-262.
Navigations-design
Inhalt
Folie 11
Navigation auf dem World Wide Web | Stefan Leuthold | 17. März 2010
Einführung
Definition “Navigation”
Navigation als Bereich von Mensch-Maschine Interaktion
Überblick über die Arbeiten
Studie “Vertikale versus dynamische Menus”
Theoretischer Hintergrund
Hypothesen
Resultate
Methode
Diskussion
Breite und Tiefe von Menus spielen eine zentrale Rolle
Folie 12
Navigation auf dem World Wide Web | Stefan Leuthold | 17. März 2010
Vertikales Menu3
0 Ite
ms
Eine Ebene
Dynamisches Menu
4 Ite
ms
Zwei Ebenen
20
Ite
ms
Tiefe
Bre
ite
Empirische Forschung deckt WWW nur ungenügend ab
Folie 13
Navigation auf dem World Wide Web | Stefan Leuthold | 17. März 2010
Studien für PC-Programme mit jeweils 64 Navigationselementen:
Benutzer sind schneller und machen weniger Fehler mit Navigationshierarchien mittlerer Breite und Tiefe.
Miller (1981)
Benutzer sind mit Navigationshierarchien mittlerer Breite und Tiefe auch zufriedener.
Kiger (1984)
Geordnete Navigation besser als ungeordnete und alle Strukturen werden von der flachen Navigation übertroffen, die alle Navigationselemente in Gruppen anzeigt.
Snowberry (1983)
Studie über Navigation auf dem World Wide Web:
Die zweistufige Navigation mit 16x32 Links ist besser als die dreistufige mit 8x8x8 Links.
Larson und Czerwinski (1998)
Eye-Tracking Studien:
Gruppen-Labels optimieren die visuelle Verarbeitung. Hornof (2001)
Studien mit 4 bis 36 Benutzer zeigen: Aufgabenschwierig-keit noch nicht genügend untersucht in Forschung.
Jacob und Karn (2003)
Praxis: Mehrere Arten von Navigationselementen
Quelle: Rosenfeld und Moreville (2006); Kalbach (2007) Folie 14
Navigation auf dem World Wide Web | Stefan Leuthold | 17. März 2010
Navigationselemente bilden das vollständige Angebot des Unternehmens ab. Eine Benutzerin gelangt zu allen möglichen Produkten des Unternehmens.
Alternativer Zugang zu vollständigem Angebot.
Weiterleitung von diesem Angebot weg zu anderen Angeboten.
Navigationselemente bilden einen Ausschnitt aus dem Angebot ab. Ein Benutzer, der nur Produkte mit einem dieser spezifischen Attribute sehen möchte, spart sich einen Klick.
Inhalt
Folie 15
Navigation auf dem World Wide Web | Stefan Leuthold | 17. März 2010
Einführung
Definition “Navigation”
Navigation als Bereich von Mensch-Maschine Interaktion
Überblick über die Arbeiten
Studie “Vertikale versus dynamische Menus”
Theoretischer Hintergrund
Hypothesen
Resultate
Methode
Diskussion
Zwei Hypothesen aus Informationsverarbeitungsansatz
Quellen: Card, Moran, und Newell (1983); Mindell (2002); Ware (2008) Folie 16
Navigation auf dem World Wide Web | Stefan Leuthold | 17. März 2010
Benutzer leisten mit dem vertikalen Menu mehr und bevorzugen es im Vergleich zum dynamischen Menu.
Hypothese 1:
Benutzer passen ihre Navigationsstrategie an die Aufgabenschwierigkeit an und wählen für schwierige Aufgaben mehr Navigations-elemente aus der Servicenavigation.
Hypothese 2:
Inhalt
Folie 17
Navigation auf dem World Wide Web | Stefan Leuthold | 17. März 2010
Einführung
Definition “Navigation”
Navigation als Bereich von Mensch-Maschine Interaktion
Überblick über die Arbeiten
Studie “Vertikale versus dynamische Menus”
Theoretischer Hintergrund
Hypothesen
Resultate
Methode
Diskussion
Unabhängige Variable Navigationsdesign
Folie 18
Navigation auf dem World Wide Web | Stefan Leuthold | 17. März 2010
Vertikales Menu
Dynamisches Menu Kontrollbedingung
Unabhängige Variable Aufgabenschwierigkeit
Folie 19
Navigation auf dem World Wide Web | Stefan Leuthold | 17. März 2010
Einfache Aufgabe(Beispiel)
Insgesamt bekam jeder Benutzer 36 Aufgaben in randomisierter Reihenfolge, davon waren 18 einfach und 18 schwierig.
Legen Sie das Buch „Das Parfum. Die Geschichte eines Mörders.“ von Patrick Süskind in den Einkaufswagen.
Schwierige Aufgabe(Beispiel)
Gibt es eine Weihnachts-geschichte als Buch für unter 5 SFR zu kaufen? Dann legen Sie sie in den Einkaufswagen.
Aufgabe hat ein Kriterium: Ist dargestelltes Buch ein „Match“?
Aufgabe hat zwei Kriterien: Ist dargestelltes Buch eine Match bezüglich Thema? Und auch bezüglich Preis?
Daten erhoben mit Eye-Tracking Logfile und Fragebogen.
Studie durchgeführt mit 3x2 related-samples Design
Folie 20
Navigation auf dem World Wide Web | Stefan Leuthold | 17. März 2010
Aktion
Bezogen auf ersten Klick:1. Anzahl Augenfixationen2. Zeitdauer3. Korrektheit
Abhängige Variable “Benutzerleistung”
Abhängige Variable “Navigationsstrategie”
Kodierung des ersten Klicks: Hat Benutzerin Servicenavigation benutzt?
Abhängige Variable “Zufriedenheit”
Fragebogen (10-Punkte-Skalen): Einfachheit, Unterstützung, Anstrengung, Frustration
Verarbeitung
1. Einfache Aufgabe2. Schwierige Aufgabe
Unabhängige Variable “Aufgabenschwierigkeit”
Unabhängige Variable “Navigationsdesign”
1. Vertikales Menu2. Dynamisches Menu3. Kontrollbedingung
Wahrnehmung
Ablauf des Experiments
120 Versuchspersonen; v.a. Studierende Uni Basel; ø 25 Jahre (SD = 8.17; 18 bis 57 Jahre); 29% weiblich Folie 21
Navigation auf dem World Wide Web | Stefan Leuthold | 17. März 2010
Zufrieden-heits-
messung
Dynamisches Menu
Vertikales Menu
Dynamisches Menu
Kontrollbedingung
Vertikales Menu
Kontrollbedingung
Zufrieden-heits-
messung
Vertikales Menu
Dynamisches Menu
Kontrollbedingung
Dynamisches Menu
Kontrollbedingung
Vertikales Menu
Zufrieden-heits-
messung
Kontrollbedingung
Kontrollbedingung
Vertikales Menu
Vertikales Menu
Dynamisches Menu
Dynamisches Menu
Einführungund
Zuweisungauf eine der sechs
Sequenzen
12 Aufgaben (randomisiert;
6 einfach, 6 schwierig)
12 Aufgaben (randomisiert;
6 einfach, 6 schwierig)
12 Aufgaben (randomisiert;
6 einfach, 6 schwierig)
12 Aufgaben (randomisiert;
6 einfach, 6 schwierig)
12 Aufgaben (randomisiert;
6 einfach, 6 schwierig)
12 Aufgaben (randomisiert;
6 einfach, 6 schwierig)
12 Aufgaben (randomisiert;
6 einfach, 6 schwierig)
12 Aufgaben (randomisiert;
6 einfach, 6 schwierig)
12 Aufgaben (randomisiert;
6 einfach, 6 schwierig)
12 Aufgaben (randomisiert;
6 einfach, 6 schwierig)
12 Aufgaben (randomisiert;
6 einfach, 6 schwierig)
12 Aufgaben (randomisiert;
6 einfach, 6 schwierig)
12 Aufgaben (randomisiert;
6 einfach, 6 schwierig)
12 Aufgaben (randomisiert;
6 einfach, 6 schwierig)
12 Aufgaben (randomisiert;
6 einfach, 6 schwierig)
12 Aufgaben (randomisiert;
6 einfach, 6 schwierig)
12 Aufgaben (randomisiert;
6 einfach, 6 schwierig)
12 Aufgaben (randomisiert;
6 einfach, 6 schwierig)
Unabhängige Variable 1: Navigationsdesign
(within-subjects)
Unabhängige Variable 2:Aufgabenschwierigkeit
(within-subjects)
Inhalt
Folie 22
Navigation auf dem World Wide Web | Stefan Leuthold | 17. März 2010
Einführung
Definition “Navigation”
Navigation als Bereich von Mensch-Maschine Interaktion
Überblick über die Arbeiten
Studie “Vertikale versus dynamische Menus”
Theoretischer Hintergrund
Hypothesen
Resultate
Methode
Diskussion
Benutzer brauchen mit dem vertikalen Menu weniger Augenfixationen als mit dem dynamischen Menu.
Benutzerleistung: Anzahl Augenfixationen
Folie 23
Navigation auf dem World Wide Web | Stefan Leuthold | 17. März 2010
ANOVA zeigt:1) Signifikante Haupteffekte
a) für Navigationsdesign: F(1.98, 208.27) = 4.15,
p2 = 0.038, p = .017
b) für Aufgabenschwierigkeit: F(1, 105) = 37.85, p
2 = 0.265, p < .0012) Keine Interaktion:
F(1.97, 207.14) = 1.01, p
2 = 0.009, p = .367
Benutzerleistung: Zeitdauer erster Klick
Folie 24
Navigation auf dem World Wide Web | Stefan Leuthold | 17. März 2010
Benutzer machen den ersten Klick mit dem vertikalen Menu schneller als mit dem dynamischen Menu.
ANOVA zeigt:1) Signifikante Haupteffekte
a) für Navigationsdesign: F(1.97, 234.81) = 8.57,
p2 = 0.067, p < .001
b) für Aufgabenschwierigkeit: F(1, 119) = 67.34, p
2 = 0.361, p < .0012) Interaktion:
F(1.83, 218.02) = 4.57, p
2 = 0.037, p = .014
Benutzer machen mit dem vertikalen Menu weniger Fehler als mit dem dynamischen Menu.
Benutzerleistung: Korrektheit des ersten Klicks
Folie 25
Navigation auf dem World Wide Web | Stefan Leuthold | 17. März 2010
2-Test zeigt für vertikales versus dynamisches Menua) für einfache Aufgaben:
2(1, n = 1‘436) = 6.858, p = .009b) für schwierige Aufgaben:
2(1, n = 1‘433) = 4.394, p = .036
Benutzer klicken häufiger auf die Servicenavigation bei schwierigen Aufgaben als bei einfachen Aufgaben.
Navigationsstrategie
Folie 26
Navigation auf dem World Wide Web | Stefan Leuthold | 17. März 2010
Anzahl Klicks
Aufgabenschwierigkeit Kategorien Servicenavigation
Einfach 55% (672) 23% (46)
Schwierig 45% (560) 77% (158)
Dynamisches Menu
Anzahl Klicks
Aufgabenschwierigkeit
Kategorien Servicenavigation
Einfach 56% (673) 20% (45)
Schwierig 44% (530) 80% (185)
Vertikales Menu2-Test zeigt für einfache versus schwierige Aufgaben: 2(1, n = 1‘433) = 102.21, p < .001
2-Test zeigt für einfache versus schwierige Aufgaben: 2(1, n = 1‘436) = 71.67, p < .001
Benutzer sind mit der vertikalen Navigation zufriedener in allen Dimensionen bis auf „Anstrengung“.
Zufriedenheit
Folie 27
Navigation auf dem World Wide Web | Stefan Leuthold | 17. März 2010
Navigationsdesign ANOVA Resultate
Dimension Kontroll-bedingung
Dynamisches Menu
Vertikales Menu
F df error p
M (SD) M (SD) M (SD)
Einfachheit
6.35 (2.21) 6.37 (2.21) 7.26 (1.98) 9.56 1.98 235.42 < .001
Unterstütz-ung
5.31 (2.51) 4.87 (2.56) 6.18 (2.33) 13.18 1.98 236.04 < .001
Anstreng-ung
5.27 (2.06) 5.34 (2.04) 5.01 (1.99) 1.80 1.95 231.60 .169
Frustration 4.54 (2.59) 4.96 (2.84) 3.94 (2.29) 8.48 1.99 237.25 < .001
Inhalt
Folie 28
Navigation auf dem World Wide Web | Stefan Leuthold | 17. März 2010
Einführung
Definition “Navigation”
Navigation als Bereich von Mensch-Maschine Interaktion
Überblick über die Arbeiten
Studie “Vertikale versus dynamische Menus”
Theoretischer Hintergrund
Hypothesen
Resultate
Methode
Diskussion
Auf dem Web möglichst viele Navigationselemente auf einmal darstellen – in geordneten Gruppen.
H1 bestätigt: Vertikale Menus leisten mehr
Folie 29
Navigation auf dem World Wide Web | Stefan Leuthold | 17. März 2010
Das vertikale Menu optimiert Verarbeitung und Aktion der Benutzer.
Die 7±2-Regel muss mit Vorsicht angewendet werden – sie scheint bei den Navigationsaufgaben im Online-Shop nicht zu greifen.
Wir haben den berühmten „Speed-Accuracy-Tradeoff“ nicht beobachtet: Für inkorrekte Klicks brauchten Benutzer 7.4 sec bei 5.7 Fixationen, für korrekte Klicks nur 5.6 Sekunden bei 4.9 Fixationen
Benutzer leisten mit dem vertikalen Menu mehr und bevorzugen es im Vergleich zum dynamischen Menu.
Die Resultate bestätigen die Hypothese 1:
Die Praxis, mehrere Navigationsarten anzubieten, ist verschiedenen Aufgabenschwierigkeiten angemessen.
H2 bestätigt: Schwierige Aufgaben => Servicenavigation
Folie 30
Navigation auf dem World Wide Web | Stefan Leuthold | 17. März 2010
Mehr Fixationen für schwierige Aufgaben bedeutet: Benutzer haben nicht einfach nur „länger überlegt“, sie haben für schwierige Aufgaben auch mehr Information beschafft.
Hinweis auf die Grössenordnung der „Informationsverarbeitungs-Kosten“: Bei schwierigen Aufgaben machten 24% der Benutzer einen korrekten Klick auf eine Kategorie und danach einen unnötigen Klick in die Servicenavigation. Bei einfachen Aufgaben passierte das einem Benutzer.
Benutzer passen ihre Navigationsstrategie an die Aufgaben-schwierigkeit an und wählen für schwierige Aufgaben mehr Navigationselemente aus der Servicenavigation.
Die Resultate bestätigen die Hypothese 2:
Danke für Ihre Aufmerksamkeit.
Ausblick
Navigation versus Suchen
Augenbewegungen versus Mausbewegungen
Backup
Folie 32
Navigation auf dem World Wide Web | Stefan Leuthold | 17. März 2010
Welches Navigationsdesign optimiert Verarbeitung und Aktion der Benutzer?
Guidelines der Experten: Unklar und widersprüchlich
Quellen: Fowler und Stanwick (2004); Nielsen (1999) Folie 33
Navigation auf dem World Wide Web | Stefan Leuthold | 17. März 2010
“Eine Bemerkung über Navigation: … [dynamische] Menus verstecken Funktionalitäten… Auf Webseiten können Sie das besser machen. Das Web Paradigma ist, soviel wie möglich direkt auf dem Screen anzuzeigen…”
Fowler and Stanwick (2004)
“Ich finde es übertrieben, 20% einer Seite für eine Auflistung der Hauptnavigationspunkte zu verwenden, die mit einem einzigen Klick von der Homepage erreicht werden können.”
Nielsen (1999)
Möglichst breite Navigationen, möglichst viel auf einmal anzeigen => vertikale Menus.
Lieber nicht zuviel Platz verschwenden, mittlere Breite wählen => dynamische Menus.
Benutzer-oberfläche
„Blindenstudie“ betrachtet Benutzeroberfläche
Folie 34
Navigation auf dem World Wide Web | Stefan Leuthold | 17. März 2010
Navigations-design
Inhalts-darstellung Blinde brauchen nicht nur Zugang zu Internet-
Angeboten – sie müssen sie auch benutzen können. Das Enhanced Text Interface optimiert die Verarbeitung.
Navigations-design
„Menustudie“ betrachtet Navigationsdesign
Folie 35
Navigation auf dem World Wide Web | Stefan Leuthold | 17. März 2010
Benutzer-oberfläche
Inhalts-darstellung
Vertikales Menu Dynamisches Menu
1. Das vertikale Menu optimiert Verarbeitung und Aktion (für die betrachtete Anzahl Navigationselemente). 2. Navigationssysteme sollten für schwierige Aufgaben entsprechend erweitert werden.
Inhalts-darstellung
„Pflichtfelderstudie“ betrachtet Inhaltsdarstellung
Folie 36
Navigation auf dem World Wide Web | Stefan Leuthold | 17. März 2010
Benutzer-oberfläche
Navigations-design
Farbige Pflichtfelder optimieren die Verarbeitung.
Listenseite – nach erstem Klick
Folie 37
Navigation auf dem World Wide Web | Stefan Leuthold | 17. März 2010
Detailseite – nach Klick in Liste
Folie 38
Navigation auf dem World Wide Web | Stefan Leuthold | 17. März 2010