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

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ón

A lo largo de este post podréis leer un análisis heurístico de la interfaz web de Podimo, para los que he utilizado las 10 heurísticas de Nielsen, dando ejemplos de buenas y malas prácticas para cada una de ellas.

Por si os causa curiosidad, el análisis ha sido hecho en Chrome desde un Macbook con versión de macOS Sonoma.

¿Qué es Podimo?

Podimo es una plataforma de streaming enfocada en la reproducción de podcasts y audiolibros con un modelo de suscripción mensual. Ofrece contenidos de audio de todo tipo, incluyendo una gran cantidad de podcasts originales y exclusivos.

Podimo tiene aplicaciones móviles para iOS y Android, y también una versión web de su reproductor, accesible a través de https://open.podimo.com/

¿Por qué Podimo?

He elegido Podimo en su versión web puesto que, aunque soy una gran fan de esta aplicación en la versión móvil, este análisis me ha servido para probar su interfaz web. Además, estoy suscrita a Podimo desde inicios del año pasado, cuando todavía no habían lanzado la versión web, y desde entonces he visto cómo han ido mejorando la usabilidad de su aplicación para iOS que inicialmente no era demasiado intuitiva y le faltaban algunos detalles por pulir.

Tengo que confesarlo: ¡Me causaba mucha curiosidad saber cómo funcionaba su versión web!

Metodología

El análisis y evaluación heurística de Podimo se ha realizado utilizando la lista de las 10 heurísticas de Nielsen y asignándole una puntuación en base a dos factores: El impacto y la frecuencia.

El impacto se mide, del 1 al 4, de la siguiente manera:

1: Poco importante.

2: Es un problema menor, pero habría que intentar resolverlo en algún momento.

3: Es grave y hay que darle una alta prioridad.

4: Es crítico. Debería solucionarse ya.

La frecuencia se mide como sigue:

1: Lo verá una vez y aprenderá.

2: Se equivocará unas cuantas veces al inicio, pero terminará acostumbrándose y aprendiendo.

3: La curva de aprendizaje es alta y la persona usuaria se seguirá topando con la mala práctica durante mucho tiempo.

4: La persona usuaria interactúa constantemente con esto, y sigue siendo poco intuitivo.

La gravedad se calcula sumando el valor del impacto y el de la frecuencia.

Además, aunque estoy acostumbrada a utilizar Podimo, como ya he comentado, era la primera vez que usaba la versión web, por lo cual decidí hacer la evaluación en dos fases. En la primera de ellas, interactué un poco con las diferentes funcionalidades de forma más superficial; y en una segunda fase intenté empatizar lo máximo posible con las personas usuarias del producto, accediendo a todos los menús, opciones y funcionalidades disponibles con mayor nivel de detalle.

Los 10 principios heurísticos de Nielsen

Ahora sí, sin más rodeamos, ¡empezamos!

Visibilidad del estado del sistema

Buena práctica: La persona usuaria puede ver en todo momento los controles del reproductor del podcast o audiolibro que está escuchando en ese momento, aunque se vaya moviendo por la web y explorando sus diferentes opciones. Este reproductor se mantiene siempre visible en la parte inferior, mostrando en todo momento el nombre del podcast y del episodio en reproducción en la parte inferior de la web.

Mala práctica: La página principal de la aplicación web de Podimo muestra las imágenes de portada de varios contenidos. En primer lugar algunas sugerencias y después las listas de más escuchados, recomendaciones, estrenos, etc. El principal problema de visibilidad que he detectado aquí es que, aunque Podimo ofrece la posibilidad de “seguir” podcasts, la lista de seguidos no se muestra en esta primera página, sino que es necesario ir al menú izquierdo y acceder a “Biblioteca”.

GRAVEDAD: 5/8
Frecuencia: 3/4
Impacto 2/4

Propuesta de solución:
Incluir una sección de «Mi lista» en la página principal de Podimo.

Adecuación entre el sistema y el mundo real

Buena práctica: Usa algunos iconos típicos como la casa para la Home, la lupa para la búsqueda, los botones del reproductor son los utilizados de forma estándar para play y pause, etc.

