UX e Spotify: entenda como a UX ajudou no sucesso do streaming

Hoje o nosso tema é UX e Spotify e vamos entender um pouco mais sobre como a plataforma prioriza a experiência do usuário.

Eu amo o Spotify. Não posso dizer se é o futuro ou não, mas está funcionando agora”.

Lars Ulrich, em entrevista para a revista NME em 2013.

Veja, pode soar contraditório iniciar um artigo sobre streamings de música com a opinião do maior inimigo dos downloads gratuitos na primeira década do novo milênio. 

Não bastasse o contestado St. Anger, álbum do Metallica lançado em 2003, Lars Ulrich, baterista da banda, comprou uma briga com o Napster, aplicativo para download gratuito de músicas, reivindicando os direitos autorais das faixas do Metallica ilegalmente baixadas no software e comprando uma briga com todos os fãs de música. 

A verdade é que na década de 2000, o arquivo em formato mp3 era uma novidade e os primeiros dispositivos de áudio capazes de tocar a mídia já estavam sendo comercializados. O fato da banda que lotava arenas e vendia camisetas em qualquer lugar do mundo ter processado um software livre, não foi bem visto pela mídia e principalmente pelos fãs. Mas apesar de soar ganancioso, Lars Ulrich não estava errado. Se os músicos ganham porcentagens da venda de CDs e vinis, por que seria diferente no digital? 

Lars Ulrich pode ter feito uma série de escolhas erradas para a sua banda, mas o Metallica enche estádios até hoje e por mais ganancioso que ele tenha soado no caso do Napster, ele tinha razão. Sean Parker, cofundador do Napster, hoje é um dos melhores amigos de Lars. Curiosamente, é um investidor do Spotify, o novo xodó do baterista dinamarquês e o serviço de streaming de música mais utilizado no mundo.

UX e Spotify  

Antes de entrarmos nos detalhes de como o Spotify revolucionou a forma de ouvirmos música através de estratégias de UX, é importante entender que a música tem outro significado atualmente. Sem gravadoras, a maioria dos artistas tem mais autonomia e divulga faixas através de singles. Os álbuns completos não são a primeira opção de jovens artistas, que faturam mais com clipes e produções de suas músicas para o YouTube. 

A mídia física virou item de colecionador, ou seja, aquela pessoa que curte ouvir um disco na ordem, como um ritual. Totalmente o oposto das dinâmicas e temáticas playlists do Spotify e seus concorrentes: Deezer, Apple Music, Amazon Music, Google Play e YouTube Music, além dos alternativos Bandcamp que proporcionam uma estrutura para artistas independentes venderem suas músicas e merch tanto no formato físico quanto digital, e Soundcloud, também voltado à música autoral revelando grandes beatmakers e outros artistas instrumentais. 

A rádio e a MTV não possuem o mesmo impacto de antigamente e as músicas viralizam através de algoritmos em redes sociais, não apenas no YouTube como no Spotify. As trilhas sonoras de filmes e séries distribuídos nos streamings, e também as oriundas dos games, apresentam artistas à novas audiências. Além disso, é importante lembrar que o Spotify vem sendo desde o início um agregador de podcasts, que no Brasil, potencializaram seu alcance durante a pandemia devido a versão em vídeo dos programas, exibida comumente no YouTube ou Twitch.tv.

Spotify: um case de sucesso graças às estratégias de UX e UI Design

Quando o Spotify foi lançado em 2008, o streaming em geral era mais uma novidade do que a atual batalha por clientes. Avançando para os dias de hoje e o Spotify alcançou 299 milhões de usuários e 138 milhões de usuários pagantes. Comparado aos 68 milhões de inscritos no Apple Music, o Spotify com certeza está vencendo no momento.

Existem muitos fatores em jogo: a Apple não disponibiliza uma versão gratuita, mas boa parte do sucesso do Spotify está em sua navegabilidade simples e na sua interface harmoniosa, resultados de excelentes aplicações de UX e UI Design.

Apresentando basicamente a mesma seleção musical e serviços auxiliares similares, como recomendações musicais, playlists, rádios e curadorias, a princípio a experiência do usuário de Apple Music e Spotify não deveria ser diferente. No entanto, de uma perspectiva de UX e UI Design, o Spotify implementa uma série de estratégias simples com alta efetividade em seu layout, que iremos analisar a seguir para entender por que 299 milhões de usuários escolheram esta plataforma para ouvir música.

O dark mode é uma tendência recente em design de interface, permitindo aos usuários escolherem entre layouts claros e noturnos em diversas plataformas. O Spotify manteve a sua interface dark desde o início. Isso não apenas diferencia o Spotify da Apple Music, mas estudos têm mostrado que backgrounds escuros com textos claros são mais agradáveis aos olhos do usuário. Este nível de conforto visual é um fator contribuinte para incentivar o usuário a continuar navegando na aplicação. Além disso, destaca imagens, botões e outros conteúdos disponíveis, facilitando o acompanhamento do fluxo de navegação do usuário.

