Diretrizes de interface

Visão geral

Uma interface opcional de plug-in pode ampliar o que os usuários conseguem fazer sem interromper o fluxo da conversa. Use cartões, carrosséis, visualizações em tela cheia e outros modos de exibição somente quando a interação visual melhorar o fluxo de trabalho.

Sistema de design

Para criar interfaces de alta qualidade que pareçam nativas do ChatGPT, você pode usar a biblioteca de componentes @openai/apps-sdk-ui.

Ela oferece uma base de estilização com Tailwind, tokens de design em variáveis CSS e uma biblioteca de componentes acessíveis e bem elaborados.

A biblioteca de componentes é opcional. Ela oferece uma maneira mais rápida de criar componentes alinhados ao sistema de design do ChatGPT.

Modos de exibição

Os modos de exibição são as áreas de interface que os desenvolvedores usam para criar experiências de aplicativos no ChatGPT. Eles permitem que os parceiros mostrem conteúdo e ações que se integram naturalmente à conversa. Cada modo foi projetado para um tipo específico de interação, de confirmações rápidas a fluxos de trabalho imersivos.

Usar esses modos de maneira consistente ajuda a manter as experiências simples e previsíveis.

Na conversa

O modo de exibição na conversa aparece diretamente no fluxo da conversa. Atualmente, as interfaces nesse modo sempre aparecem antes da resposta gerada pelo modelo. Todo aplicativo é exibido inicialmente na conversa.

Estrutura

• Ícone e chamada de ferramenta: Um rótulo com o nome e o ícone do aplicativo.
• Exibição na conversa: Uma interface leve com o conteúdo do aplicativo incorporado acima da resposta do modelo.
• Continuação: Uma resposta curta gerada pelo modelo, exibida após o widget para sugerir edições, próximos passos ou ações relacionadas. Evite repetir o conteúdo do cartão.

Cartão na conversa

Widgets leves, com uma única finalidade, incorporados diretamente à conversa. Eles oferecem confirmações rápidas, ações básicas ou recursos visuais de apoio.

Quando usar

• Uma única ação ou decisão (por exemplo, confirmar uma reserva).
• Pequenas quantidades de dados estruturados (por exemplo, um mapa, um resumo de pedido ou uma visão rápida do status).
• Um widget ou uma ferramenta totalmente independente (por exemplo, um reprodutor de áudio ou um placar).

Estrutura

• Título: Inclua um título se o cartão for baseado em um documento ou contiver itens vinculados a um elemento pai, como músicas em uma playlist.
• Expandir: Use para abrir o modo de exibição em tela cheia se o cartão contiver mídia avançada ou recursos interativos, como um mapa ou um diagrama interativo.
• Mostrar mais: Use para revelar itens adicionais quando vários resultados forem apresentados em uma lista.
• Controles de edição: Ofereça suporte à edição das respostas do aplicativo diretamente na conversa, sem sobrecarregá-la.
• Ações principais: Limite a duas ações, posicionadas na parte inferior do cartão. As ações devem iniciar um turno de conversa ou uma chamada de ferramenta.

Interação

Os cartões permitem interações diretas básicas.

• Estados: As edições feitas são salvas.
• Edições diretas básicas: Quando apropriado, o texto editável na própria conversa permite que os usuários façam edições rápidas sem precisar enviar um prompt ao modelo.
• Estrutura dinâmica: A altura do cartão pode aumentar para acomodar seu conteúdo, até o limite da altura da área de exibição do dispositivo móvel.

Regras práticas

• Limite as ações principais por cartão: Ofereça no máximo duas ações, com uma chamada para ação principal e uma secundária opcional.
• Não inclua navegação em vários níveis nem múltiplas visualizações em um cartão. Os cartões não devem conter várias camadas de detalhamento, abas ou navegação em níveis mais profundos. Considere dividir esses recursos em cartões ou ações de ferramenta separados.
• Não use rolagem aninhada. Os cartões devem se ajustar automaticamente ao conteúdo e impedir a rolagem interna.
• Não duplique campos de entrada. Não reproduza recursos do ChatGPT em um cartão.

