ux ui: qué es una pantalla esqueleto y cómo usarla para mejorar la ux

En enero de 2023 los usuarios de Internet eran 5.160 millones, es decir, el 64,4% de la población mundial (datos de Statista). Hoy más que nunca ofrecer una buena experiencia de usuario debe ser una prioridad en la creación de sitios y aplicaciones. Uno de los factores centrales en el UI&UX design es la velocidad de carga de la página. Acostumbrados a sitios de alto rendimiento, los usuarios rápidamente pierden la paciencia con una página que se carga lentamente y, a veces, la abandonan frustrados. Por lo tanto, los esfuerzos para optimizar el rendimiento son esenciales, pero no siempre es posible reducir aún más el tiempo de carga. El UX/UI designer viene en nuestra ayuda aquí con una herramienta que da la ilusión de una mayor velocidad: la pantalla esqueleto.

Qué es una pantalla esqueleto en el ui ux design

Probablemente todos hayan visto una pantalla de esqueleto en sitios como Facebook, YouTube, Google Drive o LinkedIn. Esta herramienta UX/UI es una representación visual de los elementos que aparecerán en la página que aparece durante la carga de contenido. Está compuesto por formas y líneas en colores suaves, a menudo en tonos grises, que muestran la estructura de la página y sus elementos esperando a que se carguen los datos. Así, permite a los usuarios hacerse una idea del contenido que pronto podrán ver, además de confirmar que la página realmente funciona como debería.

Por qué utilizar la pantalla esqueleto

El término "pantalla esqueleto" fue introducido en 2013 por el diseñador Luke Wroblewski, quien lo propuso como una herramienta para reducir la percepción de los usuarios sobre el tiempo de espera. Su objetivo principal en términos de UX UI design es precisamente este: si bien no tiene ningún efecto sobre la duración real de la carga, da la impresión de que esta sucede más rápidamente.

En comparación con una página en blanco, la pantalla de esqueleto comunica claramente que el sitio funciona sin problemas y que los contenidos están a punto de cargarse. Los estudios realizados en el campo de UX UI también indican que esta opción da mejores resultados que la rueda animada o la barra de carga. Mostrar un marcador de posición del layout de la página y dónde se ubicarán los diferentes elementos, de hecho, crea de manera más efectiva la impresión del progreso en curso.

Diferentes tipologías de pantalla esqueleto en el ui ux design

Hay tres tipos principales entre los que el UX UI designer puede elegir al diseñar una pantalla de esqueleto. El más común es el que simplemente muestra un boceto del contenido que se está cargando, similar a un wireframe. La pantalla replica la estructura de la página, normalmente en escala de grises, manteniendo un aspecto limpio y sobrio. Este enfoque se puede encontrar, por ejemplo, en plataformas como LinkedIn, Slack y YouTube, pero también en numerosas aplicaciones móviles. A veces se usa en combinación con algunos elementos de texto para indicar que la carga está en curso y que los contenidos visuales aparecerán pronto.

La segunda opción, ideal para el UI UX design de portales centrados en imágenes como Unsplash o Pinterest, es la pantalla de esqueleto de color. Aquí también se reproduce la estructura de la página, pero los marcadores de posición, en este caso, muestran el color principal de la imagen de carga. Así, se obtiene un efecto más agradable estéticamente, que mejora la UI UX del sitio y satisface las expectativas del público objetivo.

La tercera alternativa es la pantalla de esqueleto animada, que combina un elemento dinámico que puede reducir aún más el tiempo de espera percibido. En particular, se obtienen buenos resultados con un brillo que va de izquierda a derecha, replicando el movimiento que hará el ojo al leer el contenido.

Consejos para el uso de la pantalla esqueleto en el ui ux design

El uso estratégico de la pantalla de esqueleto permite mejorar el UX/UI design de un sitio o aplicación, manteniendo alta la participación del usuario. Es una solución que se adapta bien a páginas web que requieren la carga de una gran cantidad de datos, por ejemplo, en el caso de que se ejecuten varios scripts en segundo plano al mismo tiempo. La pantalla de esqueleto también es excelente para páginas con muchas imágenes para cargar. Si el tiempo de espera se hace demasiado largo, puedes optar alternativamente por el lazy load o carga diferida, que consiste en mostrar solo los contenidos visibles antes de hacer scroll en la página, mientras el resto se carga progresivamente. Para el diseñador de UX, es importante tener en cuenta lo que marca la diferencia para una buena pantalla de esqueleto: la estructura debe coincidir tanto como sea posible con la de los contenidos reales, de modo que los elementos de la página aparezcan en correspondencia con los marcadores de posición cuando estén completamente cargados.

¿Cuándo es mejor no usar la pantalla esqueleto?

Aunque, como hemos visto, es una excelente solución de UX/UI design, la pantalla esqueleto no está indicada en todos los casos. Concluimos, por tanto, mencionando algunas situaciones en las que es mejor recurrir a diferentes opciones.

En las páginas que se cargan rápidamente, no se necesita una pantalla esquelética que solo sería visible durante una fracción de segundo. En lo que respecta al contenido de vídeo, la rueda animada es la opción estándar utilizada en todos los contextos y, por lo tanto, se recomienda mantener un enfoque coherente con el ya generalizado. Durante los procesos que requieren más tiempo, como actualizaciones, conversión de archivos, cargas o descargas, es preferible utilizar una barra de carga que indique el porcentaje de finalización de la operación.

Concluimos recordando que la pantalla de esqueleto es una herramienta de UI UX design muy útil, pero nunca debe convertirse en una excusa para descuidar la optimización del sitio. En cambio, es un elemento complementario en la creación de sitios y aplicaciones que ofrecen una excelente experiencia de usuario.