UI-Richtlinien

Übersicht

Optionale Plug-in-Oberflächen können die Nutzungsmöglichkeiten erweitern, ohne den Gesprächsfluss zu unterbrechen. Verwende Karten, Karussells, Vollbildansichten und andere Darstellungsmodi nur dann, wenn die visuelle Interaktion den Ablauf verbessert.

Designsystem

Um hochwertige Oberflächen zu gestalten, die sich nahtlos in ChatGPT einfügen, kannst du die Komponentenbibliothek @openai/apps-sdk-ui verwenden.

Sie bietet Gestaltungsgrundlagen mit Tailwind, Design-Tokens als CSS-Variablen und eine Bibliothek sorgfältig gestalteter, barrierefreier Komponenten.

Die Komponentenbibliothek ist optional. Mit ihr kannst du schneller Komponenten entwickeln, die zum Designsystem von ChatGPT passen.

Darstellungsmodi

Darstellungsmodi sind die Oberflächen, mit denen Entwickelnde Apps in ChatGPT gestalten. Sie ermöglichen es Partnern, Inhalte und Aktionen so darzustellen, dass sie sich natürlich in das Gespräch einfügen. Jeder Modus ist für eine bestimmte Art der Interaktion ausgelegt, von schnellen Bestätigungen bis hin zu Arbeitsabläufen, in die man tiefer eintaucht.

Wenn du diese Modi einheitlich einsetzt, bleibt die Bedienung einfach und vorhersehbar.

Inline

Der Inline-Darstellungsmodus erscheint direkt im Gesprächsverlauf. Inline-Oberflächen werden derzeit immer vor der generierten Modellantwort angezeigt. Jede App erscheint zunächst inline.

Layout

• Symbol und Tool-Aufruf: Eine Kennzeichnung mit dem Namen und Symbol der App.
• Inline-Darstellung: Eine kompakte Ansicht mit App-Inhalten, die oberhalb der Modellantwort eingebettet ist.
• Anschlussantwort: Eine kurze, vom Modell generierte Antwort, die nach dem Widget angezeigt wird und Änderungen, nächste Schritte oder verwandte Aktionen vorschlägt. Vermeide Inhalte, die bereits auf der Karte stehen.

Inline-Karte

Kompakte Widgets für einen einzelnen Zweck, die direkt in das Gespräch eingebettet sind. Sie ermöglichen schnelle Bestätigungen, einfache Aktionen oder visuelle Hilfestellungen.

Wann geeignet

• Eine einzelne Aktion oder Entscheidung (zum Beispiel eine Buchung bestätigen).
• Kleine Mengen strukturierter Daten (zum Beispiel eine Landkarte, eine Bestellübersicht oder eine kurze Statusanzeige).
• Ein vollständig eigenständiges Widget oder Tool (zum Beispiel ein Audioplayer oder eine Punktetafel).

Layout

• Titel: Füge einen Titel hinzu, wenn deine Karte auf einem Dokument basiert oder Einträge mit einem übergeordneten Element enthält, etwa Songs in einer Playlist.
• Vergrößern: Öffne damit den Vollbildmodus, wenn die Karte multimediale oder interaktive Inhalte wie eine Landkarte oder ein interaktives Diagramm enthält.
• Mehr anzeigen: Blende damit weitere Einträge ein, wenn mehrere Ergebnisse in einer Liste dargestellt werden.
• Bedienelemente zum Bearbeiten: Ermögliche es, App-Antworten direkt inline zu bearbeiten, ohne das Gespräch zu überladen.
• Primäre Aktionen: Beschränke dich auf zwei Aktionen am unteren Rand der Karte. Aktionen sollten entweder einen Gesprächsschritt oder einen Tool-Aufruf auslösen.

Interaktion

Karten unterstützen einfache direkte Interaktionen.

• Zustände: Vorgenommene Änderungen werden dauerhaft gespeichert.
• Einfache direkte Änderungen: Wo es sinnvoll ist, lässt sich Text direkt inline bearbeiten. So sind schnelle Änderungen möglich, ohne dem Modell einen Prompt geben zu müssen.
• Dynamisches Layout: Die Höhe der Karte kann sich an den Inhalt anpassen, maximal bis zur Höhe des Anzeigebereichs auf Mobilgeräten.

Faustregeln

• Primäre Aktionen pro Karte begrenzen: Biete höchstens zwei Aktionen an, mit einer primären und einer optionalen sekundären Handlungsaufforderung.
• Keine verschachtelte Navigation oder mehrere Ansichten innerhalb einer Karte. Karten sollten keine mehrfach verschachtelten Detailansichten, Tabs oder tieferen Navigationsebenen enthalten. Erwäge, diese auf separate Karten oder Tool-Aktionen aufzuteilen.
• Keine verschachtelten Scrollbereiche. Karten sollten sich automatisch an ihren Inhalt anpassen und das Scrollen innerhalb der Karte verhindern.
• Keine doppelten Eingabemöglichkeiten. Bilde keine ChatGPT-Funktionen in einer Karte nach.

Inline-Karussell

