Eyetracking Web Usability. Kapitel 4: Navigation Kapitel 5: Fundamental Web Design Elements

Transkript

1 Eyetracking Web Usability Kapitel 4: Navigation Kapitel 5: Fundamental Web Design Elements

2 Menüs und Informationsarchitektur

3 Globale Navigation Gleichbleibende Hauptnavigation beim Navigieren durch Untermenüs verwenden Benutzer ignorieren Hauptnavigation, wenn sie sie nicht brauchen Evtl. Änderungen werden nicht wahrgenommen

4 Globale Navigation

5 Selektives Nichtbeachten Nach dem Benutzen der Top-Navigation Fokussierung auf zentralen Inhalt der Seite Ignorieren des Menüs aufgrund Sicherheit

6 Beständige Navigation Gutes ZurechtFinden sichtbare HauptNavigation Markierung der Selektion in beiden NaviLeisten Funktioniert nur, wenn erwartungsgemäß

7 Subnavigation Benutzer verschwenden Blicke auf Menüs, wenn sich diese verändern oder verschwinden

8 Subnavigation Keine Wahrnehmung einer Veränderung unauffällige Überschrift ermüdende Suche

9 Verschwindende Navigation Benutzer erwarten konsistent vorhandene Navigation verschw. Navigation führt mind. zum Neustart

10 Linke & rechte Navigation hier: trend / hot potatoe phenomenon

11 Verschwindende Navigation Verwirrende Subnavigation: Verwenden des Zurück-Buttons oder Hauptnavigation

12 Wortlaut im Menü Ausschluss von Benutzergruppen möglich

13 Markennamen Markennamen aus Menüs fernhalten, Einfache Wörter verwenden

14 Utility Navigation Bedeutungsloses Aussehen lässt Benutzer Util. Navigation erkennen sollte nicht mit Hauptnavigation konkurrieren leichter Text ganz oben oder ganz unten

15 Navigationselemente

16 Navigationselemente Die Navigation muss selbsterklärend sein und die Erwartungen des Benutzers erfüllen. Eindeutige Unterscheidung zwischen klickbaren Links und ästhetischen Elementen Verständliche Bezeichnung der Links und Buttons um die Bedienung zu erleichtern

17 Links und Überschriften Der Link als Versprechen Der Link gibt dem Benutzer eine Vorschau über die nachfolgenden Inhalte Unerwartete Inhalte verärgern den Benutzer und machen ihn misstrauisch

18 Links und Überschriften Eindeutige Bezeichnungen verwenden: Link-/Überschriften-Navigation ist verständlich Struktur der Seite wird sofort erkannt Unwichtige Elemente können ausgeblendet werden Link-Verlauf ist deutlich (nicht: click here, read more, go, ) Mögliche Links: Markierter Bereich (Titel, Wort, Satz) als Inline-Link im Text ( edit your profile, ) Kurze und aussagekräftige Bezeichnungen ( Search, Submit, )

19 Buttons Buttons als visuelle Unterstützung Visuell Hervorheben: Große Box mit Rahmen, Schatten, Großer Text mit Icon Klickbar aussehen Gut platzieren (am Ende eines Eingabefeldes/ Drop-Down oder der Seite) Verständliche, kurze Bezeichnung

20 Buttons Buttons als visuelle Unterstützung Visuell Hervorheben: Große Box mit Rahmen, Schatten, Großer Text mit Icon Klickbar aussehen Gut platzieren (am Ende eines Eingabefeldes/ Drop-Down oder der Seite) Verständliche, kurze Bezeichnung

21 Buttons Buttons als visuelle Unterstützung Visuell Hervorheben: Große Box mit Rahmen, Schatten, Großer Text mit Icon Klickbar aussehen Gut platzieren (am Ende eines Eingabefeldes/ Drop-Down oder der Seite) Verständliche, kurze Bezeichnung

22 Buttons Irreführende Platzierung und Verwendung? Button als Link

23 Buttons Irreführende Platzierung und Verwendung? Link als Button

24 Buttons Irreführende Platzierung und Verwendung? Faux Button

25 Buttons Irreführende Platzierung und Verwendung? Faux Button Verlauf-/Status-/InformationsHinweise müssen im Hintergrund sein Falsche visuelle Aufbereitung (wie Buttons) Elemente am Fold symbolisieren misverständlich das Ende der Seite