Mala práctica: Para acceder a la lista de podcasts seguidos o ver los de la lista de “sigue escuchando”, hay que acceder a través de la opción “Biblioteca”, que a pesar de que es visible en todo momento, esta etiqueta no deja claro el contenido al que se accede y aumenta la curva de aprendizaje.

GRAVEDAD: 3/8
Frecuencia: 2/4
Impacto 1/4

Propuesta de solución:
Cambiar la etiqueta de este botón por una que sea más intuitiva para las personas usuarias. Por ejemplo: «Mis podcasts» o «Mi lista».

Libertad y control por parte de la persona usuaria

Buena práctica: Las personas usuarias pueden adelantar o atrasar el contenido que se está reproduciendo moviendo con el ratón la barra de progreso o pulsando los botones de 15 segundos menos o 30 segundos más, que se encuentran al lado del botón Play-Pause.

Mala práctica: Para dejar de reproducir el contenido actual, la persona usuaria solo puede ponerlo en pausa o seleccionar otro contenido. Esto es así porque no existe ningún botón de “cerrar”.

GRAVEDAD: 7/8
Frecuencia: 3/4
Impacto 4/4

Propuesta de solución:
Incluir un botón para «cerrar» el podcast o audiolibro que está en reproducción a la derecha de la barra de progreso.

Consistencia y estándares

Buena práctica: Toda la aplicación web de Podimo se mantiene coherente en lo que respecta a colores y símbolos, además de ser consistente en cuanto a la forma de presentar todos sus contenidos (cuadrados, con esquinas redondeadas, del mismo tamaño, con los títulos en la parte inferior).

Mala práctica: Las opciones típicas de gestión de la cuenta, como pueden ser la suscripción, están presentes en el menú que aparece al pulsar el nombre de usuario, pero al pulsarlas, lleva a un enlace externo que, aunque también pertenece a Podimo (es su web corporativa), tiene un diseño diferente. En el vídeo incluido a continuación puede verse como, después de pulsar en «Gestionar suscripción» la persona usuaria debe esperar unos segundos hasta que le redirige a la web corporativa y esta carga.

GRAVEDAD: 4/8
Frecuencia: 1/4
Impacto 3/4

Propuesta de solución:
Este caso podría resolver de dos formas. En primer lugar, se podría unificar los diseños de la web corporativa con la web del producto. Otra opción sería incluir este tipo de ajustes como una ventana modal del propio producto.

Prevención de errores

Buena práctica: En líneas generales, Podimo no ayuda mucho a prevenir ni recuperarse de errores, aunque existen algunas funcionalidades que son fáciles de revertir por parte de los usuarios. Por ejemplo, si la persona usuaria pulsa sobre el símbolo “+” de un podcast en la vista del grid de la página principal, el botón se modificará pero volviendo a pulsarlo, volverá a su estado anterior.

Mala práctica: Existen varios ejemplos de malas prácticas con respecto a esta heurística en Podimo, pero ahora me gustaría comentar un caso que me parece especialmente molesto. Si la persona usuaria ya ha oído un episodio o, en su defecto, lo ha marcado como escuchado, aparecerá un símbolo de “visto” sobre lo que debería ser el botón Play y, si intenta pulsarlo para “marcarlo como no escuchado” lo que ocurrirá es que empezará a reproducirse ese episodio, no pudiendo volver de forma sencilla al que estuviese escuchando en ese momento.

En el siguiente vídeo puede verse que, aunque en el momento en el que la persona usuaria coloca el ratón sobre el botón este se cambia a un botón de Play, ocurre tan rápido que no es capaz de rectificar a tiempo, hace click y… ¡Este episodio se está volviendo a reproducir!

GRAVEDAD: 4/8
Frecuencia: 2/4
Impacto 2/4

Propuesta de solución:
Reservar el botón Play-Pause solo para reproducir o parar el audio, y incluir uno nuevo para indicar que el episodio ya ha sido escuchado, incluyendo la posibilidad de desmarcarlo al hacer click sobre él.

Reconocimiento antes que recuerdo

