Evaluación Heurística de IBM Docs

Introducción

A continuación se presentará un análisis Heurístico del sitio web www.ibm.com/docs, el sitio de documentación técnica de los productos y servicios de IBM. La función de este sitio web es servir como un repositorio para toda la documentación de los servicios y productos de la empresa, y un lugar donde los clientes puedan ir y aprender cómo se usan.

Metodología

Se realizó un análisis visual del sitio web de IBM Docs, y posteriormente se realizó una evaluación Heurística de la usabilidad del sitio, con base en los 10 principios de Jakob Nielsen. En el texto a continuación se expondrán los diez principios y se determinará un buen ejemplo del principio y un mal ejemplo. 

Posteriormente, se medirá cada uno de los errores basado en impacto y frecuencia, siendo 1 menor impacto y menor frecuencia y 5, mayor impacto y mayor frecuencia.

Evaluación

Visibilidad del estado del sistema:

Buen ejemplo: El sitio cuenta con breadcrumbs que ayudan al usuario a ubicarse, una vez dentro de la página principal de cualquiera de los productos. 
Justificación: Esto permite que el usuario se pueda ubicar dentro de cuál página de cuál producto está, además de que le permite regresar a cualquiera de las páginas anteriores, dándole control sobre el sitio.

Mal ejemplo: No todas las páginas tienen breadcrumbs, solo las páginas principales de los productos.
Justificación: A pesar de que los breadcrumbs son una buena práctica, el hecho de que están solo presentes en las páginas principales de los productos genera confusión. Si como usuario estoy dentro de cualquiera de los apartados de los productos, no tengo forma de volver exactamente a la página previa a través de los breadcrumbs.

Gravedad: 5/5
Frecuencia:5/5
Impacto: 4/5

Propuesta: Incluir breadcrumbs en todas las páginas del sitio, para permitir el fácil acceso del usuario.

Ayuda y documentación

Buen ejemplo: Botón de contacto 
Justificación: El sitio web tiene un botón de contacto, que cuando se cliquea, despliega una serie de soluciones de ayuda para el usuario, que incluyen soporte para clientes y usuarios, documentación y foros. 

Mal ejemplo: Dentro del botón de contacto hay demasiadas opciones y tiende a ser confuso.
Justificación: Es difícil para el usuario determinar cuál es el tipo de soporte que necesita, porque hay demasiadas opciones.

Gravedad: 4/5
Frecuencia: 2/5
Impacto: 4/5

Propuesta: Principalmente es importante simplificar el proceso de contacto y destinar menos cantidad de opciones. Es necesario hacer un user journey de la acción que se espera que el cliente tome cuando requiere ayuda, porque no está claro. Proponer dos opciones de contacto y ayuda que sean, una documentación y la otra, contacto con soporte por medio de la misma página, es suficiente.

Consistencia y estándares

Buen ejemplo: La página de documentación de IBM soporta un gran número de productos y servicios de la empresa, y en todos ellos, los estilos de navegación son consistentes.
Justificación: Las barras de búsqueda, los íconos que se utilizan y los colores son los mismos a través de todo el sitio, lo que permite un sentido de consistencia y orientación.

Mal ejemplo: Dependiendo del producto, la página de inicio es diferente, así como la presentación.
Justificación: El hecho de que los colores del landing page sea diferente dependiendo del producto, resulta confuso. La imagen de entrada de cada página también es diferente y también la tipografía, generando inconsistencia.

Gravedad: 3/5
Frecuencia: 5/5
Impacto: 4/5

Propuesta: Mantener consistencia entre los landing pages de los diferentes productos, incluyendo la tipografía y señalar en la imagen o ‘hero’ del landing page el nombre del producto o servicio del subsitio.

Prevención de errores

Buen ejemplo: Barra de búsqueda indica el sitio en el que se encuentra el usuario 
Justificación: Dependiendo de donde esté ubicado el usuario en el sitio, la barra de búsqueda indica el sitio en el que se estará haciendo la búsqueda, para prevenir que se haga la búsqueda en un sitio incorrecto. 

Mal ejemplo: El uso de filtros resulta confuso.
Justificación: La buena práctica utilizada en la barra de búsqueda no se sigue en el menú de filtros. Resulta confuso el lenguaje que se utiliza ‘filtros en títulos’ porque no se establece cuáles son los filtros que se deben buscar. Tampoco se explica si se refiere a etiquetas o si se busca por medio de una palabra dentro de un título. En general, resulta confuso y puede inducir al error.

Gravedad: 2/5
Frecuencia: 4/5
Impacto: 4/5

Flexibilidad y eficiencia de uso

Buen ejemplo: Documentación disponible para todas las versiones de los productos y servicios
Justificación: Todas las versiones de los productos y servicios están disponibles cuando se accede al servicio de documentación, permitiendo que los usuarios puedan personalizar su experiencia basado en la versión de producto que tienen.

Mal ejemplo: No hay opciones de personalización en el sitio
Justificación: El sitio no tiene opciones de personalización y hay pocas opciones para simplificar la búsqueda de contenido. Los usuarios tienen que ir a cada página para encontrar lo que buscan. No tiene opciones para recordar lo que el usuario ha visitado previamente.

Gravedad: 4/5
Frecuencia: 5/5
Impacto: 4/5

Propuesta: La propuesta es que el sitio cuente con varias opciones de personalización, incluyendo:

• Sección que permita visualizar el historial de páginas anteriormente visitadas dentro del sitio
• Sección con las páginas más visitadas por otros usuarios que puedan ser de interés.

Propuesta: La propuesta es modificar las palabras dentro del field de busqueda the filtros a ‘search title’, para que la busqueda sea más clara.

Control y libertad del usuario

Buen ejemplo: Se le permite al usuario tener control sobre la visualización de la página. 
Justificación: La página cuenta con opciones como expandir o contraer el menú izquierdo, expandir o contraer la tabla de contenidos, utilizar filtros y cambiar la versión de la documentación, de manera que la experiencia resulta más personalizada. 

Mal ejemplo: Si el botón de ‘mostrar toda la tabla de contenidos’ está desactivado, la información del menú izquierdo aparece bloqueada, lo que puede resultar confuso para el usuario. 

Gravedad: 3/5
Frecuencia: 5/5
Impacto: 3/5

Propuesta: Mantener el menu desbloqueado todo el tiempo, para que sea menos confuso para el usuario.

Consistencia del sistema y el mundo real

Buen ejemplo: La página utiliza iconos universales, como el ícono de búsqueda (lupa), icono de usuario para acceder al perfil, thumbs up and down to rate the page o el ícono de cancelar (X) para cancelar una búsqueda.
Justificación: Esto es una buena práctica porque permite al usuario ubicarse dentro de la página con elementos que son universales, y que puede encontrar en otros sitios. Esto hace que la interfaz sea fácil de navegar y accesible.
Mal ejemplo: La página tiene términos muy técnicos que puede que sean útiles para el usuario.
Justificación: si no son explicados, los términos no resultan de utilidad para el usuario. Particularmente en páginas de documentación esto es algo que debe ser tomado en cuenta.

Gravedad: 2/5
Frecuencia: 1/5
Impacto: 2/5

Propuesta: Mantener el texto simple, a pesar de que se trata de contenido técnico es importante que el usuario pueda entenderlo.

Reconocimiento en lugar de recuerdo

Buen ejemplo: Uso de tooltips
Justificación: El uso de tooltips en la tabla de contenidos ayuda al usuario a saber por donde está navegando y qué esperar si hace click a cualquiera de los títulos.

Mal ejemplo: Líneas en tablas funcionan como tooltips y resulta confuso 
Justificación: Las celdas de las tablas funcionan como los tooltips, y se oscurecen cuando se coloca el cursor sobre ellas. Sin embargo, no generan ninguna acción ni permite hacer click cuando el cursor se posiciona, generando confusión. 

Gravedad: 3/5
Frecuencia: 5/5
Impacto: 3/5

Propuesta: Modificar la tabla de manera que no responda cuando se pasa el cursor sobre las celdas. De este modo, no parecerá que el usuario puede hacer click en las celdas y percibir una acción falsa.

Diseño estético y minimalista:

Buen ejemplo: El diseño de la página es sencillo y minimalista
Justificación: El hecho de que la página sea blanca, la tipografía sea redondeada, todos los links sean del mismo color y el diseño no sea cargado, hace que la documentación sea más fácil de leer, que es al final el objetivo fundamental del sitio. 

Mal ejemplo: Tabla de contenidos colapsable genera confusión.
Justificación: La tabla de contenidos colapsable genera confusión, se ve desordenada y hace que el sitio se vea muy cargado. Es difícil entender la jerarquía de la taxonomía.

Gravedad: 2/5
Frecuencia: 5/5
Impacto: 2/5

Propuesta: La propuesta en este caso es que se mantenga permanente la tabla de contenidos, con un scroll que le permita al usuario subir y bajar, pero que el contenido no desaparezca.

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

Buen ejemplo: aviso de que la versión que el usuario está visitando no es la versión más nueva de la documentación. 
Justificación: Este fue el ejemplo que más me llamó la atención del sitio. Cuando se visita una página que existe pero que ha sido actualizada, el sitio muestra un aviso notificando al usuario que la página que está viendo tiene una versión más nueva y lleva al usuario a que la revise. La página tiene varios de estos ejemplos, otro de ellos es cuando se hace click en un enlace que está roto, aparece una pantalla que devuelve al usuario a la pantalla previa. 

Mal ejemplo: No se encontró un mal uso de este principio.

