Una experiencia de compra terrorífica.

izaskunsaez Consejo, diseño, User Experience, User Interface 2 Comments

Este fin de semana se celebra la 21ª edición del Festival de Cine Fantástico de Bilbao, y como me flipan las pelis rarunas, no me lo voy a perder.
Tranquilo, no he venido a contarte mi vida, sino que voy a tratar de analizar, desde el punto de vista del diseño centrado en la usabilidad y la experiencia de usuario, (y de manera constructiva), el proceso de compra online de entradas de cine para este festival.
Al lío
El caso es que me he dirigido a la página del FANT 2015 para comprar las entradas, y ahí he recibido el primer “zas en toda la boca” ya que me he visto obligada a visitar 2 web distintas para conseguirlas, es decir, en lugar de poder adquirir las entradas dentro de la propia página web del Festival, se redirige al usuario a  los sites de los lugares donde se proyectarán: teatrocampos.com y golem.es

La primera entrada que quería comprar es la de la doble sesión del sábado fant2fun, (¡doble sesión de cine Zombie!) y para ello he seguido estos pasos en los que trataré de explicar el proceso de compra con capturas de pantalla y videos:

He ido a golem.es para comprar la entrada y nada más aterrizar en esta web, me ha costado encontrar alguna referencia al FANT debido a la saturación visual de la home.

GOLEM1

Tras dar unas cuantas vueltas y, cuando estaba a punto de desistir, he probado a buscar dentro de la galería de imágenes de la parte superior (enmarcada en rojo en la imagen de abajo) y, por fin, he dado con ello a pesar de que para ser un festival de cine importante y bastante cercano en el tiempo (empieza el viernes 8 de mayo) estaba en la 2ª pestaña dentro de “próximamente“, es decir, oculto a la vista del usuario..

GOLEM2

Consejo de diseñadora:
  1. Eliminaría la galería como contenedor de elementos relevantes.
  2. Visualmente “limpiaría” y ubicaría los estrenos en primer lugar y justo debajo los próximos estrenos, siempre fuera de un slide o galería.
  3. Eliminaría la barra lateral de forma que se pueda utilizar el ancho completo de la web.

Sigamos con nuestro proceso de compra…

Vale, por fín hemos encontrado el FANT dentro de toda esa maraña de información ¡Vamos a comprar las entradas!… oh… wait! ¿dónde está el botón de comprar? (echa un vistazo al video, dura pocos segundos.)

Como puedes ver, en lugar de ubicar el CTA/botón de compra (Call to action) en el comienzo de la página y a la vista del usuario, es necesario hacer un largo scroll para encontrarlo y tampoco aparece muy destacado que digamos. Este es un error importante ya que supongo que la intención de golem.es es vender entradas a través de su site de forma eficaz, y sin embargo han utilizado y ubicado los elementos de forma incorrecta.

GOLEM-BOTON-COMPRA

Cuesta encontrar el boton de compra en la imagen, ¿verdad?

Consejo de diseñadora:

Aunque el texto del “botón” es perfecto, la ubicación y el diseño no son los más adecuados. Sé que es un botón de compra porque el cursor del ratón cambia cuando me pongo encima del texto, pero su aspecto no invita a pulsar sobre él. Estamos hablando de uno de los elementos más importantes de esta sección y sin embargo está pensado como si no quisieran vender entradas. Eso sí, el link al programa completo es perfectamente visible, curioso.

Ya hemos encontrado el botón de comprar, ¡estamos cerca!

Ya siento el poder de las entradas… noto su fuerza… espera…

GOLEM5

Esta es la pantalla que aparece tras pulsar el “botón” de compra

Estarás de acuerdo conmigo en que la pantalla que ves sobre estas líneas no es lo más amigable que te has encontrado hoy, pero oye, vamos a continuar.

Después de elegir 2 entradas toca rellenar este breve formulario de aquí debajo. Lo primero que me llama la atención es que no hay ningún campo marcado como obligatorio, así que como a mi no me gusta ir dando mi número de teléfono, me voy a saltar este paso…

GOLEM6

GOLEM7

¿Ves el problema? No solo te dice TARDE que este dato era obligatorio, sino que se borran los campos que ya habías introducido. En fin, vuelta a empezar. Paciencia.

Por fin he rellenado todos los campos e introduzco el nº de tarjeta para que se realice el cargo, ¡entradas compradas!

fingolem

Consejo de diseñadora:
  1. Vale que sea una pantalla muy informativa, pero un poco de jerarquización en los textos no vendría nada mal.
  2. De nuevo cometen el error de no dar el aspecto de botón a un botón (Vuelta a cartelera).
  3. Destacaría el Progress Tracker superior porque es muy poco visible y es un elemento importante dentro de un proceso de compra, ya que informa al usuario de cuántos pasos son los que hay que dar para completar la compra y te ubica durante este proceso.

Como ves, los detalles dentro del diseño de una web pueden influir en las ventas que se realicen a través de ella. Yo estoy acostumbrada a comprar de modo online, pero estoy segura de que mucha gente habría abandonado el proceso antes de terminar.

Me he dejado muchas cosas en el tintero, pero espero que este rápido análisis te ayude a tomar conciencia de la importancia del diseño tanto en ui como en ux. En ningún caso mi intención es la crítica sin fundamento y por eso he apoyado mis palabras con material gráfico.

¡En fin! Ya tengo mis entradas y seguro que me lo pasaré genial en el cin. Son pelis de Zombies ¿qué puede salir mal?.

Si te ha parecido interesante, ¡compártelo! 🙂

 

Comments 2

    1. Post
      Author

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *