Con nuestras webs deseamos llegar al mayor número de usuarios posibles. Sabemos, además, que estos usuarios accederán desde múltiples dispositivos. Lo más probable, es que hayamos realizado un diseño que pueda ser visualizado sin problemas en cualquier tamaño de pantalla. Sin embargo, aún con todo esto, tendremos usuarios que tendrán una mala experiencia de usuario, tendrán una experiencia lenta, muy lenta.
La variedad de dispositivos con los que accedemos a la web difieren entre sí no sólo en la pantalla. Existen diferencias y limitaciones en el propio hardware que harán la experiencia de estos usuarios más lenta. No sólo eso, el lugar de acceso puede ser muy distinto, con lo que también tendremos usuarios que experimenten lentitud debido a la calidad de su conexión
Puedes acceder al reporte de Open Signal aquí
Si queremos proveer a todos nuestros posibles usuarios una experiencia adecuada, deberemos tener en cuenta todos estos factores. Haciendo que nuestra web sea accesible en una cantidad mayor de dispositivos y una mayor cantidad de localizaciones.
Algunos ejemplos de Adaptative Loading AQUÍ
Adaptative Loading es basar la respuesta de nuestra web a partir de las limitaciones de los dispositivos, centrándose no solamente en el tamaño de pantalla. Es decir, se ajusta aún más a las necesidades y limitaciones que tiene cada uno de los usuarios que acceden a nuestra web.
En resumen, Adaptative Loading es un patrón que debemos plantear en la web para poder llegar a dispositivos de bajo de rendimiento (low-end devices) y no sólo a los dipositivos más potentes (High-EndDevices). Este patrón parte de la base “no todos los usuarios deben tener la misma experiencia, pero sí una experiencia de la misma calidad” y sus principios son:
Gracias a los navegadores modernos y a los nuevos estándares, podemos descubrir algunas limitaciones de nuestros dispositivos:
NOTA: Es importante saber que estas APIs son experimentales y que debe revisarse la compatibilidad con navegadores. Por ello hay que tomar una aproximación de “progressive enhancement” para estas APIs.
APIs para adaptative loading mediante Hooks de React: Puedes encontrarlas aquí
Existen algunas indicaciones, más genéricas, en base a la restricción que queramos atajar:
Teniendo en cuenta estas indicaciones, se pueden aplicar diferentes estrategias para abordar diferentes problemas que podamos encontrar. Sin embargo, cada web tiene unos retos y deben estudiarse las estrategias a llevar a cabo.
Algunas estrategias utilizadas para mejorar la experiencia de low-end devices son:
La aplicación de citas Tinder adopta este tipo de estrategias: más información aquí.
Si deseamos aumentar la cantidad de público al que va dirigido nuestra web o nuestra aplicación, los retos a afrontar son grandes. La fragmentación en los dispositivos a nivel de rendimiento, no sólo a nivel de diseño, pasa a ser un problema importante a tratar. La potencia de los dispositivos es mayor que en el pasado, sin embargo, la diferencia entre el hardware más potente del mercado y los dispositivos más económicos, sumado a los dispositivos más antiguos que hay en el mercado, hace que haya un gap muy grande de rendimiento.
Los desarrolladores, acostumbrados a primar las novedades y acostumbrados a trabajar con equipos potentes, a menudo sobrecargamos nuestras webs y aplicaciones con un uso excesivo de red o con un exceso de código Javascript que estresa los recursos de la máquina.
Es por esto que surgen patrones que permiten hacer más felices a los usuarios de todo tipo de dispositivo, proveyendo de una experiencia eficiente para todos.
Este obra está bajo una licencia de Creative Commons Reconocimiento-NoComercial 4.0 Internacional.