Sélectionner et ajuster les AOI du site Web

Un AOI de site Web ne suit pas une position d'écran fixe. Il suit un élément spécifique à l'intérieur de la page embarquée, appelé son ancre, identifié par un sélecteur CSS. Faire en sorte qu'un AOI se place sur le bon élément est surtout une question de choix et d'ajustement de cette ancre, et non de redimensionnement. Cette page couvre l'ensemble des contrôles dans le panneau Website AOI Object Properties : choisir un élément, corriger la sélection avec Parent, Child, Prev, et Next, affiner la taille et la position, nommer un AOI pour vos données exportées, filtrer par texte, suivre le défilement à l'intérieur d'un élément, et vérifier qu'un AOI fonctionne réellement avant de publier.

Pour les bases de l'ajout d'une trame de site Web et de votre premier AOI, voir Sélectionner des zones d'intérêt (AOIs) dans le guide complet du Web Bridge, ou le guide pas à pas de la trame de site Web pour un flux de tâches de bout en bout.

Remarque : la sélection d'un AOI de site Web affiche deux panneaux séparés : un bloc générique Object Properties (Name, Visibility, Active, Position & Size et un contrôle de grille Anchor) partagé par chaque type d'objet dans Labvanced, et les contrôles spécifiques aux AOI du site Web couverts par cette page. La grille Anchor du panneau générique est un point de référence de position/échelle, sans rapport avec l'ancre de sélecteur CSS décrite ci-dessous, et ses champs Position & Size ne sont pas ce qui détermine ce qu'un AOI de site Web suit. Utilisez plutôt les contrôles de sélecteur CSS ci-dessous.

L'ancre : Pourquoi un AOI survit au défilement

Chaque AOI de site Web stocke un sélecteur CSS, affiché dans le champ CSS Selector de son panneau Object Properties. Ce sélecteur est l'ancre de l'AOI : l'élément unique dans le DOM de la page embarquée auquel l'AOI est lié. Tant que l'élément d'ancrage existe sur la page, l'extension Labvanced Web Bridge continue de rendre compte de sa position en temps réel à Labvanced, y compris pendant que le participant défile, puisque l'élément d'ancrage lui-même se déplace avec la page. C'est pourquoi un AOI correctement ancré continue à suivre correctement lors du défilement sans que vous ayez besoin de faire quoi que ce soit de supplémentaire : l'ancre, et non une coordonnées d'écran, est ce qui est suivi.

