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

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

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.

EVALUACIÓN HEURÍSTICA, PLAN DE TEST Y CARD SORTING

Constantemente entramos en contacto con interfaces, ya sean webs aplicaciones o portales, que no nos ofrecen la mejor experiencia posible durante su uso. Nuestro papel como diseñador consiste en mantener una mirada crítica en el uso de estas interfaces para reconocer los diferentes problemas.

La evaluación heurística es una técnica que se inscribe, dentro de un proceso de diseño centrado en el usuario, en la fase de evaluación; y se puede llevar a cabo durante todo el proceso de diseño. Esto permitirá identificar y corregir aspectos de usabilidad antes de desarrollarlo completamente y diagnosticar elementos de usabilidad que no eran visibles en etapas previas.

En este post evaluaremos una interfaz gráfica según el listado de evaluación heurística de Jakob Nielsen, identificando y justificando el buen o mal uso de cada una de ellas, para clasificarlos y aportar alguna propuesta de solución.

La interfaz en cuestión se trata del “Área Privada” de la Intranet de “Empresarios Agrupados”, la cual es utilizada diariamente (y más de 10 veces al día) por todos y cada uno de sus empleados. Como comprobaremos un poco más adelante, este portal web no ofrece una buena experiencia a las personas usuarias, que tienen que utilizarla de manera muy recurrente.

En primer lugar, evaluaremos una por una cada una de las heurísticas de Nielsen, y juzgaremos y justificaremos si se está haciendo un buen o mal uso de ellas. Después, valoraremos los hallazgos más graves y realizaremos un ranking de ellos teniendo en cuenta parámetros como la frecuencia con la que ocurre el problema, el impacto y la persistencia. Además, se realizará un análisis de estos resultados para realizar la propuesta de soluciones factibles. Por último, se llevará a cabo una justificación acerca de la evaluación de la perspectiva de género e inclusión de la interfaz.

Evaluación de las heurísticas de Nielsen

1. Visibilidad del estado del sistema

El sistema siempre debe mantener informados a los usuarios sobre lo que está sucediendo, a través de comentarios apropiados dentro de un tiempo razonable. En este caso en concreto se lleva a cabo una buena práctica, ya que el sistema te devuelve feedback sobre si estás conectado con tu usuario o no.

2. Relación entre el sistema y el mundo real

El sistema debe hablar el idioma de los usuarios, con palabras, frases y conceptos familiares para el usuario también haciendo que la información aparezca en un orden natural y lógico. Creo que en el ejemplo que podemos ver a continuación se lleva a cabo esta práctica de concordancia con el mundo real y, sin embargo, creo que de una manera completamente errónea.

Para la identificación de los distintos apartados o secciones se ha elegido algo tan real que… ¡es una foto! Desde luego que se podrían haber elegido otro tipo de iconos mucho más minimalistas y representativos.

3. Libertad y control por parte del usuario

Los usuarios siempre van a comenten errores y necesitarán una “salida de emergencia” claramente marcada, apoyando las funciones de deshacer y rehacer. En el ejemplo que vemos a continuación, el usuario encuentra una salida si quiere salir del proceso de edición de documento que está bien señalizada.

4. Consistencia y estándares

Los usuarios no deberían cuestionarse si acciones, situaciones o palabras diferentes significan en realidad la misma cosa; siga las convenciones establecidas.

En este caso en concreto se ha identificado una inconsistencia de flujo ya que una vez estás en el área privada de empleado y te encuentras frente a la imagen que puedes ver más abajo, cualquiera de las opciones te lleva a una home, donde tienes que volver a encontrar la herramienta que buscabas para entrar en ella específicamente.

Es decir, cliques donde cliques, la siguiente pantalla que tendrás delante de tus ojos será de nuevo… ¡esta!

5. Prevención de errores

Es tan importante tanto el buen diseño de mensajes de error como realizar un diseño cuidadoso que prevenga la ocurrencia de problemas.

Cuando pasa un tiempo límite sin conectarte, la web directamente se desconecta de tu usuario. Esta es una forma de prevención de posibles riesgos y errores de las personas usuarias.

6. Reconocimiento antes que recuerdo

Se deben hacer visibles los objetos, acciones y opciones, el usuario no tendría que recordar la información que se le da en una parte del proceso, para seguir adelante.

Obviando la parte de la estética, en el siguiente ejemplo se muestra en todo el proceso al usuario los campos obligatorios y los datos a introducir. Salvando las distancias de que esto sea un buen diseño, creo que podemos encontrar una buena práctica dentro de él.

7. Flexibilidad y eficiencia de uso

