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/ 

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ò.