42
Les comportements visuels des internautes Christian Bastien & Gautier Drusch InterPsy - ETIC (EA 4432) Expériences utilisateurs dans le Traitement des Interactions technologiques et des Conduites humaines et sociales Université Paul Verlaine – Metz UFR Sciences Humaines et Arts {prénom.nom}@univ-metz.fr

FLUPA 2011 - Eye-Tracking : Comportements visuels des internautes par Christian Bastien et Gautier Drusch

Embed Size (px)

DESCRIPTION

Présentation des travaux actuels sur la compréhension des comportements visuels des internautes.

Citation preview

Page 1: FLUPA 2011 -  Eye-Tracking : Comportements visuels des internautes par Christian Bastien et Gautier Drusch

www.flupa.eu 1

Les comportements visuels des internautes

Christian Bastien & Gautier Drusch InterPsy - ETIC (EA 4432)

Expériences utilisateurs dans le Traitement des Interactions technologiques

et des Conduites humaines et sociales

Université Paul Verlaine – Metz UFR Sciences Humaines et Arts

{prénom.nom}@univ-metz.fr

Page 2: FLUPA 2011 -  Eye-Tracking : Comportements visuels des internautes par Christian Bastien et Gautier Drusch

www.flupa.eu 2

Sommaire •  L’oculométrie

•  Comment ça marche techniquement

•  Évolution des oculomètres •  Évolution des questions

•  Son utilisation •  Évaluation des systèmes interactifs et du Web

•  Connaître les comportements des utilisateurs

•  Questions de recherche

Page 3: FLUPA 2011 -  Eye-Tracking : Comportements visuels des internautes par Christian Bastien et Gautier Drusch

www.flupa.eu

L’OCULOMÉTRIE

3

Page 4: FLUPA 2011 -  Eye-Tracking : Comportements visuels des internautes par Christian Bastien et Gautier Drusch

www.flupa.eu 4

Dispositif utilisé dans l’étude du Poynter Institute : 'Eyes on the News' http://www.poynterextra.org/eyetrack2004/history.htm

Page 5: FLUPA 2011 -  Eye-Tracking : Comportements visuels des internautes par Christian Bastien et Gautier Drusch

www.flupa.eu 5

Une version du système d’oculométrie d’ASL (Applied Science Laboratories)

Page 6: FLUPA 2011 -  Eye-Tracking : Comportements visuels des internautes par Christian Bastien et Gautier Drusch

www.flupa.eu

•  Tobii T120 •  Permet de réaliser des

tests et expériences plus confortables pour les participants.

6

IR Cam

Webcam

Page 7: FLUPA 2011 -  Eye-Tracking : Comportements visuels des internautes par Christian Bastien et Gautier Drusch

www.flupa.eu

•  Calibration

7

53

© 2010 Tobii Technology - All rights reserved. Tobii Technology and the Tobii logo are either registered trademarks or trademarks of Tobii Technology in the United States and/or other countries.

display a value between 50 and 80 cm (64 cm allows for greater head movement). The color of the bar at the bottom of the track status box should be green. Note: The color indicates whether the eye tracker is able to detect the participant’s pupils. Green indicates that the trackability is good and that the eye tracker is able to detect both eyes. Yellow indicates that the eye tracker is only able to detect one of the pupil reflections and trackability is sub-optimal. Red indicates that the eye tracker is not able to find either eye.

5. Instruct the participant to look at the points as they move over the screen. 6. Click Start to initiate the calibration process. The first calibration point appears on the screen.

Note: The test participant does not have to keep the head still during calibration. 7. The calibration will stop automatically when all calibration points are shown. 8. When the calibration is finished, the calibration results are displayed in two vector plots in the

Calibration Result dialog box.

The calibration plot shows error vectors - green lines (the size of each green line indicates the difference between the gaze point calculated by the eye tracker and the actual dot position). Recalibration of certain points should be made if the lines are long or if there are no lines at all at a certain point.

User Manual - Tobii Studio 2.X

54

If the calibration was unsuccessful, the calibration result “Not Enough Calibration Data” will be displayed. If this is the case, reposition the test participant in front of the eye tracker and check for any factors that could be interfering with pupil detection (e.g. an infrared light source that is directed at the eye tracker sensor or the participant’s eyes, dirty or scratched glasses or droopy eyelids). Click Recalibrate to recalibrate the subject. Optional: When you perform the test on a screen, you can also assess the quality of your calibration by clicking the Verify button in the Accept Calibration dialog box. The participants gaze point is displayed as a small pink dot in real-time on the screen together with an image containing several larger colored dots. Instruct the participant to look at the center of the colored dots. If the calibration was accurate, the gaze point should overlap the colored dots. The distribution of the colored dots also allows you to assess calibration accuracy in different areas of the screen. Click ESC to exit.

9. If the calibration seems to show accurate results, click the Accept button to open the Start Recording dialog box.

Page 8: FLUPA 2011 -  Eye-Tracking : Comportements visuels des internautes par Christian Bastien et Gautier Drusch

www.flupa.eu

•  Un scanpath

Page 9: FLUPA 2011 -  Eye-Tracking : Comportements visuels des internautes par Christian Bastien et Gautier Drusch

www.flupa.eu

•  Les scanpaths de 2 participants

9

Page 10: FLUPA 2011 -  Eye-Tracking : Comportements visuels des internautes par Christian Bastien et Gautier Drusch

www.flupa.eu

•  Les scanpaths de…100 participants

10

Page 11: FLUPA 2011 -  Eye-Tracking : Comportements visuels des internautes par Christian Bastien et Gautier Drusch

www.flupa.eu

•  Une heatmap

11

Page 12: FLUPA 2011 -  Eye-Tracking : Comportements visuels des internautes par Christian Bastien et Gautier Drusch

www.flupa.eu

•  Une heatmap de 100 participants

