Publicado por

Reto 2: Evaluación Heurística

Reto 2: Evaluación Heurística
Publicado por

Reto 2: Evaluación Heurística

Para el desarrollo del siguiente trabajo procederemos al análisis de la aplicación para dispositivos móviles y tablets «Down dog yoga«, la cual…
Para el desarrollo del siguiente trabajo procederemos al análisis de la aplicación para dispositivos móviles y tablets «Down dog…

Para el desarrollo del siguiente trabajo procederemos al análisis de la aplicación para dispositivos móviles y tablets «Down dog yoga«, la cual permite a las personas usuarias realizar prácticas deportivas desde cualquier parte del mundo, en el momento que ellos necesiten con o sin conexión a internet. 

La aplicación se presenta en su web como un artículo de “A diferencia de seguir videos pregrabados, Down Dog no te obligará a hacer el mismo entrenamiento una y otra vez. ¡Con más de 60,000 configuraciones diferentes, Down Dog te da el poder de construir la práctica de yoga que amas! Apto para principiantes, incluye múltiples estilos de prácticas, alivia los dolores de espalda, configura los profesores, la música y el idioma (hasta 9 diferentes) y permite sincronizar automáticamente todos tus dispositivos.»

He decidido analizar esta aplicación que llevo varios años usando y que me parece un 10 a nivel de requisitos de usuario, ya que reúne de forma positiva, todos los puntos heurísticos de una de una interfaz. 

Evaluación heurística interfaz

  • Visibilidad del estado del sistema.
    • El sistema siempre debe mantener a los usuarios informados sobre lo que está sucediendo.

Un ejemplo de buena práctica, es que cuenta con un apartado de estadísticas que permite llevar el control de los ejercicios realizados, tanto de la duración como el porcentaje del progreso.

  • Coincidencia entre el sistema y el mundo real.
    • Los mensajes del sistema deben ser comprensibles para el usuario y seguir las convenciones del mundo real, con un orden natural y lógico.

Otro ejemplo de buena práctica es la página de inicio en la cual se muestra en primer lugar el tiempo que vas a emplear en realizar el deporte, así como el estilo que el usuario desee escoger y como quiera enfocarlo. De un solo vistazo permite personalizar el ejercicio.

  • Control del usuario y libertad.
    • El sistema debe incluir una «salida de emergencia» claramente indicada para salir rápidamente del estado en caso de error (por ejemplo, volver atrás o deshacer).

Como hemos visto en el apartado anterior, la app permite al usuario tener el control de la práctica deportiva y en caso de querer pausarla o volver para atrás porque se ha decidido escoger otra opción, el sistema nos permite volver para atrás.

  • Consistencia y estándares.
    • No usar términos diferentes para referirse a las mismas acciones.

Como podemos observar en cualquiera de las pantallas de la aplicación, sigue la misma línea de diseño, lo que permite a los usuarios sentir que hay cierta coherencia y cohesión entre los elementos.

  • Prevención de errores.
    • Evitar condiciones que puedan llevar a errores (por ejemplo, presentar a los usuarios una opción de confirmación antes de comprometerse con la acción).

La aplicación en caso de querer eliminar el historial de las prácticas, se asegura de que realmente el usuario quiera hacerlo, ya que en caso de aceptar, es una acción que no puede deshacerse.

  • Reconocimiento en lugar de recordar.
    • Minimizar la carga de memoria del usuario haciendo visibles y reconocibles los objetos, las acciones y las opciones. Facilitar el acceso a las instrucciones de uso del sistema.

Una vez que hemos finalizado un ejercicio permite que el usuario lo guarde en “favoritos” por si en un futuro quiere volver a realizarla, además, si el usuario tiene cierto nivel en yoga, no es necesario ver el vídeo completo ya que cuenta con un apartado donde indica el listado de posturas.

  • Flexibilidad y eficiencia de uso.
    • Introducir métodos aceleradores o de acceso rápido para usuarios expertos. Permitir a los usuarios personalizar las acciones frecuentes.

Si hay algo que caracteriza a Down Dog, es la flexibilidad, ya que su objetivo es que tengas un centro deportivo a tu alcance en el momento que más lo necesites y que además se adecue a las necesidades de los usuarios. Permite cambiar la voz a los instructores, tener mayor número de indicaciones de un ejercicio por si están en los niveles de principiantes, aumentar o disminuir el ritmo y la dificultad, incluso cambiar los estilos de música de los ejercicios.

  • Diseño estético y minimalista.
    • Evitar la información irrelevante o raramente necesaria. Cada unidad adicional de información disminuye la visibilidad de la información ya presente.

A parte de la flexibilidad, también hacen especial hincapié en la estética de sus aplicaciones, menos es más y toda la información que necesitan los usuarios, la tienen a dos clicks, ya que todo es muy visual y no da lugar a confusión.

  • Ayuda a los usuarios a reconocer, diagnosticar y recuperarse de errores.
    • Los mensajes de error deben ser fáciles de entender, indicar con precisión el problema y sugerir una solución.

Los creadores de esta aplicación saben que muchas personas que estén iniciándose en el deporte, posiblemente no sepan por dónde empezar, por lo que está todo muy bien explicado y detallado (cada práctica deportiva tiene su descripción).

  • Ayuda y documentación.
    • El soporte al uso debe ser breve, fácil de buscar y estar centrado en la tarea del usuario.

En caso de que los usuarios necesiten aún más ayuda, la aplicación cuesta con un apartado de preguntas frecuentes, un servicio de “soporte técnico” y redes sociales donde estarán encantados de resolver todas las cuestiones que se les planteen.

Lo cierto es que la interfaz reúne todas y cada una de de las 10 reglas básicas de Jakob Nielsen y R. Molich. Lo cual nos indica que nivel de operabilidad es un producto de una calidad superior y que no cuenta prácticamente con ningún tipo de falla, ya que está pensada para que todo el mundo pueda hacer uso de ella de una forma sencilla.

Por indicar algunos «pero» en el primer apartado “Visibilidad del estado del sistema” tras hacer uso de la app durante varios años de la aplicación, en alguna ocasión han realizado actividades de mantenimiento o el servicio «ha caído» y no lo han indicado como deberían, por lo que nos deriva al siguiente problema, el cual va de la mano con el anterior «ayuda a los usuarios a reconocer, diagnosticar y recuperarse de errores» ya que en lo anteriormente explicado, en caso de error, no indica con precisión cuál es el problema y por consiguiente, no sugiere una solución ya que en la gran mayoría de las ocasiones el programa no responde y se cierra de forma automática.

 

Consideraciones de la interfaz desde una perspectiva de género e inclusión

