My revised “Single Artist” view for Google Music: it allows for better horizontal navigation across albums and artists

Stretching Google Material to make better desktop navigation

  • a.a.k.a., Tweaking Google Material for broader data sets
  • a.a.a.k.a., Google Music annoys me sometimes, so I drew up some fixes instead of just getting over it like I probably should
The current Google Music navigation structure, from library to song
A sampling of Google Music’s current desktop screens (June 2016). Lots of white space
An older version of iTunes (left), and a newer version (right, June 2016). Plenty of persistent navigation

All Artists view

The existing Google Music “All Artists” view is simple from a navigation perspective: here is a (photographic) list of your artists: just click an artist to go to the Single Artist page. Per my earlier comments, that’s fine for a common “I’m looking for something specific” use case, and is suitable for mobile, but this is restrictive for browsing across artists and perusing their music. Here’s the current (June 2016) version:

The current Google Music “All Artists” view (June 2016). Lots of circles, and, strangely, floating labels
Potential versions of artist cards. Square is too close to albums, and circles introduce visual noise and white space.
My mocked up “all artists” view. Tweaks abound, including a NEW (Dec 2016) update to the header, baking in the group categories in to the header.

Single Artist view

Finally, on to the next screen. Let’s select Adele from our “All Artists” view… isn’t she great? Here, left to right, is the same left navigation bar (now with Adele selected), an artist overview, and a playable list of all her songs, organized by album.

The “Single Artist” view, after selecting an artist from the left nav. This is the same image that appears at the beginning of the post.
Elevation points for UI element types, from the Google Material page on elevation
Examples of Material Design already stretching to include navigation and content at the same elevation

The end

There’s (as always) a lot more thinking to be done here, but this was a fun visual experiment. I’m not totally satisfied with the solution, as this implementation does offend some of the vaunted tangibility that Material Design tries to achieve, but I think it’s a step in the right direction to better facilitate horizontal navigation in Material. A music library is an easy example of this kind of ‘browsing’ across a broad set of categories (e.g., artists), but I’m curious to see where else Google encounters this challenge and what solutions they develop to accommodate it.

Alex Couch's portfolio

I'm a Product Designer in San Francisco. These samples include professional work as well as my personal projects. bit.ly/couch-linkedin

Alex Couch

Written by

Product Designer in San Francisco. Music fan, pizza eater, Medium reader. linkedin.com/in/alexcouch/

Alex Couch's portfolio

I'm a Product Designer in San Francisco. These samples include professional work as well as my personal projects. bit.ly/couch-linkedin