# Skeleton VS Optimistic UI: Estrategias de Carga

> Aprenda la diferencia entre Skeleton Screens y Optimistic UI, y cómo elegir la mejor estrategia de carga para mejorar el rendimiento percibido de su producto digital.

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

---


> [!info] Definición Rápida
> Las **Skeleton Screens** (Pantallas de Esqueleto) son marcadores de posición grises que imitan la estructura final de la página mientras se cargan los datos. La **Optimistic UI** (Interfaz Optimista) es una técnica que muestra el resultado de una acción inmediatamente, asumiendo que el servidor responderá con éxito.


## El Arte de la Espera: Rendimiento Percibido

En el diseño de producto moderno, la velocidad no es solo una cuestión de milisegundos reales (latencia), sino de cómo el usuario **siente** que el sistema está respondiendo. Ambas técnicas buscan reducir la ansiedad del usuario durante la carga, pero se aplican en momentos diferentes del flujo.

## 1. Skeleton Screens: Precarga de Estructura

En lugar de mostrar un spinner giratorio (que genera sensación de incertidumbre), mostramos una "radiografía" de lo que está por venir.
- **Cuándo usarlo:** Al cargar páginas completas, listas de datos o bloques de contenido nuevos (ej. el muro de Facebook o LinkedIn).
- **Ventaja UX:** El usuario entiende rápidamente la jerarquía de la información y dónde aparecerá cada elemento, lo que reduce la carga cognitiva.
- **Consejo de Diseño:** Los bloques del esqueleto deben tener un sutil movimiento de "pulso" o brillo para indicar que el sistema está vivo y trabajando.

## 2. Optimistic UI: Respuesta Inmediata

Se basa en la premisa de que el 99% de las acciones del usuario tendrán éxito. Actualizamos la interfaz al instante sin esperar la confirmación del servidor.
- **Cuándo usarlo:** En acciones binarias o de bajo riesgo como dar un "Like", enviar un mensaje de chat o marcar una tarea como completada.
- **Ventaja UX:** La aplicación se siente instantánea y reactiva, como si fuera una app nativa offline.
- **Peligro:** Si la acción falla, debemos gestionar el **Rollback** (revertir el cambio visual) de forma elegante sin frustrar al usuario.

## Comparativa: ¿Cuál elegir en cada momento?

| Característica | Skeleton Screens | Optimistic UI |
| :--- | :--- | :--- |
| **Momento** | Al **entrar** a una pantalla. | Al **realizar** una acción. |
| **Estado de Datos** | Datos desconocidos (vienen del server). | Datos conocidos (los pone el usuario). |
| **Objetivo** | Reducir la incertidumbre de carga. | Eliminar la fricción de la espera. |
| **Riesgo** | Bajo (solo es una visualización). | Medio (requiere lógica de error/rollback). |

## La "Red de Seguridad" del Diseño de Carga

Un producto de clase mundial utiliza ambas de forma combinada:
1.  Entras en tu feed de noticias y ves **Skeleton Screens** mientras bajan las publicaciones.
2.  Haces click en "Seguir" a un usuario y la interfaz cambia a "Siguiendo" de forma **Optimista** al milisegundo.
3.  Si de repente pierdes la conexión, el botón vuelve a "Seguir" con un pequeño aviso de error (**Rollback**).

## Consejos de Mentor

- **No abuses del Skeleton:** Si el contenido carga en menos de 300ms, a veces es mejor no mostrar nada; el parpadeo del esqueleto puede ser más molesto que una carga directa rápida.
- **El diseño del Skeleton importa:** Haz que las formas del esqueleto coincidan exactamente con las del diseño final. Si el esqueleto es rectangular y el avatar final es redondo, el cambio visual será brusco (Jank).
- **Involucra a Desarrollo:** Estas técnicas requieren una coordinación estrecha con la arquitectura de datos de la app. No las diseñes de forma aislada sin saber si tu backend las soporta.

## Recursos y Herramientas

- **Luke Wroblewski:** [Skeleton Screens for Perceived Performance](https://www.lukew.com/ff/entry.asp?1797)
- **NNGroup:** [Optimistic UI - Response Time Limits](https://www.nngroup.com/articles/response-times-3-important-limits/)
- **Smashing Magazine:** [Designing for Perceived Performance](https://www.smashingmagazine.com/2021/01/performance-budgeting-web-projects/)
- **Artículos:** [Everything you need to know about Skeleton Screens](https://uxdesign.cc/everything-you-need-to-know-about-skeleton-screens-9a3e8e3e8e3)
---
[[optimistic-updates-rollback]]
[[perceived-performance-design]]
[[interaction-latency-budgets]]


---

Source: https://www.fernandoux.com/es/wiki/conceptos/skeleton-vs-optimistic-ui/