Fermer

juillet 14, 2025

Modèles de conception pour les interfaces AI

Modèles de conception pour les interfaces AI


Alors tu dois Concevoir une nouvelle fonctionnalité d’IA pour votre produit. Comment commenceriez-vous? Comment concevez-vous les flux et les interactions? Et comment vous assurez-vous que cette nouvelle fonctionnalité n’est pas abandonnée par les utilisateurs après quelques courses?

Dans cet article, j’aimerais partager une approche très simple mais systématique à la façon dont je pense à la conception d’expériences d’IA. J’espère que cela vous aidera à obtenir un peu plus de clarté sur la façon de commencer.

Cet article est Une partie de notre série en cours sur Ux. Vous pouvez trouver plus de détails sur Modèles de conception et stratégie UX dans Modèles de conception d’interface intelligente 🍣 – Avec une formation UX en direct à venir bientôt. Sauter à la table des matières.

Le rôle de recul du chat d’IA

L’un des principaux changements récents est une lente éloignement du traditionnel Interfaces AI «Chat-Alike». Comme Luke Wroblewski a écritlorsque les agents peuvent utiliser plusieurs outils, appeler d’autres agents et s’exécuter en arrière-plan, les utilisateurs orchestrer L’IA fonctionne plus – il y a beaucoup moins de discussions dans les deux sens.

AI Experience Paradigm par Luke Wroblewski
Ui de messagerie commence lentement à se sentir datéet l’interface utilisateur de chat s’estompe dans l’arrière-plan. Par Luke Wroblewski. (Grand aperçu)

En fait, les chatbots sont Rarement un paradigme d’expérience formidable – principalement parce que le fardeau de l’articulation de l’intention réside efficacement sur l’utilisateur. Mais dans la pratique, il est remarquablement difficile de bien faire et très long.

Le chat ne disparaît pas, bien sûr, mais il est complété par UIS orientée vers les tâches – Contrôles de température, boutons, curseurs, boutons, feuilles de calcul sémantiques, toiles infinies – avec l’IA offrant des options, des préréglages et des modèles prédéfinis.

AI Experience Paradigm par Luke Wroblewski
Modèles de conception d’IA agentiquesavec des UIS plus axées sur les tâches, plutôt que de discuter. Par Luke Wroblewski. (Grand aperçu)

Là, l’IA met l’accent sur le travail, le plan, les tâches – le résultat, au lieu de l’entrée de chat. Les résultats sont des expériences qui amplifier la valeur des utilisateurs En arrose un peu d’IA dans des endroits où il offre une valeur réelle aux utilisateurs réels.

Pour concevoir de meilleures expériences d’IA, nous devons étudier 5 zones clés que nous devons façonner.

Entrée UX: exprimer l’intention

AI conversationnel est un très lent façon d’aider les utilisateurs à exprimer et à articuler leur intention. Tests d’utilisation montrer Que les utilisateurs se perdent souvent dans l’édition, la révision, la dactylographie et la réapprence. Il est douloureusement lent, prenant souvent 30 à 60 secondes pour contribuer.

Il s’avère que les gens ont du mal à exprimer bien leur intention. En fait, au lieu d’écrire des invites manuellement, c’est une bonne idée de Demandez à AI d’écrire une invite se nourrir.

Illustration: comment les utilisateurs peuvent exprimer leur intention dans les interfaces AI.
Flora tu as vous permet de modifier des images et des vidéos via des nœuds. (Grand aperçu)

Avec Flora tu asles utilisateurs peuvent toujours écrire des invites, mais ils Visualisez leur intention avec les nœuds en connectant visuellement diverses sources. Au lieu d’expliquer élaboré à l’IA comment nous avons besoin du pipeline pour fonctionner, nous attachons les nœuds et les commandes sur une toile.

Illustration de la sortie UX
Avec Krea.aiLes utilisateurs peuvent déplacer des formes abstraites (à gauche) pour expliquer leur objectif à l’IA et étudier le résultat (à droite). (Grand aperçu)

Avec la contribution pour l’IA, être précis est lent et difficile. Au lieu de cela, nous pouvons abstrait L’objet que nous voulons manipuler et donner une entrée précise en AI en déplaçant cet objet abstrait sur une toile. C’est quoi Krea.ai fait.

En résumé, nous pouvons minimiser le fardeau de la saisie Invite manuellement – avec des pré-remplacés générés par l’AI, des extensions invites, des constructeurs de requête et également une entrée vocale.

Sortie UX: affichage des résultats

La sortie AI ne doit pas être simplement du texte brut ou une liste de bullets. Il doit être utile pour conduire les gens à des idéesplus rapide. Par exemple, nous pourrions visualiser la sortie en créant des explications supplémentaires en fonction de l’objectif et des motivations de l’utilisateur.

Illustration de la sortie UX
Visualiser les résultats à travers des objectifs de style. Par Amelia Wattenberger. (Grand aperçu)

Par exemple, Amelia Wattenberger Visualise Sorput IA pour son éditeur de texte Penpal en ajoutant lentilles de style pour explorer le contenu de. La sortie peut être visualisée en longueur et échelles de phrase Triste – heureux, Concret – Résuméet ainsi de suite.

Illustration de la sortie UX
Aino.aiun analyste de l’IA SIG pour l’urbanisme. (Grand aperçu)

