Pública ANÁLISIS HEURÍSTICO DE TICKETMASTER
INTRODUCCIÓN
En este post revisaremos a fondo la interfaz de Ticketmaster, analizando cada una de las diez heurísticas de Nielsen a través de distintos ejemplos que muestren tanto malas como buenas prácticas de los mismos.
Además hablaremos de la metodología empleada para llevar a cabo este análisis, así como un ranking de todos nuestros hallazgos según su gravedad donde propondremos posibles soluciones.
Por último, analizaremos esta interfaz desde una perspectiva de género e inclusión, veremos si cumple ciertos requisitos imprescindibles en la actualidad en la que vivimos y que ya va siendo hora de aplicar.
¿Qué es Ticketmaster?
Ticketmaster es la empresa líder global de venta de entradas para eventos y música en directo, ya sean festivales o conciertos a nivel internacional. Nos introducimos en su plataforma web, a través de la cual podremos comprar entradas de todo tipo en línea.
¿Por qué Ticketmaster?
A parte de porque soy una apasionada de la música, el teatro y los festivales, he querido escoger esta plataforma ya que la música es un idioma universal que se habla en todas partes, y por tanto, al cual todas las personas deberíamos poder acceder sin trabas y fácilmente.
Creo que la interfaz de Ticketmaster, pese a tener un diseño sencillo e intuitivo, tiene muchos puntos a mejorar y que veremos a continuación.
METODOLOGÍA
Con el fin de conseguir un profundo análisis heurístico del diseño UX empleado en la interfaz de Ticketmaster nos hemos propuesto ponernos en la piel del usuario, realizando una serie de tareas sencillas:
1- Navegar por los distintos eventos, en busca de un concierto al cual nos interese asistir.
2- Elegir sitio y comprar entrada.
3-Descargar entradas desde nuestro perfil.
Durante todo este flujo de usuario, se llevarán a cabo capturas de pantalla en las cuales remarcaremos aquellas partes que aplican a su respectiva heurística de Nielsen.
Además, contrastaremos los datos extraídos con distintas checklists de UX, para asegurarnos de que no nos dejamos nada en el tintero. Todos estos pasos nos ayudarán a visualizar cómo será el ranking final.
LOS 10 PRINCIPIOS HEURÍSTICOS DE NIELSEN
1. Visibilidad del estado del sistema ⏳
Es importante que el usuario sepa en todo momento dónde se encuentra y qué es lo que está sucediendo, debe recibir una retroalimentación a través de mensajes apropiados en un tiempo razonable.
BUENA PRÁCTICA ?
Se utilizan breadcrumbs que muestran dónde nos encontramos dentro de la web y la ruta que hemos seguido para llegar hasta allí. (Aunque he podido observar que en la categoría de «Hip Hop/R&B» no aparece).
MALA PRÁCTICA ?
En el caso de la pasarela de pago, vemos que sí que indica los pasos que tienes que seguir y cuántos son pero no en qué consisten a no ser que ya estés en él. Pienso que sería útil una breve descripción en cada paso para que el usuario esté preparado y pueda hacerse una idea.
2. Coincidencia entre el sistema y el mundo real ?
El diseño debe hablar el idioma de los usuarios, utilizando palabras, frases y conceptos familiares, y seguir las convenciones del mundo real, haciendo que la información aparezca en un orden natural y lógico.
BUENA PRÁCTICA ?
En el proceso de compra accedemos a la elección de asientos la cual se representa fielmente al espacio real donde se va a producir el evento. Así podremos escoger nuestras butacas imaginando dónde se encontrarían en el espacio real en el que vamos a presenciarlo.
MALA PRÁCTICA ?
Considero que, al igual que cuando vamos por la calle vemos los carteles con la foto del grupo anunciando el concierto, en la página se deberían mostrar miniaturas de fotos al lado de cada artista, no solo para ayudar a reconocerlo más fácilmente sino para que visualmente resulte más llamativo.
3. Control y libertad del usuario ?️
Cuando el usuario realice una acción por error necesitará una «salida de emergencia» claramente marcada para salir de la acción no deseada sin tener que pasar por un proceso prolongado.
BUENA PRÁCTICA ?
Si hemos añadido esa entrada por error, podemos ver un icono de papelera, que además imita al mundo real, y que nos permite borrar la entrada, deshaciendo la acción fácilmente.
MALA PRÁCTICA ?
Por el contrario, si lo que queremos es cancelar la entrada dentro de la pasarela de pago, la papelera se cambia por una cruz y aparece un molesto y confuso aviso donde la palabra «confirmar» puede dar a entender que estarías confirmando el pedido pulsando en «sí» en lugar de cancelándolo.
También estaría bien que existiera la opción de «dar marcha atrás» al acceder a un evento o en algunas páginas, sin necesidad de estar usando esa función en el navegador o volviendo a la home todo el rato.
4. Consistencia y estándares ?
Los usuarios no deberían tener que preguntarse si diferentes palabras, situaciones o acciones significan lo mismo. Es importante mantener la misma consistencia a lo largo de todo el diseño del sistema.
BUENA PRÁCTICA ?
Si navegamos por los eventos destacados de cada sección del header, encontramos la misma disposición de elementos y mismos tamaños, lo cual hace que el esquema de navegación esté estructurado.
MALA PRÁCTICA ?
A lo largo de la navegación en la página nos encontramos ante distintos tipos de headers, lo cual puede ser un poco confuso, llegando a plantearte si estás o no en otra página diferente.
También apreciamos otros errores de consistencia en botones como este cuyo símbolo no se corresponde.
5. Prevención de errores ⛔
Antes que diseñar buenos mensajes de error, es mejor evitar que el problema ocurra, validando el error antes de que el usuario realice la acción.
BUENA PRÁCTICA ?
En el formulario de registro ya nos avisa con anterioridad de los requisitos que debe cumplir la contraseña para no cometer ningún fallo, y si te dejas un campo sin escribir te da un aviso de error antes de pulsar continuar.
MALA PRÁCTICA ?
Cuando estamos seleccionando las entradas que queremos, si pulsamos en el botón «entradas» sin tener ninguna seleccionada nos salta un aviso en el que nos pide seleccionar una entrada. Considero que sería mucho más sencillo si el botón directamente estuviese deshabilitado si no hay entradas seleccionadas, así no podríamos pulsar en él y no habría necesidad de ningún aviso.
6. Reconocimiento en lugar de recuerdo ?
Se debe minimizar la carga cognitiva del usuario haciendo visible objetos, acciones y opciones. El usuario no debería tener que recordar información de una parte de la interfaz a otra.
BUENA PRÁCTICA ?
Podemos acceder en todo momento, tanto en la elección de evento como de entradas a la información sobre el mismo, pudiendo consultarla fácilmente si se nos olvida algo.
También recoge en nuestro perfil los eventos próximos y pasados.
MALA PRÁCTICA ?
Durante la compra de entradas, vemos que estas tienen un tiempo límite para ser reservadas. Esto hace que cuando el tiempo se acabe la entrada se pierda y, aunque nos aparece un aviso que dice que podemos recuperar la entrada y seguir con el proceso donde lo dejamos, cuando accedemos, nuestra sesión puede haber caducado, siendo imposible ya recuperarla y teniendo que acceder de nuevo.
7. Flexibilidad y eficiencia de uso ?️
Se deben introducir aceleradores, atajos y recomendaciones que faciliten la navegación, tanto para los usuarios sin experiencia como con experiencia. Es importante que el sistema permita personalizar acciones frecuentes.
BUENA PRÁCTICA ?
Ticketmaster nos ofrece dos opciones a la hora de elegir entrada: o elegimos los asientos en el propio mapa del sitio, o él nos busca las mejores entradas. Aquí veremos un mapa de referencia (no interactuable) y un listado de mejores entradas para escoger. Esto puede facilitarnos la elección si no nos aclaramos con el mapa.
MALA PRÁCTICA ?
Ticketmaster no ofrece ninguna opción para filtrar y personalizar nuestra búsqueda. En el listado de eventos se dividen en «España» o «Eventos internacionales». Sería útil que junto al calendario de «Fechas» ofreciera un botón de «Filtros» en el que poder especificar en qué ciudad concreta estás buscando eventos, u otros aspectos.
8. Diseño estético y minimalista ?
Se trata de mostrar solo lo relevante, eliminando el ruido visual y la información innecesaria que pueda distraer al usuario.
BUENA PRÁCTICA ?
En el apartado de «Mis entradas» en el perfil, nos aparece toda la información sobre el evento correctamente organizada en lugar de presentarla toda en el mismo lugar. Por un lado podemos ver y descargar nuestras entradas, por otro ver la información del evento y por último del recinto.
O el hecho de que cargue tan solo un límite de eventos dando la opción de ampliar para no saturar la página y perdernos entre tantos.
MALA PRÁCTICA ?
Cuando pulsamos en «info» dentro del apartado de elección de entradas, se abre una ventana emergente donde muestra toda la información del evento. Aunque toda sea relevante, creo que la forma en la que se muestra, donde prácticamente todo es texto, genera mucho ruido visual haciendo que no sea dinámica su lectura y parezca abrumadora.
9. Ayudar a reconocer, diagnosticar y recuperarse de errores ⚠️
Los mensajes de error deben expresarse en un lenguaje sencillo (sin códigos de error), indicar con precisión el problema y sugerir una solución de manera constructiva.
BUENA PRÁCTICA ?
Un buen ejemplo sería el mensaje, al cual nos referimos anteriormente, en el que cuando se acaba el tiempo límite para comprar entrada e intentas acceder de nuevo te aparece este error que indica que tu sesión ha caducado, pero te ofrece distintas soluciones para solventarlo.
MALA PRÁCTICA ?
Si queremos comprar más de 6 entradas nos aparece un aviso, el cual no destaca nada al tener los mismos colores que el resto de la card, de que hemos alcanzado el límite. En ningún momento previo a alcanzar ese límite te avisa de que no puedes comprar más de 6, lo cual causa sorpresa y puede llegar a ser indignante si vas con un grupo grande y tenéis que hacer dos compras, arriesgándoos además a no tener asientos juntos.
Otro error que podría prevenirse es en el buscador; si buscamos un artista o evento pero nos equivocamos en una letra nos aparecerá que no hay resultados. No estaría mal una opción de «quizás querías decir…» que identifique aquello que buscabas con un pequeño margen de error.
10. Ayuda y documentación ?
Aunque es mejor si el sistema no necesita ninguna explicación adicional, es necesario proporcionar documentación, fácil de buscar, para ayudar a los usuarios a comprender cómo completar sus tareas.
BUENA PRÁCTICA ?
La sección de «Ayuda» es bastante amplia, está muy bien estructurada, y los emoticonos ayudan a identificar cada sección. Además añaden un buscador por si no encuentras lo que buscas o necesitas una manera más directa.
MALA PRÁCTICA ?
En cambio, si necesitamos resolver una duda que no encontramos de ninguna manera y tenemos que contactar con Ticketmaster, se hace un poco difícil llegar al cuestionario, ya que lo primero que te aparece son los canales de contacto y unos pasos a seguir. Si bajas encontrarás escondido en el texto un enlace al que pulsar que te llevará al formulario de contacto.
RANKING SEGÚN GRAVEDAD
Teniendo en cuenta el incumplimiento de las 10 heurísticas de Jakob Nielsen en los ejemplos negativos aportados, se han evaluado mediante un Ranking de Severidad. En este ranking el problema se evalúa de 0 a 4, siendo 4 un problema catastrófico.
RECONOCIMIENTO EN LUGAR DE RECUERDO
Análisis: Tiempo límite para comprar, la sesión caduca.
Consecuencia: Comenzar el proceso otra vez.
Gravedad: 4.
Mejora: Posibilidad de recuperar entradas.
FLEXIBILIDAD Y EFICIENCIA DE USO
Análisis: No se puede filtrar ni personalizar la búsqueda.
Consecuencia: Perder más tiempo del necesario.
Gravedad: 4.
Mejora: Añadir botón de «Filtros» para profundizar más.
CONSISTENCIA Y ESTÁNDARES
Análisis: Headers diferentes según la página.
Consecuencia: ¿Sigo en la misma página?
Gravedad: 4.
Mejora: Establecer un solo tipo de header común.
PREVENCIÓN DE ERRORES
Análisis: Botón activo, al pulsar aparece un aviso de error.
Consecuencia: No darse cuenta de que no hay entradas seleccionadas.
Gravedad: 3.
Mejora: Deshabilitar el botón para bloquearlo.
AYUDAR A RECONOCER ERRORES
Análisis: No se pueden comprar más de 6 entradas, no se avisa hasta tenerlas seleccionadas, el mensaje no destaca.
Consecuencia: Puede pillar por sorpresa, nos obliga a hacer dos compras.
Gravedad: 3.
Mejora: Ofrecer más o destacar el aviso con antelación.
AYUDA Y DOCUMENTACIÓN
Análisis: Difícil acceso al formulario de contacto.
Consecuencia: Desistir en tratar de contactar.
Gravedad: 3.
Mejora: Mostrar el formulario al pulsar en «contacta con nosotros», sin páginas intermedias ni links escondidos entre texto.
VISIBILIDAD DEL ESTADO DEL SISTEMA
Análisis: No se indica información acerca de los pasos a seguir en la pasarela de pago.
Consecuencia: No saber qué pasa después.
Gravedad: 2.
Mejora: Añadir una breve descripción en cada paso.
CONTROL Y LIBERTAD DE USUARIO
Análisis: No se puede dar marcha atrás, textos confusos.
Consecuencia: Tener que utilizar la flecha del navegador.
Gravedad: 2.
Mejora: Añadir flechas de retroceso, reescribir mensajes.
COINCIDENCIA ENTRE SISTEMA Y MUNDO REAL
Análisis: Un listado de eventos interminable sin fotos.
Consecuencia: No reconocer fácilmente a los artistas o cansar la vista entre tanto texto.
Gravedad: 1.
Mejora: Añadir miniaturas en cada evento.
DISEÑO ESTÉTICO Y MINIMALISTA
Análisis: Ruido visual en algunas secciones, mucho texto junto sin imágenes visuales.
Consecuencia: Información importante difícil de leer.
Gravedad: 1.
Mejora: Reducir ruido visual con imágenes.
PERSPECTIVA DE GÉNERO E INCLUSIÓN
Un punto a favor de Ticketmaster en materia de perspectiva de género es que en ningún momento te solicita tu género, ya que realmente este dato es innecesario y no influye a la hora de comprar una entrada. Además permite cambiar nuestro nombre en cualquier momento. Incluso ni siquiera da la opción de añadir una foto en tu perfil.
Quizá no estaría de más añadir un nombre «social» a parte del registral, un «alias» con el que personas que se enfrentan a un «deadname» puedan sentirse a gusto al contemplar su entrada y ver su nombre en ella.
En cuanto al lenguaje inclusivo, mayormente la página se dirige hacia ti en segunda persona del singular, sin especificar y de una manera neutral. En ocasiones utiliza la terminación «o/a». La única pega sería que en el propio perfil utiliza el masculino genérico para decir «bienvenido», lo cual queda un poco raro si pone «¡Bienvenido de nuevo, María!».
Contempla opciones accesibles, por ejemplo, a la hora de escoger entrada nos ofrece entradas para movilidad reducida. También en la sección de ayuda vemos un apartado de «Diversidad funcional» en el que contemplan la variante de acceder en una silla de ruedas o no acceder en silla de ruedas pero ser una persona con diversidad funcional, para las cuales ofrecen ayuda personalizada en un teléfono al que contactar.
Los colores están bien contrastados aunque quizá podrían añadir otras opciones de accesibilidad como adaptarlos a posibles alteraciones genéticas, o en cuanto a tipografía en algunas ocasiones, especialmente en las ventanas de «info», poder personalizar el tamaño para personas con problemas de visión, o poder manejarse por la web a través del teclado.
Me agrada enormemente que hayan utilizado el término «personas con diversidad funcional» en lugar de términos menos inclusivos como «discapacitados» o «minusválidos», que pueden llegar a ser peyorativos, y que aún siguen apareciendo por muchos sitios.
¡Gracias por leerme!
BIBLIOGRAFÍA
Arenzana, D. (2022). Principios de usabilidad web de Jacob Nielsen y el diseño UX. Semrush. [en línea]. Disponible en: https://es.semrush.com/blog/usabilidad-web-principios-jakob-nielsen/
Golub, T. (2023). Usability heuristics in game design. Medium [en línea]. Disponible en: https://uxdesign.cc/usability-heuristics-in-game-design-29a324177d4e
Hassan, Y. (2003). Guía de Evaluación Heurística de Sitios Web. [en línea]. Disponible en: http://www.nosolousabilidad.com/articulos/heuristica.htm
Membrives, J. (2019). Cuaderno de evaluación de la usabilidad. UOC [en línea]. Disponible en: http://quadern-usabilitat.recursos.uoc.edu/es/4-4-analisis-de-resultados/
Modroño, T. (2017). Evaluación heurística (PARTE I) . Interactius [en línea]. Disponible en: https://interactius.com/evaluacion-heuristica-parte-i/
Modroño, T. (2018). Evaluación heurística (PARTE II). Interactius [en línea]. Disponible en: https://interactius.com/evaluacion-heuristica-parte-ii/
Nielsen, J. (1995). 10 Heuristics for User Interface Design. Nielsen Norman Group [en línea]. Disponible en: http://www.useit.com/papers/heuristic/heuristic_list.html
Nielsen, J. (1994). How to conduct an Heuristic Evaluation. Nielsen Norman Group [en línea]. Disponible en:
https://www.nngroup.com/articles/how-to-conduct-a-heuristic-evaluation/
Torres, D. (2021). El rol del Diseño UX en la inclusión de género. El blog de Torres Burriel [en línea]. Disponible en: https://www.torresburriel.com/weblog/2021/10/28/el-rol-del-diseno-ux-en-la-inclusion-de-genero/
Diseño inclusivo desde una perspectiva de género. (2020). Gamma UX [en línea]. Disponible en: https://www.gammaux.com/blog/diseno-inclusivo-desde-perspectiva-de-genero/
Este es un espacio de trabajo personal de un/a estudiante de la Universitat Oberta de Catalunya. Cualquier contenido publicado en este espacio es responsabilidad de su autor/a.