Introducción: Spotify:

Spotify fue inventada en 2006 por Daniel Ek y  Martin Lorentzon. Supuso un gran cambio en la industria de la música. 

Esta aplicación tiene millones de oyentes diarios y he elegido esta aplicación porque la utilizo mucho en mi día a día, lo que me permite estar muy familiarizada con su manera de funcionar.

En esta evaluación voy a analizar su interfaz de usuario aplicando los 10 principios heurísticos de usabilidad de Jakob Nielsen que hemos estudiado en los apuntes. Haré esto para evaluar lo efectiva que es su experiencia de usuario y cómo se podría mejorar.

Metodología

La evaluación de usabilidad de la aplicación de Spotify se hará yendo uno por uno por los 10 principios heurísticos de Nielsen. Evaluaré cada  uno de estos principios, poniendo un  B si es generalmente positivo o una X si es negativo.  Tanto en las Buenas como en las Malas, escribiré el porqué es un ejemplo de cada principio.

Primero voy a mostrar las Malas, de mayor a menor gravedad y justificaré el porqué. Luego mostraré las Buenas, en las que no hay ejemplo claro de mala práctica. Pondré sugerencias para mejorar la experiencia de la aplicación en ambas listas.

Heurísticas Malas en orden de mayor a menor gravedad (X)

Heurística nº1: Diseño estético y minimalista

Evaluación: X

Aunque la app de Spotify está bien diseñada estéticamente hablando , la pantalla de inicio tiene demasiados elementos que pueden sobrecargar al usuario. 

Mejoras: Sería bueno poner menos elementos en la pantalla principal para crear un espacio más relajante, y esto es la más grave porque es una aplicación de ocio y debe tener una página inicial clara.

Heurística nº2: Prevención de errores

Evaluación: B

Spotify ayuda al usuario a evitar errores, como cuando se está añadiendo una canción a una lista de reproducción la app muestra un mensaje de confirmación. Además, al intentar añadir la misma canción varias veces, muestra un mensaje de advertencia de que ya se ha añadido antes y que sí está seguro de querer volverlo a añadir. Esto es la segunda más grave porque conectar a bluetooth es un aspecto clave de escuchar música.

Mejoras: Más mensajes de error podrían ser útiles en el caso de tener intentos fallidos al conectar a dispositivos de reproducción mediante el bluetooth. Hoy en día tenemos que pasar de varios dispositivos, como pueden ser los cascos, el bluetooth del coche, altavoces inalámbricos, etc. Esto hace que a veces la conexión sea frustrante sin saber entender por qué no se conecta.

Heurística nº3: Reconocimiento antes que recuerdo

Evaluación: X

Spotify hace un buen trabajo al ayudar a los usuarios a reconocer sus gustos sin tener que recordarlo todo. Pero podría añadir un aspecto como Shazam, o una búsqueda por la letra de una canción, ya que hay veces que el usuario no se acuerda del nombre de una canción y Spotify no ayuda en este aspecto, porque tiene que recordar bien el nombre para poder encontrarla. Esto es la tercera más grave porque buscar música es un aspecto clave de la aplicación.

Mejoras: Aunque el sistema de recomendaciones es bueno, la barra de búsqueda podría ofrecer más sugerencias automáticas. Sobre todo al buscar letras de canciones, porque hay veces que el usuario no recuerda el nombre. Esto haría que la búsqueda fuera aún más rápida y sería un pequeño toque para mejorar la experiencia de usuario. 

Heurística nº4: Ayudar a los usuarios a reconocer, diagnosticar y corregir los errores

Evaluación: X

Spotify tiene alertas en caso de errores, como fallos en la reproducción o problemas de conexión a internet.  

Mejoras: Aunque la app muestra errores, una mejor explicación, y añadir un código de error podría clarificarlos.

Heurística nº5: Control y libertad del usuario

Evaluación: X

Spotify da libertad al oyente permitiéndole ajustar su canción en cualquier momento. El usuario también puede crear y organizar listas de reproducción y cambiar las configuraciones de audio.

Mejoras: Aunque la app ofrece control, creo que Spotify podría mejorar esto aún más, y usar esto dentro del aspecto social. Estaría bien que los usuarios pudiesen personalizar sus páginas más, añadiendo imágenes y emojis. Spotify podría incorporar más control y libertad al aspecto social. Esto lo he puesto como 4rta más grave porque es una aplicación social, y es un aspecto clave, pero no le quita funcionalidad.

Heurísticas Buenas (B)

Heurística nº1: Flexibilidad y eficiencia de uso

Evaluación: X

Spotify permite que se utilice la aplicación mientras está cerrada. También permite que se escuche desde varios dispositivos diferentes, y conectar dispositivos bluetooth.

