Análisis de la web de la UEFA Champions League 2018

Este sábado será el gran acontecimiento del fútbol europeo, la final de la UEFA Champions League donde se enfrentarán Real Madrid y Liverpool por ser el mejor club europeo. La final tendrá lugar en la capital ucraniana, Kiev, y reunirá alrededor de 300 millones de espectadores por el mundo, siendo uno de los acontecimientos deportivos más vistos del mundo. Por ello haremos un breve análisis de la web de la final en la página de la UEFA Champions League.

Web de la Champions League, a la izquierda la versión de escritorio y a la derecha la de móvil

Como podéis ver en la imagen que ilustra el post, lo primero que se puede destacar es la falta de contraste en la versión de escritorio salvo en el banner de la final, cosa que mejora un poco en la versión móvil. Y en ambos casos se debería elegir un tipo de letra más legible (u otro color de fondo) y que se viera con claridad como el de las migas de pan/menú de navegación de la versión móvil.

En este caso parece que el user journey se tiene claro, se destaca con un banner lo que se quiere que los usuarios vean, en este caso la fecha, hora y lugar del partido y los dos equipos que se disputarán el trofeo. Sin embargo, la web no tiene escritos todos esos datos en la portada por lo que un lector de pantalla o un navegador web de texto sin JS no podrá leer la fecha ni la hora, sólo Final, Kiev y los dos equipos, Real Madrid y Liverpool, ya que todos esos elementos están en el javascript . Como podéis ver en este pantallazo de W3M (navegador de texto) viendo la web:

Captura de w3m mostrando el trozo del banner de los datos del partido en el centro

Los datos del partido en la portada (aparte de en el  banner visual) se dan a través de JS por lo que un navegador con Javascript desactivado o sin intérprete de JS no lo puede leer. Un fallo de usabilidad y accesibilidad no menor en cualquier caso, aunque podamos encontrar la fecha accediendo a la noticia sobre ella en el enlace “TODO sobre la gran final” y ahí sí puede accederse desde cualquier tipo de dispositivo.

Como he dicho la web de la Champions League tiene un User Journey muy marcado, los ojos del usuario se van al banner donde pone los datos del partido ya que es la parte más luminosa de la portada visible. La web tiene dos menús de navegación: el de la UEFA en gris, y el de la Champions League con nueve elementos en azul. La zona principal donde se enlaza a todo lo necesario sobre la final y debajo de la portada visible todas las noticias y vídeos relacionados con la Champions League y abajo el pie con otro menú de navegación.

Portada completa de la Champions League

Como podéis ver la web de la Champions tiene una clara jerarquía visual y el usuario puede navegar de varias formas y recorrer la página a su gusto. Es un producto cuidado, no perfecto, pero sí que se nota que los elementos básicos han sido diseñados con una arquitectura de la información correcta, aunque posteriormente en la ejecución final haya primado lo visual sobre la claridad o el contraste de lectura.

User Journey y navegación

Cuando un usuario entra a la web de la Champions League, puede querer realizar varias tareas: informarse sobre la final, obtener información sobre el lugar de la final, ver datos sobre la competición o comprar entradas.

Todas esas tareas están en la parte visible de la web, de una manera más o menos fácil a través de los dos menús de navegación y el bloque de contenido destacado por lo cual la funcionalidad de la web se ajusta a lo que pueden buscar los usuarios en ella.

El único pero que posiblemente puede tener la página respecto a la navegación es el buscador que tiene un aspecto en sus resultados diferente al resto de la página y los resultados de búsqueda son correctos pero algo desordenados y prevaleciendo lo visual sobre la información textual y de contexto.

Versión móvil

La versión móvil de la web de la Champions League está mejor definida y diseñada con más claridad que su equivalente de escritorio.

El límite entre la versión móvil y la de escritorio está en 960 píxeles de ancho, por lo que los dispositivos con una anchura igual o menor a esa, son redirigidos a la versión móvil.

Versión móvil de la portada de la Champions League

El principal problema de la versión móvil es que el menú de navegación visible se confunde con unas migas de pan, ya que hace las dos funciones en el mismo espacio. Lo que confunde al usuario y le hace pensar. En la portada por ejemplo además no te das cuenta casi de que está allí el menú de navegación, ya que tienes que hacer scroll horizontal para ver todas las opciones del menú de navegación. La mayoría de la gente usará el menú hamburguesa y navegará allí creyendo que es la única opción de navegación, cuando tiene dos opciones realmente.

El resto de las opciones de portada son similares a la versión de escritorio pero adaptadas a tamaño móvil, que al ser diseño de escritorio muy modular se adapta muy bien a la versión de móvil.

Conclusiones

La web de la UEFA Champions League es un buen producto digital con un User Journey adecuado a los usuarios que la visitan. Sin embargo debe mejorar aspectos como el contraste y la accesibilidad de gran importancia en una web para un público generalista y de ámbito internacional como es el caso.

Sería interesante añadir elementos ARIA a la web para que los usuarios con diversidad funcional pudieran usar la web en igualdad de condiciones, ya que actualmente no tiene esos elementos necesarios en una aplicación dinámica y moderna.