INTRODUCCIÓN

En esta publicación se realizará una Evaluación Heurística del proceso de compra en la página web de Zalando Privé. He seleccionado esta interfaz debido a que se trata de una tienda online con elementos y procesos que difieren ligeramente de lo habitual en este tipo de webs. Además es una web con la que ya estoy familiarizado como usuario, por lo que la Evaluación Heurística será aún más precisa y completa.

METODOLOGÍA

Esta Evaluación se ha llevado a cabo mediante un análisis general previo de la herramienta a evaluar. Seguidamente, se ha realizado un análisis más concreto del proceso a estudiar (en este caso el proceso de compra dentro de la web), indagado paso por paso en este, detectando y puntualizando un hallazgo para cada uno de los principios de Nielsen y clasificando cada uno de los hallazgos según si el principio se usaba correctamente o no. Finalmente se ha elaborado un listado de los errores detectados en el anterior punto, clasificándolos según su gravedad y proponiendo soluciones y mejoras para corregirlos.

PRINCIPALES HALLAZGOS EN BASE A LOS 10 PRINCIPIOS HEURÍSTICOS DE NIELSEN

LISTADO DE ERRORES SEGÚN SU GRAVEDAD

Descobriment 1: Mal Exemple

Descobriment 2: Bon Exemple

Descobriment 3: Mal Exemple

Descobriment 4: Bon Exemple

Descripció:

Es fa serir graphics que imiten als botons de control d’una taula de punchar.

Idea de solució:

En aquest escenari, els botons es troben inactius ja que cap opció està seleccionada. Una millora proposada seria utilitzar elements gràfics que imitin la funcionalitat dels LED que indicin cuan hi ha so actiu.

Avaluació:

• Freqüència: 2/5
• Gravetat: 1/5
• Importància de la funcionalitat:  2/5

Descobriment 5: Mal Exemple

Descobriment 6: Bon Exemple

Descobriment 7: Mal Exemple

Descobriment 8: Bon Exemple

Descobriment 9: Mal

Descobriment 10: Bon Exemple

Descobriment 11: Mal Exemple

Descobriment 12: Bon Exemple

Descobriment 13: Mal Exemple

Descobriment 14: Bon Exemple

Descobriment 15: Mal Exemple

Descobriment 16: Bon Exemple

Descobriment 17: Mal Exemple

Descobriment 18: Bon Exemple

Descobriment 19: Mal Exemple

Descobriment 20: Bon Exemple

Introducción

Voy a realizar un juego con el que llevo mucho tiempo jugando, y es «Hears of Iron IV» o HOI4.

«Hearts of Iron IV» es un juego de estrategia que transporta a los jugadores a los momentos cruciales de la Segunda Guerra Mundial, permitiéndoles controlar una nación y tomar decisiones que moldean el curso de la historia. Aplicar los principios heurísticos de Nielsen a este juego nos ofrece una comprensión más profunda de cómo su diseño se alinea con las necesidades y expectativas de los usuarios, impactando así su experiencia de juego.

Metodología

Para evaluar la aplicación de los principios heurísticos de Nielsen en «Hearts of Iron IV», se realizó un análisis exhaustivo del juego, centrándose en la experiencia del usuario en áreas clave:

1. Interfaz de usuario (UI): Se examinaron la disposición de elementos visuales, la claridad en la presentación de información y la consistencia en el diseño.
2. Experiencia de juego: Se evaluó la flexibilidad de acciones, la prevención de errores y la coherencia entre las acciones del jugador y las consecuencias en el juego.
3. Documentación y asistencia: Se analizó la disponibilidad de tutoriales, consejos emergentes y recursos de ayuda para facilitar la comprensión del juego.
4. Estética y usabilidad: Se consideró la estética visual, la eficiencia en el uso de la interfaz y la facilidad para recuperarse de errores.

Los 10 principios heurísticos de Nielsen

1. Visibilidad del estado del sistema:

Buen Ejemplo:

• Positivo: Los paneles muestran la producción de recursos, fuerzas militares y relaciones diplomáticas de la nación controlada por el jugador.
• Justificación: Facilita la toma de decisiones informadas al proporcionar información crucial de manera accesible.

Mal Ejemplo:

• Negativo: No todas las gestiones se ven claramente, algunas opciones como la gestión de recursos (hierro, niquel…) no se reflejan inmediatamente en los paneles, lo que dificulta la comprensión inmediata del impacto de las decisiones económicas. También algunas acciones rápidas como los desembarcos no se alertan correctamente.
• Justificación: La falta de actualización en tiempo real puede llevar a decisiones menos precisas y confundir al jugador.

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

Buen Ejemplo:

• Positivo: El juego refleja eventos históricos, tecnología disponible y alianzas políticas de la Segunda Guerra Mundial. La gestión de logística y terreno es fiel a las batallas de la II Guerra Mundial.
• Justificación: Esta autenticidad histórica aumenta la inmersión del jugador en el contexto histórico del juego.

