Die Präsentation wird geladen. Bitte warten

Die Präsentation wird geladen. Bitte warten

Navigation auf dem World Wide Web Disputationsvortrag User Interface, Navigation Design, and Content Representation: Three Perspectives on World Wide Web.

Ähnliche Präsentationen


Präsentation zum Thema: "Navigation auf dem World Wide Web Disputationsvortrag User Interface, Navigation Design, and Content Representation: Three Perspectives on World Wide Web."—  Präsentation 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 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

4 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

5 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 war ich? Wo kann ich überall hin? Wo bin ich?

6 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

7 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

8 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) Motorischer Prozessor Wahrnehmungs- prozessor Kognitiver Prozessor

9 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

10 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 inuence 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), 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 elds. Interacting with Computers, 21(4), Navigations- design

11 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

12 Breite und Tiefe von Menus spielen eine zentrale Rolle Folie 12 Navigation auf dem World Wide Web | Stefan Leuthold | 17. März 2010 Vertikales Menu 30 Items Eine Ebene Dynamisches Menu 4 Items Zwei Ebenen 20 Items Tiefe Breite

13 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)

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

15 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

16 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:

17 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

18 Unabhängige Variable Navigationsdesign Folie 18 Navigation auf dem World Wide Web | Stefan Leuthold | 17. März 2010 Vertikales Menu Dynamisches MenuKontrollbedingung

19 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?

20 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 Augenfixationen 2.Zeitdauer 3.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 Aufgabe 2.Schwierige Aufgabe Unabhängige Variable Aufgabenschwierigkeit Unabhängige Variable Navigationsdesign 1.Vertikales Menu 2.Dynamisches Menu 3.Kontrollbedingung Wahrnehmung

21 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 Vertikales Menu Dynamisches Menu Einführung und Zuweisung auf 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)

22 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

23 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, ) = 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

24 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, ) = 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

25 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 Test zeigt für vertikales versus dynamisches Menu a) für einfache Aufgaben: 2 (1, n = 1436) = 6.858, p =.009 b)für schwierige Aufgaben: 2 (1, n = 1433) = 4.394, p =.036

26 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 AufgabenschwierigkeitKategorienServicenavigation Einfach55% (672)23% (46) Schwierig45% (560)77% (158) Dynamisches Menu Anzahl Klicks AufgabenschwierigkeitKategorienServicenavigation Einfach56% (673)20% (45) Schwierig44% (530)80% (185) Vertikales Menu 2 -Test zeigt für einfache versus schwierige Aufgaben: 2 (1, n = 1433) = , p < Test zeigt für einfache versus schwierige Aufgaben: 2 (1, n = 1436) = 71.67, p <.001

27 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 NavigationsdesignANOVA Resultate DimensionKontroll- bedingung Dynamisches Menu Vertikales Menu Fdferrorp M (SD) Einfachheit 6.35 (2.21)6.37 (2.21)7.26 (1.98) <.001 Unterstütz- ung 5.31 (2.51)4.87 (2.56)6.18 (2.33) <.001 Anstreng- ung 5.27 (2.06)5.34 (2.04)5.01 (1.99) Frustration4.54 (2.59)4.96 (2.84)3.94 (2.29) <.001

28 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

29 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:

30 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:

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

32 Backup Folie 32 Navigation auf dem World Wide Web | Stefan Leuthold | 17. März 2010

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

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

35 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 MenuDynamisches 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.

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

37 Listenseite – nach erstem Klick Folie 37 Navigation auf dem World Wide Web | Stefan Leuthold | 17. März 2010

38 Detailseite – nach Klick in Liste Folie 38 Navigation auf dem World Wide Web | Stefan Leuthold | 17. März 2010


Herunterladen ppt "Navigation auf dem World Wide Web Disputationsvortrag User Interface, Navigation Design, and Content Representation: Three Perspectives on World Wide Web."

Ähnliche Präsentationen


Google-Anzeigen