Carrossel na conversa

Um conjunto de cartões apresentados lado a lado, permitindo que os usuários examinem rapidamente várias opções e escolham entre elas.

Quando usar

• Para apresentar uma lista curta de itens semelhantes (por exemplo, restaurantes, playlists ou eventos).
• Quando os itens têm mais conteúdo visual e metadados do que cabe em linhas simples.

Estrutura

• Imagem: Os itens devem sempre incluir uma imagem ou um elemento visual.
• Título: Em geral, os itens do carrossel devem incluir um título que explique o conteúdo.
• Metadados: Use metadados para mostrar as informações mais importantes e relevantes sobre o item no contexto da resposta. Evite exibir mais de duas linhas de texto.
• Selo: Use o selo para mostrar contexto complementar quando apropriado.
• Ações: Sempre que possível, ofereça uma única chamada para ação clara por item.

Regras práticas

• Mantenha 3–8 itens por carrossel para facilitar a leitura.
• Restrinja os metadados aos detalhes mais relevantes, com no máximo três linhas.
• Cada cartão pode ter uma única chamada para ação opcional (por exemplo, “Reservar” ou “Reproduzir”).
• Use uma hierarquia visual consistente entre os cartões.

tela cheia

Experiências imersivas que se expandem além do cartão na conversa, dando aos usuários espaço para fluxos de trabalho com várias etapas ou uma exploração mais aprofundada. O editor do ChatGPT permanece sobreposto, permitindo que os usuários continuem “conversando com o aplicativo” de forma natural, no contexto da visualização em tela cheia.

Quando usar

• Tarefas com muitos recursos que não cabem em um único cartão (por exemplo, um mapa interativo com marcadores, uma área de edição com recursos avançados ou um diagrama interativo).
• Navegação por conteúdo detalhado (por exemplo, anúncios de imóveis e cardápios).

Layout

• Controle de fechamento do sistema: Fecha o painel ou a visualização.
• visualização em tela cheia: Área de conteúdo.
• Editor: Editor nativo do ChatGPT, que permite ao usuário continuar a conversa no contexto da visualização em tela cheia.

Interação

• Painel de chat: Mantenha o contexto da conversa junto à interface em tela cheia.
• Pensando: O campo de entrada do editor exibe um efeito de brilho para indicar que uma resposta está sendo transmitida por streaming.
• Resposta: Quando o modelo conclui a resposta, um trecho truncado aparece temporariamente acima do editor. Tocar nele abre o painel de chat.

Regras práticas

• Projete sua UX para funcionar com o editor do sistema. O editor está sempre presente em tela cheia, então garanta que sua experiência aceite prompts de conversa que possam acionar chamadas de ferramentas e sejam naturais para os usuários.
• Use a tela cheia para tarefas que se beneficiam de mais espaço. Editores e interfaces de administração existentes podem ser incorporados quando atendem à política de iframes.

Imagem em imagem (PiP)

Uma janela flutuante persistente dentro do ChatGPT, otimizada para sessões contínuas ou ao vivo, como jogos ou vídeos. O PiP permanece visível enquanto a conversa continua e pode ser atualizado dinamicamente em resposta aos prompts do usuário.

Quando usar

• Atividades que ocorrem em paralelo à conversa, como um jogo, uma colaboração ao vivo, um questionário ou uma sessão de aprendizado.
• Situações em que o widget PiP pode reagir às mensagens do chat, por exemplo, continuando uma rodada de jogo ou atualizando dados em tempo real com base em uma solicitação do usuário.

Interação

• Ativado: Durante a rolagem, a janela PiP permanece fixa no topo da área de exibição
• Fixado: O PiP permanece fixo até que o usuário o feche ou a sessão termine.
• Fim da sessão: O PiP volta à sua posição no fluxo da conversa e sai da área visível com a rolagem.

Regras práticas

• Garanta que o estado do PiP possa ser atualizado ou reagir quando os usuários interagirem pelo editor do sistema.
• Feche o PiP automaticamente quando a sessão terminar.
• Não sobrecarregue o PiP com controles ou conteúdo estático mais adequados à exibição no fluxo da conversa ou em tela cheia.

