Navigation auf dem World Wide Web

Transkript

1 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

2 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

3 Inhalt Einführung Definition Navigation Navigation als Bereich von Mensch-Maschine Interaktion Überblick über die Arbeiten Studie Vertikale versus dynamische Menus Theoretischer Hintergrund Hypothesen Methode Resultate Diskussion Folie 3

5 Navigation: Prozess, GUI-Elemente, Verhalten Navigation Prozess: Zielgerichtetes Suchen und Verorten von verlinkter Information GUI-Elemente: Bestandteile von Webseiten, welche Benutzer führen Verhalten: Wie sich Benutzer von Seite zu Seite bewegen auf dem WWW Wo bin ich? Wo war ich? Wo kann ich überall hin? Quelle: Kalbach (2007); Rosenfeld und Moreville (2006) Folie 5

7 Navigation im Kontext von PC Programmen und WWW Kognitionswissenschaft (*1956) Mensch-Maschine-Interaktion (*1962) PC Programme (*1977/1981) World Wide Web (*1989) Navigation Wie betrachtet man Navigation aus einem kognitionswissenschaftlichen Blickwinkel? Quellen: Gardner (1985); Braun und Kaiser (1999); Kent (2008); eigene Darstellung Folie 7

8 Kognitive Architektur zur Modellierung von Benutzern Wahrnehmung Verarbeitung Aktion Langzeitspeicher Arbeitsspeicher Sensorische Speicher (visuell und auditiv) Kognitiver Prozessor Wahrnehmungsprozessor Motorischer Prozessor Aussenwelt Alle drei Studien setzen bei der Wahrnehmung an und messen Verarbeitung und Aktion. Quellen: Card, Moran, und Newell (1983); Mindell (2002) Folie 8

10 Überblick über die drei Studien meiner Dissertation Benutzeroberfläche 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), Navigations- design Inhaltsdarstellung 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] 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), Folie 10

12 Breite und Tiefe von Menus spielen eine zentrale Rolle Tiefe Vertikales Menu Dynamisches Menu Breite Eine Ebene 30 Items 20 Items 4 Items Zwei Ebenen Folie 12

13 Empirische Forschung deckt WWW nur ungenügend ab Studien für PC-Programme mit jeweils 64 Navigationselementen: Benutzer sind schneller und machen weniger Fehler mit Navigationshierarchien mittlerer Breite und Tiefe. Benutzer sind mit Navigationshierarchien mittlerer Breite und Tiefe auch zufriedener. Geordnete Navigation besser als ungeordnete und alle Strukturen werden von der flachen Navigation übertroffen, die alle Navigationselemente in Gruppen anzeigt. Studie über Navigation auf dem World Wide Web: Die zweistufige Navigation mit 16x32 Links ist besser als die dreistufige mit 8x8x8 Links. Eye-Tracking Studien: Miller (1981) Kiger (1984) Snowberry (1983) Larson und Czerwinski (1998) Gruppen-Labels optimieren die visuelle Verarbeitung. Hornof (2001) Studien mit 4 bis 36 Benutzer zeigen: Aufgabenschwierigkeit noch nicht genügend untersucht in Forschung. Jacob und Karn (2003) Folie 13

14 Praxis: Mehrere Arten von Navigationselementen 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. Quelle: Rosenfeld und Moreville (2006); Kalbach (2007) Folie 14

16 Zwei Hypothesen aus Informationsverarbeitungsansatz Hypothese 1: Benutzer leisten mit dem vertikalen Menu mehr und bevorzugen es im Vergleich zum dynamischen Menu. Hypothese 2: Benutzer passen ihre Navigationsstrategie an die Aufgabenschwierigkeit an und wählen für schwierige Aufgaben mehr Navigationselemente aus der Servicenavigation. Quellen: Card, Moran, und Newell (1983); Mindell (2002); Ware (2008) Folie 16

18 Unabhängige Variable Navigationsdesign Vertikales Menu Dynamisches Menu Kontrollbedingung Folie 18