12

Page 13: FLUPA 2011 -  Eye-Tracking : Comportements visuels des internautes par Christian Bastien et Gautier Drusch

www.flupa.eu

EVALUATION DES SYSTÈMES INTERACTIFS ET DU WEB

13

Page 14: FLUPA 2011 -  Eye-Tracking : Comportements visuels des internautes par Christian Bastien et Gautier Drusch

www.flupa.eu

•  Métriques •  Nombre total de fixations

•  Nombre de fixations effectuées sur l’ensemble de l’enregistrement oculométrique

•  A pondérer par rapport à la durée des tâches et le nombre de pages vues.

14

Travaux de Goldberg & Kotval (1999), Jacob & Karn (2003), Nakamichi et al. (2006)

Page 15: FLUPA 2011 -  Eye-Tracking : Comportements visuels des internautes par Christian Bastien et Gautier Drusch

www.flupa.eu

•  Indicateurs de faible utilisabilité

•  Le nombre de fixations total est négativement corrélé avec l’efficacité de la recherche.

•  Plus le nombre de fixations est élevé dans la tâche demandée, moins les ���sujets la réussissent.

•  Cela serait dû à un mauvais ���arrangement spatial des ���éléments visuels.

15

??

Page 16: FLUPA 2011 -  Eye-Tracking : Comportements visuels des internautes par Christian Bastien et Gautier Drusch

www.flupa.eu

•  Métriques •  Moyenne des durées de fixation totale

•  Durée moyenne des fixations (en Msec) effectuées pour réaliser l’ensemble de la tâche demandée.

•  Indicateurs de faible utilisabilité •  Longues fixations = difficulté ���

à extraire l’information ���visuelle.

16

??

Page 17: FLUPA 2011 -  Eye-Tracking : Comportements visuels des internautes par Christian Bastien et Gautier Drusch

www.flupa.eu

•  Métriques •  Taux de fixation total

•  Comparaison du temps passé à effectuer des fixations à celui passé à effectuer des saccades

•  Indicateurs de faible utilisabilité •  Ratio en faveur des fixations ���

= plus forte proportion de ���temps passé à traiter ���l’information.

17

??

Page 18: FLUPA 2011 -  Eye-Tracking : Comportements visuels des internautes par Christian Bastien et Gautier Drusch

www.flupa.eu

•  Métriques •  Distance de mouvement des points de fixation

•  Moyenne des distances inter-fixations

•  Vitesse de mouvement des points de fixation •  Nombre de pixels parcourus par seconde

18

Page 19: FLUPA 2011 -  Eye-Tracking : Comportements visuels des internautes par Christian Bastien et Gautier Drusch

www.flupa.eu

•  Indicateurs de faible utilisabilité •  Distance de mouvement + vitesse de

mouvement des points de fixation •  Distance de mouvement longue et vitesse de

mouvement élevée.

19

!

Page 20: FLUPA 2011 -  Eye-Tracking : Comportements visuels des internautes par Christian Bastien et Gautier Drusch

www.flupa.eu

•  Métriques •  Longeur des scanpaths : somme des distances

entre les fixations.

•  Aire convexe de Hull : plus petit polygone contenant l’ensemble des points de fixation du scanpath.

20

Page 21: FLUPA 2011 -  Eye-Tracking : Comportements visuels des internautes par Christian Bastien et Gautier Drusch

www.flupa.eu

•  Indicateurs de faible utilisabilité •  La longueur des scanpaths + l’aire convexe de

Hull •  Scanpaths longs (en pixels)

•  Grandes aires de Hull (en pixels2)

21

Page 22: FLUPA 2011 -  Eye-Tracking : Comportements visuels des internautes par Christian Bastien et Gautier Drusch

www.flupa.eu

•  Métriques •  Densité spatiale :

1.  Diviser la page en une grille

2.  Nb de cellules contenant au moins une fixation

22

nombre total de cellules

Page 23: FLUPA 2011 -  Eye-Tracking : Comportements visuels des internautes par Christian Bastien et Gautier Drusch

www.flupa.eu

•  Métriques •  Indice de transition :

•  Nb de cellules contenant min une transition

23

nombre total de cellules

Page 24: FLUPA 2011 -  Eye-Tracking : Comportements visuels des internautes par Christian Bastien et Gautier Drusch

www.flupa.eu

•  Indicateurs de faible utilisabilité •  Densités spatiales + indice de transition

•  Densités spatiales élevées (%)

•  Indice de transition élevé (%) = scanpaths dispersés, longs, « vagabonds »

24

Page 25: FLUPA 2011 -  Eye-Tracking : Comportements visuels des internautes par Christian Bastien et Gautier Drusch

www.flupa.eu

CONNAÎTRE LE COMPORTEMENT VISUEL DES INTERNAUTES

25

Page 26: FLUPA 2011 -  Eye-Tracking : Comportements visuels des internautes par Christian Bastien et Gautier Drusch

www.flupa.eu

•  Le « F-shape » universel de Nielsen (2006)

26

Page 27: FLUPA 2011 -  Eye-Tracking : Comportements visuels des internautes par Christian Bastien et Gautier Drusch

www.flupa.eu

•  Les utilisateurs lisent d’abord horizontalement, •  Généralement la partie haute de la zone de contenu (barre

haute du F)

•  Ensuite, les utilisateurs regardent un peu plus bas •  Puis balayent horizontalement une zone plus petite que la

première (petite barre du F).

•  Finallement, les utilisateurs scannent verticalement la partie gauche du contenu.

27

Page 28: FLUPA 2011 -  Eye-Tracking : Comportements visuels des internautes par Christian Bastien et Gautier Drusch

www.flupa.eu

•  Les utilisateurs ne lisent pas le contenu mot à mot •  La lecture exhaustive est rare

•  Les deux premiers paragraphes doivent contenir l’information la plus importante.