É importante esclarecer que não é qualquer aplicação que pode adotar uma interface noturna. Sites como o Medium, com foco em leituras prolongadas, o texto em preto no fundo branco é perfeito, enquanto a interface noturna do Netflix já cria um clima de cinema logo na entrada. Por via das dúvidas, sempre dê a opção de escolha ao usuário.

Otimização de dispositivos

A otimização da experiência para cada contexto é essencial no desenvolvimento de aplicativos que vão ser utilizados em diversos dispositivos. E o objetivo do Spotify é possibilitar aos usuários para que ouçam onde quiserem.

2.1 Layout: Desktop

A otimização de dispositivo normalmente se refere à versão mobile, mas as visualizações através da versão Desktop ainda precisam ser consideradas para oferecer uma boa experiência aos usuários. Mais espaço em tela significa mais oportunidade de apresentar mais conteúdos e funções aos usuários. Felizmente, o Spotify organiza perfeitamente seu numeroso conteúdo em grades visualmente consistentes e listas bem espaçadas. Divisores com cores suaves ajudam a separar diferentes módulos de conteúdo e os cabeçalhos ​proporcionam uma excelente hierarquia visual ao usuário.

2.2 Mobile

Quando se faz a transição do Spotify no Desktop para o celular, a primeira coisa que você nota é que a experiência e o layout são diferentes. Os botões Início, Procurar e Biblioteca ficam na parte debaixo da tela. A biblioteca tem sua própria página. A funcionalidade da página Início é basicamente a mesma, mas incorpora novos designs horizontais para otimizar o uso das dimensões da tela.

Outras mudanças simples incluem transformar as subguias em imagens de alto contraste e mover listas de reprodução de um nível superior para uma subguia na seção Sua Biblioteca. Essas mudanças podem parecer pequenas, mas na verdade mudaram consideravelmente os mapas do site do aplicativo, proporcionando uma experiência intuitiva e agradável.

2.3 Layout: Car View

Esta inovação do Spotify oferece uma visualização especial para mobile que automaticamente liga enquanto você dirige. A interface simplificada reduz o número de elementos e sintetiza nas funções primárias, como play/pause, next/previous. O objetivo é tornar a navegação do usuário o mais breve e simples possível, evitando possíveis acidentes e distrações, uma vez que o seu foco é conduzir o veículo.

Design de botões

Destacados pelo layout noturno, os botões do Spotify tornam fácil para o usuário completar tarefas primárias. Estes botões verdes brilhantes combinam bem com os botões secundários fantasmas que são fáceis de serem encontrados sem tirar a atenção dos principais. Mas claro que ser brilhante não é a única coisa que fazem de um botão efetivo.

Vamos conferir as outras características a seguir.

3.1 Hover States e micro-interações

O hover state acontece quando o usuário coloca o cursor sobre um elemento interativo. Quando o hover state acontece, o botão do Spotify pula na tela, aumentando e brilhando, para indicar que o botão é interativo. Adicionalmente, quando o clique dá um segundo pulo na tela, o hover indica que a ação foi bem recebida. 

Esta é uma tática comum mas um ponto importante de igualdade que os usuários precisam saber que sua ação foi recebida. E se eles clicam no play e não ouvem nada? Ao utilizar hover states e micro-interações usuários conseguem saber que não foi um clique equivocado da sua parte e eles podem facilmente encontrar o que precisam para aumentar o volume, por exemplo.

3.2 Textos e Cores

Os botões não só possibilitam grandes interações com as ações dos usuários, mas comunicam ao usuário em qual estado eles estão e o quê o clique nele vai gerar. Isso reduz a frustração por cliques equivocados e mantém o usuário no controle.

Pegue o botão de “Seguir”, por exemplo. Quando clicado, o texto fica verde e mostra o novo estado “Seguindo”. Quando clicado novamente, ele salta e mostra “Seguir” novamente, indicando que o usuário parou de seguir o artista com o clique. Clique mais uma vez e retorna ao estado original com o texto branco indicando “Seguir”.

Os dois pontos mencionados são simples em teoria, mas ao ser aplicado com consistência cria um senso de controle do usuário. A qualquer momento da navegação, o usuário sabe exatamente o que ele controla e nunca será surpreendido com os resultados.

3.3 Botões e formas arredondadas

Assim como a interface dark, botões arredondados ou botões em formato de pílula não são objetivamente melhores em todas plataformas mas possuem propriedades que são mais chamativas para o usuário. O segredo é desenvolver o design do botão certo para o contexto certo. 

Em um mar de malhas e índices constituindo uma estrutura enquanto listam sons e álbuns, botões arredondados convidam o usuário a clicar. Com cantos arredondados, no entanto, o botão precisa ser maior, mas o Spotify permite porque ele já apresenta um bom espaço em branco em relação ao restante da interface.

UX e Spotify: Hierarquia visual

O Spotify promove uma boa hierarquia visual que comunica o que merece a atenção dos usuários, combinando tamanho, cores, posicionamento e alinhamentos de vários elementos. Os usuários se orientam ao acessar pela primeira vez, sem a necessidade do app introduzir um passo-a-passo.

