EYETRACKING WEB USABILITY. Kapitel 3: Page Layout

Größe: px

Ab Seite anzeigen:

Download "EYETRACKING WEB USABILITY. Kapitel 3: Page Layout"

Lieselotte Buchholz
vor 8 Jahren
Abrufe

1 EYETRACKING WEB USABILITY Kapitel 3: Page Layout

2 FRAGEN ZUR STRUKTURIERUNG Was erwarten die Besucher? Was will ich dem Besucher zeigen und was kann er auf der Webseite machen? Was und wo sind die wichtigsten Bereiche?

3 WIE SEHEN BESUCHER SICH EINE WEBSEITE AN? Es gibt kein einheitliches Verhalten beim Betrachten von Webseiten Blickmuster ähneln sich eher bei spezifischen, gleichen Zielstellungen Eine klare Strukturierung hilft dem Besucher sich schneller zurecht zu finden

Webseiten Blickmuster ähneln sich eher bei spezifischen,

4 WIE SEHEN BESUCHER SICH EINE WEBSEITE AN? BEISPIEL: NACHRICHTENSEITE Ein gemeinsames Ziel der User: Neuste Meldungen und Nachrichten lesen Jedoch kucken manche sich eher die Menus an um zu ihrer bevorzugten Kategorie zu gelangen, andere kucken sich die Headlines an

Meldungen und Nachrichten lesen Jedoch kucken manche sich eher die

5 WIE SEHEN BESUCHER SICH EINE WEBSEITE AN? BEISPIEL: NACHRICHTENSEITE Ein gemeinsames Ziel der User: Neuste Meldungen und Nachrichten lesen Jedoch kucken manche sich eher die Menus an um zu ihrer bevorzugten Kategorie zu gelangen, andere kucken sich die Headlines an

6 WIE SEHEN BESUCHER SICH EINE WEBSEITE AN? BEISPIEL: NACHRICHTENSEITE Ein gemeinsames Ziel der User: Neuste Meldungen und Nachrichten lesen Jedoch kucken manche sich eher die Menus an um zu ihrer bevorzugten Kategorie zu gelangen, andere kucken sich die Headlines an

7 WIE SEHEN BESUCHER SICH EINE WEBSEITE AN? BEISPIEL: MR. COFFEE (SHOP) Ziel der User: Objekt finden zum kaufen Manche kucken sich nur das Menu an, andere sind von den Promotions abgelenkt. Die große Grafik mit Schneemann und Kaffeemaschine ist verschenkter Platz

kucken sich nur das Menu an, andere sind von den Promotions

8 WIE SEHEN BESUCHER SICH EINE WEBSEITE AN? BEISPIEL: MR. COFFEE (SHOP) Ziel der User: Objekt finden zum kaufen Manche kucken sich nur das Menu an, andere sind von den Promotions abgelenkt. Die große Grafik mit Schneemann und Kaffeemaschine ist verschenkter Platz

9 WIE SEHEN BESUCHER SICH EINE WEBSEITE AN? BEISPIEL: MR. COFFEE (SHOP) Ziel der User: Objekt finden zum kaufen Manche kucken sich nur das Menu an, andere sind von den Promotions abgelenkt. Die große Grafik mit Schneemann und Kaffeemaschine ist verschenkter Platz

10 WIE SEHEN BESUCHER SICH EINE WEBSEITE AN? BEISPIEL: NEIMAN MARCUS (SHOP - SPEZIFISCHES OBJEKT) Ziel der User: Spezifisches Objekt (T-Shirt oder Top) finden zum kaufen Jeder User kuckt sich erst das Menu an um sich über Produktangebote ein Bild zu machen, danach scannt er die Homeseite

Spezifisches Objekt (T-Shirt oder Top) finden zum kaufen Jeder User

11 WIE SEHEN BESUCHER SICH EINE WEBSEITE AN? BEISPIEL: NEIMAN MARCUS (SHOP - SPEZIFISCHES OBJEKT) Ziel der User: Spezifisches Objekt (T-Shirt oder Top) finden zum kaufen Jeder User kuckt sich erst das Menu an um sich über Produktangebote ein Bild zu machen, danach scannt er die Homeseite

12 WIE SEHEN BESUCHER SICH EINE WEBSEITE AN? BEISPIEL: NEIMAN MARCUS (SHOP - SPEZIFISCHES OBJEKT) Ziel der User: Spezifisches Objekt (T-Shirt oder Top) finden zum kaufen Jeder User kuckt sich erst das Menu an um sich über Produktangebote ein Bild zu machen, danach scannt er die Homeseite

13 WIE SEHEN BESUCHER SICH EINE WEBSEITE AN? BEISPIEL: GATEWAY (SPEZIFISCHE AUFGABE) Ziel der User: Spezifische Informationen finden: Board of directors Menu an einer unkonventionellen Stelle, das Design hebt sich nicht vom Rest ab, Verwirrung der User, Tendenz zur Suche oder Fixations die Inhalte scannen die nichts mit der Task zu tun haben

finden: Board of directors Menu an einer unkonventionellen Stelle, das Design hebt

14 WIE SEHEN BESUCHER SICH EINE WEBSEITE AN? BEISPIEL: GATEWAY (SPEZIFISCHE AUFGABE) Ziel der User: Spezifische Informationen finden: Board of directors Menu an einer unkonventionellen Stelle, das Design hebt sich nicht vom Rest ab, Verwirrung der User, Tendenz zur Suche oder Fixations die Inhalte scannen die nichts mit der Task zu tun haben

15 WIE SEHEN BESUCHER SICH EINE WEBSEITE AN? BEISPIEL: GATEWAY (SPEZIFISCHE AUFGABE) Ziel der User: Spezifische Informationen finden: Board of directors Menu an einer unkonventionellen Stelle, das Design hebt sich nicht vom Rest ab, Verwirrung der User, Tendenz zur Suche oder Fixations die Inhalte scannen die nichts mit der Task zu tun haben