Buena práctica: En la sección “Sigue escuchando” puede verse el listado de todos los podcasts que la persona usuaria ha estado escuchando pero no ha llegado terminar. Además, debajo de la imagen, puede ver la cantidad de tiempo que ya ha escuchado para no tener que recordar si lo estaba terminado o le quedaba más de la mitad.

Mala práctica: No existe una forma intuitiva de acceder a otros podcasts de un mismo autor, de forma que obliga al usuario a tener que investigar fuera de la aplicación o intentar utilizar el formulario de búsqueda, lo que no funcionaría correctamente si el autor ha participado en algún episodio de otro podcast o su nombre coincide con el de otra persona.

En la siguiente imagen puede verse lo que ocurre al buscar «Judith Tiral» en el buscador, que además de devolver el listado de sus podcasts también aparecen los podcasts de otras personas con las que ha colaborado o incluso libros escritos por otras «Judith».

GRAVEDAD: 8/8
Frecuencia: 4/4
Impacto 4/4

Propuesta de solución:
Implementar búsquedas avanzas en el buscador de forma que se pueda filtrar por autor y otros parámetros.

Flexibilidad y eficiencia en el uso

Buena práctica: Debido a la naturaleza del uso de este tipo de aplicaciones, la web de Podimo ofrece la posibilidad de facilitar a la persona usuaria que se descargue la aplicación en su dispositivo móvil sin tener que ir a la tienda de aplicaciones a buscarla, sino que simplemente tiene que leer un código QR que le dirigirá directamente a la descarga.

Mala práctica: No se pueden crear listas de reproducción ni marcar los podcasts para oír añadir a la lista de reproducción, de manera que la persona usuaria debe esperar a que termine el actual para poder reproducir el siguiente y estar pendiente de este aspecto.

GRAVEDAD: 6/8
Frecuencia: 2/4
Impacto 4/4

Propuesta de solución:
Añadir una opción en los episodios y podcasts para poder incluirlos en una lista de «Más tarde», e incluir una sección dentro de la biblioteca o la página principal.

Diseño estético y minimalista

Buena práctica: En general, el diseño de la web es sencillo, consistente y minimalista. En la página principal aparece un grid de recomendaciones de podcasts y audiolibros, divididos en varias secciones, todas ellas consistentes, manteniendo una estética agradable para las personas usuarias y que facilita la navegación.

Mala práctica: Aunque en general el diseño es minimalista y consistente, la sección de la ficha de cada podcast está llena de demasiada información puesto que se muestran en la misma página el listado de todos los episodios, sin permitir filtrar por temporada, un resumen del podcast, y otros títulos recomendados. El principal problema de diseño reside en que, aunque las personas usuarias van a tener podcasts similares a los que acceder, si el actual tiene muchos episodios, tendrán que hacer scroll durante un buen rato hasta llegar a estas sugerencias, como puede verse en el siguiente vídeo.

GRAVEDAD: 4/8
Frecuencia: 2/4
Impacto 2/4

Propuesta de solución:
Podría añadirse un acordeón para poder ocultar el listado de capítulos en caso de que la persona usuaria quiera ver las sugerencias o mostrarlos todos si quiere acceder a alguno de los episodios.

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

Buena práctica: Si al intentar iniciar sesión, se introduce un usuario o una contraseña incorrectos, Podimo le indica al usuario un mensaje para que éste pueda corregir sus datos e introducir los correctos.

Mala práctica: Si en la búsqueda de podcasts la persona usuaria comete un error al escribir el título, no le ofrecerá resultados ni pistas que le indiquen que quizás ha cometido un error ortográfico.

GRAVEDAD: 7/8
Frecuencia: 4/4
Impacto 3/4

Propuesta de solución:
Incluir sugerencias de búsquedas en caso de que las palabras introducidas por la persona usuaria no tengan ninguna coincidencia en el sistema.

Ayuda y documentación

Buena práctica: Cuando la persona usuaria va a registrarse, se le presenta un formulario que le indica algunos requisitos de validación como que la contraseña tiene que tener, como mínimo, 6 caracteres, y que escribir un nombre es obligatorio.

Mala práctica: Aunque sí que existe una página con ayuda y documentación para las personas usuarias, no hay ningún acceso desde la web del reproductor de Podimo a la misma. Sino que habría que acceder a la web corporativa y buscar en “Centro de ayuda” en “Enlace útiles”.

