Chatbot UI : concevoir une interface claire et accessible

Une chatbot UI réussie ne cherche pas à ressembler à ChatGPT à tout prix. Elle rend une conversation précise, prévisible et facile à quitter.

Le sigle UI désigne l’interface utilisateur. Pour un chatbot, il couvre tout ce que la personne voit et manipule : le lanceur, l’en-tête, les bulles de message, les réponses rapides, le champ de texte, les pièces jointes, les indicateurs d’attente, les erreurs et le passage vers un conseiller. La requête « chatbot ui » peut aussi désigner le projet open source Chatbot UI. Dans ce guide, nous traitons d’abord le sens général, celui de la conception d’une interface conversationnelle, puis nous clarifions le cas du produit.

Chatbot UI : quelle différence entre UI et UX ?

L’UI décrit la couche visible et interactive. L’UX décrit l’expérience complète, y compris l’ordre des questions, la pertinence des réponses, la mémoire du contexte, le droit à l’erreur et la résolution finale. IBM résume cette distinction ainsi : les informations que le chatbot demande à une étape donnée relèvent de l’UX, mais le fait que l’utilisateur tape sa réponse ou la choisisse dans une liste déroulante relève de l’UI.

Les deux disciplines sont liées. Un excellent moteur conversationnel devient frustrant si son bouton d’envoi est ambigu. Une belle fenêtre ne compense pas un parcours en impasse. Commencez donc par le service rendu, puis choisissez les composants visuels qui rendent ce service évident.

Les composants indispensables d’une interface de chatbot

1. Un lanceur identifiable, sans promesse excessive

Sur un site, le lanceur doit indiquer qu’il ouvre une aide conversationnelle. Une simple icône peut être trop vague. Associez-la à un libellé court comme « Besoin d’aide ? » lorsque l’espace le permet. Le panneau ouvert doit nommer clairement le service et éviter de se faire passer pour une personne.

2. Un accueil qui fixe le périmètre

Le premier écran répond à trois questions : qui parle, que peut faire le chatbot, comment démarrer ? Deux ou trois exemples de demandes valent mieux qu’une formule générale. Sur un service après-vente, proposez par exemple « Suivre ma commande », « Modifier une adresse » et « Parler à un conseiller ». Pour approfondir ce cas, consultez notre guide sur le chatbot SAV.

3. Des messages faciles à attribuer

La différence entre les messages du bot et ceux de l’utilisateur doit rester nette sans reposer uniquement sur la couleur. L’alignement, la forme, l’espacement et un nom de locuteur peuvent se compléter. Les longues réponses gagnent à être découpées en paragraphes courts, avec une action visible après le contenu.

4. Une saisie adaptée à la tâche

Le champ libre sert les demandes ouvertes. Les réponses rapides accélèrent un choix fermé. Un formulaire structuré convient aux données comme une date, une référence ou un code postal. Ne forcez pas la conversation quand un contrôle classique est plus clair. La meilleure chatbot UI sait alterner dialogue et composants standards.

5. Des états qui expliquent ce qui se passe

Affichez la réception du message, la préparation de la réponse, un éventuel délai et l’échec. « Réponse en cours » est plus informatif qu’une animation muette. Si une action prend du temps, laissez l’utilisateur continuer à lire l’historique. Une erreur doit proposer une suite : réessayer, reformuler ou contacter un humain.

Quel type de chatbot UI choisir ?

Choisissez le contexte d’affichage et l’objectif principal. Le sélecteur propose une structure de départ. Les neuf recommandations sont également visibles dans le tableau de référence, afin que la logique reste lisible sans interaction.

12 règles pour concevoir une chatbot UI claire

1. Partir d’une tâche, pas d’une mascotte

   Écrivez le résultat attendu avant de dessiner la fenêtre. Le style vient ensuite.

2. Annoncer les capacités et les limites

   Donnez des exemples précis. Évitez « Posez-moi toutes vos questions » si le bot ne couvre qu’un catalogue ou un support.

3. Garder le choix principal visible

   L’utilisateur doit toujours savoir comment écrire, revenir, fermer ou demander de l’aide.

4. Limiter les réponses rapides

   Montrez les options les plus probables et gardez un chemin « Autre demande ». Une rangée interminable devient un menu difficile à parcourir.

5. Conserver les choix précédents

   Un résumé modifiable réduit les erreurs dans un parcours de réservation, de qualification ou d’achat.

6. Différencier attente, réussite et erreur

   Chaque état a un message et une action possible. La couleur seule ne suffit pas.