Mal Ejemplo:

• Negativo: Introduce eventos o tecnologías ficticias que no tienen base histórica, rompiendo la coherencia con la realidad histórica. Esto sucede de forma arbitraria.
• Justificación: Estos cambios pueden afectar la credibilidad y la inmersión del jugador en el período histórico representado. En el ejemplo de la imagen, no muestra la Francia de Vichy.

3. libertad y control para el usuario:

Buen Ejemplo:

• Positivo: Los jugadores tienen amplia libertad para tomar decisiones políticas, económicas y militares que afectan el curso del juego, y también subsanar aquellos errores.
• Justificación: Fomenta la exploración y la experimentación, brindando una experiencia más personalizada y variada.

Mal Ejemplo:

• Negativo: Ciertos actos, como iniciar una guerra, no puede finalizar con una paz blanca. También algunas naciones no tienen todas las opciones de jugabilidad, como desde el panel de política iniciar una Rusia democrática
• Justificación: La falta de opciones puede hacer que el juego se sienta restrictivo y menos atractivo.

4. Consistencia y estándares:

Buen Ejemplo:

• Positivo: La interfaz mantiene una estructura coherente en la presentación de información y opciones a lo largo del juego.
• Justificación: Facilita la navegación y comprensión, ya que los jugadores se familiarizan con un diseño consistente.

Mal Ejemplo:

• Negativo: Los menús o paneles tienen diseños diferentes y cambian su ubicación, lo que puede confundir a los jugadores al buscar información específica. Esto sucede con las actualizaciones de la sección de aviación, barcos y tanques.
• Justificación: La falta de consistencia puede generar frustración y dificultar la familiarización con la interfaz. Como vemos en la imagen, la configuración de aviones es vertical y la de barcos horizontal (además los barcos muestran tecnología naval)

5. Prevención de errores:

Buen Ejemplo:

• Positivo: Antes de tomar decisiones importantes, como la declaración de guerra, el juego muestra advertencias sobre las posibles consecuencias.
• Justificación: Reduce la posibilidad de cometer errores costosos al brindar al jugador la oportunidad de reconsiderar sus acciones.

Mal Ejemplo:

• Negativo: Algunas acciones cruciales carecen de confirmaciones o avisos, lo que puede llevar a errores irreversibles. Un ejemplo de ello es que al declarar la guerra a un país, este puede unirse a una alianza mayor y ganar la guerra. También sucede en el frente, que la IA del juego te mueve los batallones automáticamente, y esto produce errores de defensa y que pierdas posiciones.
• Justificación: La falta de advertencias, como las simpatías por otros países, puede frustrar al jugador al cometer acciones involuntarias y perjudiciales.

6. Reconocimiento antes que recuerdo:

Buen Ejemplo:

• Positivo: El juego utiliza iconografía clara y nombres descriptivos para unidades y tecnologías, facilitando su identificación. Un ejemplo lo encontramos en la configuración de batallones, que es intuitiva.
• Justificación: Permite a los jugadores reconocer elementos fácilmente sin necesidad de recordar detalles previos.

Mal Ejemplo:

• Negativo: Algunos elementos carecen de descripciones claras o nombres informativos, lo que dificulta su identificación rápida. Como ejemplo, algunas tecnologías marítimas están mezcladas con tecnologías de inteligencia o los estats de los batallones son muy confusos.
• Justificación: Esto puede generar confusión y requerir que los jugadores recuerden detalles previos o realizar tutoriales para comprender completamente una tecnología.

7. Flexibilidad y eficiencia en el uso:

Buen Ejemplo:

• Positivo: «Hearts of Iron IV» ofrece atajos de teclado y opciones de interfaz que permiten a los jugadores realizar acciones de manera eficiente. Esto generalmente se realiza con las teclas superiores «FX» y algunas teclas genéricas como «L» de logística
• Justificación: Facilita la jugabilidad rápida y la ejecución de estrategias complejas de manera más eficiente.

Mal Ejemplo:

• Negativo: Necesidad de navegar a través de múltiples menús para realizar acciones comunes, como el comercio internacional, ralentiza la jugabilidad.
• Justificación: Puede generar frustración y afectar la experiencia del usuario al hacerla menos fluida.

8. Diseño estético y minimalismo:

Buen Ejemplo:

• Positivo: La interfaz del juego muestra información detallada de manera organizada y limpia, evitando la saturación visual.
• Justificación: Permite que los jugadores se centren en la estrategia sin distraerse por elementos innecesarios o desordenados.

Mal Ejemplo:

• Negativo: En ciertos casos, como las características de los batallones, tienen un exceso información en pantalla, resultando en una interfaz confusa y abrumadora.
• Justificación: Esto puede dificultar la comprensión rápida y generar una experiencia visualmente agotadora.

