Démonstration de Suivi Oculaire : SVGs comme AOIs

Aperçu

Dans cette démonstration, notre objectif est de capturer des données de regard par suivi oculaire. Plus précisément, nous voulons capturer les données de regard associées à des Zones d'Intérêt spécifiques (AOIs) qui sont incluses dans l'étude en tant qu'objets SVG formes.

Un aperçu de la démonstration en action est montré ci-dessous avec le cercle rouge fournissant un retour en indiquant la localisation du regard en temps réel :

• NOTE : L'enregistrement de la démonstration a été réalisé avec une option de calibration de 5,5 minutes ; le cercle rouge est un objet qui représente le regard des participants en temps réel et la configuration globale est expliquée plus loin ci-dessous.

Jetez un œil à cette courte vidéo qui montre la démonstration en action, ainsi qu'un aperçu des données enregistrées à la fin :

Objets

Cette démonstration inclut une image de fond d'une jetée sur laquelle 4 objets SVG de personnes sont placés. Il y a également un objet de retour de regard (cercle rouge). Pour les besoins de cette démonstration, nous voulions représenter le regard en temps réel et ce cercle rouge le reflète.

Variables Personnalisées Créées

Afin d'enregistrer des données, des variables sont nécessaires. Une liste de toutes les variables personnalisées qui ont été créées pour cette démonstration est montrée ci-dessous, accessible via l'onglet ‘Variables’. L'image ci-dessous montre les détails et les paramètres des variables que cette démonstration utilise :

Voici une explication des variables et de leur but :

Nom de la Variable	Description	Type d'Enregistrement
All Gaze Data	Utilisé pour stocker le tableau de coordonnées x/y [X,Y], ainsi que le Temps de Capture [T] et le niveau de confiance [C] de la mesure.	Tous les changements / séries temporelles
AOI1_gaze_data	Utilisé pour stocker le tableau de [X,Y,T,C] lorsque le participant regarde l'objet SVG nommé AOI1.	Tous les changements / séries temporelles
SVG1_path	Enregistre le chemin du nœud SVG sur lequel le regard s'est posé d'AOI1 (expliqué plus loin).	Tous les changements / séries temporelles
AOI2_gaze_data	Utilisé pour stocker le tableau de [X,Y,T,C] lorsque le participant regarde l'objet SVG nommé AOI2.	Tous les changements / séries temporelles
SVG2_path	Enregistre le chemin du nœud SVG sur lequel le regard s'est posé d'AOI2.	Tous les changements / séries temporelles

Et ainsi de suite....

Événements Configurés

Puisque nous sommes intéressés par la capture de données de regard, les événements suivants sont utilisés :

1. Toutes les Données de Regard : Cet événement s'initie dès que la tâche commence et enregistre les données de regard par suivi oculaire en continu.
2. Données de Regard AOI : Cet événement s'initie dès que le participant regarde une AOI spécifique (c'est-à-dire l'une des quatre personnes) et enregistre les valeurs liées au regard.
3. Fin de l'Expérience : Un événement qui accepte / termine la session et enregistre les données lorsque le sujet clique sur le bouton ‘Finir’.

Événement 1: Toutes les Données de Regard

Pour le premier événement, nous voulons accomplir les éléments suivants :

• enregistrer toutes les données de suivi oculaire pendant la durée de l'étude
• afficher la localisation détectée du regard sur l'écran en temps réel (pour que vous, en tant que chercheur, puissiez avoir une idée du suivi par webcam lors de l'essai de la démonstration)

Déclencheur

Ainsi, nous utilisons un déclencheur de regard de suivi oculaire pour initier cet événement.

Action

Une fois le regard détecté, les actions suivantes se produiront : Tout d'abord, nous appelons la variable All Gaze Data que nous avons créée plus tôt dans une action Set / Record Variable afin d'enregistrer les données sous forme de tableau [X,Y,T,C].

Ceci est réalisé (comme montré ci-dessous) en cliquant sur le bouton vert, en sélectionnant la variable cible, puis en cliquant sur l'icône de crayon menu de sélection de valeur puis en choisissant le tableau [X,Y,T,C] dans le menu spécifique au déclencheur (regard de suivi oculaire), comme montré ci-dessous :

Nous ajoutons également l'action Set Object Property afin de définir l'objet cercle rouge (appelé ‘regard’) pour que sa propriété X soit égale à la coordonnée et la propriété Y soit définie aux coordonnées X et Y, respectivement. En d'autres termes, nous définissons les valeurs x et y de l'objet pour qu'elles soient égales aux coordonnées x et y... finalement, c'est ce qui fait que l'objet se déplace en temps réel.

NOTE : les options pour Coordinate X et Coordinate Y sont sélectionnées à partir du menu spécifique au déclencheur (regard de suivi oculaire).

Événement 2: Données de Regard AOI

Dans cet événement, nous voulons configurer les événements de sorte que :

