# Diseño para el Rendimiento Percibido: Más Rápido que la Luz

> Aprenda cómo el diseño puede hacer que su aplicación se sienta más rápida de lo que realmente es, utilizando técnicas de psicología cognitiva y trucos visuales.

*Tags: ux, concepto, diseño-ui, product-design, desarrollo*

---


> [!info] Definición Rápida
> El **Rendimiento Percibido** es el tiempo que un usuario siente que tarda un sistema en responder, independientemente de la velocidad real (milisegundos) de la conexión o el procesador. En el diseño de producto, **la percepción es la realidad.**


## ¿Por qué importa el Rendimiento Percibido?

Podemos tener la aplicación mejor optimizada del mundo, pero si el usuario se queda mirando una pantalla en blanco durante 2 segundos, pensará que la app es lenta. 

Por el contrario, una app que tarda los mismos 2 segundos pero que muestra un [Skeleton Screen](/conceptos/skeleton-vs-optimistic-ui/), una barra de carga con una animación suave o mensajes de contexto interesantes, se percibirá como mucho más rápida y placentera.

## Los 4 Niveles de la Percepción Temporal (Límites de Respuesta)

Existen límites biológicos sobre cómo el cerebro humano percibe el tiempo en una interfaz:

- **0.1 segundos (100ms):** La reacción se siente **instantánea**. El usuario siente que él ha causado el cambio. (Uso ideal: pulsación de botones, movimientos de cursor).
- **1.0 segundo (1000ms):** El usuario experimenta un pequeño retraso pero su flujo mental no se interrumpe. No hace falta mostrar una barra de carga, pero un sutil cambio de estado (hover, focus) es necesario.
- **10 segundos (10s):** Es el límite de la atención. Después de 10 segundos, el usuario querrá hacer otra cosa. **DEBES** mostrar una barra de progreso o feedback constante para evitar que se vaya.

## Estrategias de Diseño para "Acelerar" el Tiempo

### 1. Respuesta Inmediata (Feedback Térmico)
Muestra un cambio visual al instante de hacer click, aunque la acción real tarde. 
- **Ejemplo:** El botón se hunde físicamente (háptico o visual) antes de que la página empiece a cargar.

### 2. Ocupa el Tiempo del Usuario
El tiempo pasa más rápido cuando estamos entretenidos o recibiendo información.
- **Ejemplo:** Slack o Notion muestran frases inspiradoras o consejos de uso durante la carga inicial. El usuario lee y el tiempo parece reducirse.

### 3. Carga Progresiva (Lazy Loading)
No cargues todo a la vez. Muestra primero las partes críticas de la interfaz (texto e imágenes principales) y deja lo secundario para el final.
- **Uso:** En artículos largos, muestra primero el texto legible; las imágenes pesadas pueden ir cargando mientras el usuario empieza a leer.

### 4. Actualizaciones Optimistas (Optimistic UI)
[[Actualizaciones Optimistas y UX de Rollback]]
Actualiza el estado de la aplicación antes de recibir el OK del servidor. Es la técnica definitiva de rendimiento percibido.

### 5. Barras de Carga Engañosas (Psicología de la Velocidad)
Las barras de carga que avanzan de forma irregular (arrancan rápido y se frenan al final) se perciben como un proceso más rápido que una barra que avanza a velocidad constante.

## Beneficios para el Producto y el Negocio

- **Menor Tasa de Abandono:** Los usuarios son impacientes. Si la sensación de velocidad es buena, se quedan.
- **Mayor Sensación de Calidad:** Un producto rápido se percibe como un producto profesional, fiable y bien construido.
- **Ahorro en Infraestructura:** A veces es más barato mejorar el diseño del rendimiento percibido que invertir millones en servidores hiper-rápidos.

## Consejos de Mentor

- **No asumas el "Error" del Spinner:** Si puedes usar un Skeleton en lugar de un spinner giratorio, hazlo. El spinner es el recordatorio visual de que el sistema te está haciendo esperar.
- **Prioriza lo Visible (Above the Fold):** Asegúrate de que lo que el usuario ve primero sea lo que cargue antes.
- **Mide el "Time to Content":** No solo mires el tiempo de carga total. Mira cuánto tarda el usuario en poder leer su primer mensaje o su primera notificación. Ese es el dato que realmente importa.

## Recursos y Herramientas

- **Luke Wroblewski:** [Designing for Perceived Performance](https://www.lukew.com/ff/entry.asp?1926)
- **NNGroup:** [The Psychology of Waiting Lines and UX](https://www.nngroup.com/articles/psychology-of-waiting-lines-ux/)
- **Harry Roberts:** [Performance Design](https://csswizardry.com/2020/05/performance-design-ui-is-the-performance/)
- **Artículos:** [Everything you need to know about Perceived Performance](https://uxdesign.cc/perceived-performance-design-tricks-9a3e8e3e8e3)
---
[[skeleton-vs-optimistic-ui]]
[[interaction-latency-budgets]]
[[optimistic-updates-rollback]]
[[gestion-de-carga-cognitiva]]


---

Source: https://www.fernandoux.com/es/wiki/conceptos/perceived-performance-design/