GRAVEDAD: 6/8
Frecuencia: 2/4
Impacto 4/4

Propuesta de solución:
Añadir en el menú una sección de ayuda donde se pueda acceder a tutoriales, documentación y las FAQs.

Listado priorizado de gravedad

A continuación se incluye una lista priorizada de las problemáticas detectadas de forma que la número 1 sería la más prioritaria y la número la 6 la menos prioritaria.

Tened en cuenta que este listado solo incluye las más importantes, de forma que para definirlo se rechazaron las otras 4, aunque considero que sería muy buena idea abordarlas en el futuro.

¡Hasta la próxima!

Y, ahora sí, nos vemos en el siguiente post.

Bibliografía

Membrives, J. [Judith] (2019). Cuaderno de evaluación de la usabilidad [recurso de aprendizaje]. Recuperado del Campus de la Universitat Oberta de Catalunya (UOC), aula virtual. http://quadern-usabilitat.recursos.uoc.edu/es/

Evaluación heurística. Métodos. [recurso de aprendizaje]. Recuperado del Design Toolkit de la Universitat Oberta de Catalunya (UOC). http://design-toolkit.uoc.edu/es/evaluacion-heuristica/

Evaluación heurística. Guía. [recurso de aprendizaje]. Recuperado del Design Toolkit de la Universitat Oberta de Catalunya (UOC). http://design-toolkit.uoc.edu/es/guia/evaluacion-heuristica/

Giphy. Francia Raisa Reactio [GIF]. Giphy. https://giphy.com/gifs/grownish-freeform-fQim5NqXlRJW6i78KY

Giphy. Speed It Up C’Mon [GIF]. Giphy. https://giphy.com/gifs/debbyryan-debby-ryan-l2JhqyNGAxYNRx1ug

Giphy. See Ya Goodbye [GIF]. Giphy. https://giphy.com/gifs/filmeditor-bye-christmas-movies-3ohfFiBYZbfzjmTVvi

ANÁLISIS HEURÍSTICO INTERFAZ WEB DE AMAZON

INTRODUCCIÓN:

La interfaz que he analizado es la página web de Amazon. Lo que encuentran los usuarios al acceder, es una gran variedad de funciones y está diseñada para brindar a los usuarios una experiencia de compra fácil, segura y completa.

La gran empresa de Amazon, que a nivel mundial, es una de las páginas más buscadas por los usuarios,  actualiza y mejora continuamente su plataforma para adaptarse a las necesidades de los consumidores, donde tienen a su alcance una gran variedad de productos.

METODOLOGÍA: 

El proceso para llevar a cabo el análisis de la usabilidad de la página web de Amazon, se divide en las siguientes etapas:

1- Dentro de las funciones que analizamos de la interfaz, a través de realizar una investigación exhaustiva, extrayendo los buenos ejemplos y los malos ejemplos que puedan haber asociadas a cada uno de los principios de Nielsen con su justificación

2- A partir de la gravedad en relación a la experiencia del usuario, se realizará un listado priorizado según  gravedad en relación a la experiencia del usuario, incluyendo:

• Justificación
• Solución

ANÁLISIS: 

1- Visibilidad del Estado del Sistema:

·Buen ejemplo: Cuando se añade un producto al carrito de la compra, aparece para los usuarios una notificación visible confirmando esta acción.

Justificación: Proporciona retroalimentación inmediata y visible, cumpliendo en mantener a los usuarios informados sobre las acciones del sistema y las acciones que está llevando a cabo.

·Mal ejemplo: Después de realizar una compra, no hay confirmación visible al instante, que indique que la transacción se ha completado con éxito.

Justificación: La falta de retroalimentación puede dejar al usuario inseguro sobre si la acción se llevó a cabo satisfactoriamente o si el proceso finalizó por completo.

Notificación visible del producto añadido a la cesta.

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

·Buen ejemplo: Las descripciones de los productos están escritas en un lenguaje sencillo y fácil de entender.

Justificación: Cumple con un lenguaje que refleja el conocimiento y las expectativas del usuario.

