Estado vacío vs. Esqueleto
Un estado vacío significa que no hay contenido. Un esqueleto significa que el contenido aún se está cargando y ya sabemos su forma.
Usa un estado vacío para explicar por qué no hay nada y qué hacer a continuación. Usa un esqueleto para una carga corta cuando conozcas el diseño.
Ver lo que hace cada patrón
Prueba cada ejemplo. Luego lea sobre el trabajo para el que fue hecho.
Estado Vacío, Error y Éxito — Paquete de Aprendizaje
Este paquete de aprendizaje cubre tres estados diferentes de una aplicación. Vacío significa que aún no hay contenido. Error significa que algo falló. Éxito confirma la finalización. Cada uno necesita su propio mensaje y siguiente paso. El paquete no es un término estándar único de estado.
Save a guide to keep the patterns your team uses most within reach.
Una nueva lista de proyectos explica cómo crear el primer elemento. Si la red falla, aparece Retry y los filtros se mantienen guardados.
- Úsalo cuando
- Usa esta guía como una lista de verificación. Diseña cada estado para cada vista que dependa de datos.
- No lo uses cuando
- Nunca dejes una pantalla en blanco o un callejón sin salida. Explica los fallos y confirma el éxito.
- Nombre usado en código
status state machine
Esqueleto
Un skeleton es un marcador de posición sencillo con la forma del contenido que todavía está cargando.
Una página de perfil guarda espacio para su foto y texto. El diseño se queda quieto cuando llegan los datos.
- Úsalo cuando
- Úsalo cuando se conozca el diseño y la espera sea fácil de notar.
- No lo uses cuando
- Nunca inventes detalles falsos, brilla por siempre, ni uses un esqueleto cuando el contenido aparece casi de inmediato.
- Nombre usado en código
aria-busy="true"
Comparación rápida
| Patrón de UI | Mejor para | No para | Nombre usado en código |
|---|---|---|---|
| Estado Vacío, Error y Éxito — Paquete de AprendizajeEmpty, Error & Success State — Learning Bundle | Usa esta guía como una lista de verificación. Diseña cada estado para cada vista que dependa de datos. | Nunca dejes una pantalla en blanco o un callejón sin salida. Explica los fallos y confirma el éxito. | status state machine |
| EsqueletoSkeleton | Úsalo cuando se conozca el diseño y la espera sea fácil de notar. | Nunca inventes detalles falsos, brilla por siempre, ni uses un esqueleto cuando el contenido aparece casi de inmediato. | aria-busy="true" |
Antes de lanzarlo
- 01
Escribe lo que la persona necesita hacer.
- 02
Probar el teclado, enfoque, tacto, zoom, carga, estados vacíos y de error.
- 03
Asegurarse de que las personas puedan obtener la misma información sin pasar el cursor o movimiento.
- 04
Probar con contenido real en pantallas pequeñas y grandes.
Petición de comparación que puedes copiar
Copia esto cuando tu equipo necesite ayuda para elegir entre los patrones.
Elige el mejor patrón de Estado Vacío, Error y Éxito — Paquete de Aprendizaje (Empty, Error & Success State — Learning Bundle), Esqueleto (Skeleton) para nuestro flujo de usuario real. Usa esta regla: Un estado vacío significa que no hay contenido. Un esqueleto significa que el contenido aún se está cargando y ya sabemos su forma. Anota la tarea, la cantidad de contenido y el costo de detener el flujo. Comprueba el teclado, toque, carga, errores y movimiento reducido. Explica tu elección y luego crea la versión accesible más pequeña usando el sistema de diseño del proyecto.