Ao procurar pela banda australiana The Saints, o Spotify rapidamente a reconheceu como a principal busca, mas também exibiu no página de resultados músicas com a expressão “the saints” e que não pertencem ao artista, a playlist com as melhores música da banda, uma rádio baseada na banda e 2 playlists onde o The Saints figura junto a outros artistas de sonoridade semelhante.

Rolando para baixo na página do The Saints, o Spotify me recomenda quatro artistas semelhantes, baseados nas estatísticas de outros ouvintes com um gosto semelhante. Seria injusto não creditar o jurássico site Last.FM, que embora com menos usuários do que na década de 2000, ainda segue online fazendo charts e tabelas do que os seus usuários ouvem. O Last.FM promovia interações sociais de acordo com a equivalência do gosto musical dos seus usuários. 

A discografia do The Saints também consta no Spotify, assim como número de seguidores e cidades com mais fãs. No perfil de artistas ainda em atividade, ao contrário do The Saints, é possível encontrar datas de shows com informações sobre local e como comprar ingressos. Abaixo, na página da banda The Bronx, o Spotify disponibiliza as datas de shows.

Linguagem de desenvolvimento consistente

O desenvolvimento de uma linguagem consistente permite aos usuários navegarem pelo app de maneira intuitiva, tomando decisões baseadas em informação subconsciente. 

Por exemplo, o Spotify sempre coloca artistas em frames circulares enquanto Álbuns e Músicas são apresentados em frames quadrados. Isso significa que quando o usuário pesquisar por algo, ele facilmente consegue distinguir entre clicar em algo para ver mais do que clicar em algo para tocar uma música ou álbum.

Além do mais, em sua versão desktop, o Spotify coloca o contexto comum de maneira ordenada no lado esquerdo e reserva o lado direito da tela para o conteúdo auxiliar ou sugerido.

UX amigável

Com sua arquitetura de aplicativo aparentemente leve, o Spotify raramente parece ter telas de carregamento em branco ou qualquer tipo de dificuldade ao procurar por artistas ou clicar no conteúdo.

Isso reverbera mais quando o Spotify fica desconectado da Internet durante um voo ou em uma viagem de ônibus. Nesses momentos, é fundamental que os usuários possam acessar suas músicas baixadas, pelas quais pagam com a assinatura mensal. E o Spotify oferece a melhor experiência offline comparado com seus concorrentes.

O Spotify faz uma série de coisas simples através de estratégias de UX como mencionamos aqui, e certamente para muitos leitores parecem óbvias demais. No entanto, a hierarquia visual, o excelente contraste e os botões de qualidade não são uma receita que você pode copiar e colar para qualquer plataforma. O desafio para os desenvolvedores e designers é contextualizar os princípios do Spotify de uma maneira que torna qualquer aplicativo intuitivo e natural para seus usuários.

O Algoritmo

A palavra algoritmo furou a bolha dos heavy users de uns anos para cá. Afinal, todos estamos sujeitos a uma boa ou péssima experiência como usuários ao navegarmos em nossos streamings de música e vídeo, ao acessarmos nossas redes sociais ou efetuarmos uma compra em qualquer marketplace. 

Além da navegabilidade, o grande segredo de UX do Spotify é oferecer uma curadoria personalizada para seus usuários, sejam eles ouvintes de ocasião, sejam fãs de música. As playlists temáticas, as conexões entre artistas semelhantes e músicas de uma determinada época, o que os contatos de um usuário estão ouvindo e até mesmo os especiais de final de ano da plataforma, onde todo mundo vira DJ e compartilha sua playlist anual na plataforma de preferência: por mais avançada que seja sua tecnologia, o Spotify entende que a relação do usuário com a música não pode ser automatizada.

O Spotify faz suas recomendações continuamente baseada nos seguintes critérios:

• O filtro colaborativo (acompanhando o comportamento dos usuários e dos seus amigos na plataforma);

• UX Writing fluído e natural, personificando aquela pessoa que ama música e adora indicar para seus amigos;

• Análise de áudio, sendo a playlist Descobertas da Semana a base da indústria de streaming de música.

• Usabilidade aplicada da melhor forma: a Attri quer desenvolver o seu projeto  

O Spotify é um case de sucesso devido às estratégias de seus designers e desenvolvedores de UX. A experiência do usuário vai além da hierarquia visual, da interface noturna e dos botões chamativos: a equipe por trás do Spotify compreende e estuda o comportamento de seu usuário constantemente. Além disso, sabe que a relação das pessoas com música é diferente, mas a busca é quase sempre a mesma. 

Conte com equipes especializadas em UX e UI Design

A Attri possui equipes especializadas em UX Design que trabalham em projetos voltados para a usabilidade e baseados em tecnologia. Inclusive possuímos um podcast, chamado Uso, logo existo que está disponível no Spotify (e em todos outros agregadores de áudio).

Se você está buscando um aplicativo ou site que centralize a experiência do usuário com sua marca, entre em contato conosco. Vamos marcar uma reunião para juntos entendermos o seu objetivo.

Converse com um especialista da Attri!