coastdigitalgroup/coastai-skills

Système de Visite Guidée

Objectif

La compétence Système de Visite Guidée fournit une méthodologie de conception complète pour structurer, styliser et coordonner des parcours guidés multi-étapes. Elle vise à réduire la charge cognitive de l'utilisateur lors d'une première connexion ou d'une mise à jour majeure, en isolant visuellement les éléments clés de l'interface, en fournissant un contexte séquentiel et pertinent, et en le guidant vers un état actif et réussi. Ce système évite les visites confuses, chaotiques ou trop intrusives en établissant un rythme prévisible, accessible et contrôlé par l'utilisateur.

Cas d'Utilisation

• Intégration des Nouveaux Utilisateurs : Guider les utilisateurs fraîchement inscrits à travers les workflows principaux d'une application SaaS complexe pour favoriser l'activation.
• Promotion de Nouvelles Fonctionnalités : Mettre en avant et expliquer un nouvel outil ou élément d'interface à forte valeur ajoutée auprès des utilisateurs existants.
• Familiarisation avec une Refonte UI : Aider les utilisateurs de retour à retrouver leurs outils familiers après une refonte ou une réorganisation importante de l'interface.
• Visites Guidées pour Saisie de Données Complexes : Guider un utilisateur à travers un tableau de bord multifacette lors de sa configuration initiale (par exemple, configuration de sa première règle d'automatisation).

Quand NE PAS Utiliser

• Interfaces Explicites : Si une tâche peut être simplifiée grâce à des mises en page plus claires, de meilleurs libellés ou une iconographie intuitive, améliorez d'abord l'interface de base plutôt que de masquer une mauvaise UX avec une visite.
• Micro-tâches Hautement Répétitives : Évitez de perturber les workflows fréquents avec des popups. Pour une aide régulière, utilisez le système-d'infobulles-et-d'indices ou du texte d'aide en ligne.
• Interfaces Uniquement Mobiles ou Basse Résolution : Les visites guidées multi-étapes avec popovers ancrés consomment un espace d'écran important et sont très sujettes au recadrage ou au chevauchement sur les appareils mobiles. Utilisez plutôt des cartes plein écran ou des étapes en ligne intégrées et désactivables.
• Retour d'Erreur Critique ou Transactionnel : Pour un retour instantané du système ou des erreurs, utilisez le système-de-bannières-et-d'alertes ou le système-de-toasts-et-snackbars.

Entrées

1. Architecture de l'Information & Contexte : Les mises en page de page spécifiques, les sections de tableau de bord ou les coordonnées UI où la visite sera exécutée.
2. Inventaire des Éléments Ancre : Les boutons cibles, champs de saisie, tableaux ou liens de navigation spécifiques qui doivent être mis en évidence à chaque étape.
3. Jalons d'Intégration (Le « Pourquoi ») : Les actions clés minimales requises pour terminer l'intégration et garantir l'activation.
4. Points de Rupture des Appareils : Les fenêtres d'affichage cibles responsives où la visite doit s'afficher, en utilisant les directives du système-de-grille-responsive.

Sorties

1. Spécification du Fond & du Masque : Isoler visuellement les éléments ciblés tout en assombrissant le reste de l'interface pour concentrer l'attention de l'utilisateur.
2. Spécification de l'Anatomie du Popover (Carte de Visite) : Plan structurel détaillé de la bulle de visite (flèches, corps du texte, indicateurs d'étape, boutons ignorer/suivant/précédent, contrôles de fermeture).
3. Logique de Séquence & de Flux : Cartographie du parcours étape par étape, modèles de progression (linéaire strict vs. piloté par l'utilisateur) et persistance de session.
4. Stratégie Responsive & Solutions de Rechange Mobiles : Règles d'adaptation pour les écrans plus petits où les popovers ancrés flottants ne peuvent pas tenir en toute sécurité.
5. Repères d'Accessibilité & Spécification d'Interaction : Spécification ARIA complète, carte de navigation au clavier et comportement de piégeage du focus.

Workflow

1. Définir la Séquence d'Étapes (Le Parcours Idéal)

• Limitez la séquence de visite à 3 à 5 étapes (Loi de Miller). Au-delà, le taux d'abandon est élevé.
• Chaque étape doit se concentrer sur un bénéfice actif, pas seulement un libellé. (Ex : au lieu de « Ceci est le menu Paramètres », écrivez « Personnalisez votre espace de travail pour l'adapter au workflow de votre équipe ici »).
• Assurez-vous que la dernière étape comporte un appel à l'action (CTA) clair et réalisable qui laisse l'utilisateur dans un état actif et productif.

2. Concevoir le Masque d'Arrière-Plan et l'Isolation (Focus)

• Utilisez une superposition d'arrière-plan semi-transparente foncée (généralement #000000 avec une opacité de 50 à 70 %) pour atténuer le bruit de fond et concentrer le regard.
• Créez un « Masque d'Isolation » (à l'aide de découpes de chemin SVG ou de clip-path/box-shadows CSS) autour de l'élément ancre actif.
• Maintenez une marge de 4 à 8 pixels autour de l'ancre mise en évidence pour éviter que le masque ne soit trop proche des bordures de l'élément.

3. Construire la Hiérarchie du Popover (Carte de Visite)

• Alignement de l'Ancre : Positionnez dynamiquement le popover à côté de l'élément mis en évidence. Utilisez une petite flèche/pointeur directionnel pour relier visuellement la carte à l'ancre.
• Anatomie du Composant :
  • En-tête : Incluez un bouton de fermeture standard ('X') et un indicateur de progression (par exemple, « Étape 2 sur 4 »).
  • Corps : Utilisez des titres concis et en gras, et un maximum de 2 phrases de texte descriptif.
  • Barre d'Action : Alignez à gauche le lien « Ignorer », alignez à droite les boutons de navigation. Assurez-vous que le bouton « Suivant » (ou « Compris ») utilise le style CTA principal, et que « Précédent » utilise un style tertiaire à faible contraste.

4. Coder pour l'Accessibilité (Parité Clavier & Lecteur d'Écran)

