{ Pasión por el código }

© Blog Ailon Webs

Las métricas vitales para medir la experiencia de usuario en una página web

Publicado el 27/10/2020, por G. Lara

experiencia de usuario en una página web
Las métricas vitales para medir la experiencia de usuario en una página web

Google ha lanzado una nueva iniciativa llamada 'Web Vitals' para proporcionarnos una guía unificada que identifican las señales de calidad que son esenciales para brindar una excelente experiencia de usuario en una página web.

Son conceptos complicados desde el punto de vista técnico pero su motivación es simple y acertada: que el usuario que acceda a una página web tenga una gran experiencia. Cuanto mejor sea la experiencia de usuario más tenderán los usuarios a quedarse en una página web y volver a ella.

Todos sabemos lo importante que es dar una buena primera impresión. Cuando entra alguien a una página web la primera impresión puede marcar la diferencia entre que alguien se convierta en un usuario leal o que se vaya y nunca regrese. La pregunta es, ¿qué produce una buena impresión y cómo se mide el tipo de impresión que probablemente esté causando en sus usuarios? ¿es una métrica importante la experiencia del usuario?

Por esta razón, indagar en las métricas que propone Google nos parecen interesantes para así poder jerarquizar nuestras prioridades a la hora de evaluar entre otras cosas la experiencia del usuario.

Métricas vitales para medir la experiencia de usuario en una página web

Las métricas que componen Core Web Vitals nacen para medir precisamente esto y evolucionarán con el tiempo. El conjunto actual para 2020 se centra en tres aspectos de la experiencia del usuario (carga, interactividad y estabilidad visual) e incluye las siguientes métricas (y sus respectivos umbrales):

1. Carga de la página

Para ello se usa la métrica Largest Contentful Paint (LCP): mide el rendimiento de carga. Para proporcionar una buena experiencia de usuario, la carga de la página debe ocurrir dentro de los 2.5 segundos desde que la página comienza a cargarse.

A nadie nos gusta cargar una página web y esperar mirando a una pantalla vacía mientras carga. Debemos tener en cuenta el uso tan generalizado de dispositivos móviles y de las redes de telefonía móvil. No todos tienen planes de datos de alta velocidad. Cuanto más ligera sea la página web menos datos necesitan transmitirse y mejor es la experiencia de usuario.

No es fácil mantener una página web bajo este umbral de carga rápida pero puede conseguirse siendo muy cuidadosos con los recursos que se utilizan y optimizando la carga de los recursos para que sea escalonada y bajo demanda. Es decir, no cargar elementos grandes como videos hasta que el usuario quiera interactuar con ellos, cargar imágenes de tamaño más reducido para pantallas móviles, no abusar de librerias de programación ni de tipos de fuentes.

experiencia de usuario en una página web carga de la página
Experiencia de usuario en una página web - LCP: Carga de la página

2. Tiempo hasta que la página es interactiva

Para esto se usa la métrica First Input Delay (FID): mide la interactividad. Para proporcionar una buena experiencia de usuario, las páginas deben tener un FID de menos de 100 milisegundos.

Una vez que la página ha cargado tampoco es agrable intentar interactuar con ella, es decir, hacer clic en un enlace, o tocar un botón y que haya un retraso hasta que la página web reaccione. Más de uno hemos cargado una página web "muerta" que no responde. No todos los usuarios están usando dispositivos con gran potencia de cálculo, la página web tiene que ser reactiva y estar "viva" enseguida. Este umbral también es bajo: 100 milisegundos, pero se puede conseguir con una planificación adecuada de secuencias de comandos o scripts para que el navegador pueda comenzar a procesar los controladores de eventos necesarios en respuesta a esta interacción.

experiencia de usuario en una página web Tiempo hasta que la página es interactiva
Experiencia de usuario en una página web - FID: Tiempo hasta que la página es interactiva

3. La estabilidad visual

Para esto se usa la métrica Cumulative Layout Shift (CLS): mide la estabilidad visual. Para proporcionar una buena experiencia de usuario, las páginas deben mantener un CLS de menor a 0.1 puntos.

A todos nos habrá pasado que cuando estás leyendo o haciendo clic sobre una página web que esta de repente mueve todo su contenido y esto causa que tu clic caiga en otro enlace que no querías o tu ojos pierden el hilo de la linea que estabas leyendo. Esta métrica pretende medir la experiencia de usuario en el ámbito de la estabilidad o quietud del contenido. No es agradable que la página web parezca un tio vivo de elementos en movimiento.
Estos movimientos inesperados en la página suelen suceder cuando se escalona la carga de elementos y se añaden dinámicamente a una página web que ya está cargada y esta siendo usada.

experiencia de usuario en una página web La estabilidad visual
Experiencia de usuario en una página web - CLS: La estabilidad visual

Para ello esta métrica mide el movimiento de los elementos de la página en cada fotograma de carga de la página web. Si en un fotograma un elemento ocupa el 50% de la pantalla pero en el siguiente fotograma se mueve hacia abajo un 25% del tamaño de la pantalla se tiene en cuenta la suma del área que ocupa el elemento durante estos dos fotogramas, es decir 50% + 25% = 75% la "infracción" sería en este caso de 0.75 puntos.
Esto demuestra que el umbral que se ha marcado para esta métrica también es muy baja, pero esto redunda en que el usuario de una página web se merece la mejor experiencia y todos nuestros esfuerzos deben ir en esta dirección.

Estas métricas no se presentan en términos absolutos sino relativos. Son indicadores hacia las áreas que debemos esforzarnos en mejorar.
Ahora prodrás reconocerlas en las webs que visitas o incluso en tu página web si eres propietario de una. Si notas que tu página no cumple con alguna de estas premisas o piensas que no es usable en todos los dispositivos contáctanos, podemos asesorarte sobre como mejorar tu página web o mejor aún crear una web nueva teniendo como principal objetivo la experiencia de usuario.

¿Cómo se miden estas métricas? Y conseguir mejorar la experiencia de usuario en una página web

Google tiene una serie de herramientas como la API[*] de PageSpeed Insights que utilizamos para hacer una batería de pruebas sobre las páginas webs que desarrollamos y así poder optimizar la experiencia del usuario. Una vez que tenemos los resultados el equipo de Ailon Webs se reune para ver qué mejoras se pueden realizar en la página web y cuales medidas tendrán el mayor impacto en la experiencia del usuario.

* [una API es una Interfaz de programación de aplicaciones, del ingés Application Programming Interface, es un conjunto de subrutinas, funciones y procedimientos que ofrece cierta biblioteca para ser utilizado por otro software como una capa de abstracción]

Conclusión

Las Web Vitals o las métricas vitales de Google para medir la experiencia de usuario en las páginas del 2020 son: carga, interactividad y estabilidad visual.

Estas métricas que miden la experiencia de usuario en una página web evolucionan con el tiempo, como todo en internet, siempre cambia. Lo importante es no perder de vista el objetivo final: la impresión que tenga un usuario al usar una página web. Cuanto mejor sea la experiencia del usuario mas éxito tendrá tu página web en el largo plazo.

Podemos pensar en ello como una especie de ITV para páginas web, donde nos indicará las áreas de mejora en la experiencia de usuario. Es sorprendente como unos pequeños cambios, a veces de origen técnico y a veces de diseño y maquetación, pueden hacer un gran impacto en las métricas y por ello también en la felicidad de los usuarios de tu web.

Fuentes

Recibe nuestras promociones

Por favor escriba un email válido
No ha leído y aceptado el aviso de protección de datos

Categorías: Diseño de páginas web

Etiquetas: diseño UI, diseño UX, tendencias digitales