#9 Apple Music — Add a Caret to Signify there’s Content at the Bottom

Hide and Seek is fun. But not when it comes to User Interfaces.

I started to use Apple Music recently to stream music in my commute to take a break from Spotify’s country restrictions. (You racists!)

While the UX/UI of the product itself has evolved from it’s previous releases and adheres closely to Material Design, there’s one thing I noticed that could be improvised with just a single icon/symbol.

Apple Music’s Music-Player Bottomsheet

The Music Player itself is a Bottom Sheet. Hence, the Grey Area on the top overlaying the previous layer. Simple, right?

Hidden beneath the bottom-sheet player, is a scrollable list of songs queued to play next. The UI doesn’t suggest there’s anything at the bottom. Generally when you can swipe or scroll, there’s 3/4th of the content shown to indicate there’s more.

Spotify Premium does this brilliantly using cards/album arts that peek to the left and right of the current song’s album art.

So, when you actually swipe up in your absent mindedness, you realise — OH WAIT, THERE’S A QUEUE?

The Queue of songs beneath the current one. Along with Lyrics.

So, what are a few ways to fix this?

1. Replace the Bottom-sheet Music Player with a complete activity and have a dedicated Bottom sheet for displaying the Queue and Lyrics. This provides the affordance that the bottom part can be swiped up, similar to Google Play Music or Maps. This also means that the symbols at the bottom will move to the top on the toolbar.

This helps the user to know which song will play next while also suggesting more information regarding the next playing songs are available.

Using the full activity for Music Player. Showing important information from the Bottom Sheet in the closed view.

There’s another way to do this, without using a bottom sheet, but using a different background colour with a divider.

Full Activity suggesting a Scroll based list like it’s originally in Apple Music design.

2. Just use a caret to show that one can swipe up to reveal something. In order to show that something comes up. Now to show context for what that something is, add text.

Including a Caret to suggest there’s a Queue below.

Just a few solutions that I thought made a lot more sense. Of course, there can be a lot more. Comment or Reply if you’ve got your own for this design.