• le regard soit également enregistré lorsque le regard est spécifiquement fixé sur les AOIs cible (c'est-à-dire les objets SVG que nous avons téléchargés)
• les données spécifiques au nœud SVG de l'AOI sont rapportées

Déclencheur

Le déclencheur Eyetracking Gaze est également utilisé comme déclencheur ici. Mais dans ce contexte, nous indiquons que nous ne sommes intéressés que par des éléments spécifiques en cliquant sur l'option respective puis en sélectionnant les 4 objets SVG qui agissent en tant que Zones d'Intérêt (AOIs).

Action

Pour définir l'appel sur chaque AOI, nous avons besoin d'une Action de Contrôle → Action de Condition (Si...Alors). Essentiellement, nous voulons que Labvanced fasse ce qui suit : “Si le participant regarde AOI1, alors nous voulons enregistrer les données spécifiques pour celui-ci dans une variable spécifique, ainsi que le chemin SVG de ce regard”

Tout d'abord, nous cliquons sur le bouton + Condition et les deux valeurs d'icône de crayon apparaîtront.

• Première icône de crayon : Pour le premier champ que nous sélectionnons, dans le menu spécifique au déclencheur (regard de suivi oculaire), l'option Nom du Stimulus qui utilise le nom de l'objet stimulus sur lequel le déclencheur (dans ce cas, le regard) était.
• Deuxième icône de crayon : Sélectionnez Valeur Constante et ensuite sélectionnez l'option Chaine et tapez le nom de l'objet (c'est-à-dire AOI1) :

Jusqu'à présent, nous avons établi que lorsque le déclencheur (regard) est sur le stimulus nommé AOI1... alors :

• La variable AOI_gaze_data que nous avons créée précédemment enregistra le tableau [X,Y,T,C].
• De plus, la variable SVG1_path sera enregistrée pour contenir l’Info Stimulus qui, dans ce cas, puisque la cible d'intérêt (AOI1) est un SVG, l'info stimulus contiendra les nœuds du SVG.

Pour spécifier le prochain AOI, le bouton +Ajouter un Autre Cas Sinon dans la boîte de dialogue et ensuite répéter simplement la structure / la configuration comme cela a été montré ci-dessus mais avec les principales différences étant de définir le Nom du Stimulus comme AOI2 et ensuite appeler les variables spécifiques pour stocker les données, c'est-à-dire AOI2_gaze_data et SVG2_Path, comme montré ci-dessous :

Ensuite, pour AOI3, nous choisissons de Ajouter un Autre Cas Sinon encore une fois et de suivre la même structure mais avec les variables personnalisées que nous avons créées pour stocker les données pour cet AOI spécifique :

Encore une fois, pour AOI4, nous choisissons de Ajouter un Autre Cas Sinon encore une fois et de suivre la même structure mais avec les variables personnalisées que nous avons créées pour stocker les données pour cet AOI spécifique :

Événement 3: Fin de l'Expérience / Enregistrer les Données

Enfin, pour que les données soient enregistrées et stockées, nous devons choisir l'Action de Saut pour Accepter / Terminer la Session une fois que le bouton Finir est cliqué (qui est le déclencheur), comme montré ci-dessous.

Déclencheur

Le déclencheur est spécifié pour se produire lorsque le ‘Bouton Finir’ est utilisé :

Action

L'action qui se produira est que la session sera acceptée, ce qui, en conséquence, signifie que les données seront enregistrées.

Voyons à quoi ressembleront les données enregistrées dans la section suivante.

Données Enregistrées

Les données enregistrées incluent toutes les variables personnalisées plus des valeurs spécifiques à l'expérience comme le numéro de tâche, le numéro de session, etc.

Dans l'exemple ci-dessous, l'onglet Dataview & Export montre à quoi ressemblent les données lorsqu'elles sont séparées par des fichiers de séries temporelles. Chaque variable de série temporelle (c'est-à-dire les variables qui enregistrent tous les changements) est montrée avec son propre fichier CSV sur le panneau gauche ci-dessous. Cela peut être réalisé en spécifiant le paramètre pertinent en utilisant les réglages Export Format

Lorsque le fichier All Gaze Data.csv est sélectionné, de nombreuses variables sont enregistrées, y compris celles montrées ci-dessous. La colonne ‘valeur’ capture le tableau [X,Y,T,C] où les valeurs sont séparées par des virgules :

L'image ci-dessous montre un aperçu des tableaux qui ont été enregistrés spécifiquement lorsque le regard était sur AOI1, comme le montre la colonne ‘valeur’ :

L'image ci-dessous montre un aperçu des chemins SVG qui ont été enregistrés spécifiquement lorsque le regard était sur AOI1, comme le montre la colonne ‘valeur’ :

Conclusion

Cette démonstration vise à montrer comment enregistrer des données de regard et utiliser des objets SVG pour enregistrer le regard spécifiquement dans le contexte où le regard se produit sur une Zone d'Intérêt (AOI).

Si vous avez des questions, n'hésitez pas à nous contacter et à nous faire part des détails de votre expérience, surtout si vous devez effectuer un contrôle de faisabilité !