Mehrere nebeneinander angeordnete Karten, mit denen sich verschiedene Optionen schnell überblicken und auswählen lassen.

Wann geeignet

• Zur Darstellung einer kurzen Liste ähnlicher Einträge (zum Beispiel Restaurants, Playlists oder Veranstaltungen).
• Wenn Einträge mehr visuelle Inhalte und Metadaten enthalten, als in einfache Zeilen passen.

Layout

• Bild: Einträge sollten immer ein Bild oder eine Grafik enthalten.
• Titel: Karusselleinträge sollten in der Regel einen Titel enthalten, der den Inhalt erläutert.
• Metadaten: Zeige mithilfe von Metadaten die Informationen zum Eintrag, die im Kontext der Antwort am wichtigsten und relevantesten sind. Vermeide mehr als zwei Textzeilen.
• Kennzeichnung: Verwende die Kennzeichnung, um bei Bedarf ergänzenden Kontext anzuzeigen.
• Aktionen: Biete nach Möglichkeit nur eine eindeutige Handlungsaufforderung pro Eintrag an.

Faustregeln

• Beschränke dich für eine gute Lesbarkeit auf 3–8 Einträge pro Karussell .
• Reduziere Metadaten auf die relevantesten Details in höchstens drei Zeilen.
• Jede Karte darf eine einzelne, optionale Handlungsaufforderung enthalten (zum Beispiel „Buchen“ oder „Wiedergeben“).
• Verwende auf allen Karten eine einheitliche visuelle Hierarchie.

Vollbild

Ansichten, die über die Inline-Karte hinausgehen und Raum für mehrstufige Arbeitsabläufe oder eine vertiefte Erkundung bieten. Der ChatGPT-Editor bleibt eingeblendet. So lässt sich im Kontext der Vollbildansicht weiterhin ganz natürlich „mit der App sprechen“.

Wann du diesen Modus verwenden solltest

• Umfangreiche Aufgaben, die sich nicht auf eine einzelne Karte beschränken lassen (zum Beispiel eine interaktive Karte mit Markierungen, eine Arbeitsfläche mit umfangreichen Bearbeitungsfunktionen oder ein interaktives Diagramm).
• Durchsuchen detaillierter Inhalte (zum Beispiel Immobilienangebote oder Speisekarten).

Layout

• Systemschaltfläche zum Schließen: Schließt das eingeblendete Bedienfeld oder die Ansicht.
• Vollbildansicht: Inhaltsbereich.
• Editor: Der native Editor von ChatGPT, über den Nutzende die Unterhaltung im Kontext der Vollbildansicht fortsetzen können.

Interaktion

• Chat-Bereich: Halte den Gesprächskontext neben der Vollbildansicht zugänglich.
• Nachdenken: Das Eingabefeld des Editors „schimmert“, um anzuzeigen, dass eine Antwort gestreamt wird.
• Antwort: Sobald das Modell seine Antwort abgeschlossen hat, erscheint kurzzeitig ein gekürzter Ausschnitt über dem Editor. Durch Antippen öffnet sich der Chat-Bereich.

Faustregeln

• Stimme deine UX auf den Systemeditor ab. Der Editor ist im Vollbildmodus immer vorhanden. Stelle daher sicher, dass deine Anwendung natürlich formulierte Prompts unterstützt, die Tool-Aufrufe auslösen können und sich für Nutzende vertraut anfühlen.
• Verwende den Vollbildmodus für Aufgaben, bei denen mehr Platz hilfreich ist. Vorhandene Editoren und Verwaltungsoberflächen können eingebettet werden, wenn sie der iframe-Richtlinie entsprechen.

Bild-in-Bild (PiP)

Ein dauerhaft eingeblendetes, schwebendes Fenster in ChatGPT, das für laufende oder Live-Sitzungen wie Spiele oder Videos optimiert ist. PiP bleibt sichtbar, während die Unterhaltung weitergeht, und kann sich als Reaktion auf Prompts der Nutzenden dynamisch aktualisieren.

Wann du diesen Modus verwenden solltest

• Aktivitäten, die parallel zur Unterhaltung laufen, etwa ein Spiel, eine Zusammenarbeit in Echtzeit, ein Quiz oder eine Lerneinheit.
• Situationen, in denen das PiP-Widget auf Chat-Eingaben reagieren kann, etwa indem es auf Anfrage eine Spielrunde fortsetzt oder Live-Daten aktualisiert.

Interaktion

• Aktiviert: Beim Scrollen bleibt das PiP-Fenster am oberen Rand des Anzeigebereichs fixiert
• Angepinnt: Das PiP-Fenster bleibt fixiert, bis es von der nutzenden Person geschlossen wird oder die Sitzung endet.
• Sitzungsende: Das PiP-Fenster kehrt an eine Position im Gesprächsverlauf zurück und wird beim Scrollen aus dem sichtbaren Bereich bewegt.

Faustregeln

• Stelle sicher, dass sich der PiP-Zustand aktualisieren oder das PiP-Fenster reagieren kann , wenn Nutzende über den Systemeditor interagieren.
• Schließe das PiP-Fenster automatisch , wenn die Sitzung endet.
• Überlade das PiP-Fenster nicht mit Bedienelementen oder statischen Inhalten , die besser in den Gesprächsverlauf oder die Vollbildansicht passen.