19 Unabhängige Variable Aufgabenschwierigkeit Einfache Aufgabe (Beispiel) Legen Sie das Buch Das Parfum. Die Geschichte eines Mörders. von Patrick Süskind in den Einkaufswagen. Aufgabe hat ein Kriterium: Ist dargestelltes Buch ein Match? Schwierige Aufgabe (Beispiel) Gibt es eine Weihnachtsgeschichte als Buch für unter 5 SFR zu kaufen? Dann legen Sie sie in den Einkaufswagen. Aufgabe hat zwei Kriterien: Ist dargestelltes Buch eine Match bezüglich Thema? Und auch bezüglich Preis? Insgesamt bekam jeder Benutzer 36 Aufgaben in randomisierter Reihenfolge, davon waren 18 einfach und 18 schwierig. Folie 19

20 Studie durchgeführt mit 3x2 related-samples Design Wahrnehmung Unabhängige Variable Navigationsdesign 1. Vertikales Menu 2. Dynamisches Menu 3. Kontrollbedingung Verarbeitung Unabhängige Variable Aufgabenschwierigkeit 1. Einfache Aufgabe 2. Schwierige Aufgabe Aktion Abhängige Variable Benutzerleistung Bezogen auf ersten Klick: 1. Anzahl Augenfixationen 2. Zeitdauer 3. Korrektheit 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 Daten erhoben mit Eye-Tracking Logfile und Fragebogen. Folie 20

21 Ablauf des Experiments Unabhängige Variable 1: Navigationsdesign (within-subjects) Unabhängige Variable 2: Aufgabenschwierigkeit (within-subjects) Kontrollbedingung 12 Aufgaben (randomisiert; 6 einfach, 6 schwierig) Kontrollbedingung 12 Aufgaben (randomisiert; 6 einfach, 6 schwierig) Vertikales Menu 12 Aufgaben (randomisiert; 6 einfach, 6 schwierig) Dynamisches Menu 12 Aufgaben (randomisiert; 6 einfach, 6 schwierig) Dynamisches Menu 12 Aufgaben (randomisiert; 6 einfach, 6 schwierig) Vertikales Menu 12 Aufgaben (randomisiert; 6 einfach, 6 schwierig) Vertikales Menu Kontrollbedingung Dynamisches Menu Einführung und Zuweisung auf eine der sechs Sequenzen 12 Aufgaben (randomisiert; 6 einfach, 6 schwierig) Vertikales Menu 12 Aufgaben (randomisiert; 6 einfach, 6 schwierig) Zufriedenheitsmessung 12 Aufgaben (randomisiert; 6 einfach, 6 schwierig) Dynamisches Menu 12 Aufgaben (randomisiert; 6 einfach, 6 schwierig) Zufriedenheitsmessung 12 Aufgaben (randomisiert; 6 einfach, 6 schwierig) Kontrollbedingung 12 Aufgaben (randomisiert; 6 einfach, 6 schwierig) Zufriedenheitsmessung Dynamisches Menu Kontrollbedingung Vertikales Menu 12 Aufgaben (randomisiert; 6 einfach, 6 schwierig) 12 Aufgaben (randomisiert; 6 einfach, 6 schwierig) 12 Aufgaben (randomisiert; 6 einfach, 6 schwierig) Dynamisches Menu Vertikales Menu Kontrollbedingung 12 Aufgaben (randomisiert; 6 einfach, 6 schwierig) 12 Aufgaben (randomisiert; 6 einfach, 6 schwierig) 12 Aufgaben (randomisiert; 6 einfach, 6 schwierig) 120 Versuchspersonen; v.a. Studierende Uni Basel; ø 25 Jahre (SD = 8.17; 18 bis 57 Jahre); 29% weiblich Folie 21

23 Benutzerleistung: Anzahl Augenfixationen ANOVA zeigt: 1) Signifikante Haupteffekte a) für Navigationsdesign: F(1.98, ) = 4.15, η p 2 = 0.038, p =.017 b) für Aufgabenschwierigkeit: F(1, 105) = 37.85, η p 2 = 0.265, p <.001 2) Keine Interaktion: F(1.97, ) = 1.01, η p 2 = 0.009, p =.367 Benutzer brauchen mit dem vertikalen Menu weniger Augenfixationen als mit dem dynamischen Menu. Folie 23

24 Benutzerleistung: Zeitdauer erster Klick ANOVA zeigt: 1) Signifikante Haupteffekte a) für Navigationsdesign: F(1.97, ) = 8.57, η p 2 = 0.067, p <.001 b) für Aufgabenschwierigkeit: F(1, 119) = 67.34, η p 2 = 0.361, p <.001 2) Interaktion: F(1.83, ) = 4.57, η p 2 = 0.037, p =.014 Benutzer machen den ersten Klick mit dem vertikalen Menu schneller als mit dem dynamischen Menu. Folie 24