• Piégeage du Focus : Lorsqu'une étape de visite est active, le focus clavier (touche Tab) doit être piégé à l'intérieur du popover de visite pour empêcher les utilisateurs de clavier de naviguer vers les éléments d'arrière-plan.
• Associations ARIA : Assurez-vous que le conteneur du popover utilise role="dialog" ou role="alertdialog" avec aria-modal="false" (afin que les technologies d'assistance sachent que les éléments d'arrière-plan sont toujours présents). Liez le titre du popover avec aria-labelledby et la description avec aria-describedby.
• Raccourcis Clavier : Prenez en charge la navigation au clavier : Échap pour fermer/ignorer la visite, Flèche droite pour « Suivant » et Flèche gauche pour « Précédent ».

5. Cartographier la Stratégie d'Adaptation Mobile

• Si la fenêtre d'affichage est inférieure à 768px (Tablette/Mobile), passez des popovers flottants ancrés à un tiroir en bas d'écran ou à une modale centrée et non ancrée. Cela évite que la carte ne soit poussée hors de l'écran ou ne couvre des éléments critiques.
• Assurez-vous que le masque d'arrière-plan est désactivé ou simplifié sur mobile pour éviter les erreurs de recadrage causées par le défilement mobile.

Règles de Décision

• Visite Linéaire vs. Liste de Tâches Pilotée par l'Utilisateur :
  • Utilisez une Visite Linéaire pour une séquence rigide de première configuration où l'étape A doit précéder l'étape B.
  • Utilisez un Widget de Progression Interactif (Liste de Tâches) si les tâches peuvent être effectuées dans n'importe quel ordre, permettant aux utilisateurs de sélectionner les tâches à leur propre rythme.
