Pautas de diseño de interfaces

Descripción general

Los complementos pueden ofrecer una interfaz opcional que permita a los usuarios hacer más cosas sin interrumpir 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 alta calidad que se integren de forma natural en ChatGPT, puedes usar la biblioteca de componentes @openai/apps-sdk-ui.

La biblioteca ofrece una base de estilos con Tailwind, tokens de diseño definidos como variables CSS y componentes accesibles con un diseño cuidado.

El uso de la biblioteca es opcional. Te permite crear más rápido componentes que siguen el sistema de diseño de ChatGPT.

Modos de visualización

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

Usar estos modos de manera consistente ayuda a que la experiencia sea sencilla y predecible.

Dentro de la conversación

En este modo, la interfaz aparece directamente en el flujo de la conversación. Actualmente, las interfaces integradas siempre aparecen antes de la respuesta que genera el modelo. Todas las apps se muestran inicialmente en este modo.

Estructura

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

Tarjeta integrada

Las tarjetas son widgets sencillos que cumplen una sola función y se integran directamente en la conversación. Sirven para mostrar confirmaciones rápidas, ofrecer acciones básicas o presentar información visual de apoyo.

Cuándo usarla

• Para una sola acción o decisión (por ejemplo, confirmar una reserva).
• Para mostrar una pequeña cantidad de datos estructurados (por ejemplo, un mapa, el resumen de un pedido o una breve actualización de estado).
• Para ofrecer un widget o una herramienta que funcione de manera independiente (por ejemplo, un reproductor de audio o una tarjeta de puntuación).

Estructura

• Título: incluye un título si la tarjeta se basa en un documento o contiene elementos agrupados bajo un elemento principal, como las canciones de una lista de reproducción.
• Ampliar: usa esta opción para abrir una vista de pantalla completa si la tarjeta incluye contenido multimedia o elementos interactivos, como un mapa o un diagrama interactivo.
• Mostrar más: usa esta opción para mostrar elementos adicionales cuando presentes varios resultados en una lista.
• Controles de edición: permite editar las respuestas de la app directamente en la tarjeta sin sobrecargar la conversación.
• Acciones principales: incluye como máximo dos acciones y colócalas en la parte inferior de la tarjeta. Cada acción debe iniciar un turno de conversación o una llamada a una herramienta.

Interacción

Las tarjetas permiten interacciones directas y sencillas.

• Estados: los cambios se conservan.
• Edición directa básica: cuando sea apropiado, permite editar el texto directamente en la tarjeta para que los usuarios puedan hacer cambios rápidos sin tener que pedírselos al modelo.
• Diseño dinámico: la tarjeta puede aumentar de altura para ajustarse a su contenido, hasta alcanzar la altura del área de visualización del dispositivo móvil.

Recomendaciones

• Limita las acciones principales por tarjeta: incluye como máximo dos acciones, con un llamado a la acción principal y otro secundario opcional.
• Evita la navegación por niveles y las vistas múltiples dentro de una tarjeta. Las tarjetas no deben contener varias vistas de detalle, pestañas ni niveles adicionales de navegación. Considera distribuir el contenido en tarjetas independientes u ofrecer acciones de herramienta por separado.
• Evita el desplazamiento anidado. Las tarjetas deben ajustarse automáticamente a su contenido para evitar el desplazamiento interno.
• Evita duplicar los controles de entrada. No reproduzcas funciones de ChatGPT dentro de una tarjeta.

Carrusel integrado

Un carrusel muestra varias tarjetas una junto a otra para que los usuarios puedan revisar las opciones rápidamente y elegir una.

Cuándo usarlo

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

Estructura

• Imagen: cada elemento debe incluir siempre una imagen u otro recurso visual.
• Título: por lo general, cada elemento del carrusel debe incluir un título que describa su contenido.
• Metadatos: usa los metadatos para mostrar la información más importante y pertinente sobre el elemento en el contexto de la respuesta. Evita mostrar más de dos líneas de texto.
• Insignia: usa la insignia para aportar contexto adicional cuando corresponda.
• Acciones: siempre que sea posible, incluye un solo llamado a la acción claro por elemento.

Recomendaciones

• Incluye de 3 a 8 elementos por carrusel para facilitar la lectura.
• Limita los metadatos a los detalles más relevantes y a un máximo de tres líneas.
• Cada tarjeta puede incluir un único llamado a la acción opcional (por ejemplo, “Reservar” o “Reproducir”).
• Mantén la misma jerarquía visual en todas las tarjetas.

Pantalla completa

Este modo ofrece experiencias inmersivas que se extienden más allá de la tarjeta integrada. Los usuarios disponen de más espacio para completar tareas de varios pasos o explorar el contenido en detalle. El editor de ChatGPT permanece superpuesto a la vista de pantalla completa para que los usuarios puedan seguir “hablando con la app” de forma natural sin salir de ese contexto.

Cuándo usarla

