Foto — Adam Patrick Murray

Interface da Touch Bar para o Spotify

André Dias
3 min readDec 1, 2016

A Apple apresentou várias novidades em seu evento “hello again” no dia 27 de outubro de 2016. Posso dizer que a que mais despertou minha atenção foi a Touch Bar.

A Touch Bar, por enquanto presente apenas na linha MacBook Pro, expõe informações e atalhos relacionados ao aplicativo que está em primeiro plano em um dado momento. Com ela, os usuários ganharam uma nova área contextual localizada junto ao teclado.

Eu sou usuário assíduo do Spotify no Mac, no iPhone e em um PC. Por usá-lo diariamente, considerei que seria interessante a criação de uma proposta de interface do app do Spotify para a Touch Bar, uma vez que ainda não foi divulgada a interface oficial pela empresa.

Interface proposta, com a opção “Shuffle” ativada pelo usuário.

Essa proposta tem como principal intuito estudar a nova guideline de desenvolvimento publicada pela Apple, além de explorar novas possibilidades.

Antes de desenvolvê-la, conversei com alguns amigos e colegas, também usuários do Spotify para macOS. Vale lembrar que, elaborar uma proposta completa de interface levaria bastante tempo, portanto, cobri apenas os cenários de uso mais citados.

Por padrão, o macOS reserva parte da Touch Bar para atalhos do sistema operacional. Assim, apenas parte da barra fica disponível para ser gerenciada pela aplicação em primeiro plano.

Touch Bar Regions

Escolher as informações e definir quais atalhos ficariam visíveis na barra a cada tempo não foi uma tarefa trivial.

Para contornar essa restrição, explorei o uso dos gestos aceitos pela barra. Assim, além de garantir o melhor uso do espaço disponível na barra, busquei criar uma experiência mais interessante e, ao mesmo tempo, familiar, para usuários de dispositivos touch screen.

Gif que demonstra o comportamento proposto.

Ao deslizar um dedo sobre o nome das faixas, o usuário poderia escolher entre avançar para a próxima faixa, ou retroceder para a faixa anterior.

A decisão de remover os botões fixos de avançar e retroceder foi dura, mas ela viabiliza a possibilidade de os atalhos “ordem aleatória” e “repetir” serem posicionados na Touch Bar. A interface destes botões na barra também ajudaria ao usuário identificar quando qualquer uma destas opções esteja ativa.

Vídeo que demonstra o comportamento proposto.

Para retornar ou avançar até uma determinada posição de uma música, bastaria ao usuário tocar e manter o dedo pressionado sobre o nome da música até que aparecesse o seletor de posição. Em seguida, o usuário movimentaria o seletor até a posição desejada e retiraria o dedo da barra.

Vídeo que demonstra o comportamento proposto.

Tocando com apenas um dedo no nome música, o usuário seria direcionado para a página do álbum do qual ela faz parte.

Vídeo que demonstra o comportamento proposto.

Todas as opções disponíveis para uma faixa poderiam ser facilmente acessadas ao tocar no atalho “ … “.

Chegamos à conclusão da proposta de interface do app do Spotify para a Touch Bar que elaborei como exercício.

Gostaria de saber a opinião dos leitores sobre as soluções propostas.

O que acharam? Obrigado pela leitura!

--

--