Una pantalla esquelética es un patrón de diseño que se utiliza para indicar que una página se está cargando y, al mismo tiempo, proporciona a los usuarios una representación visual similar a una estructura alámbrica que imita el diseño de la página. Este tipo especial de indicador de progreso se utiliza exclusivamente para la carga completa de la página.
Contenido del Articulo
¿Cuáles son los diferentes tipos de marcos de pantalla?
Hay 3 tipos principales de pantallas de marco:
- Pantallas con contenido estático e imágenes
- Pantallas de esqueleto animadas
- pantallas marco marco pantallas
Pantallas de estructura alámbrica de imagen y contenido estático
Estas son las pantallas de estructura alámbrica más comunes y parecen estructuras alámbricas donde los rectángulos de color gris claro representan contenido e imágenes. La estructura de los cuadros grises sigue la estructura de la página de contenido final. La pantalla de esqueleto ayuda a los usuarios a construir un modelo mental de lo que estará en la página e incluso brinda algunas pistas sobre la jerarquía de información subyacente.
Pantallas de esqueleto animadas
Algunas pantallas de estructura alámbrica incluyen animación de movimiento pulsado usando degradados o elementos de desvanecimiento y desvanecimiento. Son similares a las animaciones de espera (o spinners) y significan que el sistema aún se está ejecutando y aún está cargando contenido, lo que reduce la percepción de los usuarios de tiempos de carga prolongados y mantiene a los usuarios interesados en el contenido que se está cargando.
Tenga en cuenta que este tipo de animación tiene el potencial de distraer, molestar o incluso crear problemas de accesibilidad para algunos usuarios.
Biombos de marco enmarcado
Una opción que no recomendamos es la visualización de estructura alámbrica, que solo muestra el marco de la aplicación sin la estructura alámbrica del contenido. Estas pantallas mínimas de estructura alámbrica solo incluyen el encabezado, el pie de página y el fondo. Este estilo no incluye marcadores de posición de contenido y, como resultado, no brinda a los usuarios una idea de la estructura general de la página. No se recomienda mostrar un marco porque si los usuarios tienen que esperar demasiado, asumirán que la página está inactiva porque la pantalla está casi en blanco.
Beneficios de usar pantallas de marco
Las pantallas de esqueleto ayudan al usuario a comprender que la página se está cargando y también comunican cómo se verá la página. Aquí hay algunas razones por las que podría considerar usar pantallas de estructura alámbrica:
- No permita que el usuario piense que el sitio está caído. Cuando un usuario visita un sitio o una aplicación y se encuentra con una pantalla en blanco mientras se carga la página, puede suponer que algo anda mal y marcharse. Las pantallas esqueléticas ayudan a los usuarios a concentrarse en el contenido que se descarga y les da la oportunidad de verlo mientras esperan.
- Crea la ilusión de un tiempo de espera más corto. Los largos tiempos de carga molestan a los usuarios. Debido a que la pantalla de estructura alámbrica parece una estructura alámbrica, da la ilusión de que la página se está moviendo gradualmente hacia su formato final. La indicación de progreso da a los usuarios la sensación de que la descarga no tardará mucho.
- Reducir el número de usuarios carga cognitiva. En lugar de abrumar a los usuarios mostrándoles primero una página en blanco y luego una página completa de contenido a la vez, las pantallas esqueléticas ayudan a los usuarios a comprender cómo se verá la página y les dan tiempo para desarrollar modelos mentales de la estructura de la página antes de ser bombardeados con más información información de inmediato. Por ejemplo, cuando los usuarios ven un cuadrado grande con un pequeño cuadro debajo, sabrán que están esperando una imagen con una leyenda.
¿Las pantallas de esqueleto son mejores que las barras de progreso o los contadores?
Las pantallas esqueléticas, las barras de progreso y los contadores muestran que el sistema está cargando información, pero tienen diferentes propósitos y funcionan mejor en diferentes situaciones. Aquí hay algunas pautas para ayudarlo a decidir cuándo usar cada diseño.
La duración del período de espera es importante
Los botones giratorios o las animaciones de espera informan a los usuarios de que el sistema está funcionando, pero no indican cuánto tiempo tendrán que esperar los usuarios; por lo que se utilizan mejor cuando la página tarda de 2 a 10 segundos en cargarse. Del mismo modo, se deben utilizar pantallas de estructura alámbrica con un tiempo de latencia de menos de 10 segundos. Por otro lado, las barras de progreso son muy recomendables para cualquier página que tarde más de 10 segundos en cargarse, ya que dan una idea al usuario del estado del sistema y cuánto tiempo más debe esperar. Todo lo que supere los 10 segundos requiere una estimación de duración explícita.
Con períodos de espera de menos de 10 segundos, tanto las pantallas de marco como las giratorias pueden funcionar.. ¿Cómo eliges entre ellos? Los controles giratorios generalmente se usan mejor en un solo módulo, como un video o un mapa, que se encuentra en la barra de herramientas. Las pantallas de esqueleto (con la excepción de los marcos de salida) son mejores cuando se carga la pantalla completa porque el marco les da a los usuarios una idea de cómo se verá la página y, por lo tanto, minimiza la carga cognitiva.
Sin pantallas esqueléticas ni contadores para una carga rápida de páginas
Si la página tarda menos de 1 segundo en cargarse, no se necesitan pantallas esqueléticas ni contadores, ya que es poco probable que afecten la experiencia del usuario. El uso de una pantalla básica en estas situaciones puede ser molesto, ya que un parpadeo rápido de la página puede hacer que los usuarios sientan que no pueden seguir el ritmo.
Los indicadores de progreso son los más adecuados para los indicadores relacionados con el proceso
Las pantallas de esqueleto solo se utilizan para indicar el progreso cuando el proceso que se ejecuta en el sistema es una carga de página completa. Cuando se trata de algún otro proceso (por ejemplo, descarga, carga, conversión de archivos), no tiene sentido (e incluso puede resultar confuso) mostrar una pantalla de esqueleto. En su lugar, muestre una barra de progreso o un asistente que guíe al usuario a través de los pasos del proceso.
No utilice una pantalla de marco con un marco
Las pantallas de estructura alámbrica con visualización de marcos no muestran información de diseño de página; solo muestran el encabezado y el pie de página y un fondo en blanco. No deben usarse como un indicador de progreso, ya que no dan a los usuarios ninguna indicación de que la página se está moviendo gradualmente hacia su formato final. Si los usuarios tienen que esperar mucho tiempo, decidirán que la página no funciona y la abandonarán.
Conclusión
Los usuarios suelen perder la paciencia debido a los largos tiempos de carga. Las pantallas de esqueleto facilitan la espera de duración media al mostrar la estructura de la página gradualmente, con marcadores de posición y animaciones sutiles. Si bien las pantallas de estructura alámbrica son útiles, no reemplazan los esfuerzos de optimización del rendimiento. Las pantallas de esqueleto son una herramienta más para reducir los tiempos de espera con los que los usuarios a veces tienen que lidiar cuando cargan contenido.
Recomendaciones
Thomas Meitoft, Arvid Longström y Ulrik Söderström. 2018. Efecto de las pantallas de estructura alámbrica. Actas de la 36.ª Conferencia Europea sobre Ergonomía Cognitiva (2018). DOI: http://dx.doi.org/10.1145/3232078.3232086