Richtlinien für die visuelle Gestaltung

Ein einheitliches Erscheinungsbild und Bedienverhalten sorgt dafür, dass sich Tools von Partnerunternehmen wie ein natürlicher Teil der ChatGPT-Plattform anfühlen. Visuelle Richtlinien unterstützen Klarheit, Benutzerfreundlichkeit und Barrierefreiheit und lassen zugleich an geeigneten Stellen Raum für die eigene Markenidentität.

Diese Grundsätze zeigen, wie sich Farben, Schrift, Abstände und Bilder einsetzen lassen, um die Übersichtlichkeit des Systems zu bewahren und Partnerunternehmen zugleich Raum zu geben, ihren Dienst von anderen abzuheben.

Warum das wichtig ist

Eine einheitliche Gestaltung und Bedienung verbessert das Gesamterlebnis bei der Nutzung von Apps in ChatGPT. Mit diesen Richtlinien können Partnerunternehmen ihre Tools so präsentieren, dass sie sich für Nutzende vertraut anfühlen und Mehrwert bieten, ohne abzulenken.

Farbe

Vom System vorgegebene Farbpaletten tragen dazu bei, dass Aktionen und Antworten stets zur ChatGPT-Plattform passen. Partnerunternehmen können ihre Marke durch Akzente, Symbole oder eingebettete Bilder sichtbar machen, sollten aber die Systemfarben nicht neu definieren.

Faustregeln

• Verwende Systemfarben für Text, Symbole und gliedernde Elemente wie Trennlinien.
• Markenakzente von Partnerunternehmen, etwa Logos oder Symbole, sollten Hintergründe oder Textfarben nicht überschreiben.
• Vermeide eigene Farbverläufe oder Muster, die das minimalistische Erscheinungsbild von ChatGPT stören.
• Verwende die Akzentfarben deiner Marke für primäre Schaltflächen in den Anzeigemodi der App.

Verwende Markenfarben für Akzente und Badges. Ändere keine Textfarben oder andere grundlegende Komponentenstile.

Färbe Hintergründe in Textbereichen nicht ein.

Typografie

ChatGPT verwendet die nativen Systemschriften der jeweiligen Plattform (SF Pro unter iOS, eine serifenlose Schrift unter Android), um Lesbarkeit und Barrierefreiheit auf allen Geräten sicherzustellen.

Faustregeln

• Übernimm immer den Font-Stack des Systems und halte dich an dessen Größenvorgaben für Überschriften, Fließtext und Bildunterschriften.
• Verwende eigene Formatierungen wie Fettdruck, Kursivschrift oder Hervorhebungen nur in Inhaltsbereichen, nicht für strukturelle Elemente der Benutzeroberfläche.
• Verwende möglichst wenige unterschiedliche Schriftgrößen und bevorzuge die Größen body und body-small.

Verwende keine eigenen Schriftarten, auch nicht im Vollbildmodus. Nutze nach Möglichkeit die Schriftvariablen des Systems.

Abstände und Layout

Einheitliche Außen- und Innenabstände sowie eine konsistente Ausrichtung sorgen dafür, dass Inhalte von Partnerunternehmen im Gesprächsverlauf leicht zu überblicken und verlässlich angeordnet sind.

Faustregeln

• Verwende für Karten, Sammlungen und Inspektorbereiche die Rasterabstände des Systems.
• Halte Innenabstände einheitlich und vermeide gedrängte Inhalte oder Text, der bis an die Ränder reicht.
• Halte dich nach Möglichkeit an die vom System vorgegebenen Eckenradien, damit die Formen einheitlich bleiben.
• Sorge für eine visuelle Hierarchie, indem du Überschrift, ergänzenden Text und CTA in einer klaren Reihenfolge anordnest.

Symbole und Bildmaterial

Systemsymbole sorgen für visuelle Klarheit. Logos und Bilder von Partnern helfen dabei, die zugehörige Marke zu erkennen.

Faustregeln

• Verwende entweder Systemsymbole oder eigene Symbole, die zum Erscheinungsbild von ChatGPT passen: einfarbig und als Konturen gestaltet.
• Füge dein Logo nicht in die Antwort ein. ChatGPT ergänzt dein Logo und den Namen deiner App immer, bevor das Widget gerendert wird.
• Alle Bilder müssen die vorgegebenen Seitenverhältnisse einhalten, um Verzerrungen zu vermeiden.

Barrierefreiheit

Jede von Partnern entwickelte Anwendung sollte für möglichst viele Menschen nutzbar sein. Barrierefreiheit sollte daher ein zentraler Aspekt sein, wenn du Apps für ChatGPT entwickelst.

Faustregeln

• Zwischen Text und Hintergrund muss ein Mindestkontrastverhältnis gemäß WCAG AA bestehen.
• Stelle für alle Bilder Alternativtexte bereit.
• Ermögliche die Anpassung der Textgröße, ohne dass das Layout beeinträchtigt wird.