Music app: focus on the content

Canonical

Canonical

on 20 August 2013

Tags: Design

Music apps that allow users to switch between player and queue mode can be quite complex. Some challenges of music apps in general:

  • Deep navigation through the music library:
    Home › Artists › Artist › Album › Play queue
  • Switching between play queue and library

And a challenge unique for the Ubuntu phone:

Tabs

The Ubuntu Music app is all about your music collection. The home screen shows a list of recently played items and the musical genres in your collection. It is easy to find your way around with the tab navigation.

Navigate to an album

Let’s open one of the albums.

Open an album

Player

Tap on a song to start playing it and enter the player view. This view combines full album art of the item that is currently playing, and a queue of all previous and next items. There are play controls in the toolbar at the bottom of the screen.

Play a song

Queue

For the next example of what you can do with the queue, let’s imagine that we have already queued up a lot more songs from various albums.

Scroll down the list to see what’s coming up in the queue. When our focus changes from the current song to the rest of the queue, the toolbar with play controls contracts. A hint of a progress bar stays on the screen; not to interact with, but as a visual hint to show something is playing and as a reference to where the play controls are.

See what's next in the queue

Users can remove songs from the queue by swiping, and move songs to a different position in the queue with drag and drop.

Bring up the toolbar with play controls to refocus on what is playing now. As the toolbar is swiped up, the queue moves back to the current item.

Back to the currently playing song

Back to the library

The user can go back to their library to find more songs to queue. Patterns for back and overflow in the toolbar are still in development so check the App design guides to find out how exactly this will work.

Back to the library

Back in the library view, we again see a hint of the progress bar to show that items are in the play queue. We bring up the toolbar and see the condensed play controls. The toolbar lets users tap play or pause on the current song, tap on the album art or song title to return to the player view, and open up the overflow actions.

Back to albums

We navigate to another album.

Open another album

Item options

To keep our focus on play controls in the toolbar and keep the toolbar as light as possible, item actions are grouped with the item and accessible via the expansion pattern. This goes for library albums and songs and queued songs. We can queue another song of the album we are looking at with the song options.

Add a song to the queue

What’s next

This is the basic UX concept for the music app. Visual design will play a big part in deciding what exactly goes where, and we will need to test if the controls are easy enough to access. Coming soon are some exciting visuals to connect the dots.

Talk to us today

Interested in running Ubuntu Desktop in your organisation?

Newsletter signup

Select topics you’re interested in

In submitting this form, I confirm that I have read and agree to Canonical’s Privacy Notice and Privacy Policy.

Related posts

A fresh look for releases.ubuntu.com

Updating the design of the Ubuntu Releases website using Vanilla Framework

Design and Web team summary – 04 February 2019

Welcome to the latest work and updates from the design and web team. Web squad Three new homepage takeovers This iteration we designed three, built two and are showing one new homepage takeover. Branded snap appstores is live Broadsign and…

Our new team practices site, and the democratic repository behind it

A month ago, we published our web and design team practices website, from the repository that we’ve been building up for nearly two years now. I’ll try to explain why I am so proud of it. Why practices? A strong team needs…