•  Ils lisent probablement plus le premier que le second paragraphe.

•  Commencez les sections, paragraphes et listes à point avec des mots porteurs d’informations que les utilisateurs vont repérer en scannant la partie gauche de votre contenu.

28

Page 29: FLUPA 2011 -  Eye-Tracking : Comportements visuels des internautes par Christian Bastien et Gautier Drusch

www.flupa.eu

Approches top-down •  Utilisent les aires

d’intérêts (AOI) •  Les AOI peuvent

décrire les pages Web.

•  Les AOI sont définies par le chercheur.

29

by color (red, green or yellow) on the heat maps weredelineated by rectangles identifying a collection of AOIs oneach page. For example, because the heat maps showedthat images of faces received fixation on the Gap page,these images were included in the set of AOIs for the Gappage (see rectangles marked as 1a–1d on the Gap page inFig. 3).

Next, the gaze data for the first five seconds of viewingwas aggregated. Those AOIs that received fixations in thefirst five seconds of viewing were then considered forcalculating their average time to first fixation, i.e., the timeelapsed before participants viewed them. This informationrevealed the order in which the AOIs were viewed by users.For example, on the main image of the Mac homepage, thelarge text, the image of Steve Jobs, and the top navigationwere marked as three AOIs; the time to first fixation wasthe time from when the page was first shown to theparticipant until the AOI received fixation. This wasmeasured in seconds for each AOI for each participant.The times were then averaged across participants for eachAOI. Based on this, the average order in which usersviewed AOIs on the pages was determined. The plots of thefixation order for each page are shown in Figs. 3 and 4.Each rectangle represents an AOI. The numbers inside therectangles indicate the average order in which the AOIswere viewed. For example, the order plot of the Mac pageindicates that the large text ‘‘Mac OS X Leopard’’ wasviewed first, followed by the image of Steve Jobs, then thetop navigation, and finally the rectangular area below themain image.

As shown in Figs. 3 and 4, participants fixated on faces,when a face was present on the page, within the first twofixations. This is consistent with the heat maps on Figs. 1and 2, showing intense fixation on faces. The fixation orderof the first five seconds together with the heat maps showedthat faces not only received intense fixations but also wereattended to quite early in the viewing process. On the PCMall web page, the only page that included images of facesthat were not celebrities, only one image of a person wasfixated on in the first five seconds; other faces on the pagedid not receive fixation within the first five seconds.

The first fixations on the AOIs were mostly located on thecenter and top of the area above the fold, typically on focalpoints when they were present. For example, the first threefixations on all pages were mostly located on the top portionof the page. On the Mac homepage, the first three fixationswere on the large central text, followed by fixations on theimage of Steve Jobs below the text (also located in thecenter), then the navigation at the top. On the Gaphomepage, the first three fixations were on the faces of thecelebrities in the center, followed by fixations at the top onthe logo, then the large text above the faces. On theVictoria’s Secret homepage, the first three fixations were onthe logo (top), then in the center on Adriana Lima’s face andthe large text next to image of the face. On the CVS page,participants fixated first on the center, then on the logo andthe large text on the top. Similarly, on Bidz’ page, fixationsstarted at the center, then moved to the top navigation andside navigation. On PCMall, participants fixated first on thelogo (top), then on the face on the top left of the page, andthen on the navigation bar above the face (top). This datashows that participants looked at logos and top navigationwithin the first four fixations.The plots show that, when a large main image was

available (as in the most liked pages), it was fixated uponwithin the first few fixations (AOIs 1 and 2 for Mac, AOI1a–d for Gap, and AOI 2 for Victoria’s Secret). The plotsshow that blocks of text were not covered in the first fewfixations on most pages. The navigation bar containingrelatively long lists of links (textual information) on theCVS page and on the Bidz page, located on the left andcenter respectively, did receive early fixations. These twopages, however, lacked a large main image. The plots showthat the search feature was fixated upon, however, thisfeature was only attended to on the least appealing pageswithin the first five seconds.

8. Discussion

This research sought to take a step towards under-standing the web preferences of Generation Y. An index

ARTICLE IN PRESS

Fig. 3. Fixation order for the most liked web pages.

S. Djamasbi et al. / Int. J. Human-Computer Studies ] (]]]]) ]]]–]]] 11

Please cite this article as: Djamasbi, S., et al., Generation Y, web design, and eye tracking. International Journal of Human Computer Studies (2010),doi:10.1016/j.ijhcs.2009.12.006

Page 30: FLUPA 2011 -  Eye-Tracking : Comportements visuels des internautes par Christian Bastien et Gautier Drusch

www.flupa.eu

•  Approche statique

30

Yesilada & al. 2008

Page 31: FLUPA 2011 -  Eye-Tracking : Comportements visuels des internautes par Christian Bastien et Gautier Drusch

www.flupa.eu

•  Approche statique (SERP)

31

path does not click on a web page before viewing each of the abstracts that preceded it in the Google ranking.Next, we define a user!s evaluation of the search results to be linear if the minimal sequence of the user!s scan-path is monotonically increasing in steps of 1 and strictly linear if the corresponding compressed sequence ismonotonically increasing in steps of 1. Note that a compressed path is monotonically increasing if and only ifa user makes no skips (jumps of length greater than one) and no regressions (jumps back) while viewing theabstract list. We also quantify skip and regression distance by the distance of the jumps in number of abstractsbetween them.

4. Results

In this section, we report on the major findings of this research. We first describe the overall web searchbehaviors using eye tracking methods, and second describe variations in those behaviors based on task kindand gender.

4.1. Search behaviors

To give a rich understanding of the interaction, we highlight conclusive results with respect to the searchquestion, individual queries, and individual query result page viewings. Overall about 60% of the questionswere answered correctly within the time limit allowed. Over each successfully answered question, on average1.6 queries were entered to Google, and an average of 4.78 abstracts were clicked upon (including repeat selec-tions of abstracts).