26 Breadcrumbs Orientierungshilfe für die Benutzer 31 % nutzt Breadcrumbs um die eigene Position auf der Seite zu bestimmen. Hauptsächlich aber für Back-Tracking Breadcrumbs sind schnell verständlich

27 Suche Schneller Zugriff auf gewünschte Elemente Suche im oberen Viertel der Seite (Navigationsbereich) direkte Such-Box anstatt SuchLink

28 Web Design Elemente

29 Web Design Elemente Die Benutzer können häufig alle wichtigen Elemente der Seite erkennen (z. B. Suche, Einkaufswagen, etc.) in weniger als 10 Fixierungen.

30 Basic Web-Elemente Wie oft schauen die Benutzer auf unterschiedliche Web-Elemente?

31 Logo und Tag-Lines Logo als Navigation und Information wird am Anfang oft nur kurz betrachtet wenn der Inhalt/Farbe der Seite sich ändert, wird oft nochmal auf das Logo geachtet (eigene Positionierung) Tag-Lines werden oft ignoriert wird nur gelesen, falls man mehr über die Organisation wissen will (z. B. PETA Stoppt Tierquälerei!)

32 Warenkorb Die meisten Leute suchen Warenkorb in der oberen rechten Ecke.

33 Warenkorb- Zales Fallbeispiel 1: Zales 40% - < 5 Blickfixierungen 40% - < 10 Blickfixierungen 0% - < 20 Blickfixierungen 20% - > 20 Blickfixierungen

34 Warenkorb- Zales Fallbeispiel 1: Zales 40% - < 5 Blickfixierungen 40% - < 10 Blickfixierungen 0% - < 20 Blickfixierungen 20% - > 20 Blickfixierungen

35 Warenkorb- Zales Navigationsbereich ähnelt einem Werbebanner Zu viele Navigationselemente (Menüleiste + Menüleiste + Aktion) Schwacher Kontrast vom Text

36 Warenkorb - Baskits Fallbeispiel 2: Baskits 36% - < 5 Blickfixierungen 36% - < 10 Blickfixierungen 18% - < 20 Blickfixierungen 9% - > 20 Blickfixierungen

37 Warenkorb - Baskits + Die Webseite ist weniger überladen als Zales-Onlineshop - Drei horizontale Navigationsleisten untereinander - Die Testpersonen wurden durch das Bild abgelenkt

38 Hinweis Schnelles Finden von Navigationselementen (wie Suche, Warenkorb, Login) wird erschwert durch Mehrere übereinander angeordnete Navigationsreihen gleich oben auf der Webseite Übermäßig stilisierte Designs

39 Offener Warenkorb Fallbeispiel Amazon Zu viele Elemente z.b. zwei gleiche Buttons

40 Offener Einkaufskorb

41 Offener Warenkorb Aktueller Stand Screenshot aus dem Buch?

42 Direkte Platzierung der Elmente (Pro/Contra) Wichtig Elemente (Suche, Login) direkt auf der Webseite platzieren Pro Contra Schneller sichtbar als ein Link Nimmt weniger Platz als ein ganzes Element ein Schnellerer Zugriff als über ein Link Weniger Clutter auf der Website

43 Formulare, Felder und Applikationen

44 Gruppierung und Platzierung von Feldelementen

45 Gruppierung und Platzierung von Feldelementen

46 Gruppierung und Platzierung von Feldelementen Verwende linksbündige Labels und Felder Setze den Label gleich über dem Eingabefeld Vermeide Abfrage überflüssiger Information

47 Felder für Telefonnummer Telefonnummereingabe: ein Label + ein Feld + ein Eingabebeispiel

48 Nutze kleine Formulare Kleine Formulare werden schnell erfasst

49 Text in den Eingabefelder Vermeide Anweisungen in den Eingabefelder

50 Grundprinzipien zur Reduzierung von Blickfixierungen Die zusammengehörende Elemente sollen klar erkennbar sein Die Elemente sollen am besten untereinander angeordnet sein Nutze Linksbündige Anordnung, alles andere erschwert die Informationerfassung Präsentiere Formulare in Form einer Spalte Vermeidung der Abfrage unwichtiger Information, z.b. zweiter Vorname Nutze das gleiche Format für alle Felder Vermeide Abfrage redundanten Informationen, z.b. Rechnungadresse und Versandadresse Klare Benennung der Felder