Recommandations pour la conception d’interfaces

Vue d’ensemble

Un plugin peut proposer une interface pour permettre aux utilisateurs d’en faire davantage sans interrompre la conversation. Utilisez des cartes, des carrousels, des vues plein écran ou d’autres modes d’affichage uniquement si l’interaction visuelle facilite la tâche.

Système de design

Pour concevoir une interface soignée qui s’intègre naturellement à ChatGPT, vous pouvez utiliser la bibliothèque de composants @openai/apps-sdk-ui.

Elle fournit des bases de style avec Tailwind, des variables CSS qui représentent les valeurs du système de design et un ensemble de composants accessibles et soigneusement conçus.

Cette bibliothèque est facultative. Elle permet de créer plus rapidement des composants conformes au système de design de ChatGPT.

Modes d’affichage

Les modes d’affichage permettent aux développeurs de choisir comment présenter leurs applications dans ChatGPT. Les partenaires peuvent ainsi proposer du contenu et des actions qui s’intègrent naturellement à la conversation. Chaque mode répond à un type d’interaction précis, de la confirmation rapide au workflow immersif.

Utilisez ces modes de manière cohérente pour que les applications restent simples et que leur comportement soit prévisible.

Affichage intégré

Ce mode affiche le contenu directement dans le fil de la conversation. Actuellement, les éléments intégrés apparaissent toujours avant la réponse générée par le modèle. Toutes les applications s’affichent d’abord dans ce mode.

Disposition

• Icône et appel d’outil : un libellé indique le nom de l’application et affiche son icône.
• Affichage intégré : une interface légère présente le contenu de l’application au-dessus de la réponse du modèle.
• Suite de la conversation : après le widget, une courte réponse du modèle suggère des modifications, des étapes suivantes ou des actions connexes. Évitez de répéter le contenu de la carte.

Carte intégrée

Les cartes sont des widgets légers, intégrés à la conversation et consacrés à une seule tâche. Elles permettent de confirmer rapidement une opération, d’effectuer une action simple ou de fournir un repère visuel.

Cas d’utilisation

• Une seule action ou décision (par exemple, confirmer une réservation).
• Un petit volume de données structurées (par exemple, une carte géographique, un récapitulatif de commande ou un bref point de situation).
• Un widget ou un outil entièrement autonome (par exemple, un lecteur audio ou une fiche de score).

Disposition

• Titre : ajoutez un titre si votre carte repose sur un document ou si ses éléments appartiennent à un même ensemble, comme les morceaux d’une playlist.
• Agrandir : utilisez cette commande pour ouvrir la vue plein écran si la carte présente du contenu multimédia riche ou des éléments interactifs, comme une carte géographique ou un schéma interactif.
• Afficher plus : utilisez cette commande pour afficher des éléments supplémentaires lorsqu’une liste présente plusieurs résultats.
• Commandes de modification : permettez aux utilisateurs de modifier les réponses de l’application directement dans la carte sans encombrer la conversation.
• Actions principales : proposez au maximum deux actions et placez-les au bas de la carte. Chacune doit lancer un nouvel échange dans la conversation ou déclencher un appel d’outil.

Interaction

Les cartes permettent des interactions directes simples.

• État : les modifications sont enregistrées.
• Modifications simples sur place : lorsque cela s’y prête, rendez le texte modifiable dans la carte pour que les utilisateurs puissent le corriger rapidement sans envoyer de prompt au modèle.
• Disposition dynamique : la carte peut s’agrandir en hauteur pour s’adapter à son contenu, dans la limite de la hauteur de la zone d’affichage sur mobile.

Bonnes pratiques

• Limitez les actions principales par carte : proposez au maximum deux appels à l’action, un principal et, si nécessaire, un secondaire.
• Évitez la navigation à plusieurs niveaux et les vues multiples dans une même carte. Évitez les accès successifs à des vues détaillées, les onglets et les sous-niveaux de navigation. Envisagez de les répartir entre plusieurs cartes ou actions d’outil.
• Évitez le défilement imbriqué. Les cartes doivent s’ajuster automatiquement à leur contenu pour éviter tout défilement interne.
• Évitez les champs de saisie redondants. Ne reproduisez pas les fonctionnalités de ChatGPT dans une carte.

Carrousel intégré

Un carrousel présente des cartes côte à côte pour que les utilisateurs puissent parcourir rapidement plusieurs options et faire leur choix.

