Diretrizes de interface

Visão geral

Um plugin pode oferecer uma interface opcional que amplia o que os usuários podem fazer sem interromper a conversa. Use cartões, carrosséis, visualizações em tela cheia e outros modos de exibição somente quando a interação visual facilitar a tarefa.

Sistema de design

Para criar interfaces de qualidade que tenham a aparência de recursos nativos do ChatGPT, você pode usar a biblioteca de componentes @openai/apps-sdk-ui.

Ela oferece uma base de estilos com Tailwind, tokens de design definidos como variáveis CSS e uma coleção de componentes acessíveis e bem projetados.

O uso da biblioteca é opcional. Ela agiliza a criação de componentes que seguem o sistema de design do ChatGPT.

Modos de exibição

Os modos de exibição definem onde e como os desenvolvedores apresentam seus aplicativos no ChatGPT. Com eles, os parceiros podem oferecer conteúdo e ações que se integram naturalmente à conversa. Cada modo atende a um tipo específico de interação, desde confirmações rápidas até fluxos de trabalho imersivos.

Usar esses modos de forma consistente ajuda a manter a experiência simples e previsível.

Na conversa

Nesse modo, o aplicativo aparece diretamente no fluxo da conversa. Atualmente, o conteúdo exibido nesse modo sempre aparece antes da resposta gerada pelo modelo. Todo aplicativo aparece primeiro na conversa.

Layout

• Ícone e chamada de ferramenta: um rótulo com o nome e o ícone do aplicativo.
• Exibição na conversa: uma área compacta com o conteúdo do aplicativo acima da resposta do modelo.
• Continuação da conversa: uma resposta breve gerada pelo modelo aparece após o widget para sugerir alterações, próximos passos ou ações relacionadas. Evite repetir o conteúdo do cartão.

Cartão na conversa

Esses widgets leves têm uma única finalidade e aparecem diretamente na conversa. Eles oferecem confirmações rápidas, ações simples ou recursos visuais de apoio.

Quando usar

• Para uma única ação ou decisão, como confirmar uma reserva.
• Para exibir uma pequena quantidade de dados estruturados, como um mapa, um resumo do pedido ou uma breve atualização de status.
• Para oferecer um widget ou uma ferramenta que funcione de forma independente, como um reprodutor de áudio ou um placar.

Layout

• Título: inclua um título se o cartão se basear em um documento ou contiver itens que pertençam a um mesmo elemento, como as músicas de uma playlist.
• Expandir: use esse controle para abrir o modo de tela cheia se o cartão tiver conteúdo multimídia ou recursos interativos, como um mapa ou um diagrama interativo.
• Mostrar mais: use esse controle para exibir outros itens quando vários resultados aparecerem em uma lista.
• Controles de edição: permita editar as respostas do aplicativo diretamente no cartão, sem sobrecarregar a conversa.
• Ações principais: inclua no máximo duas ações e posicione-as na parte inferior do cartão. Cada ação deve iniciar um novo turno na conversa ou uma chamada de ferramenta.

Interação

Os cartões permitem interações simples e diretas.

• Estados: as alterações ficam salvas.
• Edições simples e diretas: quando fizer sentido, permita editar o texto no próprio cartão para que os usuários façam ajustes rápidos sem precisar enviar um prompt ao modelo.
• Layout dinâmico: a altura do cartão pode aumentar para acomodar o conteúdo, até o limite da altura da área de exibição do dispositivo móvel.

Recomendações práticas

• Limite as ações principais por cartão: ofereça no máximo duas ações, com uma chamada para ação (CTA) principal e uma secundária opcional.
• Não use navegação em vários níveis nem múltiplas visualizações no mesmo cartão. Os cartões não devem conter vários caminhos para telas de detalhes, abas ou níveis adicionais de navegação. Considere distribuir esses recursos entre cartões distintos ou oferecê-los como ações de ferramenta separadas.
• Não use rolagem aninhada. Os cartões devem se ajustar automaticamente ao conteúdo para evitar a rolagem interna.
• Não duplique campos de entrada. Não reproduza recursos do ChatGPT dentro de um cartão.

Carrossel na conversa

Um carrossel apresenta cartões lado a lado para que os usuários possam examinar rapidamente as opções e escolher uma delas.

Quando usar

• Para apresentar uma lista curta de itens semelhantes, como restaurantes, playlists ou eventos.
• Quando as linhas de uma lista simples não comportam todo o conteúdo visual e os metadados dos itens.

Layout

• Imagem: cada item deve sempre incluir uma imagem ou outro elemento visual.
• Título: em geral, cada item do carrossel deve ter um título que explique seu conteúdo.
• Metadados: mostre as informações mais importantes sobre o item que sejam relevantes para a resposta. Evite exibir mais de duas linhas de texto.
• Selo: quando fizer sentido, use um selo para dar contexto adicional.
• Ações: sempre que possível, ofereça uma única CTA clara por item.

Recomendações práticas

• Use de 3 a 8 itens por carrossel para facilitar a leitura.
• Mostre apenas os metadados mais relevantes, em no máximo três linhas.
• Cada cartão pode ter uma única CTA opcional, como “Reservar” ou “Reproduzir”.
• Use a mesma hierarquia visual em todos os cartões.

Tela cheia

O modo de tela cheia expande a experiência para além do cartão na conversa e dá aos usuários espaço para realizar tarefas em várias etapas ou explorar o conteúdo em detalhes. O editor do ChatGPT permanece sobreposto à interface, permitindo que os usuários continuem a “conversar com o aplicativo” de forma natural no contexto da visualização em tela cheia.

