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.