With respect to the individual queries, 437 queries were submitted by the subjects in total. On average 0.80web documents were selected, or clicked upon per query, and the number of clicks ranged from zero to five.Thirty-nine percent of the queries resulted in at least one abstract selection. In 96% of the queries, subjectslooked only at the first Google result page, containing only the first ten abstracts. No subjects went beyondthe third results page. Most of the subjects viewed the first and second results rather equally in frequency;however, they chose to click on the first result most of the time. The results indicate that for each query onlythe most highly ranked search results are likely to be exposed to the users. We also observed that users relyheavily on the abstracts alone to determine the relevance of the corresponding web page. On more than half ofthe search sessions, users chose to revise the query terms without clicking on any abstract.

To obtain the patterns of evaluation of the abstracts on the query results pages, we calculated scanpathpatterns on over 600 Google result pages. The average lengths of the scanpath, compressed scanpath, and min-imal scanpath were 16, 5.8, and 3.2 respectively. Thus subjects viewed on average only three abstracts perresult page. Sixty-seven percent of sequences for which a document was selected were complete. 34% of thescanpaths were linear and 19% were strictly linear, the latter mostly attributed to sequences of lengths one

Fig. 1. An example of a scanpath on a Google results page.

L. Lorigo et al. / Information Processing and Management 42 (2006) 1123–1131 1127

% fixation sur chaque rang de recherche

Lorigo & al. 2006

Page 32: FLUPA 2011 -  Eye-Tracking : Comportements visuels des internautes par Christian Bastien et Gautier Drusch

www.flupa.eu

•  Approches statiques : limitées •  Les scanpaths sont

dynamiques (succession de fixations et saccades)

•  Les comparaisons de scanpaths sont limitées par l’usage des AOI.

32

by color (red, green or yellow) on the heat maps weredelineated by rectangles identifying a collection of AOIs oneach page. For example, because the heat maps showedthat images of faces received fixation on the Gap page,these images were included in the set of AOIs for the Gappage (see rectangles marked as 1a–1d on the Gap page inFig. 3).

Next, the gaze data for the first five seconds of viewingwas aggregated. Those AOIs that received fixations in thefirst five seconds of viewing were then considered forcalculating their average time to first fixation, i.e., the timeelapsed before participants viewed them. This informationrevealed the order in which the AOIs were viewed by users.For example, on the main image of the Mac homepage, thelarge text, the image of Steve Jobs, and the top navigationwere marked as three AOIs; the time to first fixation wasthe time from when the page was first shown to theparticipant until the AOI received fixation. This wasmeasured in seconds for each AOI for each participant.The times were then averaged across participants for eachAOI. Based on this, the average order in which usersviewed AOIs on the pages was determined. The plots of thefixation order for each page are shown in Figs. 3 and 4.Each rectangle represents an AOI. The numbers inside therectangles indicate the average order in which the AOIswere viewed. For example, the order plot of the Mac pageindicates that the large text ‘‘Mac OS X Leopard’’ wasviewed first, followed by the image of Steve Jobs, then thetop navigation, and finally the rectangular area below themain image.

As shown in Figs. 3 and 4, participants fixated on faces,when a face was present on the page, within the first twofixations. This is consistent with the heat maps on Figs. 1and 2, showing intense fixation on faces. The fixation orderof the first five seconds together with the heat maps showedthat faces not only received intense fixations but also wereattended to quite early in the viewing process. On the PCMall web page, the only page that included images of facesthat were not celebrities, only one image of a person wasfixated on in the first five seconds; other faces on the pagedid not receive fixation within the first five seconds.

The first fixations on the AOIs were mostly located on thecenter and top of the area above the fold, typically on focalpoints when they were present. For example, the first threefixations on all pages were mostly located on the top portionof the page. On the Mac homepage, the first three fixationswere on the large central text, followed by fixations on theimage of Steve Jobs below the text (also located in thecenter), then the navigation at the top. On the Gaphomepage, the first three fixations were on the faces of thecelebrities in the center, followed by fixations at the top onthe logo, then the large text above the faces. On theVictoria’s Secret homepage, the first three fixations were onthe logo (top), then in the center on Adriana Lima’s face andthe large text next to image of the face. On the CVS page,participants fixated first on the center, then on the logo andthe large text on the top. Similarly, on Bidz’ page, fixationsstarted at the center, then moved to the top navigation andside navigation. On PCMall, participants fixated first on thelogo (top), then on the face on the top left of the page, andthen on the navigation bar above the face (top). This datashows that participants looked at logos and top navigationwithin the first four fixations.The plots show that, when a large main image was

available (as in the most liked pages), it was fixated uponwithin the first few fixations (AOIs 1 and 2 for Mac, AOI1a–d for Gap, and AOI 2 for Victoria’s Secret). The plotsshow that blocks of text were not covered in the first fewfixations on most pages. The navigation bar containingrelatively long lists of links (textual information) on theCVS page and on the Bidz page, located on the left andcenter respectively, did receive early fixations. These twopages, however, lacked a large main image. The plots showthat the search feature was fixated upon, however, thisfeature was only attended to on the least appealing pageswithin the first five seconds.

8. Discussion

This research sought to take a step towards under-standing the web preferences of Generation Y. An index

ARTICLE IN PRESS

Fig. 3. Fixation order for the most liked web pages.

S. Djamasbi et al. / Int. J. Human-Computer Studies ] (]]]]) ]]]–]]] 11

Please cite this article as: Djamasbi, S., et al., Generation Y, web design, and eye tracking. International Journal of Human Computer Studies (2010),doi:10.1016/j.ijhcs.2009.12.006

Page 33: FLUPA 2011 -  Eye-Tracking : Comportements visuels des internautes par Christian Bastien et Gautier Drusch