Es muy importante tener en cuenta a día de hoy la perspectiva de género y la inclusión social, pero el objetivo principal de esta empresa es enseñar un deporte, deporte que en sus inicios solo lo practicaban hombres pero con el paso de los años son más las mujeres que hombres que practican yoga. Sin embargo, este no es el objetivo de Down Dog, ya que quieren llegar a todo el mundo y que cualquier persona sea del género que sea, pueda disfrutar de aquello que más le guste hacer cuando y donde quiera, sin que eso sea lo realmente importante.

Con respecto a la inclusión, podemos comprobar que también tratan de facilitarle las cosas al usuario. Se trata de una aplicación a nivel global con muchísimos idiomas por lo que según la región que se haya seleccionado, permitirá escoger entre diferentes idiomas y dialectos. Además como hemos explicado anteriormente, cuenta con un apartado que permite a las personas que tengan visión reducida, puedan hacer uso y disfrute de su app ya que puede ajustar el nivel de explicaciones de una práctica deportiva, tanto de forma oral como visual.

En resumen, vemos que se trata de una aplicación muy completa que tiene en cuenta todos los aspectos que puedan ser de interés para los usuarios y un muy buen ejemplo de que hay un gran equipo de UX detrás que logra que todo lo anterior mencionado, sea posible.

 

Debate0en Reto 2: Evaluación Heurística

No hay comentarios.

Publicado por

PEC 2: EVALUACIÓN HEURÍSTICA

Publicado por

PEC 2: EVALUACIÓN HEURÍSTICA

Evaluación Heurística ¡Muy buenas compañeros! Hace un año justamente, tuve una charla con un profesor de mi antingua universidad sobre relojes. Él…
Evaluación Heurística ¡Muy buenas compañeros! Hace un año justamente, tuve una charla con un profesor de mi antingua universidad…

Evaluación Heurística

¡Muy buenas compañeros!

Hace un año justamente, tuve una charla con un profesor de mi antingua universidad sobre relojes. Él solía coleccionar muchos y tenía colecciones de modelos muy antiguos. Hablando sobre la evolución de ese producto y la larga vida que suelen tener, nos adentramos a ver qué se estaba ofreciendo en ese momento. Recuerdo mucha confusión leyendo los nombres, las páginas, los modelos, la gran cantidad de información para una máquina que funciona igual que hace 50 años, pero que ha sido complementado con miles de funcionalidades, a veces complejas de entender. De ahí, ha surgido este análisis de Tag Heuer.

Adentrándonos en el mundo Tag Heuer: ¿Cómo es navegar su web?

