Diseño web reactivo: el secreto para crear aplicaciones web que se sientan increíbles

En el último año, he observado dos técnicas sutiles que utilizan algunos desarrolladores que hacen que una aplicación web pase de ser lenta y desagradable a muy reactiva y pulida.

Creo que estas técnicas son lo suficientemente importantes como para necesitar un nombre: Diseño web reactivo.

En resumen, el diseño web reactivo es un conjunto de técnicas que se pueden usar para crear sitios que siempre se sienten rápidos y receptivos a las entradas del usuario, independientemente de la velocidad o la latencia de la red.

Como desarrolladores web y autores de marcos, creo que encontrar formas de hacer que estos patrones sean predeterminados en todo lo que construimos es una prioridad para mejorar UX y el rendimiento percibido en la web.

Técnica 1: cargas instantáneas con pantallas de esqueleto

Cuando se usa bien, esta técnica casi nunca se nota, pero tiene un gran impacto en el rendimiento percibido de un sitio.

Curiosamente, la técnica es utilizada por casi todas las aplicaciones nativas y las hace sentir muy reactivas incluso en redes terribles, ¡pero casi nunca se usa en la web!

¡La oportunidad de esta manera miente!

En resumen, las pantallas de esqueleto aseguran que cada vez que el usuario toca cualquier botón o enlace, la página reacciona inmediatamente al hacer la transición del usuario a esa nueva página y luego cargar el contenido a esa página a medida que el contenido está disponible.

Facebook utiliza una pantalla de esqueleto para mejorar el rendimiento percibido cuando lo abre por primera vez

Las pantallas de esqueleto son una técnica clave de rendimiento percibido, ya que hacen que las aplicaciones se sientan mucho más rápido, reduciendo drásticamente la cantidad de momentos en los que el usuario se pregunta:

Que esta pasando? ¿Se está cargando? ¿Lo toqué bien?

Flipkart.com es un raro ejemplo de un sitio web que hace uso de este enfoque. Navegar a través de categorías o tocar productos, por lo tanto, se siente muy rápido, incluso cuando los resultados reales tardan unos segundos en cargarse:

Captura de pantalla de flipkart.com lanzada desde la pantalla de inicio en modo independiente en Android

Cuando esta técnica se usa mejor, el contenido que ya está disponible, como miniaturas o títulos de artículos, se puede reutilizar para mejorar aún más el rendimiento percibido, haciendo que las cargas se sientan realmente instantáneas.

app.jalantikus.com usa el patrón Skeleton Screens y reutiliza títulos y miniaturas en las transiciones

Sitios de prueba con pantallas de esqueleto

Probar qué tan bien los sitios usan esta técnica es fácil: simplemente use la emulación de red de Chrome para hacer que la red sea lo más lenta posible y luego haga clic en un sitio. Si lo está haciendo bien, el sitio seguirá sintiéndose ágil y receptivo a su aporte.

La velocidad más lenta admitida en la emulación de red de Chrome

Técnica 2: "Cargas estables" a través de tamaños predefinidos en elementos

¿Conoces esa sensación de que un sitio web está saltando mientras intentas usarlo? ¿Estás intentando leer un artículo y el texto sigue moviéndose? Eso es lo que llamamos una "carga inestable", y necesitamos quemarla con fuego .

El contenido de slate.com salta muy agresivamente a medida que se carga la página. Cuanto más lenta sea la red, más tiempo saltará.

Las cargas inestables hacen que los sitios web sean difíciles de interactuar, y los hace sentir ... bueno ... ¡Inestables!

Navegar por un sitio inestable siempre me recuerda cómo me imagino que se sentiría caminar durante un terremoto.

Las cargas inestables son causadas por imágenes y anuncios incrustados en una página pero sin incluir ninguna información de tamaño. Por defecto, el navegador solo conoce el tamaño de estos una vez que se han cargado, así que tan pronto como se carga una imagen, ¡GRACIAS !, toda la página se desliza hacia abajo .

Para evitar esto, todas las etiquetas en una página deben incluir de manera proactiva las dimensiones de la imagen que contendrán.

En muchos casos, las imágenes utilizadas en ciertas páginas siempre tienen el mismo tamaño y, por lo tanto, su tamaño simplemente se puede incluir en la plantilla HTML, pero en algunos casos el tamaño de las imágenes es dinámico y, por lo tanto, su tamaño debe calcularse cuando la imagen se carga y luego se crea una plantilla. en el HTML cuando se crea.


Lo mismo es cierto para los anuncios, a menudo culpables cuando se trata de cargas inestables. Siempre que sea posible, cree un div que contenga un anuncio y, en su plantilla, ajústelo con la mejor estimación de cuán grande será este anuncio.

Tenga en cuenta que las cargas inestables son peores en las redes lentas, ya que acaba de establecer la lectura de contenido cuando de repente salta, y nunca puede estar seguro de estar a salvo.

Poniendolo todo junto

He creado un pequeño sitio de demostración en reactive.surge.sh para demostrar la diferencia entre el diseño web convencional y el reactivo.

Artículo convencional cargando

Tenga en cuenta lo lento que se siente y lo frustrante que es el salto de contenido. Curiosamente, encuentro estos órdenes de magnitud más molestos en dispositivos móviles cuando toco la pantalla y no veo que reacciona.

Cargando un artículo con diseño web reactivo

Con un diseño reactivo, la carga se siente instantánea y el sitio permanece reactivo al tocar el ícono posterior y el título del artículo varias veces

Terminando

Cuanto más lenta es la red, peor es la experiencia del usuario cuando las transiciones de página se bloquean en la red y las páginas saltan durante períodos prolongados.

Con Reactive Web Design podemos hacer que nuestra experiencia se sienta ágil y receptiva ("Diseño receptivo" como un nombre ya fue tomado, ¡oh!) Incluso en redes lentas y dolorosas.

¡Me encantaría saber acerca de los datos de la comunidad sobre el efecto del rendimiento percibido en los KPI, como el compromiso y los ingresos!

Además, recomendaría a los autores de marcos y bibliotecas que consideren cómo hacer que las pantallas de esqueleto y las cargas estables sean las predeterminadas, también conocido como el pozo del éxito.

Si tienes alguna idea sobre esto, tuiteame @owencm, y si lo disfrutaste, ¡dale un ♥!

PD asegúrese de visitar el sitio de demostración reactive.surge.sh en un dispositivo móvil para obtener toda la gloria.