Mejoras: Podría ser interesante permitir que se conecten dos dispositivos bluetooth a la vez, para que dos personas con cascos diferentes puedan escuchar a la vez desde el mismo dispositivo. Esto aumentaría la flexibilidad y podría funcionar si a alguien se le ha acabado la batería del móvil o de los cascos. 

Heurística nº2: Visibilidad del estado del sistema

Evaluación: B

Spotify tiene una visibilidad del estado del sistema clara durante la navegación. Siempre muestra la canción que está sonando, el momento de la canción en la que está con una barra de reproducción, y el estado de la conexión a Internet (con un cartelito que dice si el usuario está online o en modo sin conexión). Además, las secciones de la app están marcadas claramente.

Mejoras: Aunque la app es bastante clara a veces los botones de «Reproducir» y «Pausa» son un poco pequeños en el móvil.  También añadiría que al cerrar la aplicación antiguamente en dispositivos Iphone se podía ver la portada de la pista en grande junto a los botones de reproducción, y ésto lo han cambiado a un formato pequeño que se agranda al clickear sobre ella. Creo que sería mejor dejarla siempre en grande.

Heurística nº3: Adecuación entre el sistema y el mundo real

Evaluación: B

Spotify usa iconos conocidos que hacen referencia al mundo real, como los iconos de «play», «pausa» que se encuentran en antiguos radiocasetes y mp3, el icono de «corazón» (para marcar favoritos). También, las canciones están en forma de listas, lo cual es fácil de entender para los usuarios.

Mejoras: No veo grandes errores en este aspecto, pero yo añadiría un aspecto en la aplicación que cuando la canción sonara, se viera el disco dando vueltas, como si se tratase de un vinilo o un CD. Y hay una aplicación llamada SpinThatRecord que hace justamente eso.

Heurística nº4: Consistencia y estándares

Evaluación: B

La app tiene cohesión a la hora de su estilo y los iconos son uniformes. Los colores, la tipografía y el formato son consistentes a lo largo de toda la aplicación. La barra de navegación inferior y las opciones de menú también son estándares.

Mejoras: El «modo oscuro» de Spotify a veces hace que los colores en las listas de canciones no son completamente legibles, sobre todo en pantallas de móviles de baja resolución y para personas con discapacidades visuales. Se podría añadir una opción de contraste, pero por lo general es legible.

Heurística nº5: Ayuda y documentación

Evaluación: B

La app de Spotify incluye un apartado de «Soporte» que se puede encontrar en la configuración, con información relevante para solucionar problemas.

Mejoras: Aunque el servicio de ayuda está completo y tiene un chat en vivo, se podría añadir soporte por teléfono. 

Valoración Final

Nota final: 8/10

Spotify es una app con buena experiencia de usuario sólida y consistente en cuanto a usabilidad. Sin embargo, algunas áreas, como la flexibilidad, el aspecto social, y los mensajes de error, podrían cambiarse para mejorar la experiencia del usuario. Estas propuestas de mejora están orientadas a hacer la interfaz más limpia, flexible y personalizada para mejorar aún más la experiencia del usuario.

Bibliografía

• Membrives, J. (2019). «Cuaderno de Evaluación de la Usabilidad». [artículo en línea]. https://quadern-usabilitat.recursos.uoc.edu/es/
• Nielsen, J. (1995). «10 Heuristics for User Interface Design» [artículo en línea]. Nielsen Norman Group. http://www.useit.com/papers/heuristic/heuristic_list.html.

Amazon, la tienda del Mundo

Decir Amazon es hablar de ventas, de billones de ventas. La empresa fundada por Jeff Bezos es simplemente la mayor empresa de venta online en el Mundo. Su distribución y cantidad de productos hacen que esta empresa despache 1,6 millones de  paquetes al día. Su red de minitiendas embebidas en una misma plataforma, han creado un caso de estudio propio, los marketplaces. Analizaremos su app para evaluar que tan buena experiencia ofrece al usuario ya que es una de las aplicaciones más usadas a diario en todo el Mundo. Al ser una app de gran consumo, creemos que parte de unos principios de usabilidad muy maduros y asentados por el gran público, lo averiguaremos.

Metodología: Para llevar a cabo la evaluación de usabilidad de esta app, se ha usado la evaluación heurística como metodología. Es una técnica en el que las personas que evalúan (individualmente en este caso), tiene que examinan la calidad de una interfaz en base a unos principios. En esta ocasión, usaremos los 10 Principios Heurísticos que Jakob Nielsen los cuales estableció en su libro «Usability Inspection Methods». Pondremos ticks verdes o rojos en cada una de ellas para poder obtener una calificación final.

Analicemos punto por punto:

1. Visibilidad del estado del sistema

Durante la navegación por los diferentes apartados de la app, se muestra donde te encuentras en cada momento, marcando con un color diferente el icono en el bottom nav. También se acentúa con una barra del mismo color por encima del icono.