9. Ayuda y documentación:

Buen Ejemplo:

• Positivo: «Hearts of Iron IV» ofrece tutoriales iniciales interactivos, consejos emergentes y una base de conocimientos accesible.
• Justificación: Facilita la comprensión del juego para nuevos jugadores y proporciona ayuda contextual cuando se necesita.

Mal Ejemplo:

• Negativo: En guerra avanzada, la falta de información o tutoriales exhaustivos hace que los nuevos jugadores se sientan perdidos o desorientados. Un ejemplo de esto lo encontramos en la batalla aérea o la batalla naval, que a pesar de tener ayuda estilo tooltip, el conjunto de opciones abruma su jugabilidad..
• Justificación: La ausencia de ayuda y/o tutoriales puede dificultar el aprendizaje y la inmersión en el juego.

10. Diagnóstico y recuperación fácil de los errores:

Buen Ejemplo:

• Positivo: «Hearts of Iron IV» cargar partidas previas para corregir errores.
• Justificación: Brinda a los jugadores la oportunidad de rectificar decisiones sin consecuencias permanentes.

Mal Ejemplo:

• Negativo: Algunas acciones no pueden revertirse o corregirse, lo que lleva a situaciones irremediables. Esto sucede cuando un país de forma arbitraria niega el comercio o la simpatía, provocando dificultades en el juego.
• Justificación: Esto puede generar frustración y desmotivación al no poder enmendar errores.

Listado priorizado según la gravedad

Gravedad Alta:

1. Falta de actualización inmediata en paneles económicos: Esto puede llevar a decisiones erróneas y estrategias menos efectivas debido a la falta de información en tiempo real sobre las consecuencias de las acciones económicas.
   • Solución: Debe aparecer avisos de emergencia en situaciones críticas, tales como problemas en materias primas.
2. Acciones irreversibles sin confirmaciones o advertencias: Esto se produce en los desembarcos navales. Las decisiones sin oportunidad de revisión pueden conducir a errores graves que afectan negativamente el progreso del juego.
   • Solución: Debe aparecer avisos de emergencia en situaciones críticas, tales como un desembarco naval.
3. Exceso de elementos visuales o información en pantalla: Una interfaz confusa y sobrecargada, con distintos elementos y propiedades, puede ser abrumadora para los jugadores, dificultando la comprensión y generando confusión.
   • Solución: Se recomienda que el juego incluya ejemplos de movimientos o tooltips más elaboradas.
4. Ausencia o limitación en la documentación y tutoriales: Si bien puede dificultar la comprensión inicial del juego, esto puede ser superado con la experiencia y la búsqueda de información externa.
   • Solución: El juego puede incluir en su canal ejemplos de jugadas o tutoriales más detallados
5. Movimientos automáticos de batallones por la IA: Esto produce que deje huecos en el campo de batalla y te cerquen tu ejército, provocando un malestar en el juego.
   • Solución: Dar la opción al usuario de deshabilitar la IA y pasar al control manual

Gravedad Media:

4. Cambios incoherentes con la realidad histórica: Introducir elementos o eventos ficticios que rompen la autenticidad histórica puede afectar la credibilidad y la inmersión en el contexto del juego.
   • Solución: Corregir aquellos errores que generen error en la autenticidad histórica
5. Restricciones excesivas en las acciones del jugador: Limitar en gran medida la libertad de elección puede hacer que la experiencia se sienta restrictiva y menos atractiva para los jugadores.
   • Solución: Añadir aquellas opciones que aun no se encuentran en el videojuego

Gravedad Baja:

7. Información o elementos poco descriptivos y difíciles de identificar: Aunque puede generar cierta confusión, no tiene un impacto tan inmediato en la jugabilidad como los aspectos mencionados anteriormente.
   • Solución: Se puede añadir mensajes de tooltips más descriptivos.
8. Falta de atajos o métodos de acceso rápido a acciones comunes: Esto puede ralentizar la jugabilidad y afectar la eficiencia del jugador al realizar acciones repetitivas.
   • Solución: Añadir un panel de configuración de opciones, para que el usuario pueda configurar las teclas y todas las opciones posibles.

Espero compañeros que os haya gustado mi análisis de este grandioso juego, que a pesar de ser muy entretenido aun considero que tiene un gran abanico de mejoras.

INTRODUCCIÓ: PÀGINA WEB D’IKEA

La interfície que s’analitza és la pàgina web d’IKEA, una corporació multinacional  d’origen suec amb seu als Països Baixos, fundada al 1943 per Ingvar Kamprad. Actualment, està present en 49 mercats d’Europa, Àsia, Estats Units i Oceania.

Aquest web està pensat perquè els usuaris/es puguin navegar per tota la pàgina, buscar aquells productes que necessiten o desitgen i els puguin adquirir.