www.flupa.eu

•  Approche dynamique •  Basée sur les méthodes d’alignement

33

Comparison d’ADN Comparison de mots

Page 34: FLUPA 2011 -  Eye-Tracking : Comportements visuels des internautes par Christian Bastien et Gautier Drusch

www.flupa.eu

•  Approche dynamique •  Approche basique

34

by color (red, green or yellow) on the heat maps weredelineated by rectangles identifying a collection of AOIs oneach page. For example, because the heat maps showedthat images of faces received fixation on the Gap page,these images were included in the set of AOIs for the Gappage (see rectangles marked as 1a–1d on the Gap page inFig. 3).

Next, the gaze data for the first five seconds of viewingwas aggregated. Those AOIs that received fixations in thefirst five seconds of viewing were then considered forcalculating their average time to first fixation, i.e., the timeelapsed before participants viewed them. This informationrevealed the order in which the AOIs were viewed by users.For example, on the main image of the Mac homepage, thelarge text, the image of Steve Jobs, and the top navigationwere marked as three AOIs; the time to first fixation wasthe time from when the page was first shown to theparticipant until the AOI received fixation. This wasmeasured in seconds for each AOI for each participant.The times were then averaged across participants for eachAOI. Based on this, the average order in which usersviewed AOIs on the pages was determined. The plots of thefixation order for each page are shown in Figs. 3 and 4.Each rectangle represents an AOI. The numbers inside therectangles indicate the average order in which the AOIswere viewed. For example, the order plot of the Mac pageindicates that the large text ‘‘Mac OS X Leopard’’ wasviewed first, followed by the image of Steve Jobs, then thetop navigation, and finally the rectangular area below themain image.

As shown in Figs. 3 and 4, participants fixated on faces,when a face was present on the page, within the first twofixations. This is consistent with the heat maps on Figs. 1and 2, showing intense fixation on faces. The fixation orderof the first five seconds together with the heat maps showedthat faces not only received intense fixations but also wereattended to quite early in the viewing process. On the PCMall web page, the only page that included images of facesthat were not celebrities, only one image of a person wasfixated on in the first five seconds; other faces on the pagedid not receive fixation within the first five seconds.

The first fixations on the AOIs were mostly located on thecenter and top of the area above the fold, typically on focalpoints when they were present. For example, the first threefixations on all pages were mostly located on the top portionof the page. On the Mac homepage, the first three fixationswere on the large central text, followed by fixations on theimage of Steve Jobs below the text (also located in thecenter), then the navigation at the top. On the Gaphomepage, the first three fixations were on the faces of thecelebrities in the center, followed by fixations at the top onthe logo, then the large text above the faces. On theVictoria’s Secret homepage, the first three fixations were onthe logo (top), then in the center on Adriana Lima’s face andthe large text next to image of the face. On the CVS page,participants fixated first on the center, then on the logo andthe large text on the top. Similarly, on Bidz’ page, fixationsstarted at the center, then moved to the top navigation andside navigation. On PCMall, participants fixated first on thelogo (top), then on the face on the top left of the page, andthen on the navigation bar above the face (top). This datashows that participants looked at logos and top navigationwithin the first four fixations.The plots show that, when a large main image was

available (as in the most liked pages), it was fixated uponwithin the first few fixations (AOIs 1 and 2 for Mac, AOI1a–d for Gap, and AOI 2 for Victoria’s Secret). The plotsshow that blocks of text were not covered in the first fewfixations on most pages. The navigation bar containingrelatively long lists of links (textual information) on theCVS page and on the Bidz page, located on the left andcenter respectively, did receive early fixations. These twopages, however, lacked a large main image. The plots showthat the search feature was fixated upon, however, thisfeature was only attended to on the least appealing pageswithin the first five seconds.

8. Discussion

This research sought to take a step towards under-standing the web preferences of Generation Y. An index

ARTICLE IN PRESS

Fig. 3. Fixation order for the most liked web pages.

S. Djamasbi et al. / Int. J. Human-Computer Studies ] (]]]]) ]]]–]]] 11

Please cite this article as: Djamasbi, S., et al., Generation Y, web design, and eye tracking. International Journal of Human Computer Studies (2010),doi:10.1016/j.ijhcs.2009.12.006

4 AOI = 4 lettres (A,B,C,D) 2 scanpaths = 2 chaines de caractères Distance de Levenshtein : « Le plus faible coût possible d’opérations élémentaires d’insertion, de substitution et de suppression d’unités requises pour aligner ou transformer une séquence en une autre » (Abbott & Forrest, 1986)

Josephson & Holmes, 2002

Page 35: FLUPA 2011 -  Eye-Tracking : Comportements visuels des internautes par Christian Bastien et Gautier Drusch

www.flupa.eu

•  Approche dynamique •  Approche basique

35

4 AOI = 4 lettres (A,B,C,D) 2 scanpaths = 2 chaines de caractères Exemple d’alignement avec la distance de Levenshtein :

!

Page 36: FLUPA 2011 -  Eye-Tracking : Comportements visuels des internautes par Christian Bastien et Gautier Drusch

www.flupa.eu

•  Approche dynamique •  Améliorations

•  Zones communes entre les scanpaths : •  Un score de similarité est ajouté à la distance de

Levenshtein.

36

Privitera & Stark, 2000

GRBCEG ACDUCBA

2 scanpaths, 8 AOI visualisées 2 AOI en commun Score de similarité : 2/8 = 0.25

Page 37: FLUPA 2011 -  Eye-Tracking : Comportements visuels des internautes par Christian Bastien et Gautier Drusch

www.flupa.eu

•  Approche dynamique •  Améliorations

•  La distance entre les AOI : plus 2 AOI sont proches, plus faible est le coût de substitution.

37

