Espacio Personal
Pública Buenas! En esta tarea se ha llevado a cabo una Prueba de Usabilidad para implementar mejoras al prototipo de la app BIKIPark. Se ha entrevistado de forma remota a 5 usuarios con la técnica Thinking Aloud. Algo que ha sido bastante útil para mejorar la experiencia de usuario del diseño.
Aquí podéis ver el prototipo con sus respectivas mejoras:
Y aquí dejo mi vídeo de presentación al cliente sobre el UX Case Study de BIKIPark.
Muchas gracias!
Pública En esta tarea he decidido rediseñar la máquina vending de compra de billetes de metro de Porto, ya que recientemente estuve allí de viaje y pude observar que su experiencia de usuario no era la mejor…especialmente comparando su funcionamiento con otras máquinas de compra de billetes de metro de otras ciudades como la de París, con la cual no necesitabas ni instrucciones.
En este caso, esta máquina, aún disponiendo de multitud de instrucciones e información por toda su estructura, es difícil aclararse y puede dar lugar a confusión en muchos aspectos. Tanto en mi caso como en muchos de los turistas que trataban de comprar su billete era algo complicado, incluso llegando a tener que ayudar a muchos de ellos a sacar su billete.
Es por esto que he querido analizar en profundidad sus características y funcionamiento, detectar todos los problemas que impiden una buena experiencia y proponer nuevas mejoras así como un nuevo prototipo que los enmiende correctamente.
Aquí os dejo el vídeo explicativo con los dos flujos propuestos en el nuevo prototipo:
Y el enlace al prototipo en Figma:
Y el dossier explicativo:
Muchas gracias!
Pública 
Hola a tod@s! Primero de todo, disculpad la demora. Aquí os dejo mi propuesta para la interfaz web dentro del universo BIKI que debíamos llevar a cabo en esta segunda PEC. En mi caso he decidido prototipar una app ya que considero que al estar presente de forma continua y visible en el smartphone del usuario, la presencia de la marca estará siempre en la mente del cliente. Además de que es mucho más fácil e instantáneo acceder a la misma. También permite más personalización y, en definitiva, una mejor experiencia de usuario.
Nuestro objetivo era representar los siguientes dos flujos:
Deberemos diseñar dos flujos:
1. Localizar un aparcamiento, saber si hay plazas libres y reservar en el día y horas de preferencia del usuario.
2. Desbloquear la puerta de acceso al parking para introducir la bicicleta y desbloquearla de nuevo, más tarde, para poder dejar el servicio operativo para un nueva bicicleta.
En mi caso, además de estos flujos he querido añadir una barra de navegación con un hamburguer menu que muestre parte de la información que puedes encontrar en su web, como tarifas, faqs o contacto. También he añadido algunas opciones de personalización como favoritos o la opción de filtrado.
He querido añadir algunos detalles como un buscador con una microinteracción, con la idea de que conforme el usuario vaya rellenando el mapa se vaya actualizando y centrando en el lugar buscado.
También, me parecía importante que el usuario visualizase el lugar donde va a dejar su bici por lo que a la hora de reservar el parking he añadido la imagen de la estación de aparcamiento, así como unos iconos que muestran las puertas ocupadas y las disponibles, pudiendo seleccionar la disposición que prefiera.
En el segundo flujo quería jugar con el tema del candado en la barra de navegación inferior, diferenciando a través de los colores de la marca el estado de nuestra reserva, es decir: en gris si no hay ninguna reserva activa, en el color acento con el candado abierto cuando hay una reserva pero aún no se ha utilizado, y en el color primario con el candado ya cerrado cuando nuestra bicicleta ya se encuentra a resguardo en el aparcamiento. Estos colores también se muestran en las pantallas cuando se desbloquea y bloquea la puerta.
También le he añadido una opción en la que cuando tenemos nuestra bici aparcada se pueda mirar una cuenta regresiva del tiempo que nos queda, dando la opción de extenderlo, a este reloj se puede acceder dando click en el candado (en este caso, solo funcionaría cuando se mostrase naranja y cerrado), o desde «Mis parkings», donde se podrá finalizar el aparcamiento, pudiendo acceder tanto desde un sitio como de otro al código QR.
Aquí os dejo el prototipo:
Y aquí el vídeo de los flujos:
Espero que os guste!
Un saludo 🙂
Pública
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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!
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/
Pública Hola a tod@s! Aquí os dejo los ejemplos que he utilizado para mis informes sobre los principios y leyes de percepción en la usabilidad de una interfaz.
Hola! Aquí os dejo mi storyboard y mi bocetado de la app de videoconferencia en un contexto de video-clases. Un saludo.
Pública ¡Hola a tod@s!
Tras establecer la organización, etiquetado y construir nuestro sistema de navegación, en esta última tarea nos encargamos de plasmarla en un prototipo interactivo que nos ayude a visualizar cual sería el correcto funcionamiento de la arquitectura de la información desarrollada.
Nos encontramos ante una aplicación que servirá como punto de encuentro para numerosos amantes del cine y la música, una plataforma que nos ofrece una experiencia digital del festival In-Edit acercándolo a su público desde todas las partes del mundo. No solo podremos informarnos acerca del festival y comprar entradas, sino que se trata de un servicio que ofrece streamings en directo o la posibilidad de reproducir cortometrajes incluso en nuestra televisión. Además de una comunidad con la que conectar, chatear o participar en debates en el foro, así como crearlos, y asistir a eventos ya sean en remoto o en el propio festival. ¡Recrear todo esto ha sido un verdadero reto! Espero que os guste el resultado:
Una vez recopilada toda la información necesaria de anteriores fases del proyecto como los escenarios, los user journeys, el árbol de contenidos o los diagramas de flujo, comenzamos con el…
Llevar a cabo este proyecto y haberlo hecho teniendo en mente que se trata de un supuesto trabajo a mostrar al cliente me ha ayudado a ponerme en situación y ver de cerca cómo sería desarrollar un proyecto real en este caso. Definitivamente, pienso que desarrollar una buena Arquitectura de la Información se trata de la parte más imprescindible del mismo, pues sin ello, estaríamos creando un servicio difícil de usar y de entender para el usuario.
Crear el prototipo y comprender de forma gráfica las interacciones que se deben llevar a cabo para conseguir los objetivos propuestos ha sido muy útil para también ponerme en la piel del usuario y pensar en qué le gustaría ver exactamente y cómo.
Pese a no ser necesario, he decidido añadirle algo de color, jugando con los dos colores principales de la identidad visual de In-Edit: rojo y gris oscuro, para poder visualizar mejor cómo sería un resultado lo más cercano a la realidad posible y a un servicio definitivo. ¡He disfrutado mucho este proyecto!
En caso de tener que continuar con este proyecto, la siguiente fase sería testear el prototipo, llevar a cabo un testeo con usuarios y un análisis para recibir una verificación y validación por parte de los mismos. Y así poder consolidar una versión de alto nivel y definitiva.
Os dejo por aquí el enlace al PROTOTIPO en Figma
Y un VÍDEO donde muestro y explico las distintas interacciones
Hola! Aquí dejo mi PEC 3, más vale tarde que nunca dicen…
La he realizado sobre la aplicación «Colvin», una floristería online que reparte ramos y plantas preciosas a domicilio.
Me ha parecido super interesante esta tarea!
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.