Com qualsevol pàgina de compra online, està pensada per ser una pàgina de fàcil navegació, intuïtiva, amb gran oferta de productes i que generi seguretat durant la compra a l’usuari/a.

METODOLOGIA: COM S’HA REALITZAT LA ANÀLISIS HEURÍSTICA?

 Per a la anàlisis heurística de la pàgina web d’IKEA s’han treballat els diferents punts:

1. Per a cada un dels principis de Nielsen s’ha descrit una heurística i subheurística, a més, s’ha detallat:
   1. Un bon exemple i un mal exemple d’aplicació i la seva justificació, per cadascun.
   2. Quines subheurístiques es compleixen i quines no, indicant el grau de gravetat del problema a partir de tres paràmetres:
      1. La freqüència amb què ocorre el problema: és freqüent o no?
      2. L’impacte del problema: els usuaris poden superar-lo fàcilment o no?
      3. La persistència del problema: es resol immediatament o reapareix al llarg de l’ús?

2. S’ha establert un llistat prioritzat segons gravetat, tenint en compte l’experiència d’usuari. Amb la seva corresponent justificació i proposta de millora.

ANÀLISIS

1. Visibilitat de l’estat del sistema.

Heurística: els usuaris haurien de poder ser coneixedors en tot moment de l’estat del sistema i de les seves accions.

Subheurística: proporcionar informació sobre l’estat de l’acció que es realitza.

Bon exemple i justificació: quan un usuari afegeix a la cistella un producte automàticament es rep un pop-up amb la notificació de que el producte ha estat desat a la cistella de compra. Això permet al usuari fer un seguiment.

Mal exemple i justificació: si afegeixes unitats al producte un cop dins la cistella de compra, no es rep cap notificació, cal fixar-se en el número total d’unitats. Això pot provocar la compra d’unitats incorrectes per error.

Grau de gravetat

• freqüència amb què ocorre el problema 5/5
• impacte del problema 3/5
• persistència del problema 5/5
• Puntuació de l’ús de l’heurística 13/5

2. Adequació entre el sistema i el món real.

Heurística: l’usuari hauria de poder conèixer totes les categories i detalls dels productes que es venen.

Subheurística: s’hauria de proporcionar tota la informació i característiques del producte amb un llenguatge senzill i comprensible per l’usuari.

Bon exemple i justificació: tots els productes estan classificats segons funcionalitats i amb una explicació acurada del producte. Això permet a l’usuari conèixer el producte en detall.

Mal exemple i justificació:  tot i ser un tret característic de l’IKEA, els noms complexes en Suec dels mobles pot dificultar la cerca d’aquests per l’usuari. Això pot enrederir el temps de recerca de productes o confondre a l’usuari.

Grau de gravetat

• freqüència amb què ocorre el problema 5/5
• impacte del problema 2/3
• persistència del problema 5/5
• Puntuació de l’ús de l’heurística 12/15

3. Llibertat i control per part de la persona usuària

Heurística: llibertat de mobilitat per tota la pàgina web i control de fer i desfer accions.

Subheurística: l’usuari hauria de poder fer i desfer qualsevol acció com la de selecció de compra.

Bon exemple i justificació: l’usuari té total llibertat per moure’s per la pàgina web per afegir i per eliminar productes de la cistella, així com afegir o treure unitats de cadascun. Això permet que l’usuari es senti autònom i amb el control.

Mal exemple i justificació: una vegada has acceptat la compra l’usuari no es pot fer enrere. L’única opció que li queda és tornar els productes a través d’un altre tràmit.

Grau de gravetat

• freqüència amb què ocorre el problema 5/5
• impacte del problema 3/5
• persistència del problema 5/5
• Puntuació de l’ús de l’heurística 13/15

4. Consistència i estàndards

Heurística: el disseny de la pàgina hauria de mantenir una consistència i seguir estàndards per a la navegació intuïtiva de l’usuari.

Subheurística: l’usuari hauria de poder reconèixer icones de llistats i filtratge, buscador i categories.

Bon exemple i justificació:  la consistència al llarg de la pàgina web es correcte, es mantenen els mateixos formats en general i l’aspecte de la pàgina home és molt clar i intuïtiu. Això provoca que l’usuari es senti còmode amb la navegació per la pàgina.

Mal exemple i justificació:  tret de les barres de menú, cerca i filtres l’estil de la pàgina de navegació per veure els productes en el home és diferent que en la resta de pàgines una vegada seleccionada la categoria del producte. Això pot causar confusió a l’usuari mentre navega i realitza les seves compres.

Grau de gravetat

• freqüència amb què ocorre el problema 5/5
• impacte del problema 1/5
• persistència del problema 1/5
• Puntuació de l’ús de l’heurística 7/15

5. Prevenció d’errors

