Sélectionner et Ajuster les AOIs de 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 intégrée, appelé son ancre, identifié par un sélecteur CSS. Obtenir un AOI pour se positionner sur le bon élément concerne principalement le choix et l'ajustement de cette ancre, et non pas son 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, peaufiner 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'un cadre de site Web et de votre premier AOI, consultez Sélectionner les Zones d'Intérêt (AOIs) dans le guide complet de Web Bridge, ou le tutoriel cadre de site Web pour un flux de tâche de bout en bout.

Nota : sélectionner un AOI de site Web montre 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 à l'AOI de site Web que cette page couvre. La grille Anchor du panneau générique est un point de référence position/échelle, sans lien avec l'ancre de sélecteur CSS décrite ci-dessous, et ses champs Position & Size ne déterminent pas ce que suit un AOI de site Web. Utilisez à la place 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 intégrée auquel l'AOI est lié. Tant que l'élément d'ancrage existe sur la page, l'extension Labvanced Web Bridge continue de rapporter sa position en direct à Labvanced, même 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 de suivre correctement à travers le défilement sans que vous ayez à faire quoi que ce soit de supplémentaire : l'ancre, et non une coordonnée d'écran, est ce qui est suivi.

L'implication pratique : si un AOI semble perdre de vue 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 ne suit jamais qu'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 arrive en premier dans la structure de la page, et non tous. Cela provient principalement d'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 êtes tombé et n'a pas ce problème.

Pourquoi "Sélectionner un Élément" Ne Se Pose Pas Toujours sur l'Élément Exact

Avant que vous n'ayez choisi ou tapé un sélecteur, le panneau ne montre que 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 à l'élément exact que vous cliquez. Il recherche un bon conteneur à sélectionner, favorisant un élément avec son propre ID ou un élément naturellement interactif comme un lien, un bouton, ou un champ de saisie, et s'il ne trouve pas un élément proche, il se rabat sur un conteneur voisin. 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, et non juste ce titre. Quand cela arrive, utilisez les contrôles de navigation ci-dessous pour descendre jusqu'à l'élément exact que vous aviez en tête.

Appuyez sur Esc à tout moment lors de la sélection pour annuler sans changer le sélecteur actuel de l'AOI. Vous pouvez également sauter entièrement 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 souhaité ou si le sélecteur continue de le manquer.

Corriger 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 principaux moyens de corriger une sélection, plus que son redimensionnement. Le flux de travail typique lorsque Pick Element se pose sur le mauvais élément : cliquez sur Child pour descendre dans le premier élément interne du conteneur, puis Next (ou Prev) pour vous déplacer latéralement entre les frères de cet élément jusqu'à atteindre celui que vous voulez réellement. Si cela reste encore trop haut, cliquez à nouveau sur Child pour descendre un niveau supplémentaire, puis déplacez-vous encore latéralement. Chaque clic régénère le sélecteur pour l'endroit où vous atterrissez, donc l'AOI s'ancre toujours à cet élément exact, et non à 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 externe 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 non réactif, vous avez probablement atteint le bord de la structure de la page dans cette direction, essayez un autre bouton à la place.

Peaufiner la Taille et la Position

Une fois un élément ancré, deux contrôles supplémentaires apparaissent pour de petites corrections au pixel près, distincts de la navigation ci-dessus :

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

Utilisez ces contrôles uniquement après que l'ancre elle-même est 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 n'importe quel élément auquel il est ancré. Il n'y a pas d'option polygonale ou de forme personnalisée ici, contrairement aux AOIs sur des stimuli construits directement dans Labvanced. Si l'élément que vous devez suivre n'est pas lui-même rectangulaire, ancrez-le à l'élément rectangulaire le plus petit 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 une courte étiquette textuelle pour l'AOI. Il est rempli automatiquement à partir du texte de l'élément que vous sélectionnez ou naviguez (ou le nom de la balise de l'élément s'il n'a pas de texte), et vous pouvez l'éditer pour quelque chose de plus clair. Cette étiquette apparaît comme la valeur Stimulus Info dans les déclencheurs d'événements et les données exportées, c'est donc ainsi que vous indiquez à quel AOI appartient réellement un regard, un clic ou un survol donné une fois qu'une image a plus d'un AOI dessus.

Donnez à chaque AOI une étiquette Stimulus Info distincte avant de commencer à collecter des données réelles. Une étiquette remplie automatiquement copiée du texte d'un élément, comme "Ajouter au panier", est correcte en soi, mais devient confuse 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 ancré contient une chaîne spécifique (la correspondance est insensible à la casse). C'est utile lorsque votre sélecteur d'ancrage pourrait plausiblement correspondre à un élément dont le texte change, par exemple un label de statut qui passe par plusieurs états, et que vous ne souhaitez que que l'AOI soit comptée comme active pour un état spécifique.

Suivre un 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 chat 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 et les dimensions de contenu de cet élément, 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 le regard se place à l'intérieur d'un AOI de conteneur défilant, son menu de valeurs sélectionnables offre Container Relative X/Container Relative Y (position dans le contenu défilable complet du conteneur, et non seulement ce qui est actuellement visible) en plus de Container Scroll X/Container Scroll Y (la distance à laquelle le conteneur lui-même a défilé). Consultez Suivi du Comportement de la Souris sur un AOI de Site Web pour ce que le Déclencheur Souris enregistre au lieu 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'a pas encore chargé, ou que l'extension Web Bridge n'est pas active, ne montre pas d'erreur par défaut au participant ou au chercheur. Il reste simplement inactif : aucune donnée de regard, 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 se rend déjà comme une superposition colorée 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 aucun basculement nécessaire pour voir cela pendant que vous travaillez. Show AOI overlay in player étend cette même superposition à Preview et à la study en direct elle-même, ce qui confirme réellement un AOI de bout en bout et pas seulement 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 souhaitez pas que les participants voient la superposition.

Éléments qui Apparaissent ou Disparaissent (Dialogues, Modaux)

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 à quoi que ce soit, un AOI ancré à un élément à l'intérieur d'une boîte de dialogue, modal, ou autre contenu qui n'apparaît qu'à certains moments, s'active lorsque cet élément apparaît et se désactive lorsqu'il est supprimé, sans 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