The problem with the new Apple Music app’s design

How big is too big?

At WWDC 2016, Apple introduced a new Apple Music app for iOS. This app was intended to be the home for the majority of users’ music libraries and Apple’s streaming service. It featured a radically different design from Apple’s past software, which drew both some criticism and praise. No matter which side of the debate you fall on, there are some issues that make it evident Apple isn’t paying the same attention they used to.

iOS 10 Music app — Image credit: iDownloadBlog

At a glance, Apple’s new design direction features bold headings, large text, primarily white backgrounds, and big filled buttons. Looking at iOS 7, it’s a massive departure from the thin fonts and blurry materials everywhere. It gets rid of the colourful album backgrounds and playlist pages filled with artwork in favour of a flat white background.

Apple’s new Music app has some design flaws that make it frustrating to use. It even drove me to start making the iOS 9 Music app work on iOS 10.

The Inconsistency

Headers

One of the easiest places to criticize at a glance is the bold headers. Not the fact that they are huge and bold, but the fact that Apple can’t seem to consistently style them across the app.

Here are the headers for the Library, For You, and Browse tabs on iOS 11:

These are all different tabs in the same application, and yet, they don’t look or act the same.

Same app, different headers

If you look at them a bit more closely, you can see how the headings don’t align between tabs. This is even more evident when switching between tabs in the app. You might also notice that for the browse view, the hairline doesn’t go all the way to the right side of the screen, but rather stops beforehand for another to appear. These separators are scrolling with a carousel of images, yet in For You, where there is another carousel, they don’t scroll. Not to mention that the separators are completely different colours and are at different vertical positions as well.

Top: Library header when scrolled down — Bottom: For You header when scrolled down

My frustration with the headers doesn’t stop there though. In iOS 11, some of these headers collapse into a normal navigation bar title, while others just scroll with the content.

You could argue that so far, this has just been useless nitpicking, but when you’re willing to redesign an entire app’s design that lacks these flaws, you really do need to consider the fine details.

Left: Account page — Right: iOS Settings (First cell with personal information blanked out)

In iOS 11, they expanded this big header style to many other apps, and let developers do it in their own apps with ease. All of these apps keep the navigation bar background, yet here it lacks it. This, combined with the grouped white table view cells makes an odd appearance when viewed in full, especially when compared with the rest of the system.

Also, I’m actually nitpicking now, but this table view’s background is a different colour than the rest of iOS’s.

Navigation Bar Titles

As we just saw, some of the app’s headers collapse into a normal navigation bar title when scrolled. One of the flaws that’s been there since iOS 10 is the lack of navigation bar titles at all in some views. Navigation bar titles have been there since the first iPhone and serve as a way to remember where you are in a view, yet they are just absent in many different areas. Take any album, artist or playlist view and you’ll quickly find that once you scroll down, it’s hard to tell where in the app you are. Here’s two screenshots of an Apple Music playlist. As you can see, once you’ve scrolled down, there’s no telling where you are.

Are these even screenshots of the same playlist?

The pre-iOS 10 Apple Music app solved this by fading in the title as you scrolled, alike to the new iOS 11 behaviour of doing this for some of the bold headers, but it’s absent in many key places.

Translucency

The Music app’s MiniPlayer

Here we have the MiniPlayer for Music. As you can see, it’s fully translucent and blurry, while the tab bar below it is solid white. It almost seems intentional, but is a really odd and, to be blunt, ugly design choice.

Apple Music sharing profile views

If you look closely enough, the silhouette is there. (left)

If you don’t have a profile image, some places in Apple Music show your initials, while others opt for the silhouette of a man. There seems to be no actual reasoning behind this, other than a lack of attention to detail.

Profile page’s navigation bar next to literally every other navigation bar in the app.

Aside from the profile page, every other navigation bar in the app blends in with the content below it (same background colour, lack of hairline), as seen in the Library screenshot above. Why is the profile page any different?

Top to bottom: Profile page, artist page, playlist page

Also, why does the profile page get to have its action button in the navigation bar when it scrolls with the content for nearly every other page in the app? These buttons all perform nearly the same action for their respective content types, which is opening an action sheet with options to perform.

On-boarding

I don’t like Musique Francophone just because I’m Canadian, by the way.

The on-boarding Music selection view above looks like it hasn’t really been updated since iOS 9. The super-thin heading font (like really, why was it ever that thin?) is still there, and the line underneath it is a normal size, as opposed to the larger text sizes around the app.


Confusing Behaviours

The Music app is full of some slightly confusing behaviours too.

The Artist view

To the side is a view of an artist on Apple Music. The often-colourful artist images above the white content view creates a really nice contrast in some cases, and I’ll give Apple that. There are some things I’d change, like the cramped-looking artist title, or the oddly placed action button, but that’s not my main issue with this view.

Here’s what happens when you scroll down just a tiny bit in the view:

The view automatically scrolls to just below the header, obscuring it with the blank navigation bar, and leaving it blurred behind the navigation bar. This unstoppable behaviour also leaves the scroll view indicator in the middle of the screen, something that most of Apple’s other apps account for. It doesn’t fade the title into the navigation bar so the user knows where they are, it just leaves the header cut off at a weird size. One solution to this would maybe be to gradually fade the header image as you reach end (starting late into the scroll, to leave it for a bit), and snapping the position to have the header right under the navigation bar’s end. That’s just one possible way they could have solved this problem, I’m sure there are a lot more creative ways to do it.

More Apple Music sharing profile views

iOS 11 lets you share Music with your friends, but it has an odd look for the way this is done. You can view your friends’ profile pages and see what kind of Music they are listening to.

One of the odd design choices you can notice right away is the use of a grey silhouette for users without profile pictures. It’s almost invisible until you get some content under the navigation bar.

