Navigation auf dem World Wide Web Disputationsvortrag User Interface, Navigation Design, and Content...

transcript

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

Einführung

Hypothesen

Resultate

Methode

Diskussion

Navigation: Prozess, GUI-Elemente, Verhalten

Quelle: Kalbach (2007); Rosenfeld und Moreville (2006) Folie 5

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

Einführung

Hypothesen

Resultate

Methode

Diskussion

Kognitionswissenschaft (*1956)

Wie betrachtet man „Navigation“ aus einem kognitionswissenschaftlichen Blickwinkel?

Navigation im Kontext von PC Programmen und WWW

Folie 7

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

Quellen: Card, Moran, und Newell (1983); Mindell (2002)

AktionVerarbeitungWahrnehmung

Aussenwelt

Langzeitspeicher

Arbeitsspeicher

Sensorische Speicher(visuell und auditiv)

MotorischerProzessor

Wahrnehmungs-prozessor

KognitiverProzessor

Inhalt

Folie 9

Einführung

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

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

Einführung

Hypothesen

Resultate

Methode

Diskussion

Breite und Tiefe von Menus spielen eine zentrale Rolle

Folie 12

Vertikales Menu3

Eine Ebene

Dynamisches Menu

Zwei Ebenen

Empirische Forschung deckt WWW nur ungenügend ab

Folie 13

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

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

Einführung

Hypothesen

Resultate

Methode

Diskussion

Zwei Hypothesen aus Informationsverarbeitungsansatz

Quellen: Card, Moran, und Newell (1983); Mindell (2002); Ware (2008) Folie 16

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

Einführung

Hypothesen

Resultate

Methode

Diskussion

Unabhängige Variable Navigationsdesign

Folie 18

Vertikales Menu

Dynamisches Menu Kontrollbedingung

Unabhängige Variable Aufgabenschwierigkeit

Folie 19

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

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

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

Vertikales Menu

Dynamisches Menu

Einführungund

Zuweisungauf eine der sechs

Sequenzen

12 Aufgaben (randomisiert;

6 einfach, 6 schwierig)

Unabhängige Variable 1: Navigationsdesign

(within-subjects)

Unabhängige Variable 2:Aufgabenschwierigkeit

(within-subjects)

Inhalt

Folie 22

Einführung

Hypothesen

Resultate

Methode

Diskussion

Benutzer brauchen mit dem vertikalen Menu weniger Augenfixationen als mit dem dynamischen Menu.

Benutzerleistung: Anzahl Augenfixationen

Folie 23

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

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

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

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

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

Einführung

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

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

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

Welches Navigationsdesign optimiert Verarbeitung und Aktion der Benutzer?

Guidelines der Experten: Unklar und widersprüchlich

Quellen: Fowler und Stanwick (2004); Nielsen (1999) Folie 33

“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.

„Blindenstudie“ betrachtet Benutzeroberfläche

Folie 34

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

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

Navigations-design

Farbige Pflichtfelder optimieren die Verarbeitung.

Listenseite – nach erstem Klick

Folie 37

Detailseite – nach Klick in Liste

Folie 38

Navigation auf dem World Wide Web Disputationsvortrag User Interface, Navigation Design, and Content...

Documents