by color (red, green or yellow) on the heat maps weredelineated by rectangles identifying a collection of AOIs oneach page. For example, because the heat maps showedthat images of faces received fixation on the Gap page,these images were included in the set of AOIs for the Gappage (see rectangles marked as 1a–1d on the Gap page inFig. 3).

Next, the gaze data for the first five seconds of viewingwas aggregated. Those AOIs that received fixations in thefirst five seconds of viewing were then considered forcalculating their average time to first fixation, i.e., the timeelapsed before participants viewed them. This informationrevealed the order in which the AOIs were viewed by users.For example, on the main image of the Mac homepage, thelarge text, the image of Steve Jobs, and the top navigationwere marked as three AOIs; the time to first fixation wasthe time from when the page was first shown to theparticipant until the AOI received fixation. This wasmeasured in seconds for each AOI for each participant.The times were then averaged across participants for eachAOI. Based on this, the average order in which usersviewed AOIs on the pages was determined. The plots of thefixation order for each page are shown in Figs. 3 and 4.Each rectangle represents an AOI. The numbers inside therectangles indicate the average order in which the AOIswere viewed. For example, the order plot of the Mac pageindicates that the large text ‘‘Mac OS X Leopard’’ wasviewed first, followed by the image of Steve Jobs, then thetop navigation, and finally the rectangular area below themain image.

As shown in Figs. 3 and 4, participants fixated on faces,when a face was present on the page, within the first twofixations. This is consistent with the heat maps on Figs. 1and 2, showing intense fixation on faces. The fixation orderof the first five seconds together with the heat maps showedthat faces not only received intense fixations but also wereattended to quite early in the viewing process. On the PCMall web page, the only page that included images of facesthat were not celebrities, only one image of a person wasfixated on in the first five seconds; other faces on the pagedid not receive fixation within the first five seconds.

The first fixations on the AOIs were mostly located on thecenter and top of the area above the fold, typically on focalpoints when they were present. For example, the first threefixations on all pages were mostly located on the top portionof the page. On the Mac homepage, the first three fixationswere on the large central text, followed by fixations on theimage of Steve Jobs below the text (also located in thecenter), then the navigation at the top. On the Gaphomepage, the first three fixations were on the faces of thecelebrities in the center, followed by fixations at the top onthe logo, then the large text above the faces. On theVictoria’s Secret homepage, the first three fixations were onthe logo (top), then in the center on Adriana Lima’s face andthe large text next to image of the face. On the CVS page,participants fixated first on the center, then on the logo andthe large text on the top. Similarly, on Bidz’ page, fixationsstarted at the center, then moved to the top navigation andside navigation. On PCMall, participants fixated first on thelogo (top), then on the face on the top left of the page, andthen on the navigation bar above the face (top). This datashows that participants looked at logos and top navigationwithin the first four fixations.The plots show that, when a large main image was

available (as in the most liked pages), it was fixated uponwithin the first few fixations (AOIs 1 and 2 for Mac, AOI1a–d for Gap, and AOI 2 for Victoria’s Secret). The plotsshow that blocks of text were not covered in the first fewfixations on most pages. The navigation bar containingrelatively long lists of links (textual information) on theCVS page and on the Bidz page, located on the left andcenter respectively, did receive early fixations. These twopages, however, lacked a large main image. The plots showthat the search feature was fixated upon, however, thisfeature was only attended to on the least appealing pageswithin the first five seconds.

8. Discussion

This research sought to take a step towards under-standing the web preferences of Generation Y. An index

ARTICLE IN PRESS

Fig. 3. Fixation order for the most liked web pages.

S. Djamasbi et al. / Int. J. Human-Computer Studies ] (]]]]) ]]]–]]] 11

Please cite this article as: Djamasbi, S., et al., Generation Y, web design, and eye tracking. International Journal of Human Computer Studies (2010),doi:10.1016/j.ijhcs.2009.12.006

Coût = 2

Coût = 1

Coût = 3

Page 38: FLUPA 2011 -  Eye-Tracking : Comportements visuels des internautes par Christian Bastien et Gautier Drusch

www.flupa.eu

•  Approche dynamique •  Améliorations

•  La distance entre les AOI

38

Coût de substitution entre 2 AOI = distance euclidienne entre le milieu de ces 2 AOI (normalisé par la distance maximale entre 2 AOI) Exemple A et M : -  Distance : 750px -  Max distance : 1000px Coût de substitution = 0.75

750 px

Max = 1000px

Habuchi & Takeuchi, 2007

Page 39: FLUPA 2011 -  Eye-Tracking : Comportements visuels des internautes par Christian Bastien et Gautier Drusch

www.flupa.eu

•  Approche dynamique : limites •  Les méthodes String-edit n’ont pas été crées

pour comparer les scanpaths •  Ne prennent pas en compte la distance

temporelle lorsque deux scanpaths ont visualisé la même AOI mais à deux moments différents.

•  Très sensible à la longueur des scanapths

•  Une partie de la variance des scanpaths est dûe à la définition des AOI.

39

Page 40: FLUPA 2011 -  Eye-Tracking : Comportements visuels des internautes par Christian Bastien et Gautier Drusch

www.flupa.eu

•  Styles de visualisation •  Validation inter-juges

40

Aula, Majaranta & Raiha, 2005

Page 41: FLUPA 2011 -  Eye-Tracking : Comportements visuels des internautes par Christian Bastien et Gautier Drusch

www.flupa.eu

•  Scan-pattern moyen

•  Un algorithme d’alignements multiples pour extraire les séquences similaires (sous-patterns) inter-scanpaths

•  Chaque sous-pattern est ensuite ajouté aux autres, formant ainsi un “pattern moyen”.

41

Copyright © 2006 by the Association for Computing Machinery, Inc.

Permission to make digital or hard copies of part or all of this work for personal or

classroom use is granted without fee provided that copies are not made or distributed

