ALUMNOS
Contactar
Menu
ALUMNOS
Contactar

Florence and the Machine y el análisis heurístico de Jakob Nielsen

6 de agosto de 2018 12:25:00 CET

Este 29 de Junio Florence and the Machine ha sacado su nuevo álbum: High As Hope. Mientras todas las miradas apuntan a temazos como Big God, Patricia o Hunger, yo voy a hablar de lo que de verdad nos importa, un asunto que hemos tratado en el curso 'UX/UI Design Bootcamp' de NEOLAND: la usabilidad de su web.

Pero a ver Juan ¿qué es eso de la heurística?
Pues mira, antes de contestarte y si me lo permites, te voy a hablar de un concepto muy importante para entender la heurística y es que, desde hace unos 35 años, un señor llamado Jakob Nielsen ha estado investigando como loco sobre algo llamado usabilidad y en su propia web la define así:

Usability is a quality attribute that assesses how easy user interfaces are to use. The word “usability” also refers to methods for improving ease-of-use during the design process.

O sea, cuando hablamos de la usabilidad de una web, hablamos de lo sencillo o difícil que es usar su interfaz.

Y aquí, es donde entra la heurística.

En UX, la heurística son todas aquellas prácticas que favorecen la usabilidad de una web.

¿Y con qué criterio vas a analizar tú la usabilidad de la web de Florence and the Machine?
Pues tienes razón, no podemos llegar aquí y decirle a Florence ni media sobre su web porque ni tú ni yo hemos estado 35 años estudiando el tema de la usabilidad. Pero conocemos a alguien que si lo ha hecho.

Nuestro querido Jakob Nielsen nos ha regalado a los millenials su  lista de las 10 heurísticas para el diseño de interfaz de usuario:

  1. Mostrar el estado del sistema
    ¿Está el usuario siempre informado de lo que está pasando en la web mediante un feedback constante?
  2. Hablar el lenguaje del usuario
    ¿Se usan palabras, frases y conceptos familiares para el usuario?
  3. Control y libertad del usuario
    ¿Es capaz el usuario de navegar libremente, retroceder, interrumpir, buscar rutas alternativas?
  4. Consistencia y estándares
    ¿Se comportan las cosas (botones, organización, grid, feed, tarjetas, etc.) siempre igual?
  5. Prevenir errores
    ¿Ayuda al usuario a no cometer errores?
  6. Aliviar la carga en la memoria del usuario
    ¿Tiene el usuario que recordar información de una parte a otra de la web?
  7. Atajos, flexibilidad y eficiencia.
    ¿Existen atajos de teclado o sistemas que agilicen la navegación del usuario?
  8. Estética y minimalismo
    ¿Existe ruido visual?¿Existe una jerarquía en el contenido presentado?
  9. Comunicar errores con claridad
    ¿Se señalan visualmente los errores?¿Se ofrecen soluciones?
  10. Ayuda y documentación
    ¿Es esta fácil de encontrar?¿Ofrece instrucciones claras?

Nielsen nos asegura que si una página cumpla todas estas pautas querrá decir que nos encontramos ante una web con buena usabilidad.

Comienza oficialmente el análisis heurístico de la web observando qué puntos de la lista de Nielsen se cumplen y qué puntos no, comentando estos últimos con más profundidad (redoble por favor):

1_xIjN1oEBRqy_oHEcUaxEqQ

¿Cumple la web con las 10 heurísticas de Jakob Nielsen?

1_FzvZvk7DYpQmT3ZsF42gIg

 

¿Tan mal está la web en cuanto a usabilidad?

Mostrar el estado del sistema
La web presenta una pantalla de carga en la que el logo de la banda cambia de opacidad. Al tener una estructura muy sencilla, no parecen existir más procesos complejos que necesiten ningún indicador de carga.
 

       1_VopHVkOrfqdD0E4FkvtV6Q

 

Hablar el lenguaje del usuario 
Hay partes de la web que aparecen en español y otras en inglés lo que es bastante incoherente. Esto suele ocurrir cuando hay secciones en una web que están conectadas a aplicaciones externas a la página.

         1_IboHG-NR3zH2zIplu6t0zw

Control y libertad del usuario 
Por un lado, cuando el usuario selecciona LIVE DATES la web hace un scroll automático rapidísimo hacia la parte inferior de la página pasando por una cantidad enorme de contenido que ningún usuario humano sería capaz de procesar. Además, una vez abajo la única forma de volver a la parte superior es mediante un scroll manual que puede tardar milenios. Si eres cliente habitual del Parque de Atracciones de Madrid te sonará esta experiencia.