En el propio apartado, aparece en la parte superior a modo de título, el apartado en el que te encuentras.

De manera muy notoria, aparece justo encima del título una flecha mirando a la izquierda para tener un fácil regreso a la pantalla anterior. En este aspecto, la visibilidad del estado del sistema se mantiene en toda la app de Amazon, haciendo uso de otros elementos como select tabs o barras de submenú con items marcados (al igual que veíamos en el bottom nav).

En el dashboard de inicio, Amazon lo destina a promocionar aquello que más le interesa con banners y promociones para incrementar sus ventas, lógicamente. Pero el usuario agradecería encontrar en este apartado inicial, todas las opciones en vez de tener que dirigirse al burguer menu.

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

En la aplicación se usan imágenes fieles a la realidad como es el caso de las tarjetas de crédito o el icono «carro de compra». Son aspectos de agradecer ya que ayuda a que el usuario «lea con los ojos» de manera inmediata.

Excepto los ejemplos anteriores, no se aplica esta heurística en el resto de la app.

3. Control y  libertad del usuario

Amazon mantiene este principio en su app como ya es frecuente en el mundo de compra online. El usuario es preguntado antes de cometer acciones importantes como el de comprar o el de eliminar algo. También es cierto, que Amazon intenta que no haya un numero excesivos de pasos antes de realizar la compra para que no se «enfríe el dedo» y evitar que el usuario se eche para atrás en el último momento. De hecho, ha creado el botón «compra ya» o «comprar ahora» para que sea más inmediato y no tengas que pasar por el apartado «cesta de compra». Pero en otros apartados la aplicación si te ayuda e informa de los pasos que vas a acometer para un mayor control y libertad en la toma de decisiones.

El «tono» es agresivo: «comprar ya» o «comprar ahora». Debería ser algo más amable «¿deseas adquirirlo?» «¿lo quieres ahora?»

4. Consistencia y estándares

Amazon mantiene una armonía y coherencia en su app como cabía esperar. Aplica una paleta de color bien definida con 10 colores que respeta en todo momento al igual que otros detalles como las esquinas redondeadas. Ha conseguido hacer algo muy complicado y es crear un estilo propio para un botón. Es el caso de su característico botón de comprar amarillo. Un botón que se sale de lo establecido ya que es diferente al resto de tiendas online que suele ser verde.

Se ven iconos con diferentes grosores o estilos y demasiadas jerarquías tipográficas.

5. Prevención de errores

La app de Amazon nos recuerda a modo de tooltips o globos de información, pequeños consejos que hacen que nuestra experiencia en la app sea más placentera y óptima. Es el caso del mensaje que aparece cuando accedes al área de productos desde el menú hamburguesa y se te indica que puedes acceder desde ese icono directamente. También nos recuerda en la recogida de datos cuando te has olvidado de algún campo; te lo marca en rojo para que lo termines de completar.

Hay una falta de unificación en los estilos (globos y textos de tooltips)… aparece cada uno diferente en cuanto a tamaño, tipografía o color.

Heurística nº6

6. Reconocimiento antes que recuerdo

Amazon como la gran mayoría de apps y web, hacen una búsqueda predictiva desde su barra de búsqueda. Facilita muchísimo las cosas ya que puede ser un producto que buscas de manera recurrente, o afinado a tus gustos y preferencias.

También te recuerda (aunque esto ya es como estrategia de venta) que tienes cosas pendientes por tramitar. Así como animarte que compres algún artículo de nuevo.

Amazon ideó una estrategia mezclando lo analógico con lo digital, la creación de unos pulsadores de compras recurrentes para pulsar y ordenar la compra directamente sin tener que entrar a la web o app. Ya retirados del mercado, los dash buttons fue una idea que apostaba por facilitar la vida al usuario.

Heurística nº7

7. Flexibilidad y eficiencia de uso

  En la función de  buscar un producto por medio de una foto, la app explica al usuario con ayuda de iconos y mensajes de ayuda. En la barra de buscador con un icono cuadrado de equinas redondeadas muy visible y que al pulsar te indica con mensajes como debes proceder.

Otro muy buen ejemplo es el probador virtual de algunos productos. La manera de usarlo es muy intuitiva, unos iconos y leyendas te guían para que no haya dudas de funcionamiento.

Al igual que muchas apps, Amazon «esconde» funciones ocultas que solo los usuarios más experimentados consiguen acceder con atajo. Son los casos de listados de productos sin comprar que puedes eliminar de la lista desplazando con el dedo a izquierda o derecha. Si bien puedes acceder a estas funciones desde los menús no estaría de mas facilitar un acceso o ayudar a quien no los conozca.

Heurística nº8

8. Diseño estético y minimalista

A pesar de que aplica una coherencia de estilos y un orden en cuanto al diseño (cuenta con diversos brands guides tanto como marca como para su uso en digital) es una app donde está la información demasiado apretada. No plantea una visión minimalista. De hecho plantea un layout con demasiadas columnas que reduce mucho el tamaño de las imágenes y el texto. Por comparativa he puesto la interfaz de otra app de gran consumo como la de wallapop en la que se limita el contenido a 2 columnas y eso produce más espacio y vistosidad en la información.

  La estética se ha quedado anticuada. Priman otras tendencias en tipografías, iconos o layout.

Heurística nº9

9. Ayudar a los usuarios a reconocer y solucionar errores

Todo lo que sea facilitar el servicio de compra es primordial para una plataforma tan importante como Amazon. Como en la mayoría de las aplicaciones móviles / web, te recuerda si has errado en colocar un dato con un recuadro rojo y un texto que te explica por qué es erróneo.

En otros procesos como en el de mostrar el producto, también te acompaña el texto correspondiente de ayuda por si has realizado una acción errónea como la de seleccionar un talla no disponible.

No veo una armonía de estilos en los mensajes de ayuda. El aglutinar esos avisos en un solo estilo, ayudaría a identificar rápidamente el error cometido y encontrar las instrucciones para solucionarlo.

Heurística nº10

10. Ayuda y documentación

El servicio que ofrece de ayuda al usuario es de primer nivel. Algo que la gente valora y sin duda se convierte en un argumento de venta. Vemos en la app un apartado propio para ello, en que secuencian tu duda por pasos y te la relaciona con un tema o producto. También vemos un despliegue de categorías FAQs que te acotan mucho la búsqueda y sin renunciar a una todopoderosa barra de búsqueda.  Es un apartado que se encuentra fácil desde la burguer-menu.

El tono empleado es muy bueno, se dirige al usuario con una aptitud de ayudar y de resolver todas sus dudas. Contrasta mucho con la actitud de venta agresiva que tienen en la zona de compra. Recordemos el botón de «Comprar ya».

A pesar de que está muy completa la documentación de ayuda, se echa en falta un acceso rápido a un chat de dudas.  Los chats con un agente reduce muchísimo tiempo el búsqueda de información. Una empresa como Amazon, debería tener un buen call center 24/7.

 Valoración final de las heurísticas

Vamos a señalar únicamente aquellas que tienen más errores que aciertos entendiéndolas como heurística fallida. Al ser 10 principios, calificaremos del 0 al 10 como nota final.

1. Visibilidad del estado del sistema V
2. Adecuación entre el sistema y el mundo real V
3. Control y libertad del usuario V
4. Consistencia y estándares V
5. Prevención de errores V
6. Reconocimiento antes que recordar V
7. Flexibilidad y eficiencia de uso V
8. Diseño estético y minimalista X
9. Ayudar a los usuarios a reconocer, diagnosticar y corregir los errores V
10. Ayuda y documentación V

Nota: 9/10

Malos Hallazgos según la heurística y propuestas de mejora

Ordenamos los errores más graves extraídos de cada heurística.

♦♦♦ Nº 8. Diseño estético y minimalista

La solución pasaría por agigantar más los títulos (más contrastes de tamaño en jerarquías tipográficas), dejar más espacios, oxigenar la información, suprimir elementos prescindibles (rayas, separadores, pastillas)… etc.

♦♦ Nº 7. Flexibilidad y eficiencia de uso

Propongo una pequeña animación (llamada de atención) por medio de un icono que muestre la interacción (en este caso deslizar con el dedo en horizontal). También hay app en las que se descubre un poco la interacción; para de esta manera, visualizar lo oculto.

♦♦ Nº 4. Consistencia y estándares

La recomendación es que se unificaran los estilos y aplicase unos mismos estándares en los iconos. Mismo grosor de línea; trazo abierto o trazo cerrado;  aplicar colores de fondo o dejarlo en linea monocromo… etc.

♦ Nº 2. Adecuación entre el sistema y el mundo real

Propongo como mejora añadir más elementos del mundo real como puede ser unas estanterías de supermercado cuando buscas artículos o un carro con los productos dentro cuando revisas la cesta de compra. Hace poco me encontré con un ejemplo muy bueno del teatro real en el que el botón de «comprar entrada» tenía la estética de entrada troquelada impresa (ticket vintage).

Bibliografía

• Membrives, J. (2019). «Cuaderno de Evaluación de la Usabilidad». [artículo en línea]. https://quadern-usabilitat.recursos.uoc.edu/es/
• Nielsen, J. (1995). «10 Heuristics for User Interface Design» [artículo en línea]. Nielsen Norman Group. <http://www.useit.com/papers/heuristic/heuristic_list.html>.