·Mal ejemplo: Uso de términos técnicos complejos en las descripciones de productos que pueden resultar confusos para el usuario.

Justificación: En la descripción de un producto en alguna ocasión, se utilizan términos técnicos complejos que pueden resultar confusos para los usuarios no familiarizados con la industria. Por ejemplo, en la descripción de un producto se emplean términos técnicos sin explicación exacta.

Complejidad en la descripción de productos.

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

·Buen ejemplo: Se permite a los usuarios editar o eliminar productos en el carrito antes de confirmar la compra.

Justificación: Ofrece a los usuarios el control y la libertad para revisar y ajustar su selección antes de finalizar la transacción,

·Mal ejemplo: Después de hacer clic en «Confirmar Compra», no hay opción para retroceder o corregir errores.

Justificación: La falta de una «salida de emergencia» puede ser frustrante para los usuarios que desean realizar cambios, sin tener en cuenta su libertad y control.

                     Permite editar o eliminar productos en el carrito antes de confirmar la compra.

4- Consistencia y estándares: 

·Buen ejemplo: La barra de navegación en la parte superior de cada página de Amazon tiene un diseño y disposición consistentes. Los elementos, como el «Inicio», «Cuenta y listas», «Devoluciones y Pedidos», «Cesta» y «Buscar», se encuentran en posiciones predecibles en todas las páginas.

Justificación: Cumple con la consistencia y estándares, al mantener una estructura de navegación coherente en todas las páginas. Esto facilita que los usuarios se familiaricen rápidamente con la estructura del sitio y encuentren la información que buscan de manera sencilla y rápida.

·Mal ejemplo: Cambios inesperados en la disposición de los elementos de navegación en diferentes secciones del lugar.

Justificación: La falta de consistencia puede generar desconcierto y dificultar la navegación y visibilidad.

«Inicio», «Cuenta y listas», «Devoluciones y Pedidos», «Cesta» y «Buscar», visibles en todas las páginas.

5- Prevención de errores: 

·Buen ejemplo: Antes de finalizar una compra, se muestra a los usuarios un resumen detallado de los productos seleccionados, las cantidades y los costos. Además, se proporciona la opción de revisar y realizar cambios antes de confirmar la compra.

Justificación: Ofrece a los usuarios la oportunidad de revisar y corregir posibles errores antes de confirmar la compra. El resumen detallado ayuda a prevenir compras accidentales y permite a los usuarios tomar decisiones informadas, con total seguridad.

·Mal ejemplo: Al eliminar un artículo de una lista de deseos, no se muestra un mensaje que requiera la confirmación del usuario, como por ejemplo, la opción de preguntar: «¿Seguro que quieres eliminar este producto de la cesta?». Esto puede resultar frustrante en eliminaciones accidentales sin una oportunidad para rectificar el error.

Justificación: La falta de una verificación aumenta el riesgo de errores, ya que los usuarios podrían eliminar elementos de manera accidental sin ofrecer la oportunidad de revisión.

Falta de confirmación por parte del usuario al eliminar un producto de la cesta.

6- Reconocimiento antes que recuerdo: 

·Buen ejemplo: La página de inicio de Amazon muestra una sección de «Continúa desde donde lo dejaste»  basadas en la búsquedas del usuario.

Justificación: Este enfoque facilita a los usuarios el acceso a productos que han explorado previamente reconociendo sus preferencias y recordando sus acciones pasadas.

·Mal ejemplo: Si durante el proceso de compra, el usuario, añade varios productos al carrito pero no completa la transacción, en la siguiente visita a la página de inicio, no hay un recordatorio visible de los productos en el carrito o sugerencias relacionadas con los productos abandonados.

Justificación: Este mal ejemplo no utiliza el reconocimiento antes que recuerdo de manera efectiva. La ausencia de recordatorios sobre los productos en el carrito o sugerencias basadas en la actividad previa podría hacer que el usuario olvide los artículos pendientes, disminuyendo una experiencia más eficiente.

«Continúa desde donde lo dejaste».

7- Flexibilidad y eficiencia en el uso: 