L'implication pratique : si un AOI semble perdre la trace de sa cible, l'ancre elle-même est généralement le problème (elle pointe vers le mauvais élément, ou cet élément n'existe plus sur la page), et non sa taille ou sa position.

Un sélecteur suit toujours un seul élément. S'il correspond à plus d'un élément sur la page, par exemple un nom de classe partagé à travers un ensemble de cartes répétées, l'AOI suit celui qui apparaît en premier dans la structure de la page, pas tous. Cela se produit principalement avec un sélecteur tapé à la main basé sur une classe partagée ; un sélecteur produit par Pick Element ou les contrôles de navigation ci-dessous est ancré à l'élément exact sur lequel vous vous êtes posé et n'a pas ce problème.

Pourquoi le bouton "Choisir un élément" ne se place pas toujours sur l'élément exact

Avant d'avoir choisi ou tapé un sélecteur, le panneau montre uniquement CSS Selector, Pick Element, Stimulus Info, Text Filter, Scrollable container, et Show AOI overlay in player. Adjust selection (Parent/Child/Prev/Next) et les champs de décalage de taille/position n'apparaissent qu'une fois qu'un sélecteur existe réellement.

Pick Element ne s'ancre pas toujours sur l'élément exact sur lequel vous cliquez. Il recherche un bon conteneur à sélectionner, favorisant un élément ayant son propre ID ou un élément naturellement interactif comme un lien, un bouton ou un champ, et s'il ne trouve pas un à proximité, il revient à un conteneur voisin à la place. En pratique, cela signifie que cliquer sur un titre ou un morceau de texte à l'intérieur d'une carte sélectionne souvent la carte entière, pas seulement ce titre. Dans ce cas, utilisez les contrôles de navigation ci-dessous pour vous déplacer jusqu'à l'élément exact que vous vouliez.

Appuyez sur Esc à tout moment pendant la sélection pour annuler sans changer le sélecteur actuel de l'AOI. Vous pouvez également ignorer complètement le sélecteur et taper ou coller un sélecteur CSS directement dans le champ CSS Selector, utile si vous connaissez déjà le sélecteur que vous voulez ou si le sélecteur le manque constamment.

Correction de la sélection : Parent, Enfant, Précédent, Suivant

Une fois qu'un sélecteur CSS est défini, quatre boutons apparaissent sous Adjust selection: dans le panneau Object Properties :

Ce sont les principales façons de corriger une sélection, plus que de la redimensionner. Le flux de travail typique lorsque Pick Element se place sur le mauvais élément : cliquez sur Child pour descendre dans le premier élément intérieur du conteneur, puis Next (ou Prev) pour se déplacer latéralement parmi les frères de cet élément jusqu'à atteindre celui que vous voulez réellement. Si c'est encore trop haut, cliquez à nouveau sur Child pour descendre d'un niveau supplémentaire, puis déplacez-vous latéralement à nouveau. Chaque clic régénère le sélecteur pour l'endroit où vous vous trouvez, de sorte que l'AOI s'ancre toujours à cet élément exact, pas à un chemin composé à travers ses ancêtres.

Si un bouton n'a rien vers quoi se déplacer (Prev sans frère précédent, Child sur un élément sans enfants, ou Parent lorsque le seul élément au-dessus est le html/body extérieur de la page), rien ne se passe : la sélection reste là où elle était, sans message d'erreur. Si un bouton de navigation semble inactif, vous avez probablement atteint le bord de la structure de la page dans cette direction, essayez un autre bouton à la place.

Affiner la taille et la position

Une fois qu'un élément est ancré, deux contrôles supplémentaires apparaissent pour des corrections à petit niveau de pixel, distincts de la navigation ci-dessus :

• Size offset (px, ± per side) : étend ou rétrécit la zone suivie d'un nombre fixe de pixels sur les axes X et Y, appliqué symétriquement à chaque côté.
• Position shift (px) : déplace la zone suivie d'un nombre fixe de pixels sans changer sa taille.

Utilisez ces contrôles uniquement après que l'ancre elle-même soit correcte. Ils ajustent la limite d'un élément déjà correctement ancré ; ils ne changent pas quel élément est suivi.

Un AOI de site Web est toujours un rectangle, la boîte englobante de l'élément auquel il est ancré. Il n'y a pas d'option de polygone ou de forme personnalisée ici, contrairement aux AOIs sur les stimuli construits directement dans Labvanced. Si l'élément que vous devez suivre n'est pas lui-même rectangulaire, ancrez-le sur le plus petit élément rectangulaire qui le contient, puis utilisez Size offset pour réduire la boîte.

Nommer un AOI pour vos données exportées

Le champ Stimulus Info est un court libellé pour l'AOI. Il est rempli automatiquement à partir du texte de l'élément que vous sélectionnez ou naviguez vers (ou le nom de la balise de l'élément s'il n'a pas de texte), et vous pouvez le modifier pour quelque chose de plus clair. Ce libellé apparaît comme la valeur Stimulus Info dans les déclencheurs d'événements et les données exportées, donc c'est ainsi que vous reconnaissez à quel AOI une fixation, un clic ou un survol donné appartient réellement une fois qu'un cadre contient plus d'un AOI.

Donnez à chaque AOI un libellé distinct Stimulus Info avant de commencer à collecter des données réelles. Un libellé rempli automatiquement à partir du texte d'un élément, comme "Ajouter au panier", est acceptable en soi, mais devient déroutant une fois que le même texte apparaît sur plus d'un AOI.

Filtre de texte

Le champ Text Filter limite l'AOI à n'être actif que lorsque le texte visible de son élément d'ancrage contient une chaîne spécifique (la correspondance est insensible à la casse). C'est utile lorsque votre sélecteur d'ancre pourrait raisonnablement correspondre à un élément dont le texte change, par exemple un label d'état qui change entre plusieurs états, et que vous ne voulez que l'AOI soit compté comme actif pour un état spécifique.

Suivi d'une sous-région défilable

Si l'élément auquel vous vous êtes ancré a son propre défilement interne, par exemple un panneau de discussion ou une liste de produits défilable imbriquée dans la page, cochez Scrollable container. Cela indique à Labvanced de suivre également la position de défilement de cet élément et les dimensions de son contenu, séparément du défilement global de la page.

Ces données ne sont révélées que par le déclencheur Eyetracking Gaze/Eyetracking Fixation, pas Mouse Trigger. Lorsque la fixation se situe à l'intérieur d'un AOI conteneur défilable, son menu de sélection de valeur propose Container Relative X/Container Relative Y (position dans le contenu défilable complet du conteneur, pas seulement ce qui est actuellement visible) aux côtés de Container Scroll X/Container Scroll Y (à quelle distance le conteneur lui-même a été déroulé). Voir Suivi du comportement de la souris sur un AOI du site Web pour ce que le déclencheur de souris enregistre à la place sur le même AOI.

Vérifier qu'un AOI fonctionne réellement

Un AOI qui échoue à s'ancrer, parce que son sélecteur ne correspond à rien sur la page actuelle, que l'élément cible n'est pas encore chargé, ou que l'extension Web Bridge n'est pas active, ne montre par défaut aucune erreur au participant ou au chercheur. Il reste simplement inactif : aucune donnée de fixation, de clic ou de survol n'est enregistrée contre lui, et rien dans l'étude n'indique visiblement cela.

Pendant que vous construisez une étude, chaque AOI est déjà rendu comme un overlay coloré directement dans l'éditeur, le vert signifie que son sélecteur correspond actuellement à un élément sur la page, le rouge signifie qu'il ne correspond pas, sans besoin de basculement pour voir cela pendant que vous travaillez. Show AOI overlay in player étend ce même overlay à Preview et à l'étude en direct elle-même, ce qui est ce qui confirme réellement un AOI de bout en bout plutôt que juste pendant l'édition. Prévisualisez toujours votre étude avec cela activé au moins une fois, confirmez que chaque AOI est vert, puis désactivez-le à nouveau avant de publier si vous ne voulez pas que les participants voient l'overlay.

Éléments qui apparaissent ou disparaissent (Dialogues, Modales)

L'ancre d'un AOI de site Web n'a pas besoin d'être présente sur la page tout le temps. Parce que l'extension vérifie continuellement si le sélecteur CSS correspond actuellement à quelque chose, un AOI ancré à un élément à l'intérieur d'une boîte de dialogue, d'une modale ou d'un autre contenu qui n'apparaît qu'à certains moments, s'active lorsque cet élément apparaît et se désactive lorsqu'il est retiré, sans aucune configuration supplémentaire. Cela vous permet de suivre les interactions avec des éléments qui n'existent que temporairement, par exemple une boîte de dialogue de confirmation qui s'ouvre après une action spécifique, en utilisant le même mécanisme d'ancrage décrit ci-dessus.

Questions Fréquemment Posées

Lectures Complémentaires