Recommandations pour les interfaces utilisateur

Vue d’ensemble

Une interface utilisateur facultative peut enrichir les possibilités offertes par un plugin sans interrompre le fil de la conversation. Utilisez des cartes, des carrousels, des vues plein écran et d’autres modes d’affichage uniquement lorsque l’interaction visuelle améliore le workflow.

Système de design

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

Elle fournit des bases de mise en forme avec Tailwind, des tokens de design sous forme de variables CSS et une bibliothèque de composants soignés et accessibles.

L’utilisation de cette bibliothèque de composants 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 sont les espaces d’interface que les développeurs utilisent pour créer les expériences des applications dans ChatGPT. Ils permettent aux partenaires de présenter du contenu et des actions qui s’intègrent naturellement à la conversation. Chaque mode est conçu pour un type d’interaction précis, des confirmations rapides aux workflows immersifs.

Une utilisation cohérente de ces modes permet de proposer des expériences simples et prévisibles.

Intégré à la conversation

Le mode d’affichage intégré apparaît directement dans le fil de la conversation. Les interfaces intégrées s’affichent actuellement toujours avant la réponse générée par le modèle. Toute application apparaît d’abord dans ce mode.

Mise en page

• Icône et appel d’outil : Un libellé avec le nom et l’icône de l’application.
• Affichage intégré : Une interface légère présentant le contenu de l’application au-dessus de la réponse du modèle.
• Suite de la réponse : Une courte réponse générée par le modèle s’affiche après le widget pour suggérer des modifications, des étapes suivantes ou des actions connexes. Évitez de répéter le contenu de la carte.

Carte intégrée

Des widgets légers, chacun dédié à un usage précis, intégrés directement à la conversation. Ils proposent des confirmations rapides, des actions simples ou des aides visuelles.

Quand l’utiliser

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

Mise en page

• Titre : Ajoutez un titre si votre carte repose sur un document ou contient des éléments rattachés à un élément parent, comme les morceaux d’une playlist.
• Agrandir : Utilisez cette commande pour ouvrir un mode d’affichage plein écran si la carte contient du contenu multimédia enrichi 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 lorsque plusieurs résultats sont présentés sous forme de liste.
• Commandes de modification : Permettez de modifier les réponses de l’application directement dans la conversation sans la surcharger.
• Actions principales : Limitez-vous à deux actions, placées en bas de la carte. Ces actions doivent déclencher soit un tour de conversation, soit un appel d’outil.

Interaction

Les cartes permettent des interactions directes simples.

• États : Les modifications effectuées sont conservées.
• Modifications directes simples : Lorsque cela convient, du texte modifiable directement dans la carte permet aux utilisateurs d’effectuer rapidement des modifications sans avoir à solliciter le modèle.
• Mise en page dynamique : La hauteur d’une carte peut augmenter pour s’adapter à son contenu, jusqu’à atteindre celle de la zone d’affichage sur mobile.

Règles pratiques

• Limitez les actions principales par carte : Proposez au maximum deux actions, avec un appel à l’action principal et un appel à l’action secondaire facultatif.
• Pas de navigation à plusieurs niveaux ni de vues multiples dans une carte. Les cartes ne doivent pas contenir plusieurs niveaux de détail, des onglets ou une navigation approfondie. Envisagez de répartir ces éléments entre plusieurs cartes ou actions d’outil distinctes.
• Pas de défilement imbriqué. Les cartes doivent s’adapter automatiquement à leur contenu et éviter tout défilement interne.
• Pas de champs de saisie en double. Ne reproduisez pas les fonctionnalités de ChatGPT dans une carte.

Carrousel intégré

Un ensemble de cartes présentées côte à côte, permettant aux utilisateurs de parcourir rapidement plusieurs options et de faire leur choix.

Quand l’utiliser

• Pour présenter une courte liste d’éléments similaires (par exemple, des restaurants, des playlists ou des événements).
• Lorsque les éléments contiennent trop de contenu visuel et de métadonnées pour tenir dans de simples lignes.

Mise en page

• Image : Les éléments doivent toujours inclure une image ou un visuel.
• Titre : Les éléments du carrousel doivent généralement inclure un titre qui en décrit le contenu.
• Métadonnées : Utilisez les métadonnées pour afficher les informations les plus importantes et les plus pertinentes sur l’élément dans le contexte de la réponse. Évitez d’afficher plus de deux lignes de texte.
• Badge : Utilisez le badge pour apporter un complément de contexte lorsque cela est pertinent.
• Actions : Dans la mesure du possible, proposez un seul appel à l’action clair par élément.

Règles pratiques

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

plein écran

Des expériences immersives qui s’étendent au-delà de la carte intégrée, offrant aux utilisateurs l’espace nécessaire pour des workflows en plusieurs étapes ou une exploration plus approfondie. La zone de saisie de ChatGPT reste affichée en superposition, ce qui permet aux utilisateurs de continuer à « parler à l’application » naturellement, dans le contexte de la vue plein écran.

Quand l’utiliser

• Tâches complexes qui ne peuvent pas tenir dans une seule carte (par exemple, une carte interactive avec des repères, un espace d’édition aux fonctionnalités avancées ou un diagramme interactif).
• Consultation de contenus détaillés (par exemple, des annonces immobilières ou des menus).

Mise en page

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

Interaction

