Obra del autor.
¿Cómo sabemos que las pantallas esqueléticas realmente funcionan?
YHace años, escribí sobre Diseño para la apariencia de velocidad, describiendo algunos impulsos y métodos para crear la ilusión de tiempos de carga de páginas cortos en aplicaciones y en la web.
Poco después de la publicación de ese artículo, tuve conversaciones increíbles con otros diseñadores e ingenieros, en gran parte en torno a una sola pregunta: “¿Cómo sabemos realmente que funcionan las pantallas esqueléticas?” Una pregunta válida: no existen estudios definitivos para validar la eficacia del patrón (que, para nosotros, parecía tener mucho sentido).
Las pantallas esqueléticas de diferentes formas y tamaños aparentemente se encuentran en todas partes de la web y las aplicaciones, en cualquier lugar donde los humanos se vean obligados a esperar.
¿Pero realmente funcionan?
Las pantallas esqueléticas (como pantallas de presentación), cuando se usan para indicar que una pantalla se está cargando, se perciben como de duración más corta en comparación con una pantalla en blanco (nuestro control) y una rueda giratoria — pero no mucho Las pantallas esqueleto no deberían bloquear cargas graduales de contenido (el contenido real debería reemplazar los objetos esqueleto inmediatamente cuando los datos estén disponibles). La gran mayoría de las pantallas esqueléticas que se utilizan hoy en día son pantallas de presentación y no pantallas esqueléticas en la forma original descrita por Luke Wroblewski. Al diseñar pantallas esqueléticas, recomiendo usar el movimiento para disminuir aún más el tiempo de duración percibido. Pantallas esqueléticas que aprovechan el movimiento que se mueve de izquierda a derecha. derecha (por ejemplo, una animación similar a una onda o un brillo, muy parecida a la que utilizan Facebook o Google) se perciben como de menor duración que los esqueletos que pulsan (la opacidad aparece y desaparece). Las pantallas de esqueleto que utilizan un movimiento lento y constante se perciben como de menor duración que Pantallas esqueléticas que utilizan movimientos rápidos o rápidos. Los tamaños de muestra en este estudio. son demasiado pequeños No concluyen nada de manera definitiva, pero proporcionan sugerencias útiles sobre cómo podríamos diseñar experiencias de espera.
Luke Wroblewski acuñó por primera vez el término “pantalla esqueleto” en una publicación de blog en la que aconsejaba que los diseñadores evitaran el uso de hilanderos (normalmente un elemento gráfico animado que gira sobre su punto central) en favor de marcadores de posición visuales. Hizo referencia al trabajo que había realizado en una aplicación móvil nativa llamada Polar, específicamente en torno a los tiempos de espera excesivos informados por los usuarios al cargar las vistas web de la aplicación. Inicialmente, los controles giratorios se usaban para indicar que se estaba cargando una vista web. Luke lo dijo mejor:
“Habíamos hecho que la gente mirara el reloj… como resultado, el tiempo iba más lento y también nuestra aplicación. Nos centramos en el indicador y no en el progreso”.
Para mitigar la atención en el proceso de carga, en comparación con el contenido real que se está cargando, Wroblewski introdujo un nuevo patrón de diseño novedoso: la pantalla esqueleto. En sus propias palabras, son “esencialmente una versión en blanco de una página en la que se almacena información”. cargado gradualmente.Wroblewski mostró que estos marcadores de posición visuales eran cuadros de color gris claro que aparecían instantáneamente en áreas donde el contenido aún no había terminado de cargarse.
Cambiar nuestro enfoque al contenido que se carga y alejarnos de la carga en sí: una pista falsa casi dickensiana. Pero ¿cuál es el impacto real?
Inicialmente, los hilanderos se utilizaban en la aplicación Polar para comunicar a los usuarios cuando la vista web se extraía de un servidor. Seamos claros aquí: en su publicación, Luke no se burla de la práctica común de usar hilanderos; en lugar de eso, comenta (quizás indirectamente) sobre una tendencia humana natural a detestar el tiempo libre y la necesidad de gestionar las percepciones humanas.
Los hilanderos y las barras de progreso son paradigmas de carga explícitos en el sentido de que centran al usuario en comunicar un período de carga y, en la mayoría de los casos, bloquean la interacción del usuario hasta que un diseño se haya cargado lo suficiente como para ser útil.
Paradigmas de carga comunes en la web y en las aplicaciones actuales, de izquierda a derecha: una animación de carga personalizada, un control giratorio y una barra de progreso.
Las pantallas esqueléticas son páginas en blanco que se van completando progresivamente con contenido, como texto e imágenes, a medida que están disponibles (es decir, cuando la latencia de la red lo permite). Las formas rellenas de tonos grises o neutros, comúnmente llamadas marcadores de posición, llegan al usuario instantáneamente al interactuar con llamadas a la acción o enlaces. Los marcadores de posición (los llamados “huesos” del esqueleto) se reemplazan con el contenido real del sitio y la ilusión se completa. Eso es lo que hacen las pantallas esqueléticas: crear la ilusión de una transición instantánea.
Estado de carga del suministro de noticias de Facebook en 2018
Estado de carga del Home Feed de LinkedIn en 2018
Google Drive
Estado parcialmente cargado de Google Drive en 2018: observe cómo se utilizan los esqueletos en las ranuras de acceso rápido
YouTube
Estado de carga de la pantalla de inicio de YouTube en 2018
Todos estos ejemplos anteriores emplean enfoques de diseño visual comunes:
Uso de movimiento dentro de los objetos esqueléticos Los objetos esqueléticos son de color gris claro o neutro. Facebook, Linkedin y YouTube parecen estar usando esqueletos como pantallas de presentación, mientras que Google Drive usa una rueda giratoria para cargar su estructura de carpetas principal y objetos esqueléticos para las ranuras de acceso rápido.
Mi cabina de pruebas improvisada en el centro de Vancouver, BC, Canadá
El estudio se compone de dos fases principales:
La primera etapa enfrenta un paradigma de carga común (una ruleta) directamente contra el enfoque de la pantalla esqueleto, y se describe con más detalle en la sección titulada “Paradigma versus paradigma”.
El segundo fase investiga variaciones en pantallas esqueléticas, midiendo la efectividad de cada variación. Planifiqué este estudio antes de conocer completamente los resultados de la primera fase, ya que supuse que la tendencia esquelética continuaría independientemente de su eficacia evaluada, y quería ver por mí mismo qué sería óptimo en mi propio trabajo. Vea la sección titulada “Variables de implementación” para obtener más información sobre esta fase del estudio.
Estudios previos
Ha surgido poca investigación que demuestre la eficacia de las pantallas esqueléticas para reducir los tiempos de cola percibidos. Viget publicó un estudio de 2017 que habla en contra del valor promocionado de los esqueletos en comparación con los hilanderos y una pantalla en blanco (alerta de spoiler: las pantallas de esqueletos tuvieron el peor rendimiento en términos de duración de tiempo percibida). Sin embargo, incluso con el estudio de Viget entre manos con resultados aparentemente indicativos, quería ir un poco más allá.
Pruebas principios
Quería probar pantallas esqueléticas tanto como pudiera en un dispositivo móvil físico, ya que eso representa mejor el estado “medio enfocado” en el que nos encontramos la mayoría de nosotros cuando estamos en nuestro teléfono móvil (mitad enfocados en el dispositivo y medio concentrados en el dispositivo). centrado en recorrer las calles o comer un panecillo). También quería participantes de prueba que (preferiblemente) no trabajaran en la industria tecnológica. Así que salí a las calles del centro de Vancouver y me puse a trabajar hablando con lugareños de todas las edades, géneros y situaciones de la vida.
En la segunda parte de este estudio, aproveché a los evaluadores en UserTesting.com (lamentablemente porque el clima había cambiado y se estaba volviendo cada vez más desagradable sentarse y esperar afuera a los participantes de la investigación).
Hipótesis: Mostrar una pantalla esquelética hará que los humanos perciban que un período de carga es más corto.
Metodología
Al considerar cómo acercarme mejor a los participantes, me di cuenta de que las pruebas anteriores que había intentado contra esta hipótesis estaban plagadas de problemas que podían mitigarse fácilmente, a saber, que:
Interrumpir al participante de la prueba para recopilar una evaluación haciéndole preguntas es disruptivo. Las preguntas que hice tendían a ser repetitivas, ya que realicé 12 pruebas individuales con cada participante y necesitaba hacer preguntas después de cada “ronda”. El orden en el que mostré cada paradigma de carga y La duración se aleatorizó manualmente, lo cual fue agotador de mantener durante el transcurso de un día entero de pruebas.
Para mitigar algunos de estos problemas, decidí que la mejor solución era una aplicación en un teléfono físico, presentada al participante de la prueba para que la completara por su cuenta. Las pruebas preliminares de usuario de la aplicación de prueba resultaron positivas después de varias iteraciones y mejoras.
Una vez que me acerqué a un posible participante de la prueba en la calle, le pedí que completara las tareas según las instrucciones del dispositivo y le aseguré que podía detenerse en cualquier momento para hacer cualquier pregunta o descansar. Una vez que completaron la prueba y ofrecieron comentarios abiertos sobre qué paradigma preferían, se les ofreció una dona como recompensa y mis participantes continuaron su camino, felices de saber que algún tipo extraño estaba probando diferentes métodos de carga. con extraños. ¡Hurra! 🍩
Se contactó a un total de 126 personas únicas en la calle de diversos orígenes, principalmente de entornos no orientados a la tecnología. El tamaño de la muestra fue de 80 personas que habían tenido experiencia con dispositivos móviles.
La aplicación de prueba📱
La aplicación fue escrita en el lenguaje de programación Swift y cargada en un iPhone 7 (este es el factor de forma que sentí que se sentiría cómodo en la mayoría de las manos). Cuando el participante completó su prueba, los resultados se enviaron a una base de datos de Firebase desde donde podía extraer los resultados diarios en un archivo CSV (valores separados por comas) para su análisis.
Se pidió a los participantes que leyeran las instrucciones presentadas en la aplicación y que se tomaran su tiempo para completar las tareas presentadas. Antes de comenzar las pruebas, hice que los participantes realizaran un calentamiento muy rápido para que supieran qué esperar. Esto es lo que nuestros participantes tuvieron que hacer:
Presione un botón para comenzar la prueba. Espere mientras observa un esqueleto, una ruleta o una pantalla en blanco. Observe el estado de la página cargada. Finalmente, pasan al último paso, donde responden dos preguntas: ¿Cuánto tiempo sintieron que tomó la carga de la página en segundos? y ¿Cómo les hizo sentir esperar a que se cargara la página?Repetirían esta prueba 8 veces más (por un total de 9 pruebas totales por sesión) También hice preguntas abiertas al final para recopilar observaciones más cualitativas. Por lo general, inicié esta conversación preguntando “de las diferentes formas de cargar una página móvil como viste hoy, ¿tenías alguna favorita?”
Para mitigar cualquier sesgo, donde ver un patrón antes que otro podría sesgar la duración percibida, la aplicación aleatorizó automáticamente el orden en que aparecían los diferentes paradigmas de carga.
La aplicación también aleatorizó la duración real presentada para cada paradigma de carga, por lo que la duración no parecía que se estuviera alargando o acortando progresivamente.
Se pidió a los participantes que completaran nueve pruebas diferentes (tres duraciones diferentes para cada uno de los tres paradigmas de carga)
Una captura de pantalla de Sketch, de la aplicación de prueba.
Resultados
Al probar esqueletos versus hilanderos y nuestro control en blanco en orden aleatorio, el esqueleto tuvo el mejor desempeño en términos de duración percibida cuando se muestra a personas que utilizan dispositivos móviles (consulte la siguiente tabla para obtener un resumen de los resultados medios de las pruebas para un tamaño de muestra de 80 personas). Las duraciones reales mostradas a estos participantes fueron asignadas al azar para evitar que interpretaran un aumento progresivo de la duración. Nuestro control en blanco tuvo el peor desempeño general.
Resultados que miden la duración percibida (cuánto tiempo sintió el participante que estaba esperando).
Resultados que miden la reacción emocional (cómo se sintió el participante después de ver el método de carga).
Las pantallas esqueléticas también obtuvieron mejores resultados en el nivel emocional: los participantes fueron los más felices con cargas de pantalla esqueléticas y los menos felices en general con una pantalla en blanco. Después de ver cada combinación de duración y método de carga, se pidió a los participantes que midieran cómo les hacía sentir cada visualización usando emoji, con 0 = muy felizy 4 = Máxima frustración. Esto es lo que se les mostró después de cada prueba:
Después de ver cada combinación de duración y carga…