• Condition de Déclenchement :
  • Déclenchez automatiquement uniquement lors de la première exécution ou après des mises à jour explicites.
  • Ne déclenchez jamais automatiquement de visites pour les utilisateurs de retour lors de visites standard.
• Remplacement de la Position de l'Ancre :
  • Par défaut : Positionnez le popover « En bas au centre » ou « À droite au centre » de l'ancre.
  • Règle de Collision : Si l'ancre est près du bord de l'écran, inversez le placement du popover pour éviter le recadrage (par exemple, de « Droite » à « Gauche »). Si l'ancre est masquée (dans un panneau réduit), développez par programme le panneau d'abord avant d'afficher le popover.
• L'Option « Ignorer » :
  • Fournissez toujours une action visible « Ignorer la visite » ou « Fermer » à chaque étape. Forcer les utilisateurs à terminer une visite sans échappatoire crée de la frustration.

Contraintes

• Accessibilité (WCAG 2.2) :
  • Le contraste du texte dans la carte de visite doit respecter le niveau AA WCAG (au moins 4,5:1).
  • Un anneau de focus visuel à contraste élevé (outline) doit être présent sur les boutons interactifs.
  • Les cibles tactiles des boutons suivant/précédent doivent mesurer au moins 44x44px (recommandé) ou respecter le minimum de 24x24px (WCAG 2.2 SC 2.5.8).
  • Les ancres interactives à l'intérieur de la découpe du masque doivent pouvoir recevoir le focus.
• Gestion des Déplacements de Mise en Page :
  • L'apparition du fond, du masque de découpe et du popover ne doit pas déplacer les éléments de mise en page existants. Utilisez position: absolute ou position: fixed par rapport à la fenêtre d'affichage du document.
• Alignement des Z-Index :
  • Le fond et la carte de visite doivent se situer en dessous des alertes utilitaires de premier plan comme les Toasts (par exemple, fond au z-index 900, popover au z-index 910) afin de garantir que les alertes système haute priorité puissent toujours passer au travers.

Schémas d'Échec Courants

• Le Piège de la « Visite Infinie » : Visites de plus de 5 étapes, entraînant un abandon immédiat.
• Le Conflit de « Double Focus » : Démarrage automatique d'une visite sur une page qui a déjà une modale active, créant des superpositions empilées et des entrées piégées.
• Mise en Évidence Aveugle d'Ancre : Mise en évidence d'un élément qui est défilé hors de l'écran ou réduit, pointant la flèche vers un espace vide.
• Actions d'Arrière-Plan Inaccessibles : Obliger l'utilisateur à taper dans un élément masqué pour continuer, mais bloquer sa saisie ou ses clics de souris avec le fond.
• Compression des Bulles sur Mobile : Laisser les bulles ancrées rétrécir à des largeurs illisibles sur mobile, entraînant des coupures de mots disgracieuses.

Critères de Validation

• La visite est strictement limitée à 3 à 5 étapes.
• Chaque étape comporte une option « Ignorer » ou de fermeture clairement étiquetée et visible.
• Le focus du tabulateur clavier est piégé à l'intérieur du popover pendant les étapes actives.
• Le focus passe en douceur à la carte de visite suivante (ou à l'élément nouvellement mis en évidence) lorsque « Suivant » est pressé.
• Les attributs ARIA (role="dialog", aria-modal, aria-describedby) sont correctement configurés.
• La gestion des collisions des popovers est définie (inverse automatiquement la position près des bords de l'écran).
• Les fenêtres d'affichage mobiles passent élégamment des popovers ancrés à une modale centrée ou à un tiroir persistant en bas d'écran.
• Une marge de 4 à 8 pixels est maintenue autour de l'ancre isolée pour éviter de couper les bordures.
• Les états actif et survol de tous les boutons respectent le niveau AA WCAG (contraste 4,5:1).