Cas d’utilisation

• Vous présentez une courte liste d’éléments similaires (par exemple, des restaurants, des playlists ou des événements).
• Les éléments contiennent trop de visuels et de métadonnées pour tenir dans de simples lignes de liste.

Disposition

• Image : incluez toujours une image ou un autre visuel pour chaque élément.
• Titre : en règle générale, donnez à chaque élément un titre qui en décrit le contenu.
• Métadonnées : affichez les informations les plus importantes sur l’élément compte tenu de la réponse. Évitez de dépasser deux lignes de texte.
• Badge : si nécessaire, utilisez un badge pour apporter une précision.
• Actions : dans la mesure du possible, proposez un seul appel à l’action, clairement identifiable, par élément.

Bonnes pratiques

• Prévoyez 3 à 8 éléments par carrousel pour faciliter la lecture.
• Limitez les métadonnées aux détails les plus pertinents, sur trois lignes au maximum.
• Chaque carte peut proposer un seul appel à l’action, facultatif (par exemple, « Réserver » ou « Lire »).
• Conservez la même hiérarchie visuelle d’une carte à l’autre.

Plein écran

La vue plein écran s’étend au-delà de la carte intégrée. Elle offre une expérience immersive et laisse aux utilisateurs la place nécessaire pour suivre un workflow en plusieurs étapes ou explorer un contenu en détail. La zone de saisie de ChatGPT reste en surimpression, ce qui leur permet de continuer à « parler à l’application » en langage naturel, dans le contexte de la vue plein écran.

Cas d’utilisation

• Une tâche complexe ne tient pas dans une seule carte (par exemple, explorer une carte interactive avec des repères, travailler dans un espace d’édition aux fonctions avancées ou manipuler un schéma interactif).
• Les utilisateurs parcourent des contenus détaillés (par exemple, des annonces immobilières ou des menus).

Disposition

• Commande de fermeture du système : ferme le volet ou la vue.
• Vue plein écran : zone qui accueille le contenu.
• Zone de saisie : la zone de saisie native de ChatGPT permet à l’utilisateur de poursuivre la conversation dans le contexte de la vue plein écran.

Interaction

• Volet de discussion : gardez le contexte de la conversation accessible depuis la vue plein écran.
• Réflexion : la zone de saisie « scintille » pour indiquer que la réponse est en cours de transmission.
• Réponse : lorsque le modèle termine sa réponse, un court extrait s’affiche temporairement au-dessus de la zone de saisie. Touchez-le pour ouvrir le volet de discussion.

Bonnes pratiques

• Concevez votre interface pour qu’elle fonctionne avec la zone de saisie du système. Cette zone reste visible en plein écran. Veillez donc à ce que les utilisateurs puissent formuler naturellement des prompts qui peuvent déclencher des appels d’outils.
• Utilisez le plein écran pour les tâches qui gagnent à disposer de plus d’espace. Vous pouvez intégrer des éditeurs et des interfaces d’administration existants s’ils respectent la politique relative aux iframes.

Incrustation d’image (PiP)

Ce mode affiche dans ChatGPT une fenêtre flottante persistante, adaptée aux sessions qui se prolongent ou se déroulent en direct, comme les jeux ou les vidéos. La fenêtre PiP reste visible pendant la conversation et peut se mettre à jour en réponse aux prompts de l’utilisateur.

Cas d’utilisation

• Activités menées en parallèle de la conversation, comme un jeu, une séance de collaboration en direct, un quiz ou une séance d’apprentissage.
• Situations où le widget PiP peut réagir aux messages de la discussion, par exemple pour poursuivre une manche ou actualiser des données en direct à la demande de l’utilisateur.

Interaction

• Activation : lorsque l’utilisateur fait défiler la conversation, la fenêtre PiP reste en haut de la zone d’affichage.
• Épinglage : la fenêtre PiP reste en place jusqu’à ce que l’utilisateur la ferme ou que la session se termine.
• Fin de session : la fenêtre PiP reprend sa place dans le fil de la conversation et disparaît de l’écran avec le défilement.

Bonnes pratiques

• Veillez à ce que le widget PiP puisse mettre son état à jour ou réagir lorsque les utilisateurs interagissent avec lui via la zone de saisie du système.
• Fermez automatiquement la fenêtre PiP à la fin de la session.
• Ne surchargez pas la fenêtre PiP de commandes ou de contenus statiques qui conviendraient mieux à l’affichage intégré ou au plein écran.