En este análisis, he evaluado la página web de Tag Heuer, (https://www.tagheuer.com/es/es/), con el objetivo de identificar problemas y oportunidades de mejora en términos de usabilidad y experiencia de usuario. La elección de esa página web se ha basado en que la marca es conocida mundialmente, en que tiene una exposición constante y que, dado a que el volumen de usuarios visitantes es alto, considero que es interesante identificar posibles mejoras. 

METODOLOGÍA

Para realizar este análisis, en primer lugar, he llevado a cabo una exploración de la página web para obtener una visión a grandes rasgos de los diferentes elementos y secciones que configuran la página. En la segunda fase, he analizado los diferentes elementos y secciones de la página web en relación con cada una de las heurísticas de Nielsen. He registrado lo que he ido observando y descubriendo en este documento, que se ha utilizado como base para la tercera fase del análisis. En esta fase, he revisado todas las observaciones anteriroes para identificar los problemas y oportunidades de mejora más relevantes. Para hacer una investigación más profunda, he utilizado diferentes dispositivos, como por ejemplo una laptop, un teléfono móvil, una tablet… De esta manera, me he asegurado de ver desde distintas perspecticas y formatos. He explorado varias páginas de la web, como las de productos, servicio al cliente, página de inicio para identificar las problemáticas que se dan con mayor regulardidad. 

A continuación, expongo los diferentes elementos de la página web de Tag Heuer en relación con las heurísticas:

1. Visibilidad del estado del sistema:

  • Buena práctica: Se puede ver que la página web de Tag Heuer muestra claramente el estado del sistema a través de la barra de navegación y el menú de navegación en la parte superior de la página.
  • Mala práctica: Se observa que algunas de las páginas de productos no incluyen información sobre la disponibilidad del producto, y esto puede generar confusión y frustración en los visitantes.


2. Correspondencia entre el sistema y el mundo real:

  • Buena práctica: La home de Tag Heuer tiene imágenes de relojes que muestran claramente la hora, lo que ayuda a los usuarios a comprender la funcionalidad de los productos de la marca.
  • Mala práctica: Algunos nombres de modelos de relojes son extraños o más técnicos, y esto podría resultar confusos para los usuarios que no están al día con el vocabulario más técnico o que no les interesa.

3. Control y libertad del usuario:

  • Buena practica: En la página Productos, se pued filtrar los productos por categoría y precio y eso les da más control sobre la experiencia de compra.
  • Mala práctica: En esta web algunas páginas con productos no incluyen botones claros para salir de la página o volver a la página anterior. Eso podría resultar frustrante para los usuarios que desean volver a explorar otros productos.

4. Consistencia y estándares:

  • Buena práctica: Tiene una paleta de colores consistente en toda la página y eso hace a la página más sólida.
  • Mala práctica: Algunos productos se ven en distintos tamaños y genera confusión y desorden visual en la página.


5. Prevención de errores:

  • Buena práctica: Utiliza mensajes de confirmación claros cuando por ejemplo, se confirma una compra, y eso da seguridad al usuario. 
  • Mala práctica: No se ve información detallada sobre las características de los productos en algunas páginas o a veces se pierden en detalles muy poco importantes, lo que puede llevar a los usuarios a comprar un producto que no quieren porque no lo han entendido. 

6. Reconocimiento en lugar de recuerdo:

  • Buena práctica: La home de Tag Heuer incluye imágenes de los productos de la marca, por lo que eso ayuda a los usuarios a reconocer los productos que quieren.

  • Mala práctica: Algunas páginas de productos no incluyen imágenes de los productos desde diferentes ángulos, lo que puede dificultar que los usuarios recuerden cómo es el producto.

Flexibilidad y eficiencia de uso:

  • Buena práctica: El usuario puede personalizar los productos de forma sencilla e intuitiva. Pueden seleccionar las características que desean modificar, como el material de la correa o el tamaño de la caja, y ver instantáneamente cómo afecta al diseño y al precio final. Además, la web ofrece la opción de guardar las configuraciones de reloj personalizadas para acceder a ellas en el futuro.
  • Mala práctica: No se poporciona todas las opciones o idiomas para cambiar la lengua en la que se muestra la página. Eso puede dificultar la comprensión de los usuarios que hablan un idioma diferente al predeterminado. Por ejemplo, el catalán no está.

Estética y diseño minimalista:

  • Buena práctica: Utiliza una estética moderna y minimalista que hace que la navegación sea fácil y agradable para los usuarios. Las imágenes de los relojes son nítidas y detalladas, lo que permite a los usuarios ver los productos con claridad. La tipografía y los colores utilizados en la página son coherentes en todo el sitio, lo que crea una experiencia de marca cohesiva.

     

  • Mala práctica La página web utiliza demasiados elementos visuales, como animaciones y transiciones, lo que puede ralentizar la carga de la página y dificultar la experiencia del usuario. Además, algunos de los elementos visuales pueden ser distracciones innecesarias para los usuarios, lo que dificulta la comprensión de la información.

Ayuda a los usuarios a reconocer, diagnosticar y recuperarse de los errores:

  • Buena práctica: Cuando un usuario hace una búsqueda en el buscador de la top bar y no hay resultados, la página proporciona un mensaje de error y da caminos alternativos para continuar.

     

  • Mala práctica: Sin embargo, cuando un usuario busca una página que no existe, es decir, error 404, la página simplemente muestra un mensaje genérico que indica que se produjo un error, pero no da más opciones ni explica en detalle.

Ayuda y documentación:

  • Buena práctica: Hay una sección de preguntas frecuentes que responde a las preguntas comunes de los usuarios y proporciona información detallada sobre los productos y servicios de la marca.

     

  • Mala práctica: No queda muy claro por dónde acceder a servicio de ayuda del cliente, dado que se puede confundir con páginas como Services o Contact. La ayuda aparece dentro de una página pero como una sección más, en vez de estar destacado desde el inicio. 

A continuación, muestro la lista de hallazgos más importantes priorizada por gravedad:

  1. Retroalimentación del estado del sistema
  2. Consistencia y estándares
  3. Mensajes de error
  4. Flexibilidad y eficiencia de uso
  5. Diseño minimalista y estético
  6. Reconocimiento en lugar de recuerdo

Justificación de los hallazgos:

  1. Retroalimentación de estado del sistema: Esto puede ser perjudicial para el usuario, ya que no puede saber si su acción ha sido realizada o no, lo que puede llevar a errores. Por ejemplo, como decíamos, en la página de registro de Tag Heuer, si el usuario va a una página inexistente, la página de error 404 no es muy clara y no da alternativas. Para mejorar esto se podrían ofrecer otros caminos o explicar qué está haciendo mal el usuario: “Usted ha introducido una información que no existe en esta página. Le damos las siguientes opciones que pueden ayudarle…”
  2. Consistencia y estándares: El mal uso de esta heurística se refiere a la falta de consistencia en la navegación, diseño y disposición de elementos. Esto puede ser muy confuso para el usuario, especialmente si está acostumbrado a interactuar con interfaces similares. Por ejemplo, en la página de Tag Heuer, la ubicación y diseño de los botones varían en diferentes secciones del sitio, lo que puede dificultar la navegación para el usuario. Para aclararlo, se podría aplicar un diseño coherente en todas las secciones del sitio, para que el usuario pueda navegar fácilmente sin tener que aprender nuevos patrones todo el tiempo.
  3. Mensajes de error: Falta de mensajes de error claros y útiles cuando ocurre un error. Por ejemplo, en la página de Tag Heuer, si el usuario intenta acceder a la página de la cuenta y no ha iniciado sesión, vemos aparecer un mensaje de error genérico que dice «Error en la cuenta». Para resolver este problema, se podría dar un mensaje de error claro que indique que el usuario no ha iniciado sesión y qué acción debe tomar para hacerlo.
  4. Flexibilidad y eficiencia de uso: En la página de Tag Heuer, no hay opciones para personalizar la visualización de la información del producto, lo que puede ser molesto para los usuarios que quieren ver la información de manera diferente. La propuesta de mejora sería proporcionar opciones de personalización y atajos para que los usuarios puedan interactuar con la interfaz de manera más propia o a su gusto. 
  5. Diseño minimalista y estético: Una interfaz poco atractiva o poco clara puede disuadir al usuario antes de empezar a tratar con el site. La página de contacto tiene un diseño poco atractivo y poco claro, lo que puede dificultar que el usuario encuentre la información que necesita. La solución a esto sería prestar atención al diseño y la estética de todas las secciones del sitio, para que la experiencia del usuario sea agradable y atractiva.
  6. Reconocimiento en lugar de recuerdo: Si vamos al menú de navegación no tiene etiquetas claras para las secciones, lo que puede hacer que el usuario tenga que recordar la ubicación exacta de la sección que busca. Para mejorar esto se podrían proporcionar proporcionar etiquetas claras y específicas para todas las secciones del sitio, para que la persona que visita el site pueda reconocer fácilmente la información que está buscando en lugar de tener que recordarla.

Para finalizar, acabo con una quote que creo importante a tener en cuenta para una buena UX:

More options, more problems.»

PERSPECTIVA DE GÉNERO

En relación a inclusión y género, veo varias cosas a considerar. En primer lugar, se puede ver que la página está dirigida principalmente a hombres. La estética y lenguaje visual se adapta a unos modelos más masculinos. Es verdad que esto tiene coherencia con la marca, pero esto también puede suponer que algunos clientes o clientas no se sientan representados cuando entran al site. 

 

Por otro lado, el site no tiene opciones claras para cambiar la visualización en relación con el tamaño de texto, la fuente o los colores. Esto podría ser un problema para gente que tiene discapacidades visuales. También, aunque la página web tiene opciones de idioma, no cuenta con opciones de accesibilidad como transcripciones de audio o subtítulos en videos, lo que limita el acceso para personas con discapacidad auditiva. En cuarto lugar, aunque la página web ofrece una sección de relojes para mujeres, esta sección es notablemente más pequeña y menos detallada que la sección de relojes para hombres, lo que puede indicar una falta de consideración hacia la base de clientes femenina de la marca.

En cuanto a propuestas para mejorar el site, sería bueno para Tag Heuer considerar incluir un lenguaje visual más inclusivo y diverso, que represente más clientes. También se podría considerar la inclusión de opciones de accesibilidad para personas con discapacidades visuales y auditivas.

BIBLIOGRAFIA

Cronuts Digital. (2021). Heuristic Analysis: Guide to Analysing Your Website. Recuperado de https://cronuts.digital/en/heuristic-analysis-guide-to-analysing-your-website/

Modroño, T. (2017) “Evaluación Heurística (PARTE I)”, Interactius. Recuperado de: https://interactius.com/evaluacion-heuristica-parte-i/ 

Membrives, J. (2019) Quadern d’avaluació de la usabilitat. [Recurs de la UOC]. Barcelona: UOC.

Nielsen, J. (1994) “How to Conduct a Heuristic Evaluation”, Nielsen Norman Group. Recuperado de: https://www.nngroup.com/articles/how-to-conduct-a-heuristic-evaluation/ 

Debate0en PEC 2: EVALUACIÓN HEURÍSTICA

No hay comentarios.

Publicado por

AU – PAC 2: Avaluació Heurística

Publicado por

AU – PAC 2: Avaluació Heurística

En aquest post es farà una anàlisi heurística de la interfície de Gmail, el correu de Google. He escollit aquesta interfície perquè…
En aquest post es farà una anàlisi heurística de la interfície de Gmail, el correu de Google. He escollit…

En aquest post es farà una anàlisi heurística de la interfície de Gmail, el correu de Google. He escollit aquesta interfície perquè el Gmail és una eina que tenim molt interioritzada, ja que la utilitzem molt sovint. M’ha semblat interessant analitzar-la per detectar millores d’una interfície molt coneguda, perquè, probablement, els errors que hi poden haver els usuaris no els detectem per la freqüència d’ús.

Hi ha diferents principis heurístics que ens servirien per fer una bona anàlisi. En aquest cas, hem triat els 10 principis de Jakob Nielsen, ja que són els més universals.

El contingut estarà dividit en les següents parts:

  • Metodologia
  • 10 principis heurístics de Nielsen
  • Llistat de prioritats
  • Perspectiva de gènere i inclusió

METODOLOGIA

Per tal de dur a terme l’anàlisi heurística de Gmail, he seguit la següent metodologia.

  1. Analitzar si els principis de Nielsen es compleixen o no a la interfície de Gmail.
  2. En els casos que hi hagi algun error o que la interfície no segueixi algun principi, anotar la troballa.
  3. Sintetitzar les recomanacions o millores respecte les troballes.
  4. Fer una anàlisi quantitativa a través d’un llistat de gravetat de les troballes segons la freqüència del problema, el seu impacte i la seva persistència.

 

10 PRINCIPIS HEURÏSTICS DE NIELSEN

Visibilitat de l’estat del sistema

En totes les accions que realitzem que necessiten un temps, veiem l’estat del sistema, fet que dona sensació de seguretat i control a l’usuari. Per exemple, a l’adjuntar un arxiu al correu, veiem una barra de progressió que ens indica el temps que falta perquè carregui l’arxiu. Tot i que ens doni una idea aproximada, amb arxius grans, estaria bé que especifiqués el temps per tal de donar més informació a l’usuari.

També veiem com dona informació sobre la capacitat del sistema. Aquesta és una pràctica molt útil, ja que l’usuari sap en tot moment en quin punt es troba i no és una sorpresa quan arriba a la capacitat màxima.

OK: hi ha visibilitat del sistema.

KO: en alguns casos, poc específica. Caldria afegir el temps de càrrega dels arxius.

Adequació entre el sistema i el món real

Gmail habilita l’opció de configurar certs factor com l’idioma o el codi de números de telèfon entre d’altres per adequar-se a l’entorn de l’usuari i que aquest es trobi còmode en el seu entorn.

OK: Hi ha una bona adequació entre el sistema i el món real.

Llibertat i control per part de la persona usuària

L’usuari té l’opció de cancel·lar les seves opcions si així ho desitja. Per exemple, aquí veiem les opcions que apareixen per si l’usuari vol recuperar un esborrany eliminat o tirar-se enrere en l’enviament d’un correu.

Tot i que l’acció sigui possible, molts cops l’usuari no la veu o no és a temps de seleccionar-la. Això é degut a que aquestes opcions apareixen en una pestanya petita a la part inferior esquerra de la pantalla i només durant cinc segons. Si l’usuari no és conscient del seu error o no veu la pestanya, ja no la pot revertir. Aquest fet es podria millorar, per exemple, oferint una pestanya de confirmació en accions importants com la d’enviar un correu.

OK: Possibilitat i llibertat per cancel·lar opcions.

KO: Dificultat per cancel·lar algunes accions.

Consistència i estàndards

A Gmail podem observar una consistència pel que fa a les icones i al disseny. Segueix els estàndards de Google, cosa que facilita la interacció a l’usuari perquè aquests són molt coneguts.

Per altra banda, però, falta consistència en la classificació dels correus. De vegades es reben correus a les categories de “promocions”, “spam” o “general” sense cap distinció. El fet que de vegades es rebin correus en una carpeta o en una altra sense consistència pot fer que l’usuari no els arribi a llegir mai o que els perdi.

OK: Consistència i estàndards de disseny

KO: Manca de consistència i estàndards en la classificació de correus.

Prevenció d’errors

Quan el sistema detecta un comportament estrany de l’usuari, apareix un missatge perquè aquest confirmi que el que està fent és correcte. Això passa, per exemple, quan enviem un correu a algú fora de l’organització a la qual pertanyem o quan volem enviar un missatge sense assumpte o text. És una bona pràctica per evitar errors de l’usuari.

OK: Hi ha una bona prevenció d’errors.

Reconeixement abans que records

Gmail facilita el reconeixement abans que el record. Ho podem veure en diferents ocasions. Per exemple, el fet que es mantingui la sessió oberta a no ser que l’usuari la tanqui. Això fa que no s’hagi d’introduir la contrasenya cada vegada i que sigui més ràpid accedir a l’aplicació.

Quan naveguem per la interfície, trobem moltes icones. Podria produir-se un problema si l’usuari no les reconeix o no les recorda. Però, si aquest passa el punter per sobre, apareix un text autoexplicatiu. Aquesta és una bona pràctica per ajudar a reconèixer tots els elements de la interfície a l’usuari.

OK: Facilita el reconeixement abans que el record.

Flexibilitat i eficiència en l’ús

Gmail dona la possibilitat de personalitzar la seva experiència a través de la configuració. Es pot jugar amb diferents paràmetres perquè els usuaris experts puguin aprofitar més l’eina (per exemple, a través de shortcuts). El problema detectat és que aquests paràmetres s’han d’activar a través de la configuració. Això priva a l’usuari de l’exploració de l’eina i d’anar adquirint les noves funcionalitats de manera natural, cosa que pot provocar que mai les utilitzi.

OK: Existeix flexibilitat i eficiència en l’us.

KO: necessitat d’activar noves funcionalitats a la configuració.

Disseny estètic i minimalista

Gmail destaca per tenir un disseny estètic i minimalista. Tot i ser una eina molt potent i amb moltes funcionalitats, sempre manté el contingut principal net i clar per l’usuari, sense que perdi el focus.

OK: Té un disseny estètic i minimalista.

Ajuda a les persones usuàries a reconèixer els errors i a recuperar-se

Una de les funcionalitats més útils de Gmail és la recepció d’un correu quan hem intentat enviar un missatge a una adreça no existent. El correu que l’usuari rep en aquests casos li serveix per reconèixer un error i reenviar el correu a l’adreça corresponent. És una funcionalitat molt important ja que pot evitar malentesos i  millorar de manera considerable l’experiència d’usuari.

OK: ofereix ajuda als usuaris a reconèixer els errors i a recuperar-se.

Ajuda i documentació

Tot i que Gmail ofereix ajuda i documentació de manera visible a la seva interfície, aquesta es troba en un enllaç extern. Un cop hi arribem, veiem que la documentació és molt extens i completa, massa i tot. Tota aquesta informació pot saturar a l’usuari i fer que no trobi el seu dubte.

OK: Ajuda i documentació

KO: Documentació massa extensa

 

LLISTAT PRIORITATS

A continuació, trobem un llistat de les troballes a millorar pel que fa a l’experiència d’usuari (de més gravetat a menys gravetat).

1- Llibertat i control per part de la persona usuària – Dificultat per cancel·lar algunes opcions. El fet que només es puguin tirar enrere algunes accions durant cinc segons es considera greu, ja uqe pot ser que l’usuari enviï algun correu no desitjat. Depenent del cas, pot ser una situació greu. Per millorar-ho afegiria una pestanya de confirmació de l’enviament.

2- Consistència i estàndards – classificació dels correus rebuts. És una troballa greu, ja que fa que l’usuari pugui perdre els correus i no llegir-los, principal funcionalitat de Gmail. Per millorar-la enviaria sempre tots els correus a “general” o, quan es rebi un mail d’una adreça nova, preguntaria a l’usuari a quina categoria voldria guardar-los.

3- Ajuda i documentació – massa extensa. És relativament greu perquè l’usuari pot cansar-se i acabar la sessió sense haver resolt els seus dubtes. Milloraria la documentació i la faria més interactiva, fent que l’usuari no es trobi un gran document per explorar.

4- Visibilitat de l’estat del sistema – poc específica. No és una troballa gaire greu perquè els arxius que s’acostumen a adjuntar triguen poc a carregar-se i l’usuari ja es fa una idea de l’estat amb la barra progressiva. Tot i això, afegiria el temps d’espera per quan s’adjuntin arxius més pesats.

5- Flexibilitat i eficiència d’ús – necessitat d’activació. Aquesta troballa està al final del llistat ja que, els usuaris que realment vulguin utilitzar noves funcionalitats, les trobaran a configuració. Tot i això, jo les activaria de primeres perquè aquest tipus d’usuari augmentés.

 

PERSPECTIVA DE GÈNERE I INCLUSIÓ

Gmail fa servir un vocabulari neutre en tot moment. És cert que és un a interfície amb poc text i moltes icones, cosa que dificulta veure si ha treballat la perspectiva de gènere. A la seva documentació utilitza l’imperatiu, de manera que inclou tots els gèneres, i es dirigeix a les seves funcionalitats més que als usuaris.

Pel que fa a la inclusió, Gmail s’adapta a diferents discapacitats (visuals, per exemple) seleccionant les opcions corresponents a la seva configuració i parlant amb el seu equip dedicat a això.

 

Debate0en AU – PAC 2: Avaluació Heurística

No hay comentarios.

Publicado por

Análisis heurístico de Mimo.

Publicado por

Análisis heurístico de Mimo.

En este post voy a realizar un análisis heurístico de la interfaz de la aplicación móvil de Mimo. La versión de la…
En este post voy a realizar un análisis heurístico de la interfaz de la aplicación móvil de Mimo. La…

En este post voy a realizar un análisis heurístico de la interfaz de la aplicación móvil de Mimo. La versión de la aplicación es de sistema operativo Android. Es una aplicación muy popular para el aprendizaje de programación desde dispositivos móviles. y, por ello, es importante asegurarse de que la experiencia de los usuarios es la mejor posible. En este análisis tenemos como objetivo identificar los posibles problemas que puedan surgir de la interfaz.

El análisis lo realizaremos utilizando los diez principios heurísticos de Jakob Nielsen, por ser lo más universales. Cada uno de los principios se evaluará mediante la observación directa de la interfaz y proporcionaré un buen o mal ejemplo de su aplicación en esta interfaz.

Visibilidad del estado del sistema.

Buen ejemplo: En la aplicación cuando escoges un programa de aprendizaje, en todo momento te sale tu progreso.

Coincidencia entre el sistema y el mundo real.

Buen ejemplo: Dentro de cada lección, la aplicación muestra una pantalla igual que le que tendrías en un entorno de programación.

Mal ejemplo: Podemos observar como el glosario de la aplicación está únicamente en inglés. Es curioso porque toda la aplicación está en español, las lecciones están en español y, posteriormente, en el glosario todas las lecciones están únicamente en inglés.

Control y libertad de usuario.

Buen ejemplo: La aplicación permite saltar o reintentar un ejercicio que hayas errado.

Consistencia y estándares.

Buen ejemplo: La aplicación utiliza el mismo color para mostrar todas las barras de progreso.

Prevención de errores.

Buen ejemplo: Para evitar que los usuarios avancen a lecciones más avanzadas la aplicación las deja bloqueadas hasta que completas la lección anterior.

Mal ejemplo: En el buscador en el apartado de comunidad solo nos indica que nuestro termino es demasiado corto como para realizar la búsqueda. Sin embargo, el texto introducido en la búsqueda es un lenguaje que existe y que los usuarios podrían intentar buscar.

Reconocimiento en lugar de recordar.

Buen ejemplo: Dentro de cada programa de aprendizaje en la parte superior izquierda tienes siempre indicado dicho programa.

Mal ejemplo: Dentro del glosario podría indicarte a que parte del programa de aprendizaje corresponde cada apartado. Vemos mucha información de cada programa, pero no nos indica donde aparece dentro de el programa.

Flexibilidad y eficacia de uso.

Buen ejemplo: La aplicación te permite que cambies el idioma, la apariencia y los efectos de sonido. Además, te permite añadir un recordatorio diario para ayudarte con tu progresión y así hacer más eficaz tu uso de la aplicación.

Mal ejemplo: El uso del glosario no es eficaz porque al entrar en dicho apartado encontramos muchos mini apartados explicando partes del programa, pero no sabemos a que parte del programa se corresponden, por tanto no es eficaz del todo.

Diseño estético y minimalista.

Buen ejemplo: Es una interfaz muy cuidada con pocos colores y los que más resaltan indican el camino que ha de seguir el usuario. También podemos ver que la interfaz es muy minimalista en todas sus partes. Podemos verlo en todas las imágenes de los demás principios.

Mal ejemplo: En la pestaña de comunidad perdemos ese minimalismo y esa estética que tenemos en el resto de la aplicación. Me parece que sigue siendo una interfaz cuidada, pero no está tan pulida como el resto de la aplicación.

Ayuda a los usuarios a reconocer, diagnosticar y recuperarse de los errores.

Buen ejemplo: Podemos ver en las lecciones o temas que no han sido desbloqueados aún un icono de un candado. Además, si pulsamos dentro podremos ver un mensaje en la parte superior que nos pide acabar las lecciones anteriores.

Ayuda y documentación.

Buen ejemplo: La aplicación dispone de un apartado que es un glosario con toda la información sobre los lenguajes de programación que estás aprendiendo.


Teniendo en cuenta todos los hallazgos obtenidos en el análisis anterior vamos a realizar un listado por gravedad de los malos ejemplos con su respectiva solución.

1. Prevención de errores. En el buscador en el apartado de comunidad solo nos indica que nuestro termino es demasiado corto como para realizar la búsqueda. Sin embargo, el texto introducido en la búsqueda es un lenguaje que existe y que los usuarios podrían intentar buscar.

    1. Justificación: Es un mensaje de error demasiado simple, además, hay lenguajes de programación de menos de tres letras que no podríamos buscar.
    2. Solución: Dejar que el mensaje pueda contener menos de tres letras o crear unas palabras especiales que tengan menos de tres letras y puedas buscarlas, en este caso, tendrían que ser los lenguajes de programación.

2. Coincidencia entre el sistema y el mundo real. El glosario de la aplicación está únicamente en inglés.

    1. Justificación: Es un fallo grave teniendo en cuenta que la aplicación nos da la opción de escoger idioma.
    2. Solución: Traducir el glosario. Es más sencillo de lo que parece, ya que, todo lo que explica el glosario en inglés es lo que nos explican las lecciones en el idioma que hayamos escogido.

3. Reconocimiento en lugar de recordar. Dentro del glosario podría indicarte a que parte del programa de aprendizaje corresponde cada apartado. Vemos mucha información de cada programa, pero no nos indica donde aparece dentro de el programa.

    1. Justificación: El glosario debería indicar la parte del programa a la que corresponde cada sección para así facilitar su uso y búsqueda.
    2. Solución: En cada apartado poner un icono que represente a la sección del programa que corresponde.

4. Flexibilidad y eficacia de uso. El uso del glosario no es eficaz porque al entrar en dicho apartado encontramos muchos mini apartados explicando partes del programa, pero no sabemos a que parte del programa se corresponden, por tanto no es eficaz del todo.

    1. Justificación: Al igual que en el punto 3 de gravedad, el glosario debería indicar a que apartado pertenece.
    2. Solución: Colocar un texto o icono que indique a que sección del programa pertenece o, incluso, dividir los apartados del glosario por sección del programa.

5. Diseño estético y minimalista. En la pestaña de comunidad perdemos ese minimalismo y esa estética que tenemos en el resto de la aplicación. Me parece que sigue siendo una interfaz cuidada, pero no está tan pulida como el resto de la aplicación.

    1. Justificación: Debe ser toda la interfaz igual. El diseño ha de ser estético y minimalista en todos sus apartados y se nota que la pestaña de comunidad pierde ese cuidado por diseñar.
    2. Solución: Pulir la interfaz para que sea igual de minimalista y estética que el resto. Usar los mismos colores para todo y agrupar los contenidos mejor.

Después de analizar la aplicación teniendo en cuenta los principios heurísticos de Nielsen, podemos pasar al análisis teniendo en cuenta la perspectiva de género e inclusión.

Mimo es una aplicación que tiene como objetivo enseñar a programar. Desde la perspectiva de género, es importante destacar que Mimo está diseñada para cualquier persona, independientemente de su género, y no hay restricciones en la aplicación basadas en género. Sin embargo, es importante tener en cuenta que los estereotipos de género pueden influir en la forma en la que las personas perciben las carreras y habilidades relacionadas con la informática y la tecnología. En este sentido, Mimo podría promover y alentar la participación de mujeres y niñas en la programación ofreciendo modelos y ejemplos de mujeres programadoras destacadas.

Además, Mimo podría incluir ejemplos y situaciones en sus lecciones que reflejen la diversidad de género y la inclusión de la comunidad LGTBIQ+, para así fomentar la igualdad de oportunidades y hacer que la programación sea más accesible.

En cuenta a la accesibilidad, Mimo esta disponible en varios idiomas, pero podría mejorar en términos de accesibilidad para personas con discapacidades visuales o auditivas.

En resumen, aunque Mimo es una aplicación educativa valiosa que puede ayudar a fomentar la educación en programación, podría mejorar en términos de inclusión y promoción de la diversidad de género. Es importante que las aplicaciones tecnológicas fomenten la inclusión y la diversidad para garantizar que todas las personas tengan igualdad de oportunidades en el campo de la tecnología.

 

Debate0en Análisis heurístico de Mimo.

No hay comentarios.

Publicado por

Evaluación Heurística: Web de Incapto – Café de Especialidad

Publicado por

Evaluación Heurística: Web de Incapto – Café de Especialidad

Introducción La web que se ha elegido para este ejercicio ha sido la de Incapto, Café de Especialidad. A simple vista, se…
Introducción La web que se ha elegido para este ejercicio ha sido la de Incapto, Café de Especialidad. A…

Introducción

La web que se ha elegido para este ejercicio ha sido la de Incapto, Café de Especialidad. A simple vista, se trata de una web relativamente nueva, actual y visual.

Bajo los 10 principios de Nielsen, realizaremos un análisis heurístico que nos ayudará a encontrar problemas de usabilidad en el diseño de interfaces de usuario. A lo largo del análisis iremos viendo sus puntos fuertes y no tan fuertes, a la vez que ofreceremos ideas y soluciones pare mejorarla.

¡Vamos allá!

Metodología

Metodología basada en los 10 principios de Nielsen.

Imagen: Marta Sánchez Cavadas

Proceso

  1. Elección: elegimos una interfaz que sea actual pero que tiene margen de mejora.
  2. Aclimatación: navegamos por la web para conocer todos los rincones, viendo así todo lo que tiene que aportar al usuario y dónde falla para poder aportar soluciones de mejora.
  3. Evaluación:  Análisis heurísticos bajo los 10 principios de Nielsen, cada uno de los principios tendrá un ejemplo con su buen y un mal ejemplo de aplicación, con su respectiva justificación.
  4. Sugerencias e ideas: Tras el análisis y la observación, aportaremos ideas de mejora en todos los campos que creamos oportunos.

10 Principios heurísticos de Nielsen

 

Visibilidad del estado del sistema

? Buen ejemplo

Mantiene a los usuarios informados sobre lo que está sucediendo. En el ejemplo de crea tu plan, describe y detalla de forma gráfica y sencilla cada uno de los pasos mediante una retroalimentación adecuada y detallada para que el usuario tenga toda la información que necesita y no se pierda en ningún paso del proceso.

 

Adecuación del estado del sistema y el mundo real

? Buen ejemplo

Respeta los valores de la marca y esto se ve reflejado tanto en la paleta de color, en las tipografías, el uso de imágenes y vídeos de alta calidad y en sus iconos. Utiliza palabras, frases y conceptos familiares para los amantes del café, además de utilizar slogans y preguntas directas.

? Mal ejemplo

Da muy mala impresión ver esta imagen de los granos de café cortada de esta forma, los granos tendrían que haber bordeado lo que es la figura redonda para conseguir la continuidad que todos esperamos en una web actual y de esta calidad.

 

Libertad y control por parte de la persona usuaria

? Buen ejemplo

El usuario puede eliminar un producto fácilmente sin necesidad de volver un paso atrás, esto lo puede hacer en el último paso, revisando su lista de compra.

? Mal ejemplo

Esta captura es la siguiente pantalla al ejemplo anterior que hemos puesto. En este caso, echo de menos tener la opción de eliminar ya que puede haber algún despistado que no haya revisado correctamente la lista, para no volver atrás o producir sentimientos malos en el usuario, una buena solución sería poner la opción en este último paso y tener de este modo este double check.

 

Consistencia y estándares

? Buen ejemplo

En el cuestionario ¿quieres saber cuál es tu café?, emplea el mismo vocabulario para determinar cada uno de los apartados y opciones que ofrece Incapto. De esta forma, el usuario podrá identificar, sin importar las veces y lo que seleccione en el cuestionario, fácilmente lo que está seleccionando.

? Mal ejemplo

Hemos detectado que usan tanto la palabra suscripción como la palabra plan, esto puede crear confusión dependiendo del usuario que está detrás. Si se trata de un usuario joven, este analiza de una forma más intuitiva cada uno de los mensajes; si por el contrario es un usuario mayor, es posible que le genere confusión y se pregunte si es lo mismo lo que están ofreciendo.

Prevención de errores

? Buen ejemplo

Si no seleccionas los términos y condiciones no puedes dar al botón de realizar el pedido, con lo cual, estás indicando que el usuario tiene que seleccionar esta casilla previamente o de lo contrario no podrá continuar con el proceso.

? Mal ejemplo

Si eliminas un producto de la cesta, no aparece una ventana secundaria de confirmación para verificar que realmente quieres eliminar este producto. Es posible que el usuario lo elimine por error y de esta forma, tiene que volver un paso atrás o navegar por el menú de productos/accesorios para volver a meter en la cesta el producto que ha eliminado por error.

Reconocimiento antes que recuerdo

? Buen ejemplo

Utilizar este tipo de iconos tan reconocidos y que el usuario ya tiene interiorizados, es de tal ayuda que no haría falta utilizar la palabra Acceder al lado ya que emplear este icono lo dice todo.

 

Flexibilidad y eficiencia en el uso

? Buen ejemplo

Es cierto que si vas a comprar en una web de café de especialidad, la gran mayoría de los usuarios serán personas expertas o que al menos saben algo sobre el mundo del café. Es por eso que la posibilidad de realizar configuraciones personalizadas en Incapto, permite satisfacer las necesidades de ambos tipos de usuarios, tanto para los principiantes como para los expertos.

Diseño estético y minimalista

? Buen ejemplo

Cada bloque de información está equilibrado y en armonía, se respeta la paleta de color y hay un buen uso de las tipografías corporativas. El conjunto del diseño es agradable, coherente y funcional.

 

Ayuda a las personas usuarias a reconocer y diagnosticar los errores y a recuperarse

? Buen ejemplo

Si no cumples con el mínimo establecido para el plan que has elegido, salta un aviso informando al usuario de que no ha seleccionado la cantidad mínima de café, en este caso. De esta forma, le estás indicando al usuario que lo que tiene que cambiar es la cantidad de café para poder continuar con su compra.

 

Ayuda y documentación

? Buen ejemplo

En este bloque están detallados los pasos a seguir y en qué consiste cada apartado que seleccionas. Esto es muy interesante ya que el usuario sabe en cada momento todo lo que incluye el pack y valorar lo que vale o no.

 

? Mal ejemplo

Las barras indicadoras fallan a veces tras varias pruebas, no se cambia automáticamente y es lo que espera el usuario, esta información tan relevante y visual de mostrar la información pierde interés al no funcionar siempre del todo correctamente.

 

Errores detectados y propuestas de mejora

 

La interfaz desde una perspectiva de género e inclusión

A día de hoy, es importante tener en cuenta la inclusión y la diversidad ya que son primordiales para crear una experiencia de usuario satisfactoria.

Incapto utiliza un lenguaje inclusivo, destaca la utilización de términos neutros como por ejemplo, no utilizar términos que indiquen un género. De este modo, podemos ver que hablan en términos general y por grupos.

Evitan estereotipos de género, eso se ve reflejado en la paleta de colores de la marca ya que es actual y unisex. El contraste de colores y la legibilidad de los textos está más que estudiada, han tenido presente las posibles discapacidades visuales. Respecto a las imágenes,  son inclusivas y evitan prejuicios a la vez que respetan la armonía y valores de la marca.

A nivel interno y por parte del diseñador, forma parte de su trabajo también hacer pruebas de usuarios, realizando pruebas a usuarios de diferentes géneros, edades, culturas y habilidades para asegurarse de que la experiencia de usuario es satisfactoria para todos. Además, el diseñador no puede dejar de lado la parte de investigación, es su tarea estar informado de la actualidad y aprender sobre los diferentes aspectos de la inclusión y diversidad, de este modo, el trabajo final será mucho mejor.

 

Bibliografía

Capítulos UOC:

4. La evaluación de la usabilidad sin personas usuarias

6. La evaluación de la usabilidad con personas usuarias

Evaluación Heurística (PARTE I)

Evaluación Heurística (PARTE II)

Qué es un análisis heurístico, cómo se realiza y cuáles son sus aplicaciones en UI&UX

 

 

Debate0en Evaluación Heurística: Web de Incapto – Café de Especialidad

No hay comentarios.

Publicado por

Análisis de Usabilidad a sitio web

Publicado por

Análisis de Usabilidad a sitio web

En el siguiente artículo les presentaré los resultados de mi análisis a una página web, en esta ocasión el sitio de la…
En el siguiente artículo les presentaré los resultados de mi análisis a una página web, en esta ocasión el…

En el siguiente artículo les presentaré los resultados de mi análisis a una página web, en esta ocasión el sitio de la revista web NOISE ARMADA, revista de la ciudad de Medellín que ha publicado más de 40 ediciones (digitales y físicas) desde 2011 donde hablan de temas culturales alrededor de la música.

El motivo de la elección del sitio web es porque la revista desea crear un rediseño y desea saber cuáles son sus puntos fuertes actualmente y cuáles debe de mejorar. También es de recalcar que lo que desea el sitio es buscar la interacción de las personas usuarias ya que en la misma se encuentra la última edición de la revista (la cual también entra en el análisis).

La observación se llevó a cabo con el método de heurística y los 10 puntos de usabilidad de Jakob Nielsen, la finalidad es extraer toda la información actual del sitio web, qué errores de usabilidad se encuentra y cuáles son sus puntos positivos que se deben de conservar o explotar más.

A continuación presentaré la lista de cada punto analizado y el resultado observado:

1- Visibilidad del estado del sistema:

El sitio nunca le informa al usuario que algo está cargando o que está a punto de suceder algo. A veces simplemente pasa, otras veces no sucede ninguna acción, o los botones no llevan a ningún lugar.

 

 

2- Adecuación entre el sistema y el mundo real:

 

La página ofrece mensajes claros con sus íconos de redes sociales, también cuando se lee un artículo tiene sugerencias de qué más se puede leer, informa al usuario cuando hay algo no disponible.

3- Libertad y control por parte de la persona usuaria:

 

Durante la navegación dentro de la edición se puede deshacer de las opciones seleccionadas de diferentes maneras (como se ve en la imagen) y durante la lectura a la izquierda se ve un menú para desplazarse en toda la edición.

4-Consistencia y estándares:

En este punto se vieron muchos errores en la edición de la revista, tiene iconografía al final de la edición que no llevan a nada, tampoco aclaran para qué sirve cada botón y solo salen al final.

Se debería de estandarizar mejor, explicarle al usuario previamente para qué sirve cada botón y que de verdad funcione así.

 

5- Prevención de errores:

No se encontraron espacios donde se le ayude a las personas usuarias a completar algo que se desee hacer.

 

6-Reconocimiento antes que recuerdo:

No se encontraron espacios donde las personas reciban algún reconocimiento.

 

7- Flexibilidad y eficiencia en el uso:

Definitivamente el sitio web necesita más flexibilidad, ser más claro con sus acciones, sobre todo en la lectura de su revista, en cuanto al respeto del sitio es muy normal cómo funciona.

8- Diseño estético y minimalista:

La página web cumple con ser buena estéticamente, su home es atractivo, grande con ilustraciones que llaman a interactuar, la lectura de los artículo es clara y simple, lo que balancea el peso de las ilustraciones que se encuentra al inicio.

9- Ayuda a las personas usuarias a reconocer y diagnosticar los errores y a recuperarse:

Cuando la persona que desea hacer algo se equivoca recibe información de lo que está sucediendo, también le da la oportunidad de regresar.
Cumple el objetivo, pero visualmente no tiene nada que ver con el resto del estilo de la marca.
Es muy genérico, probablemente de la plataforma donde se programó toda la web.

 

10- Ayuda y documentación:

Las personas que ingresan al sitio no encontrarán información que les permita entender cómo funciona la interacción de la revista, o lo botones, preguntas frecuentes, o quiénes son.

 

Luego de realizar este “checklist” se ha concluido que el sitio se encuentra aun en un punto crudo, es muy bonita estéticamente pero aun le falta explorar más la usabilidad y cómo conseguir que las personas que desean leer sus artículos se queden más dentro del sitio.

Debate0en Análisis de Usabilidad a sitio web

No hay comentarios.

Publicado por

Reto 2: Evaluación Heurística, Plan de test y Card Sorting

Publicado por

Reto 2: Evaluación Heurística, Plan de test y Card Sorting

    Reto 2: Evaluación Heurística, Plan de test y Card Sorting …
    Reto 2: Evaluación Heurística, Plan de test y Card Sorting …

 

 

Debate0en Reto 2: Evaluación Heurística, Plan de test y Card Sorting

No hay comentarios.

Publicado por

PEC 2. EVALUACIÓN HEURÍSTICA

PEC 2. EVALUACIÓN HEURÍSTICA
Publicado por

PEC 2. EVALUACIÓN HEURÍSTICA

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…
ANÁLISIS HEURÍSTICO DE TICKETMASTER INTRODUCCIÓN En este post revisaremos a fondo la interfaz de Ticketmaster, analizando cada una de…

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


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/

 

Debate0en PEC 2. EVALUACIÓN HEURÍSTICA

No hay comentarios.

Publicado por

[Reto 2] Evaluación Heurística

[Reto 2] Evaluación Heurística
Publicado por

[Reto 2] Evaluación Heurística

Reto 2: Evaluación Heurística, Plan de test y Card Sorting Análisis Heurístico   Introducción Qué es Wise Se trata de un banco…
Reto 2: Evaluación Heurística, Plan de test y Card Sorting Análisis Heurístico   Introducción Qué es Wise Se trata…
Reto 2: Evaluación Heurística, Plan de test y Card Sorting

Análisis Heurístico

 

Introducción

Qué es Wise

Se trata de un banco 100% digital que facilita servicio de pagos y transacciones de dinero. Ofrece la posibilidad de abrir una cuenta, obtener una tarjeta física para pagos o bien enviar o recibir dinero. Además, tiene una oferta para clientes individuales o corporativos.

(más…)

Debate0en [Reto 2] Evaluación Heurística

No hay comentarios.

Publicado por

Reto 1: Contexto y perspectiva de la usabilidad: Leyes y percepciones

Publicado por

Reto 1: Contexto y perspectiva de la usabilidad: Leyes y percepciones

Reto 1: Contexto y perspectiva de la usabilidad: Leyes y percepciones …
Reto 1: Contexto y perspectiva de la usabilidad: Leyes y percepciones …

Debate0en Reto 1: Contexto y perspectiva de la usabilidad: Leyes y percepciones

No hay comentarios.