for commercial advantage and that copies bear this notice and the full citation on the

first page. Copyrights for components of this work owned by others than ACM must be

honored. Abstracting with credit is permitted. To copy otherwise, to republish, to post on

servers, or to redistribute to lists, requires prior specific permission and/or a fee.

Request permissions from Permissions Dept, ACM Inc., fax +1 (212) 869-0481 or e-mail

[email protected].

ETRA 2006, San Diego, California, 27–29 March 2006.

© 2006 ACM 1-59593-305-0/06/0003 $5.00

!"#$%&'(&)*+%(),%--#$(.)%(/)01%-)21#3)4%()2#55)6.)!

"#$#%#!"#&'())*#!

+)(%#$$!,%-.#(/-01!

232456)(%#$$7#89!

:300!;#9/%#(!

,%-.#(/-01!)<!+3$-<)(%-3=!>3%!;(3%6-/6)!

<#9/%#(&5.-/-)%796/<7#89!

?#(-!?31!

+)(%#$$!,%-.#(/-01!

@*@A56)(%#$$7#89!

!7)))!8.-$%+-)!B2-$#! <-C30-)%!8303!3%8!/36638-6! -%8-6#/!23.#!'##%!#&D$)1#8!3/!-%8-.-893$!&#3/9(#/=!$#//!<(#E9#%0!3%3$1/-/!23/!'##%!300#&D0#8!)%!02#!/#E9#%6#!)(!D300#(%!8303!0230!02#/#!0F)!-%8-6#/!!"#$!%$&!6(#30#7!G2#!D300#(%/!)<!<-C30-)%/!3%8!/36638#/!3(#!(-62!3%8!6)&D$#C=!3%8!2#%6#=! 02#1! 3(#! 01D-63$$1! /098-#8! 3/! -%8-.-893$! D302/! )(! D3(0/! )<!D302/! 0230! 3(#! -/)$30#87! H%3$1/-/! -/! 9/93$$1! 3! .-/93$! 6)&D3(-/)%=!3$02)9@2! &)(#! (#6#%0$1! 02#(#! 23.#! '##%! /098-#/! 0230! 23.#!6)&D3(#8!/63%!D300#(%/!/030-/0-63$$1!IJ)/#D2/)%!3%8!")$&#/!KLLKM!N3%!#0!3$7!KLLKM!O3('9/!APQRS7!T%! 02#!69((#%0!F)(*!F#!#CD$)(#!3!&#02)8! <)(! 8#(-.-%@! 3%! U3.#(3@#V! /63%! D300#(%! 3@@(#@30#8! <()&!&3%1!9/#(/!.-#F-%@!02#!/3&#!.-/93$!/0-&9$9/!WF#'!/-0#X7!!)9))):(-$;/<+-';()!G2-/! &#02)8! 9/#/! 3! &9$0-D$#! /#E9#%6#! 3$-@%&#%0! 3$@)(-02&! 0)!#C0(360! /-&-$3(-0-#/! 3&)%@! &9$0-D$#! D300#(%/7! Y362! D300#(%! -/!3$-@%#8! 3/! 3! /#E9#%6#!F-02! 3%)02#(! /63%! D300#(%! IJ)/#D2/)%! 3%8!")$&#/!KLLKS7!,/-%@!3!&9$0-D$#!/#E9#%6#!3$-@%&#%0!3$@)(-02&!0)!-0#(30#! 02()9@2! 3$$! 02#! D300#(%/=! /-&-$3(-0-#/! 3(#! D(#/#(.#8! -%!-%0#(&#8-30#! 3$-@%&#%0/7! G2#! <-%3$! 3$-@%&#%0! -/! 3! D300#(%!6)%/0(960#8! <()&! /-&-$3(-0-#/! 3&)%@! 02#!&9$0-D$#! -%D90! D300#(%/7!"#%6#! 02-/! /-%@$#! /63%! D300#(%! 63%! (#D(#/#%0! 02#! '#23.-)(! )<! 02#!#%0-(#! @()9D7! G2-/! &#02)8! 23/! '##%! 3//#//#8! .-/93$$1! 3%8!%9&#(-63$$1=!3%8!23/!<3(#8!F#$$!-%!')02!63/#/7!;)(!#C3&D$#=!F2#%!02#!3.#(3@#!/63%!D300#(%/!<()&!0F)!#CD#(-&#%03$!6)%8-0-)%/!F#(#!6)&D3(#8=!9D)%!.-/93$! -%/D#60-)%! 02#!D300#(%/!3(#!8-/0-%60!3%8! -%!F31/! 0230! /9DD)(0! 02#! <36#! .3$-8-01! )<! 02#! 6)&D3(-/)%7!>D#6-<-63$$1=!-%!)%#!6)%8-0-)%=!9/#(/!F#(#!0)$8!0)!/-&D$1!'()F/#!30!02#-(! $#-/9(#=! F2#(#3/! 9/#(/! -%! 3! /#D3(30#! 6)%8-0-)%! F#(#! @-.#%!&#&)(1! -%/0(960-)%/7! G2#! 3.#(3@#! /63%! D300#(%/! )<! 02#! <)(&#(!@()9D!8)!%)0!6)%03-%!3%1!/2)(0!/36638#/! -%8-630-.#!)<! (#38-%@!)(!<)69/#8!300#%0-)%7!G2#!3.#(3@#!/63%!D300#(%!<)(!02#!&#&)(1!@()9D!-%6$98#8! /2)(0! /36638#/! 3%8! 6$)/#! #C3&-%30-)%! )<! 02#! 6#%0(3$!6)%0#%0!W/##!;-@9(#!A!3%8!KX7!Z9&#(-63$!0#/0/!6)&D3(-%@!8-/03%6#/!)<! -%8-.-893$! /63%! D300#(%/! 0)! 02#! 3.#(3@#! /63%! D300#(%!8-/6(-&-%30#8!F#$$! <)(!8-<<#(#%0!6)%8-0-)%/!3%8!'#0F##%!@#%8#(/7!B#! 3(#! 8#.#$)D-%@! #CD#(-&#%0/! 69((#%0$1! 0)! 0#/0! 02#! .3$-8-01! )<!02-/!&#02)8!&)(#!/1/0#&30-63$$17!!