Le résultat pourrait également être visualisé sur une carte, qui, bien sûr, est attendue pour un AI GIS analyst. De plus, les utilisateurs peuvent accéder aux couches de données individuellesallumez-les et éteignez, et explorez donc les données sur la carte.

Nous pouvons également utiliser classement forcé et les hiérarchisations à suggérer les meilleures options Et évitez la paralysie de choix – même si un utilisateur demande des recommandations top 10. Nous pouvons penser aux moyens de présenter les résultats en tant que table de données, ou un tableau de bord, ou une visualisation sur une carte, ou comme un fichier JSON structuré, par exemple.

Raffinement UX: ajustement de la sortie

Les utilisateurs ont souvent besoin de cueillette en cerisier Certains bits de la production d’IA et les rassemblent dans un nouvel endroit – et souvent ils ont besoin de développer une sectionsynthétisez des bits d’une autre section, ou affinez simplement le résultat pour répondre à leurs besoins.

Illustration de la sortie UX
Adobe Firefly suggère des options et des curseurs pour ajuster le résultat. (Grand aperçu)

Le raffinement est généralement la partie la plus douloureuse de l’expérienceavec de nombreux détails fins étant laissés aux utilisateurs pour expliquer de manière approfondie. Mais nous pouvons utiliser de bons contrôles d’interface utilisateur à l’ancienne comme les boutons, les curseurs, les boutons, etc. pour améliorer cette expérience, similaire à la façon dont Adobe Firefly le fait (image ci-dessus).

Illustration de la sortie UX
Les préréglages vivant sur le côté en suscitant, un exemple par Maggie Appleton. (Grand aperçu)

Nous pouvons également utiliser des préréglages, des signets et permettre aux utilisateurs de mettre en évidence des parties spécifiques du résultat qu’ils aimeraient changer – avec des invites contextuelles agissant sur des parties en surbrillance de la sortie, plutôt que des invites globales.

Illustration de la sortie UX
Peaufiner des parties spécifiques du résultat, sur Grammaire. (Grand aperçu)

Actions AI: tâches à accomplir

Avec les agents de l’IA, nous pouvons maintenant aussi Permettre aux utilisateurs de lancer des tâches Cette IA peut fonctionner en leur nom, comme la planification des événements, la planification et la recherche approfondie. Nous pourrions également demander à trier les résultats ou les filtrer d’une manière spécifique.

Illustration de la sortie UX
Suggérant des actions sur la suspension, un exemple par Maggie Appleton. (Grand aperçu)

Mais nous pouvons également ajouter des fonctionnalités pour aider les utilisateurs à mieux utiliser la sortie d’IA – par exemple, en le visualisant, en le rendant partageable, permettant transformations entre les formats, ou également publier sur Slack, Jira, etc.

Intégration de l’IA: où le travail se produit

De nombreuses interactions d’IA sont verrouillées dans un produit spécifique, mais de bonnes expériences d’IA se produisent où le travail réel se produit. Il serait tout à fait inhabituel de s’attendre à une section dédiée pour Assortiment automatiquepar exemple, mais nous le faisons pour les fonctionnalités de l’IA.

Illustration de l'intégration d'IA UX
(Grand aperçu)
Illustration de l'intégration d'IA UX
Osetail AI s’intègre dans de nombreuses plates-formes, de Jira et de la notion à Slack et aux équipes, où le travail réel se produit. (Grand aperçu)

L’augmentation réelle de la productivité survient lorsque les utilisateurs comptent sur l’IA en tant que copilote ou petit assistant dans le Outils qu’ils utilisent quotidiennement pour le travail. Ce sont des intégrations transparentes dans Slack, Teams, Jira, Github, etc. – les outils que les gens utilisent de toute façon. Navigateur DIA et Se mettre en jeu sont de grands exemples en action.

Emballage

Dans ces cinq domaines, nous pouvons explorer des moyens de minimiser le coût de l’interaction avec une zone de texte et permettre aux utilisateurs d’interagir directement avec les points d’intérêt, en appuyant, en cliquant, en sélectionnant, en mettant en surbrillance et en mettant en signet.

De nombreux produits sont obsédés par le fait d’être première. Mais tu pourrais être bien mieux en étant Vous avez une séquence plutôt. La différence est que nous nous concentrons sur les besoins des utilisateurs et saupoudre un peu d’IA dans les parcours clients où il ajoute réellement de la valeur.

Et les produits IA n’ont pas besoin d’être AI-UNLY. Il y a beaucoup de valeur à cartographier les modèles mentaux que les gens ont adoptés au fil des ans, et les améliorer avec l’IAsimilaire à la façon dont nous le faisons avec le automatiquement des navigateurs, plutôt que de laisser les utilisateurs devant une zone de texte effrayante et omniprésente.

Ressources utiles

Rencontrez les «modèles de conception d’interface intelligente»

Vous pouvez trouver plus de détails sur Modèles de conception et UX dans Modèles de conception d’interface intelligentenotre Cours de 15h-video Avec des centaines d’exemples pratiques de projets réels – avec une formation UX en direct plus tard cette année. Tout, des méga-dropddown aux tables d’entreprise complexes – avec 5 nouveaux segments ajoutés chaque année. Sauter à un aperçu gratuit. Utiliser le code Birdie à Économisez 15% désactivé.

Modèles de conception d'interface intelligente
Rencontrer Modèles de conception d’interface intelligentenotre cours vidéo sur la conception d’interface et UX.
Smashing Editorial
(YK)




Source link