El modo oscuro es más una tendencia reciente en el diseño de interfaces, que permite a los usuarios elegir o alternar entre interfaces claras y oscuras en varias aplicaciones, pero Spotify ha mantenido una interfaz oscura desde sus inicios. Esto no solo se diferencia de Apple Music, sino que los estudios han demostrado que los fondos más oscuros con texto más claro son más agradables a la vista del usuario. Aunque ni siquiera sea perceptible para el usuario, este nivel de confort visual contribuye a incentivar la navegación continua en la aplicación. Además, esto hace que las imágenes, los botones y el contenido destacado se destaquen, lo que facilita el seguimiento del flujo de usuarios previsto.
Tenga en cuenta que esto no es un respaldo abierto para que todas las aplicaciones adopten una interfaz oscura. Para sitios web como Medium, donde la tarea principal es la lectura prolongada, el texto oscuro sobre un fondo blanco es mejor, mientras que la interfaz oscura de Netflix funciona perfectamente en los entornos con poca luz en los que a menudo se ve. Además, la adopción por parte de los usuarios de los modos oscuros parece ser completamente subjetiva. En los casos en los que no esté claro cuál usar, vaya a lo seguro y déle la opción al usuario.
Para cualquier aplicación que se verá en una variedad de dispositivos, es clave optimizar la experiencia para ese contexto específico. Esto es particularmente difícil para Spotify, ya que quieren que los usuarios puedan escuchar prácticamente en cualquier entorno con cualquier dispositivo.
a. Escritorio
La optimización de dispositivos suele referirse a dispositivos móviles, pero las vistas de escritorio aún deben considerar cómo presentar mejor sus elementos a los usuarios. Más espacio en pantalla significa más oportunidades de abrumar a los usuarios con contenido abarrotado y una sobreabundancia de funciones. Afortunadamente, Spotify organiza cuidadosamente su gran cantidad de contenido en cuadrículas visualmente consistentes y listas bien espaciadas. Los divisores de colores suaves ayudan a separar diferentes módulos de contenido y los encabezados saludables ayudan a promover una buena jerarquía visual para el usuario.
b. Móvil
Si ha hecho la transición del escritorio al dispositivo móvil, notará de inmediato que la experiencia y la interfaz son marcadamente diferentes. Explorar se ha incorporado a la Búsqueda como elemento de navegación principal, colapsando las subpestañas en una cuadrícula para facilitar la navegación. Su biblioteca tiene su propia página, que clasifica claramente el contenido en 2 subpestañas principales con 3 filtros. La funcionalidad del hogar es prácticamente la misma, pero incorpora nuevos diseños de tarjetas horizontales para utilizar mejor el espacio de la pantalla.
Otros cambios simples incluyen tomar subpestañas y convertirlas en tarjetas de alto contraste y mover listas de reproducción de un nivel superior a una subpestaña en Su biblioteca. Estos pueden parecer pequeños cambios, pero en realidad cambiaron drásticamente los mapas del sitio de la aplicación que requieren que los diseñadores hagan preguntas fundamentales sobre el diseño para lograr una experiencia intuitiva y agradable.
b. Vista del coche
En otra innovación, Spotify ha creado un modo especial de visualización móvil que se enciende automáticamente mientras se conduce. Esta interfaz simplificada elimina todas las comodidades, como las imágenes de fondo, y amplía las funciones principales, como reproducir/pausar y siguiente/anterior. Esto aumenta la claridad para quienes miran la pantalla durante un breve segundo mientras están detrás del volante.
Comunidad de Spotify
Con la ayuda de la interfaz oscura, los botones de Spotify se destacan increíblemente bien y facilitan al usuario completar las tareas principales. Estos botones de color verde brillante combinan bien con los botones secundarios delineados o “fantasmas” que los hacen fáciles de encontrar sin llamar demasiado la atención.
Por supuesto, ser brillantes no es lo único que los botones deben hacer para ser efectivos. Como lo demostró Tess Gadd en su publicación detallada “Hoja de referencia de la interfaz de usuario: botones” (que recomiendo encarecidamente que lea), hay una variedad de consideraciones al diseñar el botón correcto.
a) Estados de desplazamiento y microinteracciones
Al pasar el cursor, el botón de Spotify “aparece”, agrandándose y brillando, para indicar que este botón es interactivo. Además, cuando se hace clic, aparece un segundo “pop” que indica que se ha recibido la acción.
Esta es una táctica bastante común, pero un punto de paridad importante, ya que los usuarios necesitan saber que se han recibido sus comentarios. ¿Qué pasa si hacen clic en reproducir y no escuchan nada? Al utilizar estados de desplazamiento y microinteracciones, los usuarios pueden saber que no fue un error de clic de su parte y pueden descubrir rápidamente que solo necesitaban subir el volumen.
b) Estados de texto y colores
Los botones no solo se destacan y tienen excelentes microinteracciones, sino que también comunican al usuario en qué estado se encuentran y qué efecto real tendrá al hacer clic. Al hacer esto, se reduce la frustración al disminuir los clics erróneos y mantener el control del usuario.
Como lo demuestra el botón Seguir, cuando se hace clic en él, el texto ahora se vuelve verde y dice “Seguido”. Cuando vuelve a pasar el cursor, aparece y se lee “Dejar de seguir”, lo que indica de manera importante al usuario que al hacer clic en este botón dejará de seguir a este artista. Haga clic nuevamente y vuelva a su estado original con texto blanco que dice “Seguir”.
Tanto a) como b) son simples en teoría, pero al aplicarlos de manera consistente se crea una sensación de control para el usuario. En cualquier momento, el usuario sabe exactamente qué está bajo su control y nunca se sorprende del resultado.
c) Bordes curvos
De manera similar a una interfaz oscura, los botones completamente redondeados o botones tipo “píldora” no son objetivamente mejores en todos los casos, pero tienen propiedades que pueden ser más llamativas y distintivas para el usuario. El truco consiste en diseñar el botón adecuado para el contexto adecuado. En un mar de cuadrículas y tablas de índice que enumeran canciones y álbumes, los botones completamente redondeados llaman la atención e invitan a los usuarios a hacer clic. Sin embargo, con las esquinas redondeadas, el botón necesita ser más grande, pero Spotify puede permitirse el lujo de hacerlo porque ya conserva una gran cantidad de espacios en blanco en el resto de la interfaz.
Al utilizar el tamaño, el color, la posición y la alineación de varios elementos, Spotify promueve una buena jerarquía visual que comunica a qué los usuarios deben prestar atención primero. Al hacer esto, los usuarios pueden asimilar y orientarse rápidamente dentro de la experiencia de la aplicación.
Por ejemplo, cuando busco la banda Pavement, Spotify me ofrece una página con mucho contenido, pero esta página está diseñada de tal manera que puedo navegar rápidamente hasta qué aspecto de este artista quiero explorar.
Podría haberme dado solo una lista de canciones de la banda o simplemente una lista de artistas que tienen la palabra “pavimento”. Ninguna de esas opciones me da mucha flexibilidad en mis próximas acciones. En cambio, Spotify responde a mi resultado de búsqueda colocando la imagen de la banda en grande y en el encabezado para que pueda saber que estoy en el lugar correcto. Debajo de esto, en una sección más pequeña, alineada a la izquierda, Spotify muestra canciones y álbumes populares en los que puedo hacer clic si así lo deseo. Al hacer esto, ya encontré la mayor parte del contenido que quería de este resultado de búsqueda y ni siquiera tuve que hacer clic en otra página.
Tenga en cuenta que en el caso de que la banda Pavement no sea lo que quería, hay una sección de otros artistas en el lado derecho para que pueda explorar. Tener en cuenta este tipo de escenarios es clave en cualquier experiencia de usuario.
Después de usar Spotify por un tiempo, comienzas a captar las pequeñas cosas que hace para comunicarse con sus usuarios. Al desarrollar este lenguaje de diseño consistente, los usuarios comienzan a navegar por la aplicación de manera intuitiva, a menudo tomando decisiones basadas en información subconsciente.
Por ejemplo, Spotify siempre coloca a los artistas en marcos circulares, mientras que los álbumes y las canciones se muestran en marcos cuadrados. Eso significa que cuando busco algo puedo distinguir fácilmente entre hacer clic en algo para ver más o hacer clic en algo para reproducir una canción o un álbum.
Además, en el escritorio, Spotify coloca el contexto común de forma ordenada en el lado izquierdo y reserva el lado derecho de la pantalla para contenido auxiliar o sugerido. En el caso de Fiona Apple, las canciones y álbumes están todos en el lado izquierdo y los artistas sugeridos en el derecho. En las páginas de resultados de búsqueda, los resultados de búsqueda directa aparecen a la izquierda (artista, canciones, álbumes) y el contexto auxiliar está a la derecha (listas de reproducción destacadas y otros artistas).
Esto puede ser más una crítica a Apple Music, pero el proceso de navegar a través de la interfaz de Spotify parece estar a años luz de Apple Music. Con su arquitectura de aplicación aparentemente liviana, Spotify rara vez parece tener pantallas de carga en blanco o cualquier tipo de problema al buscar artistas o hacer clic en el contenido. Por otro lado, Apple Music está plagado de pantallas de carga congeladas.
Esto se amplifica aún más cuando se desconecta de Internet durante un vuelo o mientras se encuentra en una zona muerta durante un viaje por carretera. En estos momentos es fundamental que los usuarios puedan acceder a la música descargada que pagan con su suscripción mensual. Puedo recordar numerosas ocasiones en las que abordé un vuelo y abrí Apple Music y lo encontré paralizado al buscar una señal celular y no podía simplemente navegar por la música local de mi dispositivo. Si hubiera tenido servicio celular en ese momento, me habría cambiado a Spotify inmediatamente.
Spotify hace bien muchas cosas simples con su UX/UI y muchas de ellas pueden parecer obvias. Sin embargo, la jerarquía visual, el buen contraste y los botones de calidad no son una receta que puedas simplemente copiar y pegar en cualquier entorno. El desafío para los diseñadores es contextualizar estos principios de una manera que parezca intuitiva y natural para el usuario.