Se debe permitir que los usuarios se adapten al sistema para usos frecuentes. La arquitectura de la información, la clasificación y la estructuración en general de los contenidos de la web es tan deficiente que el usuario tiene que recorrer con su mirada todas y cada una de las opciones cada vez que entra en el sitio, ya que le resulta muy difícil recordar dónde se encontraba cada cosa (no me juzgues… ¡experiméntalo tu mismo!)

8. Estética y diseño minimalista

Los diálogos no deben contener información que es irrelevante o poco usada y que disminuye su visibilidad relativa. Para la evaluación de esta heurística, retomamos el ejemplo utilizado en el punto 2 (o cualquiera de todos los anteriores). La estética del sitio web no centra tu atención ni pone el foco en los aspectos importante, distrayéndote y no dejándote formar un mapa mental apropiado en la cabeza. El uso de imágenes sin estilo visual ni cromático definido, que en ocasiones incluso se pixela, hace que la experiencia de uso resulte incómoda al usuario.

Creo que alguien no sabe nada de iconos ni del mundo vectorial…

9. Ayudar a los usuarios a reconocer

Diagnosticar y recuperarse de errores: los mensajes de error se deben entregar en un lenguaje claro y simple, indicando en forma precisa el problema y sugerir una solución constructiva al problema.

Recuperando lo que comentábamos en el apartado 5 de la prevención de errores, teniendo en cuenta que la práctica de la que hablábamos es buena, el mensaje que recibe el usuario es realmente escaso y poco explícito. Solamente nos encontramos en la esquina superior izquierda un mensaje de error que ni siquiera se comunica en lenguaje completamente humano. Tanto la posición, como el tamaño de la fuente como la redacción del mensaje hacen que la comunicación entre el sistema y el usuario sea deficiente.

10. Ayuda y documentación

La información debería ser fácil de buscar, estar enfocada en las tareas del usuario, con una lista concreta de pasos a desarrollar y no ser demasiado extensa. En el ejemplo que venimos evaluando no existe un apartado dedicado a que el usuario pueda consultar dudas con respecto al sistema o ayuda de algún tipo (¡y mira que, visto lo visto, la necesitamos…!).

Top 3 “los más problemáticos”

Tras la evaluación de los heurísticos de Nielsen en este maravilloso sitio web, a continuación, realizaremos un ranking de las 3 peores malas prácticas llevadas a cabo que hacen de la experiencia casi un pequeño infierno diario.

En el puesto número 3… aunque no menos importante que las demás se encuentra la falta de una estética y de un kit de estilos configurada y diseñada. Los colores no siguen una línea cromática visualmente agradable y cada una de las secciones está diseñada de una manera distinta, tanto a nivel de estructura como de diseño de botones, como de utilización de tipografía o iconos.

En el siguiente estado del pódium y con una gran importancia (¡el puesto número dos!), es la falta de minimalismo en el diseño de todos y cada uno de los apartados, así como la elección de los iconos (o esas imágenes…) que hacen de la experiencia visual un caos total.

Casi nos recuerda a la Homer’s Web Page de Los Simpson…

Por último (y en este caso sí que lo más importante), la estructuración de la información hace prácticamente imposible recordar dónde se encuentra o cómo llegar hasta determinados servicios o herramientas. Es decir, el usuario debe aprender una y otra vez cada vez que entra en la web la forma en la que se realizan procesos que deberían resultar evidentes con respecto a su uso.

Propuesta de mejora

La propuesta de mejora consistiría en primer lugar en realizar un research con usuarios para e diseño de un listado de contenidos coherente y clasificado en apartados intuitivos y claros para el usuario. Organizando un menú agradable para su uso.

Por otro lado, haría falta un diseño de un UI Kit que hiciera coherente el uso de botones, tipografías, colores e iconos, otorgando al sitio web un toque más minimalista a la vez de eficiente.

Perspectiva de género e inclusión

Ahora, vamos a hablar de un tema realmente interesante que es la inclusión y la perspectiva de género del sitio web. Por lo general no se utiliza ni el género masculino ni el femenino para referiste a los empleados y las personas usuarias. Esto no quiere decir que la web (o su intención) se inclusiva, simplemente que no se lleva a cabo la utilización de cierto tipo de palabras.

Por otro lado, nos encontramos imágenes que, por lo general, muestran diversidad entre sus formas, como por ejemplo estas que vemos a continuación.

Por otro lado, teniendo en cuenta el uso de los iconos realizado y de las imágenes seleccionadas en general a lo largo de todo el sitio web, no me parece justo considerarlo como inclusivo ya que no tiene en cuenta ningún tipo de posible discapacidad dentro de los usuarios que lo utilizan.