• Para tareas complejas que no se pueden realizar en una sola tarjeta (por ejemplo, trabajar con un mapa interactivo con marcadores, un lienzo con funciones avanzadas de edición o un diagrama interactivo).
• Para explorar contenido detallado (por ejemplo, anuncios de propiedades o menús).

Estructura

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

Interacción

• Panel de chat: conserva el contexto de la conversación junto a la vista de pantalla completa.
• Procesamiento: el campo de entrada del editor muestra un “destello” para indicar que la respuesta se está transmitiendo.
• Respuesta: cuando el modelo termina de responder, aparece brevemente un fragmento de la respuesta encima del editor. Al tocarlo, se abre el panel de chat.

Recomendaciones

• Diseña la experiencia de usuario para que funcione con el editor del sistema. El editor siempre está presente en pantalla completa. Asegúrate de que los usuarios puedan escribir prompts que les resulten naturales y que puedan activar llamadas a herramientas.
• Usa la pantalla completa para tareas que se beneficien de un espacio más amplio. Puedes integrar editores e interfaces de administración existentes si cumplen con la política sobre iframes.

Imagen en imagen (PiP)

Este modo muestra una ventana flotante persistente dentro de ChatGPT, optimizada para sesiones en curso o en vivo, como juegos o videos. La ventana PiP sigue visible mientras continúa la conversación y puede actualizarse de forma dinámica en respuesta a los prompts del usuario.

Cuándo usarlo

• Para 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.
• Cuando el widget PiP puede responder a los mensajes del chat, por ejemplo, para continuar una ronda de un juego o actualizar datos en vivo a petición del usuario.

Interacción

• Activación: cuando el usuario se desplaza por la conversación, la ventana PiP queda fija en la parte superior del área de visualización.
• Fijación: la ventana PiP permanece fija hasta que el usuario la cierra o la sesión termina.
• Fin de la sesión: la ventana PiP vuelve a su posición dentro de la conversación y deja de verse cuando el usuario se desplaza por ella.

Recomendaciones

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

Pautas de diseño visual

Una apariencia y un comportamiento uniformes ayudan a que las herramientas creadas por los socios se integren de forma natural en ChatGPT. Las pautas visuales favorecen la claridad, la facilidad de uso y la accesibilidad, y dejan espacio para incorporar la identidad de marca donde corresponda.

Estos principios explican cómo usar el color, la tipografía, el espaciado y las imágenes para mantener la claridad del sistema y permitir que los socios diferencien sus servicios.

Por qué es importante

La coherencia visual y de interacción mejora la experiencia general de quienes usan apps en ChatGPT. Al seguir estas pautas, los socios pueden presentar herramientas que resulten familiares a los usuarios y les sean útiles sin distraerlos.

Color

Las paletas definidas por el sistema ayudan a que las acciones y las respuestas mantengan una apariencia coherente con ChatGPT. Los socios pueden incorporar su identidad de marca mediante detalles de color, íconos o imágenes integradas, pero deben conservar los colores del sistema.

Recomendaciones

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

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

No apliques colores al fondo de las áreas de texto.

Tipografía

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

Recomendaciones

• Hereda siempre la lista de fuentes del sistema y respeta sus reglas de tamaño para los encabezados, el cuerpo del texto y los pies de imagen.
• Aplica estilos propios del socio, como negritas, cursivas o resaltados, solo en las áreas de contenido. Evita aplicarlos a los elementos estructurales de la interfaz.
• Limita al máximo las variaciones en el tamaño de fuente y da preferencia a los tamaños normal y pequeño del cuerpo del texto.

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

Espaciado y distribución

Los márgenes, el espaciado interno y la alineación uniformes facilitan la lectura rápida del contenido de los socios y permiten que los usuarios sepan dónde encontrarlo dentro de la conversación.

Recomendaciones

• Usa el espaciado de la cuadrícula del sistema para las tarjetas, las colecciones y los paneles de inspección.
• Mantén un espaciado interno uniforme. Evita amontonar el contenido o extender el texto de borde a borde.
• Siempre que sea posible, respeta los radios de esquina especificados por el sistema para mantener la uniformidad de las formas.
• Mantén una jerarquía visual clara: coloca primero el título, luego el texto de apoyo y, por último, el llamado a la acción.

Íconos e imágenes

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

Recomendaciones

• Usa íconos del sistema o íconos personalizados que encajen con el estilo visual de ChatGPT: monocromáticos y de contorno.
• No incluyas tu logotipo en la respuesta. ChatGPT siempre agrega tu logotipo y el nombre de tu app antes de mostrar el widget.
• Todas las imágenes deben respetar las relaciones de aspecto establecidas para evitar distorsiones.

Accesibilidad

Las experiencias que crean los socios deben ser accesibles para el público más amplio posible. Ten en cuenta la accesibilidad como un aspecto fundamental al crear apps para ChatGPT.

Recomendaciones

• Mantén la relación de contraste mínima entre el texto y el fondo (WCAG AA).
• Incluye texto alternativo para todas las imágenes.
• Permite cambiar el tamaño del texto sin alterar la distribución de los elementos.