Heurística: els usuaris haurien de ser avisats de qualsevol acció que duen a terme per evitar l’error.

Subheurística: els usuaris haurien de rebre un pop-up de justificació per a cada acció per evitar errors en les compres.

Bon exemple i justificació: en la selecció d’un llit, una vegada l’usuari escull posar-ho a la cistella, s’obre un pop-up a la banda dreta amb tots els articles que s’afegiran amb aquella acció. Això permet a l’usuari ser coneixedor de tots els articles que implica aquella compra i permet eliminar els que no es desitgin.

Mal exemple i justificació:  l’usuari no rep notificació si elimina algun producte. Això pot crear confusió sobre si ha realitzat amb èxit l’acció.

Grau de gravetat

• freqüència amb què ocorre el problema 5/5
• impacte del problema 1/5
• persistència del problema 4/5
• Puntuació de l’ús de l’heurística 10/15

6. Reconeixement abans que record

Heurística: avançar-se a l’usuari promocionant aquells productes que poden ser d’interès per a ell/a.

Subheurística: proporcionar suggeriments de productes d’interès per a l’usuari/a.

Bon exemple i justificació:  al afegir a la cistella alguns dels productes, apareix al lateral una finestreta amb un llistat de productes similars que poden ser d’interès per a l’usuari/a. Això permet agilitzar la compra i possiblement ajudar a l’usuari a no descuidar-se cap article que necessiti.

Mal exemple i justificació: aquesta notificació de proposta de productes similars no apareix per a tots els productes. Això pot crear confusió a l’usuari i haver de fer una recerca més exhaustiva.

Grau de gravetat

• freqüència amb què ocorre el problema 3/5
• impacte del problema 1/5
• persistència del problema 2/5
• Puntuació de l’ús de l’heurística 6/15

7. Flexibilitat i eficiència en l’ús

Heurística: l’usuari hauria de poder escollir productes i desar-los a la cistella per una posterior tria i acabar comprant allò que desitgi. També hauria de comptar amb el servei de memòria d’usuari i que quedés guardat a la cistella els productes fins la seva compra.

Subheurística: proporcionar un perfil d’usuari per poder gestionar les compres al seu temps.

Bon exemple i justificació: la pàgina web permet crear-se un usuari i deixar els productes en stand by a la cistella fins a la seva compra. Això permet a l’usuari tenir flexibilitat per anar fent una única compra en diversos espais de temps.

Mal exemple i justificació:  la pàgina proporciona l’opció de crear-se llistes de favorits segons el perfil d’usuari, però no hi ha una explicació prèvia per aquesta utilitat i no queda clar com accedir-hi per poder-se’n beneficiar. Això, pot provocar en molts casos que l’usuari ho passi per alt i no conegui ni faci ús d’aquesta opció.

Grau de gravetat

• freqüència amb què ocorre el problema 1/5
• impacte del problema 1/5
• persistència del problema1/5
• Puntuació de l’ús de l’heurística 3/15

8. Disseny estètic i minimalista

Heurística: el disseny de la pàgina hauria d’estar centrat en l’objectiu de l’empresa i estar acompanyat d’un espai net i que no atabali a l’usuari.

Subheurística: els colors i distribució dels elements ha de ser clar i fàcil de navegar. Ha de permetre a l’usuari no cansar-se de navegar per la pàgina.

Bon exemple i justificació: el disseny net, ordenat i minimalista fa que la navegació sigui agradable i que l’usuari no es senti pressionat per a realitzar les compres. Això, aportarà millors resultats d’ús de la pàgina web i per tant més beneficis a l’empresa.

Mal exemple i justificació: el color blanc que predomina en tota la pàgina web, en segons quins productes es perd una mica la visibilitat d’aquests ja que tenen tonalitats molt similars i no destaquen sobre el fons en el qual estan. Això, pot resultar que molts productes no resultin atractius pels usuaris o que no els puguin visualitzar òptimament.

Grau de gravetat

• freqüència amb què ocorre el problema 4/5
• impacte del problema 4/5
• persistència del problema 4/5
• Puntuació de l’ús de l’heurística 12/15

9. Ajuda les persones usuàries a reconèixer i diagnosticar els errors i recuperar-se’n

Heurística: el disseny de la pàgina hauria de preveure i ajudar a l’usuari a corretgir els possibles errors.

Subheurística: haurien d’haver pop-up informatius o tooltips per a que l’usuari aconseguís una bona experiència durant la interacció amb la plataforma i pogués corregir errors en cas de que aquests apareguessin.

Bon exemple i justificació:  en el registre d’usuari hi ha diversos camps a omplir. El sistema t’avisa de que hi ha un error i explica l’error. Això, permet a l’usuari identificar l’error i intentar corregir-lo.

Mal exemple i justificació: en la mateixa notificació de l’error no apareix el detall com solucionar-lo. Això, pot crear confusió a l’usuari i que abandoni la tasca.

