Concevoir en tenant compte de la latence : quand la vitesse de l’IA devient expérience utilisateur

La latence de l'IA est le problème d'expérience utilisateur le plus important pour les produits d'IA, et pourtant, presque personne ne la considère comme un aspect de la conception. Les équipes qui proposent les meilleures expériences d'IA ont cessé d'attendre des modèles plus rapides et ont commencé à concevoir en tenant compte de ce délai.

Voici la marche à suivre : le calcul de la vitesse perçue, les cinq modèles qui fonctionnent, les quatre qui échouent, cinq analyses de défaillance et une liste de vérification avant le lancement.

La latence de l'IA est un problème de conception, pas d'ingénierie

La plupart des produits d'IA paraissent lents car la latence est considérée comme un problème d'ingénierie. L'équipe d'ingénierie déploie un modèle plus rapide, mais le produit reste lent, car le goulot d'étranglement n'a jamais été une question de millisecondes. C'est le choix de conception qui a laissé l'utilisateur face à une roue de chargement sans rien à lire.

L'utilisateur ne mesure pas les millisecondes. Il mesure si quelque chose se passe. Quatre secondes de texte en continu paraissent rapides. Une fenêtre modale avec 1,5 seconde de retard est perçue comme dysfonctionnelle.

Le calcul de la vitesse perçue

Une réponse en continu de quatre secondes paraît rapide. Une réponse de 1,5 seconde qui bloque la lecture est perçue comme lente. La vitesse perçue dépend de la densité du retour d'information, et non du temps écoulé. Ce simple constat influence considérablement la gestion de la latence dans un produit d'IA.

Les chiffres importants sont le temps d'affichage du premier jeton et le nombre de jetons par seconde, et non le temps de réponse total. Un délai inférieur à 500 millisecondes pour le premier jeton est instantané. Un rythme de lecture de 30 à 80 jetons par seconde correspond à une vitesse humaine. Un budget total de cinq secondes est acceptable en cas de flux continu à partir du premier jeton, mais inacceptable en cas de blocage. En concevant en fonction de ces chiffres, un modèle plus lent peut paraître plus rapide que la concurrence.

Les cinq modèles qui fonctionnent

Texte en flux continu. Interface utilisateur optimiste. Divulgation progressive. Surfaces de raisonnement. Agents en arrière-plan. Tous les produits d'IA commercialisés qui se distinguent par leur vitesse perçue s'appuient sur au moins trois de ces modèles, et les meilleurs les utilisent tous les cinq.

Ces cinq modèles s'articulent. Le flux continu offre à l'utilisateur du contenu à lire. L'interface utilisateur optimiste lui offre du contenu visuel. La divulgation progressive leur donne quelque chose à analyser. Les surfaces de raisonnement leur donnent un fondement fiable. Les agents en arrière-plan leur offrent une autre tâche. Au final, le modèle s'exécute en dix secondes et le produit reste dynamique.

Le flux de texte transforme l'attente en réponse

Le premier modèle consiste en un rendu jeton par jeton. L'utilisateur lit pendant que le modèle écrit et l'attente disparaît avec le résultat. Le temps d'affichage du premier jeton devient le seul indicateur pertinent. Dès que le premier jeton s'affiche, l'utilisateur lit, il n'attend plus.

Le flux de texte de Claude.ai est l'exemple le plus abouti. Le premier jeton arrive en moins d'une seconde et les suivants s'affichent à la vitesse de lecture. L'utilisateur est déjà au milieu du premier paragraphe avant même que le modèle n'ait terminé le deuxième. Le même modèle, affiché comme un bloc final après quatre secondes, donnerait l'impression d'un produit différent.

Une interface utilisateur optimiste valide l'action avant le retour du modèle

Le deuxième modèle consiste à afficher le résultat avant que le modèle n'ait terminé, puis à le valider une fois la réponse reçue. L'utilisateur n'a pas besoin de la réponse exacte tout de suite. Il a besoin qu'elle soit validée.

Linear L'IA procède ainsi lorsqu'elle accepte une suggestion. Le résultat est immédiatement ajouté au ticket avec un discret statut « en attente », et la validation s'effectue en arrière-plan. Si le modèle aboutit à un résultat différent, l'interface utilisateur se met à jour instantanément. En cas d'échec, l'interface utilisateur revient à la version précédente et affiche l'erreur. L'utilisateur peut continuer à naviguer dans les deux cas.

Divulgation progressive : squelette, brouillon et version finale

