# Presupuestos de Latencia en UX: Tiempos de Respuesta > Aprenda a definir y gestionar presupuestos de latencia en su producto digital para asegurar que las interacciones del usuario se sientan instantáneas y reactivas. *Tags: ux, estrategia, diseño-ui, product-design, desarrollo* --- > [!info] Definición Rápida > Un **Presupuesto de Latencia** (Latency Budget) es el tiempo máximo permitido (en milisegundos) para que una acción del usuario produzca una respuesta visible en la interfaz. No es una métrica técnica; es un compromiso de diseño para garantizar la fluidez de la experiencia. ## ¿Por qué el Diseñador debe establecer Presupuestos de Latencia? A menudo, los diseñadores crean flujos complejos e interacciones pesadas sin considerar el coste técnico. Si una animación de apertura de un menú tarda 500ms y el servidor otros 1000ms en devolver los datos, el usuario sentirá que la aplicación es una barca pesada. Establecer un presupuesto de latencia obliga al equipo (diseño e ingeniería) a priorizar la experiencia del usuario sobre el adorno visual. Si la latencia supera el presupuesto, debemos simplificar el diseño o buscar soluciones técnicas como el [Rendimiento Percibido](/conceptos/perceived-performance-design/). ## Los 3 Límites Críticos de Latencia (Modelo RAIL) El modelo RAIL de Google desglosa el tiempo de respuesta desde la perspectiva del usuario: ### 1. Respuesta Inmediata (0 - 100ms) El usuario siente que su acción ha causado el cambio de forma instantánea. - **Presupuesto:** < 100ms. - **Acciones:** Click en botones, efectos de hover, apertura de menús desplegables. - **Estrategia:** Optimizar el código de frontend y evitar peticiones al servidor en este paso. ### 2. Respuesta Amigable (100 - 300ms) El usuario percibe un pequeño retraso pero su flujo mental se mantiene intacto. - **Presupuesto:** < 300ms. - **Acciones:** Carga de pequeños conjuntos de datos (ej. resultados de una búsqueda rápida). - **Estrategia:** Usar microanimaciones suaves para "disfrazar" el tiempo muerto. ### 3. El Umbral de la Atención (300ms - 1000ms) El usuario empieza a ser consciente de que el sistema le está haciendo esperar. - **Presupuesto:** < 1s. - **Acciones:** Envío de formularios simples, carga de imágenes grandes. - **Estrategia:** Utilizar [Skeleton Screens](/conceptos/skeleton-vs-optimistic-ui/) o barras de progreso para dar información de estado. ## Cómo Diseñar para el Presupuesto (Budgetting UX) Tú, como diseñador de producto, debes ser el guardián de estos tiempos: - **Simplifica las Animaciones:** Si una animación de entrada dura 600ms, estás consumiendo más del 60% de tu presupuesto de latencia antes de mostrar cualquier dato real. Redúcela a 200ms o 300ms. - **Carga Diferida (Lazy Load):** Si una página tarda 3 segundos en cargar por completo, divide la carga en bloques. Muestra lo crítico en menos de 1 segundo y deja el resto para después. - **Peticiones en Paralelo:** Colabora con los desarrolladores para asegurar que varias peticiones de datos se hagan al mismo tiempo en lugar de una tras otra (secuencialmente). - **Optimiza tus Assets:** Un vídeo de 50MB o una imagen 4K sin comprimir te harán saltar cualquier presupuesto de latencia en conexiones móviles. ## Beneficios para el Producto y el Negocio - **Menor Tasa de Abandono:** Un retraso de solo 100ms en el checkout puede reducir la conversión en un porcentaje significativo. - **Mejor SEO:** Google premia a las webs rápidas (Core Web Vitals) en sus resultados de búsqueda. - **Sensación de Robustez:** Una aplicación que responde siempre dentro de su presupuesto de latencia genera una confianza ciega en el usuario. ## Consejos de Mentor - **No asumas el WiFi de la oficina:** Prueba tu aplicación siempre en un móvil real con conexión 4G o 3G. Ahí es donde verás si tus presupuestos de latencia son realistas o fantasía. - **El coste visual:** Cada vez que pidas una funcionalidad nueva, pregúntate: "¿Cuánto nos va a costar en tiempo de carga?". Si la respuesta es "mucho", busca una alternativa de diseño más ligera. - **Vigilancia Constante:** La latencia es como la maleza; si no la controlas, crece con cada nueva funcionalidad. Revisa los tiempos de respuesta de tu producto al menos una vez por trimestre. ## Recursos y Herramientas - **Google Web Dev:** [The RAIL Model](https://web.dev/rail/) - **Harry Roberts:** [Performance Design Budgets](https://csswizardry.com/2020/05/performance-design-ui-is-the-performance/) - **Smashing Magazine:** [Performance Budgeting - Guidelines](https://www.smashingmagazine.com/2021/01/performance-budgeting-web-projects/) - **Artículos:** [How Latency Affects UX - A Data Approach](https://uxdesign.cc/how-latency-affects-user-experience-9a3e8e3e8e3) --- [[perceived-performance-design]] [[skeleton-vs-optimistic-ui]] [[optimistic-updates-rollback]] [[gestion-de-carga-cognitiva]] --- Source: https://www.fernandoux.com/es/wiki/estrategia/interaction-latency-budgets/