The New Music App In iOS 10

20 June 2016

The new Music app in iOS 10 looks different, drastically different. It’s been revamped with new font styles, navigation, layouts and animations. In general, app design is a combination of visual aesthetics and behaviour; evaluation of the changes Apple has made should consider both of these points. This is all subjective (which ultimately is what makes it hard) but the general consensus opinion on iOS 9 Music was one of confusion. The way it behaved was difficult to understand.

I think the new Music app represents a huge improvement in that area, greatly enhancing usability. Addressing my primary complaint, library navigation is now direct and obvious. There is a plain list of full-width buttons that directly open the primary views into the local music. If you want to see albums, tap Albums. If you want to start a playlist, tap Playlists. If you ever get lost in the menus, keeping hitting the Back button until you get back to this list.

It’s a huge improvement over the iOS 9 drop-down selector thingy which was a non-standard UI widget that actively hid navigation controls behind an additional button press. The iOS 10 app even allows for some personal customisation: tapping the Edit button reveals drag handles and additional toggleable rows. For example, in the old design, all users had to always see (and skip over) the Composers filter … which very few people care about. In iOS 10, the button defaults to hidden and can be turned on if desired.

One of these list items is ‘Downloaded Music’ which shows only tracks and albums that have been saved to local storage. Apple is plainly responding to user feedback that people couldn’t work out what was stored in the cloud and what wasn’t. Downloaded Music answers this question unambiguously, even adding an additional explanatory banner on detail views if the filter is applied. Circling back to the customisability, if being able to cleanly distinguish what is available in local storage is unimportant or unnecessary, the list item can simply be unchecked and hidden.

The persistent bottom bar tabs have also been tweaked to truly represent the primary features of the app. ‘Connect’ has been ditched from the tabs (a failed social network service does not justify such a primary position in the interface) and ‘New’ has been renamed to ‘Browse’. The ‘Library’ tab (nee ‘My Music’) has also been moved to the primary (first) slot in the toolbar, where it always should have been.

Up Next has also been reworked and appears inline to the Now Playing screen. Simply scroll down the view and the upcoming tracks are listed below — Up Next is no longer hidden behind yet another modal. It works better spatially: thinking of the view as a progressive timeline, the next songs are now ordered beneath the currently playing track. Shuffle and Repeat are also located nearby too, although I think there needs to be a way to Shuffle All from the main screen.

That’s the behaviour; big wins across the board as far as I’m concerned. Aesthetics are a different kettle of fish. iOS 9 Music was pretty boring in terms of visuals, mostly reusing stock UI components and doing an average job in areas where it did rely on custom elements.

The new app definitely makes more of a statement pushing iOS onto a new design trajectory with big bold fonts. The Apple News and Home app also have adopted this style. It’s not clear if Apple wants to move towards this style (which is defined by its use of heavy font weights and comically-large elements) for all of its apps — it’s still early stages.

I have mixed feeling on the appearance. I like the proliferation of buttons with backgrounds (such as the pink circle around the ••• button on Album list views) as well as the shift away from translucency for most things. The thick title fonts are a regression — especially as it is applied inconsistently. Navigation bar titles continue to use the normal system fonts, for example. The font size of the main headings is just laughable; it feels like you have cranked up the Dynamic Type accessibility options.

The Search screen is another example of inconsistency. Whilst the text field has been ballooned to a larger-than-normal size, the segmented control and ‘Cancel’ buttons are as small as ever with similarly small fonts. It does not match. The humongous components also seems like an inefficient use of screen space which is funny given 2016 was the year Apple reintroduced a 4-inch iPhone to its new device lineup.

Visually, I love the new Artist and Album list views. Putting two big photos of album art per row looks great and cleanly splits the screen in half on my 4.7 inch iPhone 6. I wish the section titles used a larger typeface as they get lost amongst the cells.

The new look for the Now Playing is decent. I like how the album art pops up from the page (shadows!) to signify the song is playing and recedes back into the frame when paused. This is capped by a subtle bounce effect. I also like how the scrubber thumb increases in size when in use and nudges the time labels out of the way when the user drags it to either end of the line. I don’t like the spacing between the song name and the scrolling secondary information row of text; the padding is too tight.

Another negative is the interaction to show and hide the modal is not 1:1 — it doesn’t follow the finger. As soon as a swipe gesture is detected, it fixes into the final state. The playfulness of being able to cancel the gesture mid-flight1 is lost; the previous incarnation of the app did this properly.

The ‘additional options’ sheet (activated by tapping a ••• button or long-pressing on album and song items) has also been redesigned to feature rounded-corner sub-sections. This view was poor in iOS 9 too and it hasn’t gotten better. In fact, I’d argue the applied border radius has made it worse. Your eyes are confused with the sudden appearance of four arbitrary blocks of content with irregular interactions. Moreover, buttons to ‘Love’ and ‘Dislike’ are presented side-by-side with near-identical iconography. Not to mention, every element in this view is tinted bright pink. It’s ugly. It’s even worse on smaller iOS devices where the middle list section will scroll if space is constrained. The scrollbar indicators in this state do not respect the corner radius and are naively (hideous).

Neither design was perfect but if I had to choose, I’d pick iOS 10’s attempt over iOS 9. The usability is the main reason for this: the simple fact Music is getting a ground-up redesign after just one year is enough evidence to prove that Apple messed up badly the first time. As I hopefully expressed above, it’s still a mixed bag as far as aesthetics are concerned for the iOS 10 Music app. I think the Heavy Fonts look would work better if Apple had gone all the way and brought it to every app in a wide-reaching system overhaul. That is not the case, so it (sadly) sticks out in the crowd.

1 This is an overlap of behaviour and visuals. You could argue a non-cancellable animation is worse for both axes of user experience.