Pautas de interfaz de usuario

Descripción general

Las interfaces de usuario opcionales de los complementos pueden ampliar lo que los usuarios pueden hacer sin interrumpir el flujo de la conversación. Usa tarjetas, carruseles, vistas de pantalla completa y otros modos de visualización solo cuando la interacción visual mejore el flujo de trabajo.

Sistema de diseño

Para diseñar interfaces de usuario de alta calidad que se sientan nativas de ChatGPT, puedes usar la biblioteca de componentes @openai/apps-sdk-ui.

Ofrece bases de estilo con Tailwind, tokens de diseño mediante variables CSS y una biblioteca de componentes accesibles y cuidadosamente diseñados.

La biblioteca de componentes es opcional. Ofrece una forma más rápida de crear componentes que se ajusten al sistema de diseño de ChatGPT.

Modos de visualización

Los modos de visualización son los espacios de interfaz que usan los desarrolladores para crear experiencias de apps en ChatGPT. Permiten a los socios mostrar contenido y acciones que se integran de forma natural en la conversación. Cada modo está diseñado para un tipo específico de interacción, desde confirmaciones rápidas hasta flujos de trabajo inmersivos.

Usarlos de forma consistente ayuda a mantener las experiencias sencillas y predecibles.

Integrado en la conversación

El modo de visualización integrado aparece directamente en el flujo de la conversación. Actualmente, las interfaces integradas siempre aparecen antes de la respuesta generada por el modelo. Todas las apps aparecen inicialmente integradas en la conversación.

Distribución

• Ícono y llamada a herramienta: una etiqueta con el nombre y el ícono de la app.
• Vista integrada: una vista ligera con contenido de la app integrado encima de la respuesta del modelo.
• Seguimiento: una respuesta breve generada por el modelo que se muestra después del widget para sugerir cambios, próximos pasos o acciones relacionadas. Evita el contenido que repita lo que ya aparece en la tarjeta.

Tarjeta integrada en la conversación

Widgets ligeros con un único propósito, integrados directamente en la conversación. Ofrecen confirmaciones rápidas, acciones básicas o recursos visuales de apoyo.

Cuándo usarla

• Una sola acción o decisión (por ejemplo, confirmar una reserva).
• Pequeñas cantidades de datos estructurados (por ejemplo, un mapa, un resumen de pedido o una vista rápida del estado).
• Un widget o una herramienta completamente independiente (por ejemplo, un reproductor de audio o una tarjeta de puntuación).

Distribución

• Título: incluye un título si tu tarjeta se basa en un documento o contiene elementos que pertenecen a un elemento superior, como canciones de una lista de reproducción.
• Expandir: úsalo para abrir un modo de visualización de pantalla completa si la tarjeta contiene contenido multimedia enriquecido o elementos interactivos, como un mapa o un diagrama interactivo.
• Mostrar más: úsalo para mostrar elementos adicionales si se presentan varios resultados en una lista.
• Controles de edición: ofrece opciones integradas para editar las respuestas de la app sin sobrecargar la conversación.
• Acciones principales: limita las acciones a dos y colócalas en la parte inferior de la tarjeta. Las acciones deben iniciar un turno de conversación o una llamada a herramienta.

Interacción

Las tarjetas permiten interacciones directas básicas.

• Estados: los cambios realizados se guardan.
• Ediciones directas básicas: cuando sea apropiado, el texto editable en la propia tarjeta permite a los usuarios hacer cambios rápidos sin necesidad de enviar un prompt al modelo.
• Distribución dinámica: la tarjeta puede aumentar su altura para ajustarse a su contenido, hasta alcanzar la altura del área de visualización del dispositivo móvil.

Reglas prácticas

• Limita las acciones principales por tarjeta: permite un máximo de dos acciones, con una llamada a la acción principal y una secundaria opcional.
• Evita la navegación por varios niveles y las vistas múltiples dentro de una tarjeta. Las tarjetas no deben contener múltiples accesos a vistas de detalle, pestañas ni niveles adicionales de navegación. Considera dividirlos en tarjetas o acciones de herramientas independientes.
• Evita el desplazamiento anidado. Las tarjetas deben ajustarse automáticamente a su contenido y evitar el desplazamiento interno.
• No dupliques los controles de entrada. No repliques las funciones de ChatGPT en una tarjeta.