Grau de gravetat

• freqüència amb què ocorre el problema 2/5
• impacte del problema 5/5
• persistència del problema 3/5
• Puntuació de l’ús de l’heurística 10/15

10. Ajuda i documentació

Heurística: l’usuari hauria de comptar amb un servei d’atenció al client i d’ajuda per qualsevol dificultat o problema que aparegui durant l’ús de la pàgina web.

Subheurística: dins de la pàgina web l’usuari hauria de comptar amb l’apartat d’atenció al client i de preguntes freqüents.

Bon exemple i justificació: la pàgina web compta amb un apartat d’atenció al client i amb un subapartat de preguntes freqüents. Això, pot ser d’utilitat per l’usuari si té algun dubte referent a l’espai o a l’empresa.

Mal exemple i justificació: l’accés a aquest apartat no és directe i no està molt a la vista. Això dificulta el seu accés i pot portar a l’usuari a pensar que no existeix aquest apartat.

Grau de gravetat

• freqüència amb què ocorre el problema 1/5
• impacte del problema 3/5
• persistència del problema 1/5
• Puntuació de l’ús de l’heurística 5/15

LLISTAT DE GRAVETAT

A continuació, s’exposa un llistat de les 5 casuístiques analitzades amb anterioritat segons cada principi de Nielsen, de major a menor nivell de gravetat. S’hi adjunta una justificació i una proposta de millora per a cada una.

1. Visibilitat de l’estat del sistema.

Justificació: els usuaris haurien de poder ser coneixedors en tot moment de l’estat del sistema i de les seves accions. D’aquesta manera s’evitarien estats de frustració, desconeixença o pèrdua durant la navegació.

Proposta de millora: proporcionar informació sobre l’estat de l’acció que es realitza en tot moment i en cada una de les accions realitzades.

2. Llibertat i control per part de la persona usuària

Justificació: els usuaris haurien de comptar amb la llibertat de mobilitat per tota la pàgina web i control de fer i desfer accions, incloent les de realització o anul·lació de comanda.

Proposta de millora: proporcionar l’opció a anul·lació de la comenda durant X període de temps, d’aquesta manera s’estalviarien el fet d’haver de retornar productes en cas de que s’haguessin comprat per error.

3. Adequació entre el sistema i el món real

Justificació: l’usuari hauria de poder conèixer totes les categories i detalls dels productes que es venen a través d’un llenguatge comú i senzill. Si l’usuari no identifica les categories o productes es dificulta la tasca.

Proposta de millora: s’hauria de proporcionar tota la informació i característiques del producte amb un llenguatge senzill i comprensible per l’usuari, evitar els noms en altres idiomes o assegurar-se de contemplat la traducció o detall del producte en un etiquetatge que ressalti i sigui fàcil d’identificar.

4. Disseny estètic i minimalista

Justificació: el disseny de la pàgina hauria d’estar centrat en l’objectiu de l’empresa i estar acompanyat d’un espai net i que no atabali a l’usuari. Aquest hauria de sentir-se còmode durant la navegació i poder identificar tots els productes sense dificultats.

Proposta de millora: els colors i distribució dels elements haurien de ser clars i fàcils per a la navegació. Ha de permetre a l’usuari no cansar-se de navegar per la pàgina, trobar i identificar tots els apartats, categories i veure clarament els productes que hi ha per poder comprar.

5. Prevenció d’errors

Justificació: els usuaris haurien de ser avisats de qualsevol acció que duen a terme per evitar l’error. Si no hi ha una notificació acompanyada d’una adequada explicació de cada acció és possible que l’usuari s’equivoqui en algun dels passos.

Proposta de millora: els usuaris haurien de rebre un pop-up de justificació per a cada acció per evitar errors en les compres. Per exemple, quan sumen o eliminen una unitat d’algun producte.

Referències Bibliogràfiques

Busquets, C. 10 reglas heurísticas de Nielsen y cómo aplicarlas. Recuperat de:  https://www.uifrommars.com/10-reglas-heuristicas-como-aplicarlas/

Hassan, Y., Martín, F. J., Guia d’ Avaluació Heurística. Recuperat de:  http://www.nosolousabilidad.com/articulos/heuristica.htm

Membrives, J. (2019). Quadern d’Avaluació de la Usabilitat. 2023, Recuperat de: UOC. http://quadern-usabilitat.recursos.uoc.edu/es/

Nielsen, J. (2020). 10 Usability Heuristics for User Interface Design. Nielsen Norma Group. Recuperat de_ https://www.nngroup.com/articles/ten-usability-heuristics/

UOC. Avaluació Heurística. Mètodes. 2023 de Design Toolkit UOC. Recuperat de: http://design-toolkit.recursos.uoc.edu/es/evaluacion-heuristica/