coastdigitalgroup/coastai-skills

Système d'interface utilisateur de chat conversationnel

Objectif

Le système d'interface utilisateur de chat conversationnel fournit une méthodologie systématique pour concevoir et structurer des widgets de chat persistants, des dialogues d'assistance en direct et des interfaces de chatbot automatisées. Les fenêtres de chat sont hautement interactives, denses en contenu et spatialement contraintes, ce qui les rend sujettes à de graves échecs d'accessibilité et d'utilisabilité.

Ce système résout les défis de conception visuelle et structurelle des superpositions de messagerie asynchrone. Il garantit que les flux de messages sont hautement lisibles, que les déclencheurs interactifs (réponses rapides, cartes d'action) sont accessibles, que les utilisateurs de technologies d'assistance sont notifiés des nouveaux messages sans perturbation du focus, et que les superpositions mobiles s'adaptent parfaitement aux claviers virtuels du système et aux zones de sécurité.

Cas d'utilisation

• Panneaux d'assistance par chat en direct : Widgets persistants permettant une communication directe avec les représentants humains du support client.
• Chatbots IA automatisés : Assistants automatisés intégrés à l'application ou au site guidant les utilisateurs à travers l'intégration, le dépannage ou la découverte de produits.
• Formulaires conversationnels transactionnels : Saisie de formulaire étape par étape conçue comme une conversation interactive.
• Widgets de centre d'aide flottants : Superpositions ancrées à la zone d'affichage qui recherchent des articles d'aide et basculent vers des fils de chat en direct.

Quand ne PAS utiliser

• Applications d'email/boîte de réception dédiées : Tableaux de bord de communication en plein écran et à grande échelle (par exemple, Gmail, Slack, Zendesk Agent Workspace) qui nécessitent des mises en page à plusieurs panneaux de haute densité ; utiliser dashboard-layout-system.
• Navigation globale du site : Ne remplacez pas les répertoires de site persistants par des plans de site basés sur le chat, sauf en tant qu'option d'assistance secondaire ; utiliser site-navigation-system.
• Commentaires hiérarchiques complexes : Commentaires de blog ou d'article avec des réponses en fil imbriqué ; utiliser comment-and-discussion-system.

Entrées

1. Scénarios conversationnels : Cartographie des flux primaires (initié par l'utilisateur ou déclenché par le système, transfert bot ou agent).
2. Style visuel et palette : Jetons de conception pour les surfaces d'arrière-plan, les bulles entrantes vs. sortantes, les points de statut et les indicateurs de focus (issus de accessible-color-system et focus-indicator-design-system).
3. Échelle typographique : Règles typographiques fluides et hautement lisibles pour les mises en page compactes (issues de fluid-typography-system).
4. Métriques de déclenchement : Seuils de défilement et d'événement qui déterminent quand le bouton du lanceur de chat ou le message de bienvenue automatique s'active.
5. Actifs médias interactifs : Options de pièces jointes, modèles d'aperçu d'image et formats de réponse rapide personnalisés.

Sorties

1. Spécification de mise en page du widget de chat : Limites précises en pixels/rem pour les lanceurs flottants et les panneaux ancrés.
2. Anatomie du fil de messages : Espacement des composants, poids typographiques et mappages de couleurs distinguant les types d'expéditeurs.
3. Plan directeur mobile réactif : Règles de transition transformant les panneaux flottants de bureau en tiroirs pleine hauteur mobiles.
4. Matrice des états interactifs : Cartes de retour visuel pour les bulles de message, les zones de texte, les puces d'action et les états de chargement.
5. Plan directeur des points de repère d'accessibilité : Une carte des rôles ARIA (role="log", aria-live="polite", aria-busy) et des chemins de tabulation clavier.

---

Flux de travail

1. Positionner le lanceur flottant (FAB)

Le bouton de déclenchement de chat flottant est le point d'entrée principal et doit rester persistant sans bloquer les éléments clés du corps de la page.

• Positionnement standard : Ancrez le lanceur dans le coin inférieur droit de la zone d'affichage (coin inférieur gauche pour les mises en page RTL).
• Décalages de la grille de bureau : Décalez le lanceur de 24px par rapport aux limites inférieure et latérale de la zone d'affichage.
• Décalages de la grille mobile : Décalez de 16px par rapport aux limites pour préserver la zone de contenu.
• Atténuation des collisions : Si un bouton « Retour en haut » ou une bannière de cookies persistante est présent, positionnez-les verticalement à l'opposé ou empilez-les avec un écart minimum de 16px pour éviter le chevauchement visuel.

2. Structurer le conteneur de la fenêtre de chat

Le conteneur de la fenêtre de chat abrite l'ensemble du cadre d'interaction. Il se trouve au-dessus de la page de base et doit suivre une hiérarchie structurelle standard :

• En-tête (L'ancre du cadre) : Bannière persistante contenant l'avatar/l'identité du partenaire de chat (agent/bot), le statut opérationnel (indicateur en ligne, heures d'ouverture) et les commandes rapides (Réduire _, Plein écran/Agrandir et Fermer X).
• Zone du journal des messages (La zone d'affichage du fil) : Le corps défilable affichant la conversation. Doit gérer le défilement vertical infini avec une barre de défilement toujours visible pendant les actions de défilement.
• Pont de réponses rapides (Le pont) : Un bloc horizontal/enveloppant de puces interactives qui se trouvent directement au-dessus de la barre de saisie pour offrir des réponses rapides en un seul clic.
• Barre de saisie (L'utilitaire épinglé en bas) : Un conteneur de formulaire persistant comprenant la zone de saisie de texte, les déclencheurs d'utilitaires secondaires (émojis, pièces jointes) et le bouton « Envoyer » principal.

3. Concevoir l'anatomie et le rythme des bulles de message

Pour garantir une lisibilité rapide, distinguez les messages en utilisant la direction visuelle et physique :

• Messages sortants (Utilisateur) :
  • Alignement : Aligné à droite (aligné à gauche en RTL).
  • Couleur : Fond principal de marque ou fond sombre à contraste élevé avec texte blanc/clair.
  • Rayons de bordure : Arrondis sur tous les coins sauf le coin inférieur droit (coin inférieur gauche en RTL) pour créer une ancre visuelle de « bulle de parole ».
• Messages entrants (Agent/Bot) :
  • Alignement : Aligné à gauche (aligné à droite en RTL).
  • Couleur : Fond gris clair neutre ou teinte de marque secondaire avec texte à contraste élevé.
  • Rayons de bordure : Arrondis sur tous les coins sauf le coin inférieur gauche (coin inférieur droit en RTL).
• Messages groupés : Si le même expéditeur déclenche plusieurs messages séquentiellement, empilez-les étroitement (écart de 4px) et n'affichez le nom de l'expéditeur, l'avatar et l'horodatage que sur la bulle finale ou l'en-tête du groupe. Utilisez un espacement de 16px entre différents expéditeurs.
• Messages système/action : Centrés dans le fil, petits, atténués et stylisés comme du texte plat sans bordure pour indiquer les méta-événements (par exemple, « L'agent a rejoint le chat », « La transcription du chat a été envoyée par email »).

4. Créer la zone de saisie interactive

La zone de saisie de texte est l'endroit où la friction la plus élevée se produit. Concevez pour maximiser l'utilisabilité :

• Saisie à expansion automatique : Utilisez une <textarea> qui commence sur une seule ligne (hauteur minimale de 44px) et s'étend verticalement à mesure que l'utilisateur tape (avec un maximum de 4 à 5 lignes avec défilement vertical activé à l'intérieur) afin que les messages longs restent complètement visibles.
• Bordures de saisie et états de survol : Donnez à la zone de texte une bordure distincte (1px minimum, contraste élevé 3:1 par rapport à la boîte de chat blanche). Le survol doit augmenter le contraste de la bordure, et le focus actif doit déclencher un anneau de focus à contraste élevé (2px minimum).
• Affordance du bouton Envoyer : Le bouton Envoyer doit rester visuellement inactif (opacité désactivée et atténuée) lorsque la zone de texte est vide. Une fois les caractères tapés, faites passer le bouton à son état de couleur active principale pour signaler la disponibilité de la saisie.

5. Établir l'adaptation mobile de la zone d'affichage (Le décalage du tiroir)

Les boîtes de chat de bureau sont de petites superpositions (généralement 360px à 400px de large, 500px à 650px de haut). Sur mobile, ces proportions sont inutilisables et entrent en conflit avec les claviers virtuels.

• Prise en charge de la zone d'affichage complète : En dessous du point de rupture 576px, faites passer le conteneur de chat d'un panneau flottant à un tiroir plein écran (width: 100%; height: 100%; top: 0; left: 0; border-radius: 0;).
• Zone de sécurité du clavier virtuel : Assurez-vous que la barre de saisie utilise position: sticky; bottom: 0; et s'ancre au bas de la zone d'affichage visible, en tenant compte de la barre d'adresse inférieure du navigateur mobile et du clavier virtuel.
• Empêcher les fuites de défilement : Verrouillez le défilement du corps d'arrière-plan en utilisant body { overflow: hidden; } ou des classes d'interception tactile standard chaque fois que le tiroir de chat mobile plein écran est actif.

---

Règles de décision

• Taille du bouton de déclenchement : Le bouton du lanceur flottant doit avoir un diamètre visuel d'au moins 56px sur bureau et mobile, avec une empreinte tactile interactive de 64x64px pour garantir une activation facile du pouce.
• Priorité du « Badge de non-lu » : Lorsqu'un message non lu arrive alors que le panneau est réduit, affichez un badge numérique rouge/couleur de marque sur le lanceur. Si un message est hautement critique, affichez une bulle d'aperçu de texte temporaire et auto-diminutive adjacente au lanceur pendant 5 secondes avant de la réduire au badge.
• Affichage de l'indicateur de saisie : Lorsque l'agent/bot tape, affichez une bulle persistante contenant une animation de rebond à trois points. Positionnez cet indicateur comme le message entrant le plus bas, mais supprimez-le instantanément lorsque le bloc de message réel arrive.
• Minuterie de notification et signaux audio : Activez des alertes audio subtiles et aiguës pour les messages entrants uniquement si l'onglet est en arrière-plan. Fournissez une bascule persistante et claire dans l'en-tête du chat pour désactiver complètement les notifications sonores.
• Ancrage de défilement dynamique : Lorsque l'utilisateur est en bas du journal de chat, faites défiler automatiquement le conteneur du fil vers le bas pour révéler les nouveaux messages à leur arrivée. Cependant, si l'utilisateur a fait défiler vers le haut pour lire l'historique passé, verrouillez la position de défilement pour éviter les sauts brusques et affichez un bouton flottant « Nouveaux messages ↓ » en bas de la zone d'affichage.

---

Contraintes

1. Accessibilité (Conformité WCAG AA)

• Points de repère et rôles ARIA :
  • Enveloppez le widget de chat principal dans un conteneur de point de repère : <section aria-label="Customer Chat"> ou <div role="region" aria-label="Support Chat">.
  • La zone de journal des messages défilable doit utiliser role="log" et aria-live="polite". Cela indique aux lecteurs d'écran d'annoncer les nouveaux messages au fur et à mesure qu'ils sont ajoutés, sans interrompre la navigation active au clavier ou la saisie de texte de l'utilisateur.
  • La bulle de l'indicateur de saisie doit définir aria-busy="true" et inclure une alternative textuelle cachée (par exemple, <span class="sr-only">Support agent is typing...</span>).
• Accès clavier et piège de focus :
  • La navigation standard par Tab doit se déplacer à travers les contrôles d'en-tête, le flux de messages défilable, les puces de réponse rapide et les champs de saisie dans un ordre logique.
  • Lorsque le tiroir de chat mobile plein écran est ouvert, piégez le focus clavier à l'intérieur du tiroir. Appuyer sur Escape doit immédiatement réduire ou fermer le panneau de chat et ramener le focus sur le bouton du lanceur flottant.
• Contraste du texte et des composants :
  • Tout le texte dans les bulles de message (entrantes et sortantes) doit répondre à un rapport de contraste minimum de 4,5:1 par rapport à leurs arrière-plans de bulles respectifs.
  • Les icônes interactives (clip de pièce jointe, flèche d'envoi, croix de fermeture) et les limites de formulaire doivent répondre à un rapport de contraste minimum de 3:1 par rapport aux surfaces d'arrière-plan adjacentes.

2. Réactivité et préservation de la mise en page

• Stabilité du rapport hauteur/largeur :
  • Les fils de messages doivent utiliser des modèles de pourcentage flexible ou flex-grow pour remplir la hauteur du conteneur, empêchant le débordement de texte ou l'effondrement du conteneur.
  • Les images ou les cartes envoyées dans les bulles de chat doivent avoir des rapports hauteur/largeur fixes ou des limites de largeur maximale (max-width: 80% de la largeur de la bulle) pour éviter l'explosion visuelle de la mise en page du chat.
• Prévention des décalages de mise en page :
  • Lors du chargement des messages historiques (par exemple, défilement infini vers le haut), utilisez des techniques d'ancrage de défilement pour empêcher la position de défilement active de sauter vers le bas, en maintenant la zone d'affichage de l'utilisateur parfaitement verrouillée sur le message qu'il lisait.

---

Schémas d'échec courants

• Le piège du « Détournement de focus » : Ouvrir automatiquement le widget de chat au chargement de la page et piéger instantanément le focus clavier à l'intérieur de la zone de texte du chat. Cela bloque complètement les utilisateurs de clavier et de lecteur d'écran de lire le contenu principal de la page.
• Le « Cache-clavier » : Sur mobile, positionner la barre de saisie avec des coordonnées absolute, ce qui fait que le clavier virtuel de l'appareil recouvre et cache la zone de texte et le bouton d'envoi pendant la saisie active.
• Le « Flux non annoncé » : Ajouter de nouveaux messages dans le fil purement visuellement sans role="log" ou aria-live, laissant les utilisateurs aveugles et malvoyants complètement inconscients que l'agent a répondu.
• Le bug du « Saut de défilement » : Forcer la zone d'affichage de défilement à sauter vers le bas absolu à chaque nouveau message entrant, interrompant un utilisateur qui essaie de lire les instructions historiques plus haut dans le fil.
• La tendance du « Fondu de contraste » : Styliser les bulles entrantes avec un fond gris ultra-clair et un texte blanc fin, violant les rapports de contraste et rendant le texte illisible sous un éclairage ambiant normal.

---

Critères de validation

• Vérification des points de repère d'accessibilité : Le widget de chat est enveloppé dans une <section> ou role="region" avec un aria-label descriptif.
• Vérification de l'annonce du lecteur d'écran : Le fil de messages utilise role="log" avec aria-live="polite" et a été vérifié pour annoncer dynamiquement le texte entrant.
• Vérification du contraste : Les bulles sortantes et entrantes répondent à la norme de contraste texte-fond de 4,5:1, et les bordures de formulaire répondent à la norme 3:1.
• Vérification du chemin clavier : Les pièges de focus fonctionnent correctement sur les zones d'affichage mobiles, et appuyer sur la touche Escape ferme le widget et ramène le focus sur le lanceur.
• Adaptation du tiroir mobile : Le panneau occupe 100 % de la hauteur et de la largeur de la zone d'affichage en dessous de 576px sans fuite de défilement sur le corps de la page d'arrière-plan.
• Cibles tactiles minimales : Le déclencheur du lanceur, les boutons de fermeture, les contrôles d'envoi et les puces de réponse rapide ont des empreintes interactives d'au moins 44x44px.
• Rythme des bulles de message : Les messages consécutifs du même expéditeur sont regroupés avec un remplissage serré de 4px, tandis que les changements d'expéditeur utilisent des écarts généreux de 16px.
• Protection de l'état vide : Le bouton Envoyer est désactivé et visuellement atténué lorsque la zone de texte de saisie ne contient que des espaces.