Most product teams sketch AI citations as tidy little blue numbers sitting neatly beside generated text. They wire them

La plupart des équipes produit conçoivent les citations d'IA comme de petits chiffres bleus bien rangés, placés proprement à côté du texte généré. Elles les configurent une fois sur une connexion rapide, regardent l'aperçu s'ouvrir en une demi-seconde, et passent à autre chose. Cela fonctionne dans l'environnement de pré-production. Mais cela survit rarement à la réalité de l'internet ouvert.

Les sources s'altèrent. Les entreprises suppriment des articles de blog. Les portails gouvernementaux réorganisent leurs URL sans redirection. Des paywalls apparaissent. Les CDN ont des ratés. Le document qu'une IA a scanné il y a trois mois a peut-être été réécrit hier. Si votre composant de citation ne sait être esthétique que lorsque tout se passe bien, il mentira à vos utilisateurs lorsque les choses dérailleront. Pire encore, il les laissera dans l'incertitude quant à l'existence même de la preuve.

Un système de citation fiable doit communiquer un état. Pas seulement un lien hypertexte. Pas seulement une info-bulle. Il doit dire au lecteur ce qu'il en est de la preuve en temps réel.

Concevoir pour quatre états réels

Considérez une citation comme une petite machine à états. Chaque source que votre IA fait remonter peut se trouver dans l'un de ces quatre états, et votre interface doit gérer chacun d'eux avec honnêteté.

Chargement. L'utilisateur clique sur le chiffre en exposant, et le système récupère un aperçu, un extrait ou la page originale. Pendant ce laps de temps, montrez-lui que quelque chose se passe. Un squelette de chargement, un cadre d'extrait pulsant, ou même un simple texte indiquant « Récupération de la source... » vaut mieux que le silence. Le silence pousse les gens à se demander si le clic a fonctionné. Dans une interface en streaming où les sources arrivent au fur et à mesure que le modèle réfléchit, les états de chargement vous permettent également de gagner du temps pour résoudre les liens sans bloquer la génération du texte.

Disponible. C'est l'état pour lequel tout le monde conçoit ses interfaces. Le lien est résolu, le texte correspond toujours à ce que le modèle a vu, et l'utilisateur obtient un extrait clair ainsi qu'un lien direct. Mais ne vous contentez pas de balancer une URL brute. Affichez le titre, le domaine et le passage pertinent. Donnez au lecteur suffisamment de contexte pour qu'il décide s'il souhaite quitter la page. Un simple href entre parenthèses est techniquement une citation. Ce n'est pas une bonne expérience utilisateur.

Modifiée. C'est le cas le plus délicat. La page se charge, mais le contenu ne contient plus la citation ou la statistique que l'IA lui a attribuée. Peut-être que l'éditeur a mis à jour l'article. Peut-être que l'instantané d'entraînement de l'IA a capturé un titre qui a changé par la suite. Votre composant doit signaler cette divergence au lieu de prétendre que tout concorde. Une petite note telle que « Cette source a été mise à jour depuis son indexation » empêche l'utilisateur de perdre dix minutes à chercher une phrase qui n'existe plus. Cela préserve également la confiance. Si vous cachez l'incohérence, l'utilisateur finira par supposer que votre produit invente des choses.

Manquante. La 404. Le délai d'attente dépassé. Le paywall. Le serveur qui renvoie un code d'état 200 mais affiche une page générique « Contenu supprimé ». Ne laissez pas le lien rester là, en bleu, en faisant semblant de fonctionner. Remplacez-le par un langage clair : « Page supprimée », « Lien plus disponible » ou « Source hors ligne ». Si vous savez pourquoi cela a échoué, dites-le. Si l'Internet Archive ou une copie en cache existe, proposez-la. L'objectif est de boucler la boucle, pas de laisser le lecteur en déroute.

L'accessibilité est non négociable

Les composants de citation se situent dans des parties de l'interface à fort trafic et à enjeux élevés. Ils méritent la même rigueur qu'un formulaire de paiement ou un processus de réservation de vol.

Utilisez du texte pour indiquer l'état. Les utilisateurs daltoniens ne peuvent pas se fier uniquement à un point vert ou à une bordure rouge. Associez vos indicateurs à des mots : « Disponible », « Modifiée », « Indisponible ». Cette petite étiquette aide aussi tous les utilisateurs voyants, car les couleurs d'état signifient rarement la même chose selon les cultures ou les produits.

Rédigez des noms descriptifs pour les lecteurs d'écran. Étiquetez vos liens pour qu'une personne utilisant un lecteur d'écran entende quelque chose d'utile. Au lieu d'un générique « Lien », lisez « Source 3 : Politique de rétention des journaux d'audit ». Cela indique précisément à l'auditeur ce qu'il va obtenir avant qu'il ne décide de l'ouvrir.

Protégez le flux de lecture. Cliquer sur une citation ne doit pas faire disparaître la réponse générée par l'IA. Utilisez un panneau, une fenêtre modale ou une extension en ligne. Le lecteur a ouvert la source pour vérifier une affirmation spécifique. Si votre interface efface l'affirmation qu'il était en train de lire, vous l'avez forcé à la maintenir en mémoire de travail pendant qu'il cherche la preuve. C'est une charge cognitive inutile.

Gérez le focus de manière délibérée. Lorsqu'un utilisateur ouvre une citation, déplacez le focus du clavier dans le nouveau panneau ou la fenêtre contextuelle. Lorsqu'il la ferme, renvoyez le focus vers l'élément déclencheur. Ne détournez pas le focus pendant que le flux écrit encore des sources sur la page. Laissez l'utilisateur garder le contrôle.

Gérez le streaming avec précaution. Si votre interface générative ajoute des citations au fur et à mesure de leur arrivée, ne bombardez pas les utilisateurs de lecteurs d'écran avec une annonce pour chaque nouveau chiffre en exposant. Regroupez-les. Lorsque deux ou trois se sont accumulées, annoncez un résumé poli tel que « Deux sources ajoutées ». Les interruptions constantes rendent le contenu illisible pour les utilisateurs de technologies d'assistance.

Rappelez-vous ce qu'une citation prouve

Ce point ne peut pas être répété assez souvent. Une citation montre la provenance. Elle ne montre pas la vérité.

Lorsqu'une IA cite une source, elle dit : « J'ai trouvé cette formulation ici ». Elle ne dit pas : « Cet expert a raison ». Elle ne dit pas : « Cette étude a été bien menée ». Elle ne dit même pas : « J'ai correctement compris le contexte ». Une citation est une carte permettant de revenir à la preuve originale. Le lecteur doit encore parcourir ce chemin et décider si la preuve est solide.

Votre conception doit rendre cette distinction claire. Utilisez des extraits qui permettent à l'utilisateur de parcourir les lignes pertinentes. Affichez la date de publication pour que le lecteur sache si la preuve est récente. Si la source est un forum, un communiqué de presse ou une étude primaire, mettez ce contexte en évidence afin que le lecteur puisse l'évaluer de manière appropriée. Concevez l'interface pour soutenir le jugement humain, pas pour le remplacer.

Testez par rapport à la réalité

Un composant de citation qui passe une revue visuelle n'est qu'à moitié terminé. Vous avez besoin