No, I’m not just jealous that Eddy gets to be verified.

Here we have Eddy Cue’s profile page. You can see that he has set a profile picture, which, unlike anywhere in the app and more like iOS 9’s Music app, appears blurred behind the header. And no matter the colour of this blurred image, you still have your red navigation bar buttons, black status bar, and red follow button. On some pictures, like Eddy’s, that looks fine, but on many, it’s a disaster. In addition, this blur stays with the header as you scroll down, clashing with the default navigation bar blur in iOS. Those are just issues I have with the design itself, though.

Here’s what happens when you scroll down in a profile page:

The header transforms into a navigation bar, which stays at the top of the screen as you scroll through the content. As that transition progresses, the rest of the controls stay the same size, and just eventually get scrolled over, causing an odd effect for a portion of the animation. About half-way through the animation, the font weight suddenly changes to become less bold, instead of animating smoothly like we’ve become accustomed to in other Apple apps.


Other questionable design decisions

This default profile image has a shadow underneath it. A grey shadow from a grey circle onto a white background. That’s not even to mention the inconsistency caused by the extremely thin font, being used in an app that has gone towards bolder fonts.

How many separators is too many?

There are way too many separators throughout the app, many in places where it could just be left blank and have a much better appearance. These overused separators lead to content feeling squished and taking away from the simplicity I feel Apple was trying to accomplish.

I could list a ton more, but I think that this is something that Apple is going to have to take care of as they further refine the Music app.

Wasted Space

The Playlists view in iOS Music

Many different places around the app have huge table view cells. Beside this is the Playlists list, which has room for up to five lines of text, not many of the Playlists actually will meet that length. Most people name their playlists something short and concise, and the only other text content here is the playlist author name under its title for Apple Music playlists. On my 4.7" iPhone, I can only see four playlists at once. I can’t imagine how bad an experience this must be on a 4" iPhone.


Lack of Personality

Now, this one comes down almost to pure opinion, but on iOS 9, the artwork themed the app around it. On the album, artist, and playlist pages, colours from the artwork were taken and it was prominently featured. Apple Music pages were filled with colour. The Now Playing view even adapted to the colours of your currently playing song’s album artwork. In iOS 10, the app is mainly white. While I can see the argument for having some more focus on the content itself, having that little bit of personality doesn’t hurt, and I’m sad to see Apple remove it.

Does it really do what it’s supposed to?

One of Apple’s priorities with this design seems to be simplicity and legibility. Many designers are calling this complexion reduction. The bold headers do make things (too) easy to read, and the removal of content’s personality does help make things simpler, but are these goals really being met?

Simple should mean Easy to Use

Being able to toggle shuffle and repeat is a pretty basic function of almost every music player. For some reason, Apple decided to hide those options underneath the content you see on the Now Playing screen. No regular user would just know to look there, with many likely thinking the option is gone altogether.

EDIT: To clarify a bit, some people noted that scrolling is natural on a mobile device for most content, but I don’t think that applies here. It’s a Now Playing view, all of it’s content fits perfectly on the screen. It’s got bottom-aligned buttons, and a huge album picture. It’s entirely white, and gives no hint at a glance that a scroll would be required to access more information.Not only that, but on previous iOS versions, scrolling wasn’t possible, so for a lot of the non-technical users who just want to play their Music, they might already have established that scrolling isn’t possible there. Everybody does scroll, but context matters a lot. When you hide non-essential information under a scroll and leave no hints about it, people aren’t likely to scroll.

EDIT #2: Zoltán Hosszú in the comments linked to this video of some people asking people in SF to find the button, and failing, which makes the problem a bit more evident.

Liking songs in both iOS 8.4 and iOS 10. Image credit: Left: Pranoy C on Stack Overflow, Middle: iDownloadBlog

Not only that, but another important action while using Apple Music is marking songs as “loved”. This tells Apple Music that you want to hear songs like that more often. On iOS 8.4 and up until 10, this feature took a prominent spot on the Now Playing view and lock screen. It even appeared at the top of each album and playlist. With iOS 10, it was hidden away in the item’s respective context menu. Even in iTunes on macOS, the loved button takes a prominent spot beside songs.

Loving songs is easy in iTunes.

Size does matter

How big is too big?

Big text is legible, until it’s not. A lot of artist and page titles around Apple Music just can’t be easily read because the big font cuts them off. It doesn’t even attempt to scale down text that is too big to fit at that size.

Somehow more obtrusive than the iOS volume HUD

You also have these huge HUD’s that appear whenever you perform select actions on songs, such as liking, disliking, or adding to your library (all things that are usually done in batch), preventing you from continuing easily. It could be argued that none of these HUDs are even necessary for the messages they display. When you tap to love a song, you just expect it to be marked as loved. When you add a song to your library, the button changes to a downloading symbol and then disappears once done. Do you really need another visual confirmation, one that takes up over half of your screen’s horizontal space?


This post makes it pretty clear that I’m not opposed to the Music app design in full, I just don’t like the little bumps in it that have been completely overlooked. In fact, I do like the new design, as it’s applied in the new iOS 11 App Store, which is a near perfect implementation of this design language.

The Music app in iOS 9 was polished. Typography was on point nearly everywhere, animations acted perfectly with beautiful blurs and gradients, and the app adapted to the content in a really pretty way. The new Music app, over a year later, still feels like it was rushed through.

I’m not writing this post in order to make unneeded criticism of the app, bit in the hope that someone at Apple sees it and fixes the issues mentioned.

I am curious to see what others think, so if you have any thoughts on the points I’ve raised here, or Apple’s design in general, make sure to leave a comment.


If you enjoyed this post, you might like another one of mine. It explores Apple Watch’s Mac Unlock feature and how it could be better.

Check it out here