Recommandations pour la conception visuelle

Une présentation et un comportement cohérents permettent aux outils des partenaires de s’intégrer naturellement à ChatGPT. Les recommandations visuelles favorisent la clarté, la facilité d’utilisation et l’accessibilité, tout en laissant aux partenaires la possibilité d’exprimer leur identité de marque là où elle a sa place.

Ces principes expliquent comment utiliser les couleurs, la typographie, les espacements et les images pour préserver la lisibilité de l’interface tout en permettant aux partenaires de distinguer leurs services.

Pourquoi cette cohérence est importante

Une présentation et des interactions cohérentes améliorent l’expérience globale des utilisateurs d’applications dans ChatGPT. En suivant ces recommandations, les partenaires proposent des outils utiles dont l’interface reste familière et ne détourne pas l’attention de la tâche en cours.

Couleurs

Les palettes du système aident à présenter les actions et les réponses de manière cohérente dans ChatGPT. Les partenaires peuvent exprimer leur identité de marque par des touches de couleur, des icônes ou des images intégrées, mais doivent conserver les couleurs du système.

Bonnes pratiques

• Utilisez les couleurs du système pour le texte, les icônes et les éléments qui délimitent les zones, comme les séparateurs.
• Veillez à ce que les éléments de marque, comme les logos ou les icônes, ne modifient pas les couleurs de fond ou de texte prévues par le système.
• Évitez les dégradés ou les motifs personnalisés qui rompent avec la sobriété visuelle de ChatGPT.
• Utilisez les couleurs d’accent de votre marque pour les boutons principaux dans les modes d’affichage de l’application.

Réservez les couleurs de votre marque aux accents visuels et aux badges. Conservez les couleurs du texte et les autres styles de base des composants.

N’appliquez pas de couleur de fond aux zones de texte.

Typographie

ChatGPT utilise les polices natives de chaque plateforme (SF Pro sur iOS et une police sans empattement sur Android) pour garantir la lisibilité et l’accessibilité sur tous les appareils.

Bonnes pratiques

• Faites toujours hériter vos composants de la liste de polices du système et respectez les tailles prévues pour les titres, le corps du texte et les légendes.
• Réservez les styles propres à votre marque, comme le gras, l’italique ou le surlignage, aux zones de contenu. Évitez de les appliquer aux éléments qui structurent l’interface.
• Limitez autant que possible les variations de taille de police. Privilégiez les deux tailles du corps de texte, normale et petite.

N’utilisez pas de polices personnalisées, même en plein écran. Utilisez les variables de police du système chaque fois que possible.

Espacement et disposition

Des marges externes et internes régulières et des alignements cohérents permettent aux utilisateurs de parcourir rapidement le contenu des partenaires et de retrouver leurs repères dans la conversation.

Bonnes pratiques

• Utilisez les espacements de la grille du système pour les cartes, les collections et les panneaux d’inspection.
• Conservez des marges internes cohérentes. Évitez de tasser le contenu ou de placer le texte bord à bord.
• Respectez autant que possible les rayons d’arrondi définis par le système pour préserver la cohérence des formes.
• Faites ressortir la hiérarchie visuelle en présentant dans un ordre clair le titre, le texte d’accompagnement et l’appel à l’action.

Icônes et images

Les icônes du système donnent des repères visuels clairs. Les logos et les images des partenaires aident les utilisateurs à reconnaître la marque.

Bonnes pratiques

• Utilisez les icônes du système ou créez des icônes qui respectent le style visuel de ChatGPT : monochromes et dessinées au trait.
• N’incluez pas votre logo dans la réponse. ChatGPT ajoute systématiquement votre logo et le nom de votre application avant d’afficher le widget.
• Respectez les rapports largeur/hauteur imposés pour toutes les images afin d’éviter les déformations.

Accessibilité

Les applications des partenaires doivent être utilisables par le public le plus large possible. Faites de l’accessibilité une priorité dès la conception de vos applications pour ChatGPT.

Bonnes pratiques

• Respectez le rapport de contraste minimal entre le texte et l’arrière-plan (WCAG AA).
• Fournissez un texte de remplacement pour chaque image.
• Permettez aux utilisateurs de redimensionner le texte sans compromettre la mise en page.