Quando usar

• Para tarefas complexas que não cabem em um único cartão, como interagir com um mapa com marcadores, usar uma área de edição com vários recursos ou explorar um diagrama interativo.
• Para consultar conteúdo detalhado, como anúncios de imóveis ou 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: o editor nativo do ChatGPT permite que o usuário continue a conversa no contexto da visualização em tela cheia.

Interação

• Painel de chat: mantenha o contexto da conversa acessível junto à interface em tela cheia.
• Processamento: um efeito de brilho no campo de mensagem do editor indica que a resposta está sendo transmitida em tempo real.
• Resposta: quando o modelo termina de responder, um trecho abreviado da resposta aparece por alguns instantes acima do editor. Ao tocar no trecho, o usuário abre o painel de chat.

Recomendações práticas

• Projete a experiência para funcionar com o editor do sistema. O editor está sempre presente em tela cheia. Por isso, permita que os usuários enviem prompts que soem naturais na conversa e possam acionar chamadas de ferramenta.
• Use a tela cheia para tarefas que se beneficiam de mais espaço. Você pode incorporar editores e interfaces de administração existentes que atendam à política de iframes.

Imagem em imagem (PiP)

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

Quando usar

• Para atividades que acontecem em paralelo à conversa, como jogos, colaboração ao vivo, testes de conhecimentos ou sessões de aprendizagem.
• Em situações em que o widget PiP pode reagir às mensagens do chat, por exemplo, dando continuidade a uma rodada de um jogo ou atualizando dados em tempo real a pedido do usuário.

Interação

• Ativação: quando o usuário rola o conteúdo, a janela PiP fica fixa no topo da área de exibição.
• Janela fixada: a janela PiP permanece fixa até que o usuário a feche ou a sessão termine.
• Fim da sessão: a janela PiP volta à sua posição na conversa e sai de vista conforme o usuário rola o conteúdo.

Recomendações práticas

• Permita que o widget PiP atualize seu estado ou responda quando os usuários interagirem pelo editor do sistema.
• Feche a janela PiP automaticamente quando a sessão terminar.
• Não sobrecarregue a janela PiP com controles ou conteúdo estático que funcionariam melhor na conversa ou em tela cheia.

Diretrizes de design visual

Uma aparência e um comportamento consistentes ajudam as ferramentas criadas por parceiros a se integrar naturalmente ao ChatGPT. As diretrizes visuais promovem clareza, usabilidade e acessibilidade e indicam onde há espaço para expressar a identidade da marca.

Esses princípios orientam o uso de cores, tipografia, espaçamento e imagens para que a interface continue clara e os parceiros possam diferenciar seus serviços.

Por que isso é importante

A consistência visual e de interação ajuda a melhorar a experiência de quem usa aplicativos no ChatGPT. Ao seguir estas diretrizes, os parceiros podem apresentar suas ferramentas de forma familiar aos usuários e ajudá-los a realizar suas tarefas sem distrações.

Cores

As paletas definidas pelo sistema ajudam a manter a aparência das ações e respostas consistente com a do ChatGPT. Os parceiros podem expressar a identidade da marca em detalhes visuais, ícones ou imagens na conversa, mas não devem redefinir as cores do sistema.

Recomendações práticas

• Use as cores do sistema em textos, ícones e elementos que organizam o espaço, como divisórias.
• Elementos de destaque da marca do parceiro, como logotipos ou ícones, não devem alterar as cores de fundo ou 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 principais 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 básicos dos componentes.

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

Tipografia

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

Recomendações práticas

• Sempre herde a sequência de fontes do sistema e respeite as regras de tamanho para títulos, corpo do texto e legendas.
• Use estilos próprios do parceiro, como negrito, itálico ou realce, somente nas áreas de conteúdo. Mantenha os estilos do sistema nos elementos estruturais da interface.
• Limite ao máximo a variação no tamanho da fonte. Dê preferência aos tamanhos padrão e pequeno do corpo do texto.

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

Espaçamento e layout

Margens, espaçamento interno e alinhamento consistentes facilitam a leitura rápida do conteúdo dos parceiros e tornam sua disposição previsível na conversa.

Recomendações práticas

• Use o espaçamento da grade do sistema nos cartões, nas coleções e nos painéis de inspeção.
• Mantenha o espaçamento interno consistente. Evite amontoar elementos ou estender o texto de uma borda à outra.
• Sempre que possível, use os raios de arredondamento dos cantos definidos pelo sistema para manter as formas consistentes.
• Mantenha uma hierarquia visual clara, apresentando o título, o texto de apoio e a CTA nessa ordem.

Ícones e imagens

Os ícones do sistema dão clareza à interface, enquanto os logotipos e as imagens dos parceiros ajudam os usuários a identificar a marca.

Recomendações práticas

• Use ícones do sistema ou crie ícones que sigam o estilo visual do ChatGPT, com uma única cor e traços de contorno.
• Não inclua seu logotipo na resposta. O ChatGPT sempre acrescenta o 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

O maior número possível de pessoas deve conseguir usar cada experiência criada pelos parceiros. Faça da acessibilidade uma prioridade ao desenvolver aplicativos para o ChatGPT.

Recomendações práticas

• Mantenha a relação mínima de contraste entre o texto e o fundo exigida pelo nível AA das WCAG.
• Forneça texto alternativo para todas as imagens.
• Permita redimensionar o texto sem comprometer o layout.