1_63Ga_mxtc06BYsYGTGokNQ

Por otro lado, y no quedándose contentos con esto último, si el usuario entra en la tienda oficial de la web no tiene manera de regresar a la home de la que viene.

1_u-ern_8aRHrK3G1qPzESnA

Consistencia y estándares 
La web presenta varios casos de falsa affordance:

                                  1_XSlTwHILZOmszd1pJ1Pung

Primero encontramos este icono, un nice scroll, y aparece en cuanto se accede a la web. Con esa flechita apuntando hacia abajo parece que en cuanto comiences el scroll va a empezar el movimiento descendente, pero no.

El problema ocurre cuando, al inicio del scroll, cambia la portada de la web,  lo hace lentamente y sin seguir el ritmo que marca el usuario con su dedo, no se da movimiento alguno hacia abajo, lo que produce la sensación de que se está haciendo algo mal o de que el scroll no funciona. Solo cuando ha acabado la animación del cambio de portada se permite el desplazamiento descendente.

Otro caso sucede en la pantalla de registro. Aparece un wizard en el que los pasos parecen botones, incluso cuando el usuario hace hover cambian de color. La confusión es real.

1_m9hBvtcpkzIpg55QJw_Brw

Prevenir errores 
Honestamente, es prácticamente imposible leer esto.

1_m_q0VbtC9g5ljcqJ1N4wng


Aliviar la carga en la memoria del usuario 
Cuando el usuario hace scroll en la home es bombardeado con una inmensa cantidad de contenido que es puramente artístico. Si a esto le sumamos que el menú principal de la web no le acompaña de ninguna manera mientras desciende por la página, se traduce en un usuario intentando recordar de dónde viene y a dónde puede ir mientras trata de procesar todo el contenido que le va apareciendo en pantalla.

1_6A4oVHxcAq0UmLDalom_mA


Atajos, flexibilidad y eficiencia
 
El usuario puede navegar por la web usando el tabulador pero no se muestra visualmente a través de un focus y no funciona bien en todos los puntos de la web, así que podemos decir que muy poco funcional.

Estética y minimalismo 
En la web se han hecho elecciones estéticas interesantes, jugando con fotos , dibujos y tipografías handwritten que aparecen y desparecen en un festival de animaciones.

1_sNX0SSi7ugI4L1R3rJipsw

El problema viene cuando estas entran en conflicto con otros elementos:

1_H5Z6EQm3f6FHpW6gHDweqA

¿Y estos botones laterales? Además de estar en horizontal, van apareciendo y desapareciendo cuando el usuario hace scroll, superponiéndose con otros elementos.

1_H7eoTgYPXxX6dhLd9vrjZg

En el momento en el que empiezan a darse estos conflictos podemos hablar de que existe cierto grado de ruido visual.

Comunicar errores con claridad 
Al menos la web cuenta con una página de error 404 propia:

1_lisGLEh_5joT_S1EGbUBQQ

Y señala alto y claro cuando el usuario ha cometido un error:

         1__hN_j-jVlSZ6dr525dyjhg 

Ayuda y documentación 
Aunque la web cuenta con una sección de FAQs, información sobre compras, envíos, etc. No siempre se le da al usuario la información que necesita, por ejemplo:

1_hcuTqa0yPaOnJxVPqBR3_Q

Cuando el usuario hace click en SIGN UP, no se presenta claramente dónde se está registrando. Parece que es solo en una Newsletter pero también lo está haciendo en la tienda de la web. Además, ese cuadrado es otra falsa affordance, no sirve absolutamente para nada aunque parece una checklist.

 

¿Podemos ya decirle a Florence and the Machine que su web es una basura?
A ver, la web de Florence and the Machine no es un portento en cuanto a usabilidad. De hecho, queda claro que esta no ha sido un objetivo principal para sus diseñadores. Pero no nos pongamos así.

No hay que tomarse las 10 heurísticas de Nielsen como si fueran mandamientos, pero si que hay que tenerlas muy en cuenta si queremos que el usuario tenga una experiencia positiva navegando por nuestra interfaz.

Una web no es buena o mala dependiendo de si tiene más o menos usabilidad, una web es buena o mala dependiendo de si cumple o no con los objetivos que se han planteado a la hora de crearla.

Puedes conocer más sobre NEOLAND y todos nuestros cursos pinchando aquí.


 

También te puede interesar

Estos post sobre UX/UI DESIGN

Suscríbete a nuestro email

Todavía no hay comentarios

Dinos que estás pensando