Le troisième modèle présente d'abord le squelette, puis un brouillon partiel, et enfin la version finale. La structure est affichée avant le contenu, ce qui réduit le temps d'attente perçu en offrant un point de repère visuel.

La version 0 propose ce modèle dès l'invite d'ouverture de l'application. Un squelette de mise en page apparaît presque instantanément, les composants se chargent au fur et à mesure de leur génération par le modèle, et l'aperçu final stylisé est affiché en dernier. Lovable utilise le même principe. Chaque étape constitue un point de contrôle que l'utilisateur peut consulter pendant le chargement de la suivante.

Les interfaces de raisonnement transforment le temps d'attente en confiance

Le quatrième modèle consiste à afficher le plan ou le processus de réflexion du modèle pendant son exécution. Observer un agent raisonner est plus instructif que de regarder une roue de chargement. Cela renforce également la confiance, car l'utilisateur voit ce que le modèle tente de faire avant même qu'il ne le fasse.

Le mode agent de Cursor intègre cette fonctionnalité avec une interface de planification. L'utilisateur visualise les étapes prévues avant l'exécution de la première commande. ChatGPT affiche les traces de raisonnement des modèles, avec des résumés de pensée repliables qui se lisent comme un texte structuré. Quinze secondes de raisonnement visible valent mieux que trois secondes d'opacité.

Les agents en arrière-plan permettent aux utilisateurs de continuer à travailler pendant l'exécution du modèle

Le cinquième modèle consiste à déplacer l'agent du premier plan vers un panneau latéral. L'utilisateur n'est jamais bloqué par une requête d'IA. L'agent s'exécute dans un coin pendant que l'utilisateur continue d'écrire, de coder ou de concevoir dans l'espace de travail principal.

Les agents en arrière-plan de Cursor constituent la version la plus épurée disponible. L'utilisateur lance une tâche longue et continue de la modifier au premier plan pendant que l'agent travaille dans un panneau latéral. GitHub L'agent de codage de Copilot fonctionne de la même manière avec les tâches de type pull request. Ce modèle ne fonctionne que si l'utilisateur a d'autres tâches à effectuer, ce qui est toujours le cas dans un flux de travail réel.

Les quatre modèles inefficaces

La plupart des produits d'IA qui paraissent lents utilisent une combinaison de quatre modèles inefficaces : des indicateurs de chargement interminables, des boucles de texte répétitives, des boîtes de dialogue modales bloquantes et l'absence totale d'indicateur de progression. Chacun de ces modèles ralentit la perception de la vitesse, même lorsque la réponse est rapide.

Les indicateurs de chargement interminables masquent tout ce dont l'utilisateur a besoin

Un indicateur de chargement sans indicateur de progression est une boîte noire. L'utilisateur n'a rien sur quoi se concentrer et l'attente paraît plus longue qu'avec un flux de jetons. Un indicateur de chargement incite l'utilisateur à détourner le regard, ce qui est l'inverse de ce que devrait faire une interface d'IA.

Supprimez l'indicateur de chargement. Affichez un flux de jetons, une structure de base ou une trace de raisonnement. Si la réponse est trop courte pour être diffusée en continu, affichez un état optimiste. Si le modèle effectue un travail invisible, affichez une barre d'état l'indiquant.

Les boucles de texte « Thinking » sont du bruit inutile

Une boucle de texte « Thinking » qui tourne est pire qu'une icône de chargement. Elle donne l'illusion d'une progression inexistante. En deux sessions, les utilisateurs apprennent à l'ignorer, ce qui bloque toute information utile affichée ultérieurement.

Remplacez la boucle par un état pertinent : « Recherche dans trois sources. Lecture du fichier. Rédaction de la réponse. » La barre d'état est une information. La boucle est du bruit déguisé en information.

Les boîtes de dialogue modales bloquantes transforment l'attente en blocage

Une boîte de dialogue modale qui bloque le reste de l'interface utilisateur pendant l'exécution du modèle est l'erreur de latence la plus coûteuse. Elle transforme l'attente en situation de blocage. L'utilisateur ne peut ni faire défiler la page, ni copier une réponse précédente, ni effectuer aucune autre action.

Supprimez la boîte de dialogue modale. Affichez la réponse directement dans la page, dans un panneau latéral ou via une notification non bloquante. L'utilisateur ne doit jamais perdre l'accès au reste du produit à cause d'une requête IA en cours.

L'absence de signal de progression incite l'utilisateur à abandonner