• Panneau de discussion : conservez le contexte de la conversation à côté de l’interface plein écran.
• Réflexion : un effet de scintillement anime la zone de saisie pour indiquer qu’une réponse est en cours de streaming.
• Réponse : lorsque le modèle termine sa réponse, un extrait tronqué s’affiche temporairement au-dessus de la zone de saisie. Appuyez dessus pour ouvrir le panneau de discussion.

Règles pratiques

• Concevez votre expérience utilisateur pour qu’elle fonctionne avec la zone de saisie du système. Celle-ci est toujours présente en plein écran : veillez donc à prendre en charge des prompts conversationnels qui peuvent déclencher des appels d’outils et qui paraissent naturels aux utilisateurs.
• Utilisez le plein écran pour les tâches qui gagnent à disposer de plus d’espace. Les éditeurs et interfaces d’administration existants peuvent être intégrés s’ils respectent la politique relative aux iframes.

Incrustation d’image (PiP)

Une fenêtre flottante persistante dans ChatGPT, optimisée pour les sessions en cours ou en direct, comme les jeux ou les vidéos. La fenêtre PiP reste visible pendant que la conversation se poursuit et peut se mettre à jour dynamiquement en réponse aux prompts de l’utilisateur.

Quand l’utiliser

• Activités qui se déroulent en parallèle de la conversation, comme un jeu, une 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 en poursuivant une manche de jeu ou en actualisant des données en direct à la demande de l’utilisateur.

Interaction

• Activée : lors du défilement, la fenêtre PiP reste fixée en haut de la zone d’affichage
• Épinglée : la fenêtre PiP reste fixe 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 lors du défilement.

Règles pratiques

• Veillez à ce que la fenêtre PiP puisse mettre à jour son état ou réagir lorsque les utilisateurs interagissent 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 contenu statique qui seraient mieux adaptés à un affichage dans le fil de la conversation ou en plein écran.

Recommandations de design visuel

Une apparence et un fonctionnement cohérents aident les outils créés par les partenaires à s’intégrer naturellement à la plateforme ChatGPT. Les recommandations visuelles favorisent la clarté, la facilité d’utilisation et l’accessibilité, tout en laissant la marque s’exprimer aux endroits appropriés.

Ces principes expliquent comment utiliser les couleurs, la typographie, les espacements et les images pour préserver la clarté du système tout en permettant aux partenaires de différencier leur service.

Pourquoi c’est important

La cohérence visuelle et ergonomique contribue à améliorer l’expérience globale des applications dans ChatGPT. En suivant ces recommandations, les partenaires peuvent présenter leurs outils de manière cohérente pour les utilisateurs et leur apporter de la valeur sans les distraire.

Couleurs

Les palettes définies par le système contribuent à maintenir la cohérence des actions et des réponses avec la plateforme ChatGPT. Les partenaires peuvent exprimer leur identité de marque au moyen de touches visuelles, d’icônes ou d’images intégrées au contenu, mais ne doivent pas redéfinir les couleurs du système.

Règles pratiques

• Utilisez les couleurs du système pour le texte, les icônes et les éléments qui structurent l’espace, comme les séparateurs.
• Les éléments de marque des partenaires, comme les logos ou les icônes, ne doivent pas modifier les arrière-plans ni les couleurs du texte.
• Évitez les dégradés ou les motifs personnalisés qui rompent avec l’apparence épurée de ChatGPT.
• Utilisez les couleurs d’accentuation de la marque sur les boutons principaux dans les modes d’affichage de l’application.

Utilisez les couleurs de la marque pour les touches visuelles et les badges. Ne modifiez pas les couleurs du texte ni les autres styles fondamentaux des composants.

N’appliquez pas de couleurs aux arrière-plans des zones de texte.

Typographie

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

Règles pratiques

• Héritez toujours de la pile de polices du système et respectez ses règles de taille pour les titres, le corps du texte et les légendes.
• Appliquez les styles propres au partenaire, comme le gras, l’italique ou le surlignage, uniquement dans les zones de contenu, et non aux éléments qui structurent l’interface.
• Limitez autant que possible les variations de taille de police, en privilégiant les tailles body et body-small.

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 mise en page

Des marges externes et internes ainsi que des alignements cohérents rendent le contenu des partenaires facile à parcourir et prévisible dans la conversation.

Règles 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 et évitez de trop serrer le contenu ou de placer le texte bord à bord.
• Respectez autant que possible les arrondis des coins définis par le système pour préserver la cohérence des formes.
• Maintenez une hiérarchie visuelle en disposant le titre, le texte complémentaire et l’appel à l’action dans un ordre clair.

Icônes et images

Les icônes système assurent la clarté visuelle, tandis que les logos et les images des partenaires aident les utilisateurs à identifier la marque.

Bonnes pratiques

• Utilisez les icônes système ou des icônes personnalisées adaptées à l’univers visuel de ChatGPT : monochromes et dessinées au trait.
• N’incluez pas votre logo dans la réponse. ChatGPT ajoute toujours votre logo et le nom de votre application avant l’affichage du widget.
• Toutes les images doivent respecter les rapports largeur/hauteur imposés pour éviter toute déformation.

Accessibilité

Chaque expérience proposée par un partenaire devrait être utilisable par le plus grand nombre. L’accessibilité devrait être au cœur de la conception de vos applications pour ChatGPT.

Bonnes pratiques

• Le texte et l’arrière-plan doivent respecter un rapport de contraste minimal (WCAG AA).
• Fournissez un texte alternatif pour toutes les images.
• Permettez le redimensionnement du texte sans perturber la mise en page.