Usa el Vista Previa de Cargadores Esqueleto gratuito abajo: tus datos nunca salen de tu navegador, todo el trabajo ocurre en tu dispositivo y no se sube a ningún servidor.
Por qué los esqueletos se sienten más rápidos que los indicadores
Cuando una página carga, los usuarios se enfrentan a un espacio en blanco y a una pregunta: ¿viene algo, y qué aspecto tendrá? Un indicador responde a la primera pregunta pero no a la segunda. Un esqueleto responde a ambas. Muestra bloques grises con la forma del contenido que viene: un bloque de imagen, una lÃnea de tÃtulo, unas pocas lÃneas de texto. El usuario ya puede imaginar la página, asà que la espera se siente más corta, incluso cuando el tiempo real de carga es idéntico. La investigación sobre rendimiento percibido encuentra siempre el mismo resultado: mostrar la forma del contenido supera a mostrar un sÃmbolo genérico de espera.
La herramienta de arriba crea esqueletos para tres diseños comunes: una tarjeta, una lista y un artÃculo. Elige un diseño, ajusta la velocidad del brillo, y la vista previa muestra el esqueleto con una luz suave que lo recorre. El brillo es la señal de que la carga todavÃa está en curso. Sin él, un esqueleto puede parecer una página rota de cajas grises. Con él, el usuario entiende de inmediato que el contenido está en camino. El cuadro de código te da el CSS del efecto de brillo, listo para copiar.
Cómo usar la vista previa
Elige el diseño que corresponda a tu contenido real. Un esqueleto de tarjeta conviene a cuadrÃculas de productos, perfiles y fichas de medios: un bloque de imagen, una lÃnea de tÃtulo y dos lÃneas de texto. Un esqueleto de lista conviene a noticias, comentarios y contactos: un bloque de avatar redondo más dos lÃneas, repetido cuatro veces. Un esqueleto de artÃculo conviene a entradas de blog y noticias: una lÃnea de tÃtulo, tres lÃneas de texto y un bloque de imagen grande. La vista previa usa exactamente esas formas, asà que puedes juzgar si el esqueleto corresponde a la página que sustituirá.
Luego ajusta la velocidad del brillo. El valor por defecto, 1,6 segundos por pasada, es tranquilo y estándar. Un brillo más rápido, de menos de un segundo, se siente urgente y puede parecer nervioso. Un brillo más lento, de más de 2,5 segundos, puede parecer congelado, porque la luz se mueve tan despacio que los usuarios pueden no notarla. Mantén la velocidad entre 1,2 y 2 segundos para la mayorÃa de las páginas. El control actualiza la vista previa en vivo, asà que puedes encontrar la velocidad que se lea como activa sin sentirse frenética.
Cómo hacer coincidir el esqueleto con la página real
La regla de oro de los esqueletos es hacer coincidir la forma. Cuenta las lÃneas, iguala el tamaño de la imagen y mantén el mismo espaciado que el contenido final. Si la tarjeta real tiene una imagen ancha y un tÃtulo corto, el esqueleto también debe tenerlos. Si la lista real tiene cinco filas, el esqueleto debe mostrar unas cinco filas, no dos. Cuando llegue el contenido real, debe reemplazar al esqueleto sin que la página salte. El cambio de diseño es discordante, y es la forma principal en que falla una implementación de esqueleto.
Cuándo no usar un esqueleto
Los esqueletos convienen a la carga de contenido, no a las acciones. No muestres un esqueleto cuando un usuario envÃa un formulario, porque el usuario espera una confirmación, no una versión gris del formulario. Usa un indicador en el botón o un mensaje de éxito en su lugar. No muestres un esqueleto para una página completa que tarda diez segundos, porque una página gris durante diez segundos se siente rota por muy bonito que sea el brillo. Para esperas largas, muestra un mensaje que explique el retraso y qué ocurre después.
Accesibilidad y brillo
Los lectores de pantalla no pueden ver bloques grises, asà que un esqueleto necesita un equivalente en texto. Marca la zona de carga con aria-busy y ofrece un mensaje oculto de Cargando, y luego anuncia el contenido cuando llegue. Sin eso, un usuario de lector de pantalla puede oÃr silencio y suponer que la página está vacÃa. Además, mantén el brillo sutil. Un brillo de alto contraste y movimiento rápido puede molestar a usuarios con sensibilidad al movimiento, asà que usa grises suaves y una velocidad tranquila, y respeta los ajustes de movimiento reducido mostrando un esqueleto estático para esos usuarios.
Preguntas frecuentes
¿Es un esqueleto mejor que un indicador? Para contenido con un diseño conocido, sÃ, porque muestra la forma de lo que viene. Para acciones y resultados desconocidos, un indicador o un mensaje de progreso es mejor.
¿A qué velocidad debe moverse el brillo? Alrededor de 1,2 a 2 segundos por pasada se siente tranquilo y activo. Más rápido se siente nervioso, más lento puede parecer congelado.
¿Puedo copiar el CSS del brillo directamente? SÃ. El cuadro de código da el degradado, el tamaño del fondo y los fotogramas clave. Aplica la clase a tus bloques de marcador y ajusta sus alturas para que coincidan con tu diseño real.
Crea un esqueleto arriba que coincida con tu página, copia el CSS del brillo y reemplázalo con contenido real en el momento en que cargue. Los usuarios notarán la diferencia, incluso si el tiempo de carga nunca cambia.
Herramientas relacionadas
- Skeleton Loader Preview (English version)
- Vista Previa de Texto Deslizante
- Creador de Patrones de Puntos