Une interface IA sans signal de progression incite l'utilisateur à penser que la requête a échoué. Il appuie sur le bouton retour avant même que la réponse ne soit disponible. Pire encore, il actualise la page et perd la requête.

Toute interface IA dont le temps de réponse dépasse 500 millisecondes nécessite un signal de progression. Le texte en continu est la meilleure solution. Un squelette de texte vient ensuite. Une trace de raisonnement convient pour les temps d'attente plus longs. Une barre d'état est suffisante dans tous les autres cas. Le signal est indispensable.

Cinq analyses de produits réels

Cinq interfaces IA qui transforment la latence en atout UX.

Claude.ai : le streaming comme interaction complète

Le streaming de Claude.ai est l'exemple le plus clair de la latence comme fonctionnalité. Le temps d'affichage du premier jeton est largement inférieur à une seconde lors d'une session active, le texte s'affiche à vitesse de lecture et l'attente disparaît dans le résultat.

Le choix de conception repose entièrement sur le flux. Pas de chargement, pas de texte d'attente, pas de structure prédéfinie : la réponse s'affiche simplement, jeton par jeton. Le produit paraît rapide pendant les vingt secondes de génération, car l'utilisateur a déjà passé dix-neuf secondes à lire.

Curseur, la boucle de planification et d'exécution

Curseur transforme la latence en confiance en affichant d'abord le plan de l'agent, en exécutant chaque étape avec une progression visible et en validant les différences au fur et à mesure. Une tâche de plusieurs minutes semble utile, car l'utilisateur peut lire le plan, suivre chaque étape et examiner chaque différence lors de sa validation.

Le choix de conception hiérarchise l'attente. Planification en premier. Chaque étape comme point de contrôle. Différences comme résultat final. Chaque couche contient des informations, de sorte que l'utilisateur ne se retrouve jamais face à une boîte noire, même si la tâche s'exécute pendant plusieurs minutes.

⟦MARQUE 1⟧ IA, divulgation progressive intégrée

⟦MARQUE 2⟧ L'IA intègre la divulgation progressive dans les interfaces existantes. L'IA n'occupe jamais le premier plan. Une suggestion préliminaire apparaît directement dans le ticket. Un résumé apparaît directement dans le projet. L'attente n'interrompt jamais le travail de l'utilisateur, car celui-ci effectue déjà les tâches que l'IA améliore.

L'IA intégrée à un produit que l'utilisateur connaît déjà ne doit jamais se présenter sous forme de fenêtre modale ou de prise de contrôle. L'affichage intégré est la bonne approche, et le coût de la latence est masqué par les actions que l'utilisateur effectue déjà.

Vous souhaitez un produit d'IA qui reste fluide même lorsque le modèle est lent ? Embaucher Brainy. UXBrainy propose des audits de latence et des refontes d'interface utilisateur pour le streaming, AppBrainy propose une solution complète de déploiement de produits d'IA, et ClaudeBrainy propose la couche d'invites et de compétences qui réduit le coût du streaming. Associez-le à Modèles de conception d'interface utilisateur pour agents d'IA pour que la couche agent soit déployée avec le même niveau de qualité.

Granola, la cascade enregistrement-résumé

Granola masque plusieurs minutes de travail du modèle derrière une cascade en quatre étapes. L'enregistrement est d'abord disponible sous forme de forme d'onde brute. La transcription est ensuite disponible sous forme de texte défilant. Les notes préliminaires apparaissent en troisième position sous forme de liste à puces. Le résumé final, rédigé dans un style soigné, arrive en dernier. Chaque étape est utile avant que la suivante ne soit prête.

Trois minutes de travail sur le modèle semblent durer trente secondes, car le premier élément utile est disponible en moins de dix secondes. La transcription est précieuse en soi. Les notes sont précieuses en elles-mêmes. Le résumé complète l'expérience sans en limiter l'accès.

Perplexity, diffusion en direct des sources

Perplexity diffuse ses sources avant la réponse. La liste des citations apparaît en premier, se remplissant au fur et à mesure que le modèle récupère et classe chaque source. La réponse apparaît en dessous, pendant que l'utilisateur consulte déjà les sources. L'attente est perçue comme une recherche, et non comme un chargement.

Ce choix de conception consiste à montrer le travail avant le résultat. Un utilisateur qui consulte une liste de sources n'attend pas. À temps de réponse total égal, si les sources étaient masquées jusqu'à ce que la réponse soit prête, le temps d'attente serait perçu comme deux à trois fois plus long. La densité d'information pendant l'attente explique en grande partie la perception de la vitesse.