16 WIE SEHEN BESUCHER SICH EINE WEBSEITE AN? BEISPIEL: GATEWAY (SPEZIFISCHE AUFGABE) Ziel der User: Spezifische Informationen finden: Board of directors Menu an einer unkonventionellen Stelle, das Design hebt sich nicht vom Rest ab, Verwirrung der User, Tendenz zur Suche oder Fixations die Inhalte scannen die nichts mit der Task zu tun haben

17 WEBDESIGN STANDARDS NACH DENEN BENUTZER SUCHEN An Webkonventionen und Benutzererfahrungen anknüpfen - Erkennbare Menus, graphisch hervorgehoben, oben und/ oder gewöhnlich links - Home-Button links im oder in der Nähe des Menüs - Logo links oben - Suchfeld, Einkaufswagen, Login / Logout rechts oben - Hilfsnavigation ganz oben oder ganz unten, dezenter als Hauptnavigation

18 ORGANISATION VON WEBSEITEN Einfache und klare Strukturierung und Bedienung machen Lust auf mehr Überladene Webseiten mit unstrukturiertem Inhalt überfordern den Benutzer schnell Unterteilung durch Titel und Absätze helfen dem Besucher

Überladene Webseiten mit unstrukturiertem Inhalt

19 ORGANISATION VON WEBSEITEN Einfache und klare Strukturierung und Bedienung machen Lust auf mehr Überladene Webseiten mit unstrukturiertem Inhalt überfordern den Benutzer schnell Unterteilung durch Titel und Absätze helfen dem Besucher

20 ORGANISATION VON WEBSEITEN Einfache und klare Strukturierung und Bedienung machen Lust auf mehr Überladene Webseiten mit unstrukturiertem Inhalt überfordern den Benutzer schnell Unterteilung durch Titel und Absätze helfen dem Besucher

21 ORGANISATION VON WEBSEITEN Einfache und klare Strukturierung und Bedienung machen Lust auf mehr Überladene Webseiten mit unstrukturiertem Inhalt überfordern den Benutzer schnell Unterteilung durch Titel und Absätze helfen dem Besucher

22 PLATZIERUNG DES INHALTS UND ANZEIGEELEMENTE Die Platzierung des Inhalts und das Design sind im Web wichtiger als die Dichte von Inhalten Priority Spots : - Position der Elemente - Größe und Hervorhebung - Erscheinung in Relation zur Gesamtseite

23 PLATZIERUNG DES INHALTS UND ANZEIGEELEMENTE Die Platzierung des Inhalts und das Design sind im Web wichtiger als die Dichte von Inhalten Priority Spots : - Position der Elemente - Größe und Hervorhebung - Erscheinung in Relation zur Gesamtseite

24 PLATZIERUNG DES INHALTS UND ANZEIGEELEMENTE Die Platzierung des Inhalts und das Design sind im Web wichtiger als die Dichte von Inhalten Priority Spots : - Position der Elemente - Größe und Hervorhebung - Erscheinung in Relation zur Gesamtseite

25 UNKLARE PRIORITY SPOTS Zu viele Fixations sind schlecht Falsche Akzente verwirren den Benutzer Blick leiten durch Hervorhebung von wichtigem Inhalt

26 UNKLARE PRIORITY SPOTS Zu viele Fixations sind schlecht Falsche Akzente verwirren den Benutzer Blick leiten durch Hervorhebung von wichtigem Inhalt

27 UNKLARE PRIORITY SPOTS Zu viele Fixations sind schlecht Falsche Akzente verwirren den Benutzer Blick leiten durch Hervorhebung von wichtigem Inhalt

28 UNKLARE PRIORITY SPOTS Zu viele Fixations sind schlecht Falsche Akzente verwirren den Benutzer Blick leiten durch Hervorhebung von wichtigem Inhalt

29 MÖGLICHE FEHLERQUELLEN Banner Blindheit Falsche Priorisierung Gutes Feature aber nicht wahrgenommen Unklare Fachsprache Bisherige Erfahrungen der Benutzer Aufgabe und Reaktion des Benutzers Momentane Verhalten

30 MÖGLICHE FEHLERQUELLEN Banner Blindheit Falsche Priorisierung Gutes Feature aber nicht wahrgenommen Unklare Fachsprache Bisherige Erfahrungen der Benutzer Aufgabe und Reaktion des Benutzers Momentane Verhalten

31 AUFTEILUNG DER WEBSEITE

32 RICHTIGES LAYOUT

33 RICHTIGES LAYOUT

34 RICHTIGES LAYOUT

35 MISCUES (FEHLER) Irreführende Elemente lenken den Benutzer von den wichtigen Elementen ab Die Seite soll dem Benutzer helfen, das Ziel zu erreichen

36 MISCUES (FEHLER) Irreführende Elemente lenken den Benutzer von den wichtigen Elementen ab Die Seite soll dem Benutzer helfen, das Ziel zu erreichen

37 EYETRACKING UM SEITENLAYOUT ZU VERBESSERN Um Miscues herauszufinden, sollte man auf Eyetracking zurückgreifen Quantitative Messungen: - Benötigte Zeit - Erfolg - Errors/Fehler - Benutzerzufriedenheit

Ähnliche Dokumente

Statuten in leichter Sprache

Statuten in leichter Sprache Zweck vom Verein Artikel 1: Zivil-Gesetz-Buch Es gibt einen Verein der selbstbestimmung.ch heisst. Der Verein ist so aufgebaut, wie es im Zivil-Gesetz-Buch steht. Im Zivil-Gesetz-Buch