Carrusel integrado en la conversación

Un conjunto de tarjetas que se muestran una junto a otra y permiten a los usuarios revisar rápidamente varias opciones y elegir entre ellas.

Cuándo usarlo

• Para presentar una lista breve de elementos similares (por ejemplo, restaurantes, listas de reproducción o eventos).
• Cuando los elementos tienen más contenido visual y metadatos de los que caben en filas sencillas.

Distribución

• Imagen: los elementos siempre deben incluir una imagen o un recurso visual.
• Título: por lo general, los elementos del carrusel deben incluir un título que explique el contenido.
• Metadatos: usa los metadatos para mostrar la información más importante y relevante sobre el elemento en el contexto de la respuesta. Evita mostrar más de dos líneas de texto.
• Insignia: usa la insignia para mostrar contexto adicional cuando corresponda.
• Acciones: ofrece una sola llamada a la acción clara por elemento siempre que sea posible.

Reglas prácticas

• Mantén 3–8 elementos por carrusel para facilitar la lectura.
• Limita los metadatos a los detalles más relevantes, con un máximo de tres líneas.
• Cada tarjeta puede tener una sola llamada a la acción opcional (por ejemplo, “Reservar” o “Reproducir”).
• Usa una jerarquía visual consistente en todas las tarjetas.

pantalla completa

Experiencias inmersivas que se expanden más allá de la tarjeta integrada en la conversación y ofrecen a los usuarios espacio para flujos de trabajo de varios pasos o una exploración más profunda. El editor de ChatGPT permanece superpuesto, lo que permite a los usuarios seguir “hablando con la app” mediante una conversación natural en el contexto de la vista de pantalla completa.

Cuándo usarlo

• Tareas complejas que no pueden reducirse a una sola tarjeta (por ejemplo, un mapa interactivo con marcadores, un lienzo con funciones avanzadas de edición o un diagrama interactivo).
• Explorar contenido detallado (por ejemplo, anuncios inmobiliarios o menús).

Distribución

• Control de cierre del sistema: cierra el panel o la vista.
• Vista de pantalla completa: área de contenido.
• Editor: editor nativo de ChatGPT que permite al usuario continuar la conversación en el contexto de la vista de pantalla completa.

Interacción

• Panel de chat: mantén el contexto de la conversación junto a la superficie de pantalla completa.
• Pensamiento: el campo de entrada del editor muestra un efecto de “brillo” para indicar que se está transmitiendo una respuesta.
• Respuesta: cuando el modelo termina su respuesta, aparece temporalmente un fragmento truncado encima del editor. Al tocarlo, se abre el panel de chat.

Reglas prácticas

• Diseña tu experiencia de usuario para que funcione con el editor del sistema. El editor siempre está presente en pantalla completa, así que asegúrate de que tu experiencia admita prompts conversacionales que puedan activar llamadas a herramientas y resulten naturales para los usuarios.
• Usa la pantalla completa para tareas que se beneficien de tener más espacio. Se pueden integrar editores e interfaces de administración existentes cuando cumplan con la política sobre iframes.

Imagen en imagen (PiP)

Una ventana flotante persistente dentro de ChatGPT, optimizada para sesiones en curso o en vivo, como juegos o videos. PiP permanece visible mientras continúa la conversación y puede actualizarse dinámicamente en respuesta a los prompts del usuario.

Cuándo usarlo

• Actividades que se desarrollan en paralelo a la conversación, como un juego, una colaboración en vivo, un cuestionario o una sesión de aprendizaje.
• Situaciones en las que el widget PiP puede reaccionar a lo que se escribe en el chat, por ejemplo, continuando una ronda de juego o actualizando datos en vivo a partir de una solicitud del usuario.

Interacción

• Activado: al desplazarse por el contenido, la ventana PiP permanece fija en la parte superior del área de visualización
• Fijado: el widget PiP permanece fijo hasta que el usuario lo cierra o termina la sesión.
• Fin de la sesión: el widget PiP vuelve a integrarse en el flujo de la conversación y deja de verse al desplazarse por el contenido.

Reglas prácticas