7. Prévoir le transfert humain dès la maquette

   Le transfert n’est pas un correctif ajouté après lancement. Il fait partie du parcours et doit expliquer ce qui sera transmis.

8. Protéger la saisie

   Ne perdez pas un message lorsque la connexion coupe. Autorisez la copie et expliquez les limites de taille ou de format avant l’envoi.

9. Réserver les animations aux informations utiles

   Un indicateur d’écriture peut signaler l’attente. Une animation permanente détourne l’attention et ne remplace pas un statut textuel.

10. Tester le clavier et le lecteur d’écran

    L’ordre de focus suit l’ordre visuel. Les nouveaux messages sont annoncés sans voler brutalement le focus.

11. Tester les réponses extrêmes

    Prévoyez un mot, un long paragraphe, un lien, une liste, une erreur et une réponse interrompue. Le cadre doit rester utilisable.

12. Mesurer la résolution, pas seulement l’ouverture

    Un taux d’ouverture élevé peut signaler que les visiteurs sont perdus. Reliez l’usage à la tâche réellement terminée.

Accessibilité : les contrôles à rendre non négociables

Les WCAG 2.2 sont la recommandation W3C en vigueur depuis octobre 2023 et donnent des repères directement applicables ; WCAG 3.0, qui doit leur succéder, en est encore au stade de brouillon. Le critère 1.4.3 demande un contraste d’au moins 4,5 pour 1 pour le texte courant. Le critère 2.5.8 fixe une cible de pointeur d’au moins 24 par 24 pixels CSS, avec des exceptions liées notamment à l’espacement. Ces valeurs sont des planchers, pas des objectifs de confort.

Le critère 4.1.3, introduit par les WCAG 2.1 et reconduit dans les WCAG 2.2, concerne les messages de statut. Un nouveau statut doit pouvoir être déterminé par les technologies d’assistance sans recevoir le focus. Pour un chat, cela vise notamment « message envoyé », « réponse en cours », « connexion perdue » ou « conseiller rejoint la conversation ». Une zone aria-live="polite" avec un role="log" sur l’historique peut les annoncer ; pour l’indicateur d’attente, un role="status" suffit. Avec aria-atomic="false", seuls les messages ajoutés sont relus, pas tout l’historique.

• Associez chaque champ à un libellé persistant.
• Ne placez pas l’indication essentielle uniquement dans un placeholder.
• Donnez un nom accessible aux icônes d’envoi, de fermeture et de pièce jointe.
• Gardez un contour de focus visible.
• Respectez la réduction des animations demandée par le système.
• Testez le zoom à 200 % et une largeur mobile réelle.

Widget, plein écran ou interface mobile : comment trancher ?

Pour poser un widget sur un site, le design ne suffit pas. Le poids, le chargement et les domaines tiers influencent aussi l’expérience. Notre guide chatbot pour site internet détaille l’intégration et la performance. Pour choisir la plateforme qui portera cette interface, comparez les options dans notre sélection de solutions de chatbot pour entreprise.

Comment tester la qualité de l’interface après lancement ?

Préparez des scénarios avant la mise en ligne, puis observez des sessions réelles avec consentement et données minimisées. Le test doit couvrir le parcours idéal et les sorties de route.

Mesurez au minimum la résolution du besoin, le nombre de tours, les reformulations, les erreurs, le transfert et la satisfaction après la tâche. Segmentez par appareil et par motif. Une moyenne globale peut masquer une interface correcte sur ordinateur mais inutilisable lorsque le clavier mobile réduit la hauteur disponible.

Un protocole simple en cinq passages

1. Effectuez tout le parcours au clavier, sans souris.
2. Testez à 390 pixels de large avec le clavier virtuel pris en compte.
3. Forcez une réponse très longue, une coupure réseau et un échec d’envoi.
4. Demandez trois fois quelque chose hors périmètre et vérifiez la sortie proposée.
5. Faites tester les scénarios par des personnes qui ne connaissent pas le projet.

Si le chatbot s’appuie sur une base documentaire, l’interface doit aussi distinguer une réponse sourcée d’une réponse générale. Notre article sur le fonctionnement d’un chatbot RAG explique ce qui se passe derrière cette couche visible.

Questions fréquentes sur la chatbot UI

Conclusion : concevoir une interface qui aide vraiment

Une bonne chatbot UI montre le périmètre, rend chaque état compréhensible et laisse toujours une issue. Commencez par les tâches les plus fréquentes, choisissez le format avec notre sélecteur, testez les échecs avant le parcours idéal et mesurez la résolution réelle. La personnalité visuelle peut ensuite renforcer la marque sans masquer le service.