Liste de vérification de la latence avant déploiement

Exécutez ce test sur toute interface d'IA avant son déploiement. Douze vérifications, toutes mesurables.

1. Temps d'affichage du premier jeton inférieur à 500 millisecondes lors d'une session initiale.

2. Le flux de données maintient un débit de 30 à 80 jetons par seconde sur le modèle cible.

3. Chaque attente supérieure à 500 millisecondes est accompagnée d'un signal de progression.

4. Aucun indicateur de chargement fixe n'est présent dans l'interface d'IA.

5. Aucune boucle de texte « Thinking » ne tourne dans l'interface d'IA.

6. Aucune boîte de dialogue modale ne bloque l'exécution du modèle.

7. L'interface utilisateur optimiste exécute l'action visible dans les 100 millisecondes suivant l'intention.

8. Les squelettes sont rendus avant le contenu pour toute réponse supérieure à deux secondes.

9. Les traces de raisonnement sont affichées pour toute tâche supérieure à dix secondes.

10. Les agents de longue durée s'exécutent dans un panneau latéral, et non au premier plan. 11. L'utilisateur peut faire défiler, copier et lire les résultats précédents pendant le traitement d'une requête.

11. Chaque réponse en plusieurs étapes affiche les étapes intermédiaires que l'utilisateur peut consulter.

Cette liste est intégrée au modèle de revue de conception et s'améliore à chaque exécution.

FAQ

Quel est le paramètre de latence le plus important pour un produit d'IA ?

Le temps d'affichage du premier jeton (TTF). Le temps de réponse total importe moins que le temps d'attente de l'utilisateur avant l'affichage du contenu. En dessous de 500 millisecondes, la lecture est considérée comme instantanée.

Le streaming est-il toujours préférable au blocage ?

Pour le texte, oui. En dessous de 500 millisecondes, le blocage convient car l'attente est imperceptible. Au-delà, le streaming surpasse le blocage pour tous les indicateurs de vitesse perçue.

Quand utiliser une interface utilisateur optimiste plutôt que le streaming ?

Le streaming lorsque le résultat est la réponse, comme du texte, du code ou de la génération structurée. Interface utilisateur optimiste lorsque le modèle prend une décision attendue par l'utilisateur, comme une ébauche améliorée ou une suggestion acceptée. Les deux éléments se combinent.

Comment afficher la progression d'un agent qui prend plusieurs minutes ?

Surfaces de raisonnement et flux de progression dans le panneau latéral. Afficher d'abord le plan, puis l'étape en cours, et enfin le résultat en cours. L'utilisateur consulte le plan, observe le déroulement des étapes et ne se sent jamais bloqué.

Quelle est la pire erreur de latence dans les produits d'IA actuels ?

La fenêtre modale bloquante avec une icône de chargement. Elle combine les quatre types d'erreurs sur un seul écran et apprend à l'utilisateur que l'IA est un processus d'attente, et non un outil à utiliser.

Le changement que représente la conception pour la latence de l'IA

Concevoir pour la latence de l'IA n'est pas une solution de contournement pour les modèles lents. C'est la stratégie de conception qui permet à un modèle plus lent, mais plus performant, de surpasser un modèle plus rapide, mais moins performant, sur tous les critères importants pour l'utilisateur.

Les équipes qui réussissent actuellement ont cessé d'optimiser la vitesse brute et ont commencé à concevoir pour la vitesse perçue. Ils se sont engagés dans le streaming, ont ajouté une interface utilisateur optimiste, ont créé des squelettes de 200 ms et ont déplacé les agents dans des panneaux latéraux. Chaque attente est source d'information.

Si votre interface d'IA affiche encore une icône de chargement, une boucle de réflexion ou une fenêtre modale bloquante, le goulot d'étranglement ne vient pas du modèle, mais de sa conception. Pour une expérience optimale, combinez ce travail avec Modèles de conception d'interface utilisateur pour agents d'IA, le guide Intégration de produits IA, conception de produits native de l'IA et hiérarchie visuelle.

Pour un produit d'IA performant même avec un modèle lent, embauche Brainy est la solution. UXBrainy propose des audits de latence et des refontes d'interface utilisateur pour le streaming, AppBrainy assure le déploiement complet du produit d'IA et ClaudeBrainy fournit la couche d'invites et de compétences qui rend le streaming économique.