Diseñando para la latencia: Cuando la velocidad de la IA se convierte en experiencia de usuario.
Un manual práctico para diseñar soluciones que minimicen la latencia de la IA. Texto en streaming, interfaz de usuario optimista, divulgación progresiva, superficies de razonamiento y agentes en segundo plano, con análisis detallados de Claude.ai, Cursor, Linear AI, Granola y Perplexity. Además, incluye las matemáticas de la velocidad percibida.
La latencia de la IA es el problema de UX más importante en los productos de IA y casi nadie lo considera un aspecto del diseño. Los equipos que lanzan las mejores experiencias de IA dejaron de esperar modelos más rápidos y comenzaron a diseñar teniendo en cuenta la espera.
Esta es la estrategia. El cálculo de la velocidad percibida, los cinco patrones que funcionan, los cuatro que fallan, cinco análisis exhaustivos y una lista de verificación previa al lanzamiento.
La latencia de la IA es un problema de diseño, no de ingeniería
La mayoría de los productos de IA se perciben lentos porque tratan la latencia como un problema de ingeniería. Ingeniería lanza un modelo más rápido y el producto sigue pareciendo lento, porque el cuello de botella nunca fueron los milisegundos. Fue la decisión de diseño la que dejó al usuario mirando un indicador de carga sin nada que leer.
El usuario no mide los milisegundos. El usuario mide si algo está sucediendo. Cuatro segundos de texto en streaming se leen rápido. Un retraso de 1,5 segundos en una ventana modal se percibe como un fallo.
El cálculo de la velocidad percibida
Una respuesta de cuatro segundos en streaming se percibe como rápida. Una respuesta de 1,5 segundos que bloquea el contenido se percibe como lenta. La velocidad percibida se basa en la densidad de la retroalimentación, no en el tiempo transcurrido. Este hecho, por sí solo, redefine todas las decisiones sobre latencia en un producto de IA.
Los números que importan son el tiempo hasta el primer token y los tokens por segundo, no el tiempo total de respuesta. Menos de 500 milisegundos hasta el primer token se percibe como instantáneo. Entre 30 y 80 tokens por segundo se lee a velocidad humana. Un presupuesto total de cinco segundos es tolerable cuando se transmite desde el primer token y problemático cuando se bloquea. Diseñar teniendo en cuenta estos números permite que un modelo más lento se perciba como más rápido que la competencia.
Los cinco patrones que funcionan
Texto en tiempo real. Interfaz de usuario optimista. Divulgación progresiva. Superficies de razonamiento. Agentes en segundo plano. Todo producto de IA lanzado al mercado que destaca por su velocidad percibida se basa en al menos tres de estos patrones, y los mejores se basan en los cinco.
Los cinco patrones se combinan. El texto en tiempo real ofrece al usuario algo que leer. La interfaz de usuario optimista le ofrece algo que ver. La divulgación progresiva le ofrece algo que escanear. Las superficies de razonamiento le ofrecen algo en lo que confiar. Los agentes en segundo plano les proporcionan otra tarea. En conjunto, el modelo tarda diez segundos y el producto sigue funcionando.
El texto en tiempo real convierte la espera en respuesta
El primer patrón consiste en la renderización token a token. El usuario lee mientras el modelo escribe y la espera desaparece en la salida. El tiempo hasta el primer token se convierte en el único dato relevante. Una vez que llega el primer token, el usuario está leyendo, no esperando.
El streaming de Claude.ai es el ejemplo más limpio disponible. El primer token llega en menos de un segundo y el resto se transmite a velocidad de lectura. El usuario está a mitad de la primera frase del primer párrafo antes de que el modelo termine el segundo. El mismo modelo, entregado como un bloque completo después de cuatro segundos, se percibiría como un producto diferente.
La interfaz de usuario optimista confirma la acción antes de que el modelo devuelva la respuesta
El segundo patrón consiste en mostrar el resultado antes de que el modelo termine y luego sincronizarlo cuando llega la respuesta. El usuario no necesita la respuesta correcta todavía; necesita que se confirme.
Linear La IA realiza esta acción al aceptar una sugerencia. El resultado se muestra inmediatamente en la incidencia con un sutil estado pendiente, y la conciliación se produce en segundo plano. Si el modelo arroja un resultado diferente, la interfaz de usuario se actualiza sin parpadeos. Si falla, la interfaz de usuario retrocede y muestra el error. El usuario continúa navegando en ambos casos.
La divulgación progresiva muestra primero el esqueleto, el borrador y la versión final
El tercer patrón consiste en mostrar primero el esqueleto, luego un borrador parcial y, finalmente, la versión final. La estructura se muestra antes que el contenido, lo que reduce la sensación de espera al proporcionar un elemento visual que seguir.
La versión 0 muestra esto en su interfaz de solicitud a la aplicación. Un esqueleto de diseño aparece casi de inmediato, los componentes se completan a medida que el modelo los genera y la vista previa final con estilo se muestra al final. Lovable sigue el mismo procedimiento. Cada etapa es un punto de control que el usuario puede consultar mientras se carga la siguiente.
Las interfaces de razonamiento convierten el tiempo de espera en confianza
El cuarto patrón consiste en mostrar el plan o el proceso de pensamiento del modelo mientras trabaja. Observar el razonamiento de un agente es mucho mejor que ver una pantalla giratoria. Además, genera confianza, ya que el usuario ve lo que el modelo intenta hacer antes de que lo haga.
El modo agente de Cursor incluye una superficie de planificación. El usuario ve los pasos previstos antes de que se ejecute el primer comando. ChatGPT muestra el rastro del razonamiento de los modelos de pensamiento, con resúmenes desplegables que se leen como prosa estructurada. Quince segundos de razonamiento visible son mucho mejores que tres segundos de una caja negra.
Los agentes en segundo plano permiten a los usuarios seguir trabajando mientras el modelo se ejecuta
El quinto patrón consiste en mover el agente fuera del primer plano y a un panel lateral. El usuario nunca se ve interrumpido por ninguna solicitud de IA. El agente se ejecuta en una esquina mientras el usuario continúa escribiendo, programando o diseñando en el lienzo principal.
Los agentes en segundo plano de Cursor son la versión más limpia disponible. El usuario inicia una tarea larga y continúa editando en primer plano mientras el agente trabaja en un panel lateral. GitHub El agente de codificación de Copilot hace lo mismo con las tareas en forma de solicitud de extracción. Este patrón solo funciona si el usuario tiene otras cosas que hacer, y en cualquier flujo de trabajo real, siempre las tiene.
Los cuatro patrones que fallan
La mayoría de los productos de IA que se perciben lentos implementan una combinación de cuatro patrones que fallan: Indicadores de carga infinitos, bucles de texto que generan confusión, diálogos modales que bloquean la ejecución y ausencia total de indicadores de progreso. Cada uno de ellos reduce la velocidad percibida, incluso cuando la respuesta es rápida.
Los indicadores de carga infinitos ocultan todo lo que el usuario necesita
Un indicador de carga sin indicador de progreso es una caja negra. El usuario no tiene nada a lo que prestar atención y la espera se percibe más lenta que la misma espera con un flujo de tokens. Un indicador de carga le indica al usuario que aparte la vista, lo cual es lo contrario de lo que debería hacer una interfaz de IA.
Elimine el indicador de carga. Implemente un flujo de tokens, un esqueleto o un rastro de razonamiento. Si la respuesta es demasiado corta para transmitirla, implemente un estado optimista. Si el modelo está realizando un trabajo invisible, implemente una línea de estado que lo indique.
Los bucles de texto de "pensamiento" son ruido sin información
Un bucle de texto de "pensamiento" giratorio es peor que un indicador de carga. Implica un progreso que no existe. Los usuarios aprenden a ignorarlo en dos sesiones, lo que interrumpe la comunicación de cualquier estado real que se muestre a continuación.
Reemplace el bucle con un estado real: Buscando en tres fuentes. Leyendo archivo. Redactando respuesta. La línea de estado es información. El bucle es ruido que se hace pasar por información.
Los diálogos modales que bloquean la interfaz convierten las esperas en obstáculos
Un modal que bloquea el resto de la interfaz mientras se ejecuta el modelo es el error de latencia más costoso. Convierte una espera en una situación de bloqueo total. El usuario no puede desplazarse, no puede copiar una respuesta anterior, no puede hacer nada más.
Elimine el modal. Muestre la respuesta en línea, en un panel lateral o en una notificación emergente que no bloquee la interfaz. El usuario nunca debería perder el acceso al resto del producto porque una solicitud de IA esté en curso.
La falta de una señal de progreso enseña al usuario a abandonar la página
Una interfaz de IA sin señal de progreso enseña al usuario a asumir que la solicitud está incompleta. Pulsan el botón de retroceso antes de que llegue la respuesta. En el peor de los casos, actualizan la página y pierden la solicitud.
Toda interfaz de IA que tarde más de 500 milisegundos necesita una señal de progreso. El texto en streaming es la mejor opción. Un esqueleto es la siguiente mejor opción. Un rastro de razonamiento funciona para esperas más largas. Una línea de estado funciona para todo lo demás. La señal debe existir.
Cinco análisis de productos reales
Cinco interfaces de IA que transforman la latencia en experiencia de usuario.
Claude.ai: el streaming como parte integral de la interacción
El streaming de Claude.ai es el ejemplo más claro de la latencia como característica. El tiempo hasta el primer token es muy inferior a un segundo en una sesión en caliente, el texto se muestra a velocidad de lectura y la espera desaparece en la salida.
La clave del diseño es apostar por completo por el streaming. Sin indicador de carga, sin texto explicativo, sin estructura básica, solo la respuesta que llega token a token. El producto se siente rápido durante los veinte segundos de generación porque el usuario ha estado leyendo durante diecinueve.
Cursor, el ciclo de planificación y ejecución
Cursor transforma la latencia en confianza al mostrar primero el plan del agente, ejecutar cada paso con progreso visible y confirmar las diferencias a medida que llegan. Una tarea de varios minutos se siente útil porque el usuario puede leer el plan, observar cada paso y revisar cada diferencia a medida que se confirma.
La estrategia de diseño prioriza la espera. Primero el plan. Cada paso como punto de control. Las diferencias como resultado final. Cada capa contiene información, por lo que el usuario nunca se encuentra frente a una caja negra, aunque la tarea se ejecute durante minutos.
⟦MARCA1⟧ IA, divulgación progresiva en línea
⟦MARCA2⟧ La IA implementa la divulgación progresiva dentro de las superficies existentes. La IA nunca controla el primer plano. Una sugerencia de borrador aparece en línea en la incidencia. Un resumen aparece en línea en el proyecto. La espera nunca interrumpe el trabajo del usuario, ya que este ya está realizando las tareas que la IA está complementando.
La IA integrada en un producto que el usuario ya conoce nunca debería ser una ventana emergente ni una intrusión. La divulgación en línea es el patrón adecuado, y el coste de latencia se oculta en las acciones que el usuario ya está realizando.
¿Quieres un producto de IA que se sienta rápido incluso cuando el modelo es lento? Contratar Brainy. UXBrainy ofrece auditorías de latencia y rediseños de interfaz de usuario para streaming; AppBrainy ofrece la entrega completa de productos de IA; y ClaudeBrainy ofrece la capa de avisos y habilidades que abarata el streaming. Combínalo con Patrones de diseño de interfaz de usuario para agentes de IA para que la capa del agente se entregue con el mismo nivel de calidad.
Granola, la cascada de grabación a resumen
Granola oculta minutos de trabajo del modelo tras una cascada de cuatro etapas. La grabación se entrega primero como forma de onda sin procesar. La transcripción se entrega después como texto desplazable. Las notas preliminares se entregan después como estructura de viñetas. El resumen final se entrega al final como prosa pulida. Cada etapa es útil antes de que la siguiente esté lista.
Tres minutos de trabajo con el modelo se sienten como treinta segundos porque el primer artefacto útil aparece en menos de diez. La transcripción es valiosa por sí sola. Las notas también lo son. El resumen completa la experiencia sin limitar el acceso.
Perplexity, transmisión de fuentes en vivo
Perplexity transmite sus fuentes antes de la respuesta. La lista de citas aparece primero, completándose a medida que el modelo recupera y clasifica cada fuente. La respuesta se transmite debajo mientras el usuario ya está leyendo las fuentes. La espera se percibe como investigación, no como carga.
La estrategia de diseño consiste en mostrar el trabajo antes del resultado. Un usuario que lee una lista de fuentes no espera. El mismo tiempo total de respuesta, con las fuentes ocultas hasta que la respuesta esté lista, se percibiría de dos a tres veces más lento. La densidad de información durante la espera es lo que determina la velocidad percibida.
Lista de verificación de latencia previa al lanzamiento
Ejecute esto en cualquier plataforma de IA antes de su lanzamiento. Doce verificaciones, todas medibles.
-
Tiempo hasta el primer token inferior a 500 milisegundos en una sesión en caliente.
-
La transmisión mantiene entre 30 y 80 tokens por segundo en el modelo objetivo.
-
Cada espera superior a 500 milisegundos recibe una señal de progreso.
-
No hay ningún indicador de carga en la interfaz de IA.
-
No hay ningún bucle de texto giratorio en la interfaz de IA.
-
No hay diálogos modales que bloqueen la ejecución del modelo.
-
La interfaz de usuario optimista confirma la acción visible en 100 milisegundos desde la intención.
-
Los esqueletos se renderizan antes que el contenido para cualquier respuesta de más de dos segundos.
-
Se muestran los rastros de razonamiento para cualquier tarea de más de diez segundos.
-
Los agentes de larga duración se ejecutan en un panel lateral, no en primer plano.
-
El usuario puede desplazarse, copiar y leer la salida anterior mientras se procesa una solicitud.
-
Cada respuesta de varias etapas muestra las etapas intermedias que el usuario puede consultar.
La lista reside en la plantilla de revisión de diseño y se vuelve más rápida con cada ejecución.
Preguntas frecuentes
¿Cuál es el indicador de latencia más importante en un producto de IA?
Tiempo hasta el primer token. El tiempo total de respuesta importa menos que el tiempo que el usuario espera antes de poder leer algo. Menos de 500 milisegundos se percibe como instantáneo.
¿Es la transmisión siempre mejor que el bloqueo?
Para texto, sí. Menos de 500 milisegundos, el bloqueo es aceptable porque la espera es imperceptible. Para tiempos más largos, la transmisión supera al bloqueo en todas las métricas de velocidad percibida.
¿Cuándo debo usar una interfaz optimista en lugar de una transmisión?
Transmisión cuando el resultado es la respuesta, como prosa, código o generación estructurada. Interfaz optimista cuando el modelo toma una decisión que el usuario ya espera, como un borrador refinado o una sugerencia aceptada. Ambas se complementan.
¿Cómo muestro el progreso de un agente que tarda minutos?
Superficies de razonamiento y flujos de progreso en el panel lateral. Primero se muestra el plan, luego el paso activo y, por último, el resultado en ejecución. El usuario lee el plan, observa el progreso de los pasos y nunca se siente bloqueado.
¿Cuál es el peor error de latencia en los productos de IA actuales?
La ventana modal de bloqueo con un indicador de carga. Combina los cuatro patrones de fallo en una sola pantalla y le enseña al usuario que la IA es algo que hay que esperar, no algo que se pueda usar.
El cambio de diseño para la latencia de la IA realmente la desbloquea
Diseñar para la latencia de la IA no es una solución temporal para los modelos lentos. Es la estrategia de diseño que permite que un modelo más lento, pero mejor, supere a uno más rápido, pero peor, en todas las métricas que realmente le importan al usuario.
Los equipos que están triunfando ahora mismo dejaron de optimizar para la velocidad bruta y comenzaron a diseñar para la velocidad percibida. Se comprometieron con la transmisión en tiempo real, añadieron una interfaz de usuario optimista, crearon esqueletos de 200 ms y trasladaron los agentes a paneles laterales. Cada espera contiene información.
Si su interfaz de IA todavía incluye un indicador de carga, un bucle de espera o una ventana modal de bloqueo, el cuello de botella no está en el modelo. Está en el diseño. Combina el trabajo con Patrones de diseño de interfaz de usuario para agentes de IA, el manual de Incorporación de productos de IA, Diseño de productos nativos de IA y jerarquía visual para que cada etapa sea escaneable.
Si buscas un producto de IA que se sienta rápido incluso cuando el modelo sea lento, contratar Brainy es la solución. UXBrainy ofrece auditorías de latencia y rediseños de interfaz de usuario para streaming; AppBrainy ofrece la entrega completa de productos de IA; y ClaudeBrainy proporciona la capa de avisos y habilidades que abarata el streaming.
Want an AI product that feels fast even when the model is slow? Brainy ships UXBrainy as latency audits and streaming UI redesigns, AppBrainy as full AI product delivery, and ClaudeBrainy as the prompt and Skill layer that makes streaming and reasoning surfaces cheap to build.
Get Started
