Loading Statespor Owl-Listener

Loading States Skill.

Muestra qué ocurre durante una espera sin engañar a las personas sobre el progreso.

Diseño de interacción
UX de carga

Revisión de la fuente · Loading StatesSKILL.md

Tarea Diseño de interacción Produce • Una decisión de patrón de carga para cada operación con retraso. • Notas de transición sobre el espacio reservado y la conservación del scroll. • Comportamiento ante esperas largas, cancelación y fallos de actualizaciones optimistas. Antes de empezar Los tiempos precisos de las operaciones y las capacidades de progreso deben proceder del equipo de producto o de implementación.

Resumen editorial · fuente revisada 2026-10-07 · no es un ejemplo generado

01 Qué hace

Haz comprensibles los estados de espera

Elige el feedback para operaciones con retraso y especifica cómo los resultados reales sustituyen los estados de carga u optimistas.

Flujo de trabajo basado en la fuenteNo es un benchmark de ejecución

El enfoque de trabajo

Loading States distingue los patrones de espera según lo que sabe la interfaz: la forma del contenido entrante, si el progreso es medible y si una acción puede mostrarse de forma optimista sin riesgo. Abarca esqueletos, indicadores determinados e indeterminados, revelado progresivo y marcadores de posición.

Su guía también trata la transición al salir de la carga. El contenido real no debe desplazar el diseño de forma inesperada ni restablecer el scroll de la persona usuaria. Los cambios optimistas requieren conciliación y reversión; un estado de éxito de apariencia rápida no es apropiado si un fallo deja la interfaz poco fiable.

Entregables previstos

Una decisión de patrón de carga para cada operación con retraso.
Notas de transición sobre el espacio reservado y la conservación del scroll.
Comportamiento ante esperas largas, cancelación y fallos de actualizaciones optimistas.

Ver el brief de ejemplo

Del brief a la revisión

01
Clasifica la espera
Identifica la duración esperada, la estructura conocida del contenido, si el progreso es medible y si la operación se puede cancelar.
02
Elige un feedback honesto
Usa esqueletos para formas predecibles y barras de progreso solo cuando se conozca el progreso. Define la reversión antes de adoptar feedback optimista.
03
Prueba la llegada y el fallo
Revisa conexiones lentas, sustitución de contenido, estabilidad del diseño y preferencias de movimiento.

02 Cuándo usarlo

Cuándo usarla

Los tiempos precisos de las operaciones y las capacidades de progreso deben proceder del equipo de producto o de implementación.

Buen encaje

Pantallas con muchos datosÚtil cuando puede llegar contenido parcial antes de que toda la vista esté lista.
Interacciones optimistasAyuda a especificar lo que ven los usuarios mientras un guardado o una actualización siguen pendientes.

Límites que conviene comprobar

No corrige la latenciaUn patrón de carga cambia la experiencia de espera, no el rendimiento subyacente del servidor o de la red.
No es confirmación de éxitoEl feedback de finalización es una decisión de interacción relacionada, pero distinta.

Aporta estos datos

Operaciones con retrasoEnumera las cargas de datos, subidas, guardados y los rangos de espera previstos.
Datos de progreso disponiblesExplica qué operaciones exponen porcentajes de finalización reales.
Reglas de fallo y recuperaciónEspecifica las opciones de cancelación, reintento y reversión de cada operación.

03 Decisiones importantes

Decisiones clave

El patrón se ajusta al conocimiento
Una barra determinada sin progreso medible comunica una precisión que el sistema no tiene.
Continuidad tras la carga
Conservar el diseño y la posición del scroll evita que una solicitud completada genere un nuevo problema de navegación.

04 Ejemplo de brief

Prueba un brief concreto

El brief de ejemplo siguiente no se ha probado. Revisa la configuración de la skill antes de usarlo.

Revisa la configuración

Usa la vía de instalación documentada del repositorio y conserva los archivos complementarios a los que se haga referencia. Esta entrada describe un método de diseño concreto, no una aplicación ejecutable.

Archivo fuente original

https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/interaction-design/skills/loading-states/SKILL.md

Los tiempos precisos de las operaciones y las capacidades de progreso deben proceder del equipo de producto o de implementación.

Empieza con un solo entregable

Adapta el alcance, el material de origen y las restricciones de este brief antes de ejecutar la skill.

Brief de ejemplo

Usa loading-states para un panel de proyectos con una carga inicial de datos, miniaturas de imagen y ediciones de título en línea. Elige un patrón para cada operación, reserva el diseño final y especifica los fallos de ediciones optimistas, el comportamiento con red lenta y alternativas para movimiento reducido. No inventes porcentajes de progreso.

Inspecciona el resultado

Comprueba el resultado real con estos criterios observables.

Cada cambio optimista tiene una reversión en caso de fallo.
Los diseños de carga y de contenido cargado reservan un espacio compatible.
Las esperas largas ofrecen una siguiente acción útil cuando es posible.

OpenDesign ofrece un espacio de trabajo de diseño local para agentes de programación. Este listado no implica que la skill esté incluida ni que se incluyan sus herramientas externas, credenciales y dependencias de software.

Descargar OpenDesign Leer la guía rápida

05 Fuente y licencia

Fuente y licencia

Esta página describe la revisión fijada de la fuente enlazada abajo. El comportamiento y los requisitos originales pueden cambiar.

Propietario de la fuente: Owl-Listener
Repositorio: Owl-Listener/designer-skills
Archivo de la skill: interaction-design/skills/loading-states/SKILL.md
Licencia: MIT
Versión revisada: 2026-10-07 · 9a6930cf84a8

Resumen editorial de la fuente

Elige el feedback para operaciones con retraso y especifica cómo los resultados reales sustituyen los estados de carga u optimistas.

Resumen original de OpenDesign, basado en la fuente enlazada. Las estrellas del repositorio son una señal de popularidad fechada, no uso de la skill ni una puntuación de calidad.

06 Preguntas antes de empezar

Preguntas antes de empezar

¿Debe mostrar un spinner cada solicitud?

No. La fuente distingue entre esperas muy cortas, diseños conocidos, progreso medible y trabajo de larga duración.

¿Cuándo resulta útil un esqueleto?

Cuando el contenido entrante tiene una estructura conocida que puede representarse sin sugerir que el contenido ya está disponible.

¿Movimiento reducido significa una pantalla de carga en blanco?

No. El feedback informativo debe mantenerse; el destello u otros movimientos decorativos pueden reducirse o eliminarse.

OpenDesign

Deja espacio para la siguiente iteración de diseño.

Mantén juntos tu brief, el material de origen y el trabajo de diseño en un espacio de trabajo local. Revisa la configuración propia de la skill antes de añadirla a tu flujo de trabajo.

Descargar OpenDesign Explorar skills de diseño