Diretrizes de design visual

Uma aparência e um comportamento consistentes ajudam as ferramentas criadas por parceiros a parecerem parte natural da plataforma ChatGPT. As diretrizes visuais promovem clareza, usabilidade e acessibilidade, sem deixar de reservar espaço para a identidade da marca nos lugares certos.

Estes princípios orientam o uso de cores, tipografia, espaçamento e imagens para preservar a clareza do sistema e, ao mesmo tempo, dar aos parceiros espaço para diferenciar seus serviços.

Por que isso importa

A consistência visual e de UX ajuda a melhorar a experiência geral de uso de aplicativos no ChatGPT. Ao seguir estas diretrizes, os parceiros podem apresentar suas ferramentas de forma consistente para os usuários e oferecer valor sem distrações.

Cor

As paletas definidas pelo sistema ajudam a garantir que ações e respostas sejam sempre consistentes com a plataforma ChatGPT. Os parceiros podem incorporar sua identidade visual por meio de detalhes de destaque, ícones ou imagens no fluxo da conversa, mas não devem redefinir as cores do sistema.

Regras práticas

• Use as cores do sistema em textos, ícones e elementos de organização do espaço, como divisores.
• Elementos de destaque da marca do parceiro, como logotipos ou ícones, não devem substituir os fundos nem as cores do texto.
• Evite gradientes ou padrões personalizados que destoem do visual minimalista do ChatGPT.
• Use as cores de destaque da marca nos botões primários dos modos de exibição do aplicativo.

Use as cores da marca em detalhes de destaque e selos. Não altere as cores do texto nem outros estilos fundamentais dos componentes.

Não aplique cores ao fundo das áreas de texto.

Tipografia

O ChatGPT usa fontes de sistema nativas de cada plataforma (SF Pro no iOS e uma fonte sem serifa no Android) para garantir legibilidade e acessibilidade em diferentes dispositivos.

Regras práticas

• Sempre herde a lista de fontes do sistema, respeitando suas regras de tamanho para títulos, corpo do texto e legendas.
• Use a estilização do parceiro, como negrito, itálico ou destaques, apenas nas áreas de conteúdo, não nos elementos estruturais da interface.
• Limite ao máximo a variação no tamanho das fontes, dando preferência aos tamanhos body e body-small.

Não use fontes personalizadas, nem mesmo nos modos de tela cheia. Use as variáveis de fonte do sistema sempre que possível.

Espaçamento e layout

Margens, espaçamentos internos e alinhamentos consistentes tornam o conteúdo dos parceiros fácil de examinar e previsível dentro da conversa.

Regras práticas

• Use o espaçamento da grade do sistema em cartões, coleções e painéis de inspeção.
• Mantenha o espaçamento interno consistente e evite amontoar conteúdo ou deixar o texto encostado nas bordas.
• Respeite os arredondamentos de canto especificados pelo sistema sempre que possível para manter a consistência das formas.
• Mantenha a hierarquia visual com título, texto de apoio e CTA em uma ordem clara.

Ícones e imagens

Os ícones do sistema proporcionam clareza visual, enquanto os logotipos e as imagens dos parceiros ajudam os usuários a reconhecer a marca no contexto.

Regras práticas

• Use ícones do sistema ou ícones personalizados que combinem com o estilo visual do ChatGPT: monocromáticos e de contorno.
• Não inclua seu logotipo na resposta. O ChatGPT sempre adicionará seu logotipo e o nome do aplicativo antes de renderizar o widget.
• Todas as imagens devem respeitar as proporções exigidas para evitar distorções.

Acessibilidade

Toda experiência criada por parceiros deve ser utilizável pelo maior público possível. A acessibilidade deve ser uma preocupação central ao criar aplicativos para o ChatGPT.

Regras práticas

• O texto e o fundo devem manter uma relação mínima de contraste (WCAG AA).
• Forneça texto alternativo para todas as imagens.
• Permita o redimensionamento do texto sem comprometer os layouts.