·Buen ejemplo: Ofrecer la opción de  «Comprar ahora» para garantizar una experiencia de compra rápida.

Justificación: Proporciona métodos alternativos para realizar tareas de manera eficiente.

·Mal ejemplo: Amazon no ofrece opciones para que los usuarios personalicen la apariencia o la disposición de la interfaz según sus preferencias. No aparecen ajustes de tamaño de fuente u otras configuraciones que permitan adaptar la experiencia a las preferencias individuales del usuario según sus capacidades físicas, como por ejemplo para gente que es ‘miope’.

Justificación: La falta de opciones de personalización limita la flexibilidad y eficiencia para usuarios que podrían beneficiarse de ajustes visuales según sus necesidades o preferencias.

         Opción de  «Comprar ahora».

8- Diseño estético y minimalista: 

·Buen ejemplo: Ofrecer un diseño limpio y estético.

Justificación: Un diseño limpio mejora la legibilidad y la comprensión del contenido.

·Mal ejemplo: Uso excesivo de anuncios y pop-ups que distraen al usuario.

Justificación: Un diseño sobrecargado puede distraer al usuario y dificultar la focalización en tareas importantes, pudiendo llegar a la frustración y al abandono.

Anuncios y pop-ups.

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

·Buen ejemplo: Ofrecer sugerencias y correcciones automáticas al ingresar información incorrecta durante el proceso de compra.

Justificación: Facilita a los usuarios la corrección de errores sin tener que volver atrás y repetir el proceso de nuevo.

·Mal ejemplo: Mensajes de error sin indicaciones sobre cómo corregir el problema.

Justificación: La falta de orientación puede dejar a los usuarios confundidos sobre cómo abordar los errores, sin ningún tipo de ayuda.

Sugerencia y corrección automática al ingresar información incorrecta.

10- Ayuda y documentación: 

·Buen ejemplo: Incluir una sección completa de ayuda como preguntas frecuentes.

Justificación: Ofrece recursos para que los usuarios encuentren respuestas y soluciones a sus preguntas.

·Mal ejemplo: Falta de documentación o recursos de ayuda para los usuarios.

Justificación: La falta de recursos de ayuda puede generar frustración y aumentar la posibilidad de abandono del lugar.

Secciones de ayuda como preguntas frecuentes.

LISTADO DE GRAVEDAD: (De más a menos grave) 

1- Visibilidad del Estado del Sistema

Justificación: Es grave que los usuarios no puedan confirmar ellos mismos la transacción, pudiendo generar ansiedad y desconfianza, ya que no tienen la seguridad de que se haya completado con éxito. Después de realizar una compra, no hay confirmación visible al instante, que indique que la transacción se ha completado con éxito.

Solución: Implementar una página de confirmación clara y visible al instante después de realizar una compra, indicando el estado exitoso de la transacción y proporcionando detalles relevantes.

2- Libertad y control de la persona usuaria

Justificación: La falta de una opción para corregir errores, puede resultar frustrante en compras accidentales y generar frustración en los usuarios.

Solución: Incluir una opción que el mismo usuario pueda revisar y corregir la orden antes de confirmar definitivamente, proporcionando seguridad a los usuarios.

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

Justificación: Esto puede dejar a los usuarios confundidos y desorientados sobre cómo abordar los problemas.

Solución: Hay que tener en cuenta los diferentes perfiles que acceden en la interfaz, facilitándoles mensajes de error específicos y orientación sobre cómo corregir los problemas, ayudando a los usuarios a diagnosticar y resolver los errores.

4- Adecuación entre el sistema y el mundo real

Justificación: Puede causar confusión y disminuir la comprensión del usuario con la interfaz, especialmente para aquellos que por ejemplo, no están familiarizados con la tecnología.

Solución: Utilizar un lenguaje más sencillo y claro en las descripciones de los productos, evitando términos  innecesarios y proporcionando aclaraciones exactas cuando sea necesario.

5- Consistencia y estándares: 

Justificación: Puede causar confusión y dificultar la navegación fluida para los usuarios con la estructura de la interfaz.

Solución: Mantener la consistencia en la ubicación y estilo de los elementos de navegación en todas las páginas, asegurando una experiencia coherente.