25 Benutzerleistung: Korrektheit des ersten Klicks χ 2 -Test zeigt für vertikales versus dynamisches Menu a) für einfache Aufgaben: χ 2 (1, n = 1 436) = 6.858, p =.009 b) für schwierige Aufgaben: χ 2 (1, n = 1 433) = 4.394, p =.036 Benutzer machen mit dem vertikalen Menu weniger Fehler als mit dem dynamischen Menu. Folie 25

26 Navigationsstrategie Dynamisches Menu Anzahl Klicks Aufgabenschwierigkeit Kategorien Servicenavigation Einfach 55% (672) 23% (46) Schwierig 45% (560) 77% (158) χ 2 -Test zeigt für einfache versus schwierige Aufgaben: χ 2 (1, n = 1 436) = 71.67, p <.001 Vertikales Menu Anzahl Klicks Aufgabenschwierigkeit Kategorien Servicenavigation Einfach 56% (673) 20% (45) Schwierig 44% (530) 80% (185) χ 2 -Test zeigt für einfache versus schwierige Aufgaben: χ 2 (1, n = 1 433) = , p <.001 Benutzer klicken häufiger auf die Servicenavigation bei schwierigen Aufgaben als bei einfachen Aufgaben. Folie 26

27 Zufriedenheit Dimension Navigationsdesign Dynamisches Menu Vertikales Menu M (SD) M (SD) M (SD) ANOVA Resultate F df error p Einfachheit 6.35 (2.21) 6.37 (2.21) 7.26 (1.98) <.001 Kontrollbedingung Unterstützung Anstrengung 5.31 (2.51) 4.87 (2.56) 6.18 (2.33) < (2.06) 5.34 (2.04) 5.01 (1.99) Frustration 4.54 (2.59) 4.96 (2.84) 3.94 (2.29) <.001 Benutzer sind mit der vertikalen Navigation zufriedener in allen Dimensionen bis auf Anstrengung. Folie 27

29 H1 bestätigt: Vertikale Menus leisten mehr Die Resultate bestätigen die Hypothese 1: Benutzer leisten mit dem vertikalen Menu mehr und bevorzugen es im Vergleich zum dynamischen Menu. 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 Auf dem Web möglichst viele Navigationselemente auf einmal darstellen in geordneten Gruppen. Folie 29

30 H2 bestätigt: Schwierige Aufgaben => Servicenavigation Die Resultate bestätigen die Hypothese 2: Benutzer passen ihre Navigationsstrategie an die Aufgabenschwierigkeit an und wählen für schwierige Aufgaben mehr Navigationselemente aus der Servicenavigation. 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. Die Praxis, mehrere Navigationsarten anzubieten, ist verschiedenen Aufgabenschwierigkeiten angemessen. Folie 30

31 Ausblick Navigation versus Suchen Augenbewegungen versus Mausbewegungen Danke für Ihre Aufmerksamkeit.

32 Backup Folie 32

33 Guidelines der Experten: Unklar und widersprüchlich 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. Welches Navigationsdesign optimiert Verarbeitung und Aktion der Benutzer? Quellen: Fowler und Stanwick (2004); Nielsen (1999) Folie 33

34 Blindenstudie betrachtet Benutzeroberfläche Benutzeroberfläche Navigationsdesign Inhaltsdarstellung Blinde brauchen nicht nur Zugang zu Internet- Angeboten sie müssen sie auch benutzen können. Das Enhanced Text Interface optimiert die Verarbeitung. Folie 34

35 Menustudie betrachtet Navigationsdesign Benutzeroberfläche Vertikales Menu Dynamisches Menu Navigationsdesign Inhaltsdarstellung 1. Das vertikale Menu optimiert Verarbeitung und Aktion (für die betrachtete Anzahl Navigationselemente). 2. Navigationssysteme sollten für schwierige Aufgaben entsprechend erweitert werden. Folie 35

36 Pflichtfelderstudie betrachtet Inhaltsdarstellung Benutzeroberfläche Navigationsdesign Inhaltsdarstellung Farbige Pflichtfelder optimieren die Verarbeitung. Folie 36

37 Listenseite nach erstem Klick Folie 37

38 Detailseite nach Klick in Liste Folie 38