!

!

!;-@9(#!K7!H.#(3@#!D302!<)(!&#&)(1!6)%8-0-)%!

!

=))):>?5'+%-';(.)%(/)@<-<$#)0;$A)!B#!#%.-/-)%!3!&#3/9(#!)<!3%!3.#(3@#!/63%!D300#(%!0)!'#!<(9-0<9$!-%!')02! 02#)(#0-63$! 3%8! 3DD$-#8! 8)&3-%/7! ;)(! #C3&D$#=! -0! /##&/!(#3/)%3'$#! 0230! )%6#! /962! 3! &#02)8! 23/! '##%! .3$-830#8! 0230! 3!01D)$)@1!)<!8-&#%/-)%/!)(!623(360#(-/0-6/!)<!8-<<#(#%0!D300#(%/!0230!)669(!9%8#(!8-<<#(#%0!6)%8-0-)%/!6)9$8!'#!8#.#$)D#87!G29/=!&962!$-*#! (#38-%@! 3%! C[(31=! -0! F)9$8! '#! D)//-'$#! 0)! 3/6#(03-%! 6#(03-%!623(360#(-/0-6/! 3')90! 02#! 9/#(=! 02#! /0-&9$9/=! 3%8\)(! 02#! 03/*7!>-&-$3($1=! -0! /##&/! F-02-%! 02#! (#3$&! )<! D)//-'-$-01! 0230! /63%!D300#(%/!)<!02)/#!D3(0-69$3($1!D()<-6-#%0!30!3!03/*!W#7@7!-%<)(&30-)%!/#3(62=! &#8-63$! 8-3@%)/-/=! /#3(62! 3%8! (#/69#X! 6)9$8! '#! 9/#8! 0)!0(3-%!%).-6#/!)%!02#!/3&#!03/*7!

H0!3!02#)(#0-63$!$#.#$!F#!3(#!-%0#(#/0#8!-%!D9(/9-%@!02-/!D300#(%! 8303! <()&! 3! %#0F)(*! D#(/D#60-.#=! /D#6-<-63$$1! <()&! 3!%#0F)(*! &)0-<! 3%@$#! -%! 0(1-%@! 0)! 8-/6).#(! 02#-(! 9%8#($1-%@!/0(9609(3$!D()D#(0-#/7!Z#0F)(*!&)0-</!3(#!U](#69((-%@=!/-@%-<-63%0!D300#(%/! )<! -%0#(6)%%#60-)%/V! I:-$)! #0! 3$7! KLLKS7! G2#! @)3$! -/! 0)!-8#%0-<1!).#($3DD-%@!&)0-</!)(!D300#(%/!36()//!3%!3((31!)<!8-/0-%60!%#0F)(*/!(3%@-%@!<()&!02)/#!D300#(%/!<)9%8!-%!6#$$/!)(!'360#(-3!0)!%#0F)(*/! 0230! D()896#! -%<)(&30-)%! D()6#//-%@7! "#(#=! 02#! @)3$!F)9$8!'#!0)!-8#%0-<1!/-&-$3(!&)0-</!F-02-%!02#!3.#(3@#!/63%!D300#(%!0230! &-@20! '#! /-@%309(#/! )(! '$9#D(-%0/! <)(! 8-<<#(#%0! *-%8/! )<!-%<)(&30-)%!D()6#//-%@!W#7@7!#%6)8-%@=!8#6-/-)%[&3*-%@=!/0)(3@#X7!

!=)))B#C#$#(+#.!!J^>YN">^Z=! >7! 3%8! "^_:Y>=! :7Y7! KLLK7! `-/93$! H00#%0-)%! 0)!!!!!!!!!!!!!a#D#30#8!T%0#(%#0!T&3@#/b!G#/0-%@!02#!>63%D302!G2#)(1!)%!02#!B)($8!B-8#!B#'=!'()*=!4c[4P7!

:T_^=! a7=! >"YZ[^aa=! >7=! TGde^`TGd=! >7=! eH>"GHZ=! Z7=!+"e_^`>eTT=!f7=! 3%8!H_^Z=!,7! KLLK7!Z#0F)(*!:)0-</b!>-&D$#!g9-$8-%@!g$)6*/!)<!+)&D$#C!Z#0F)(*/7!+,-$.,$/012=!hK4[hKR7!

NHZ=!g7=!"Y:ga^^eY=!"7=!?HO=!?7=!?aHZeH=!_7=!;Y,>ZYa=!:7=!3%8!ZYB:HZ=! J7! KLLK7! G2#! f#0#(&-%3%0/! )<! B#'! N3@#! `-#F-%@!g#23.-)(b! H%! Y1#! G(36*-%@! >09817! T%!3&",$$4-.#5/ "6/ '()*=!A4R[Ai47!

OHag,>=!H7_7!APQR7!'7$/8"9$:$.!5/;.4/<-5-".7!N$#%9&!N(#//7!

;-@9(#!A7!H.#(3@#!D302!<)(!'()F/#!6)%8-0-)%!

!

41

ABDBCCEG ACDECBCC BCCBCCEG ABCBEEBC BAABABCE Scan-pattern = BCC+ABC

Hembrooke, Feusner & Gay, 2006

Page 42: FLUPA 2011 -  Eye-Tracking : Comportements visuels des internautes par Christian Bastien et Gautier Drusch

www.flupa.eu

Merci de votre attention !

Maintenant c’est à vous…

42