• Asegúrate de que el estado de PiP pueda actualizarse o responder cuando los usuarios interactúen a través del editor del sistema.
• Cierra PiP automáticamente cuando termine la sesión.
• No sobrecargues PiP con controles o contenido estático que encajen mejor en el flujo de la conversación o en pantalla completa.

Pautas de diseño visual

Una apariencia y un comportamiento coherentes ayudan a que las herramientas creadas por socios se sientan como una parte natural de la plataforma ChatGPT. Las pautas visuales promueven la claridad, la facilidad de uso y la accesibilidad, y dejan espacio para expresar la identidad de marca en los lugares adecuados.

Estos principios describen cómo usar el color, la tipografía, el espaciado y las imágenes para preservar la claridad del sistema y, a la vez, dar a los socios espacio para diferenciar su servicio.

Por qué es importante

La coherencia visual y de la experiencia de usuario ayuda a mejorar la experiencia general al usar apps en ChatGPT. Al seguir estas pautas, los socios pueden presentar sus herramientas de una forma que resulte coherente para los usuarios y aporte valor sin distracciones.

Color

Las paletas definidas por el sistema ayudan a que las acciones y las respuestas siempre sean coherentes con la plataforma ChatGPT. Los socios pueden incorporar su identidad de marca mediante detalles visuales, íconos o imágenes integradas en la conversación, pero no deben redefinir los colores del sistema.

Reglas prácticas

• Usa los colores del sistema para el texto, los íconos y los elementos que delimitan espacios, como los separadores.
• Los detalles de marca de los socios, como logotipos o íconos, no deben modificar los fondos ni los colores del texto.
• Evita degradados o patrones personalizados que rompan con la apariencia minimalista de ChatGPT.
• Usa los colores de acento de la marca en los botones principales dentro de los modos de visualización de la app.

Usa los colores de la marca en detalles visuales e insignias. No cambies los colores del texto ni otros estilos básicos de los componentes.

No apliques colores a los fondos de las áreas de texto.

Tipografía

ChatGPT usa fuentes del sistema nativas de cada plataforma (SF Pro en iOS y una fuente sans serif en Android) para garantizar la legibilidad y la accesibilidad en distintos dispositivos.

Reglas prácticas

• Hereda siempre la lista de fuentes del sistema y respeta sus reglas de tamaño para encabezados, texto del cuerpo y leyendas.
• Usa estilos propios del socio, como negrita, cursiva o resaltado, solo dentro de las áreas de contenido, no en los elementos estructurales de la interfaz.
• Limita al máximo las variaciones de tamaño de fuente y da preferencia a los tamaños body y body-small.

No uses fuentes personalizadas, ni siquiera en los modos de pantalla completa. Usa las variables de fuentes del sistema siempre que sea posible.

Espaciado y distribución

La coherencia en los márgenes, el espaciado interno y la alineación hace que el contenido de los socios sea fácil de revisar de un vistazo y predecible dentro de la conversación.

Reglas prácticas

• Usa el espaciado de la cuadrícula del sistema para tarjetas, colecciones y paneles de inspección.
• Mantén un espaciado interno uniforme y evita amontonar el contenido o extender el texto de borde a borde.
• Respeta el redondeado de las esquinas especificado por el sistema siempre que sea posible para mantener la coherencia de las formas.
• Mantén la jerarquía visual con un orden claro para el título, el texto de apoyo y la llamada a la acción.

Íconos e imágenes

Los íconos del sistema aportan claridad visual, mientras que los logotipos e imágenes de los socios ayudan a los usuarios a identificar la marca.

Reglas prácticas

• Usa íconos del sistema o íconos personalizados que se ajusten al estilo visual de ChatGPT: monocromáticos y de contorno.
• No incluyas tu logotipo como parte de la respuesta. ChatGPT siempre agregará tu logotipo y el nombre de tu app antes de que se muestre el widget.
• Todas las imágenes deben respetar las relaciones de aspecto establecidas para evitar distorsiones.

Accesibilidad

Todas las experiencias creadas por socios deberían ser utilizables por el público más amplio posible. La accesibilidad debería ser una consideración fundamental al crear apps para ChatGPT.

Reglas prácticas

• El texto y el fondo deben mantener una relación de contraste mínima (WCAG AA).
• Proporciona texto alternativo para todas las imágenes.
• Permite cambiar el tamaño del texto sin alterar la estructura del diseño.