Stretching Google Material to Make Better Desktop Navigation

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

a.k.a., Making Google Music (on desktop) more like iTunes 

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

Original article posted on Medium.

I like Google Material. It’s a well-documented and thoughtful end-to-end visual/UI language that’s adaptable to a lot of consumer apps. It’s obviously a mobile-first UI language: the card-first patterns are highly tangible and tractable, and its navigation structures tend to be very vertical. Take, for example, Google Music’s navigation structure:

The current Google Music navigation structure, from library to song 

This highly “vertical” navigation structure tends to work well on mobile devices: you don’t have the space needed for persistent on-screen navigation, and (perhaps) mobile use cases trend towards finding a particular item rather than, browsing around. But when you apply this pattern to desktop, you see limitations: that’s a lot of navigating up and down (a version of “pogo sticking”) if you’re navigating across multiple categories… think, “I want to listen to something from my music library, but am not positive which artist/album/song I want to listen to yet.”

A sampling of Google Music’s current desktop screens (June 2016). Lots of white space 

*It’s puzzling that they don’t at least use back arrows on Desktop (as they do on mobile) to help the user go back up the navigation ladder. This leads to troubling “get me outta here!” moments.

On desktop, Google Music’s simple, vertical navigation leads to lots of white space, heavy-handed photography, and “clicky” navigation.*

While the “browsing” scenario I described above isn’t necessarily common — in fact, Google’s research may have found that users tend to look for something specific in the app, so that’s what it’s optimized for — browsing can still be accommodated. Just look at the classic (and current) iTunes app navigation: persistent, scrollable list menus with immediate selection and visual feedback.

An older version of iTunes (left), and a newer version (right, June 2016). Plenty of persistent navigation.

I wanted to emulate some of this on Google Music’s desktop site, using Material Design, without breaking Material’s established patterns. I think I partially succeeded by employing some “cheats” that Google has used on other Material products. I also spruced up some of the UI according to my own tastes (sorry, couldn’t help it).

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.

What sticks out? The circles. Lots of ’em. This is a strange implementation for Material: circles as standalone cards, with labels floating outside of them. It’s pretty clean, aesthetically speaking, but is an odd departure. I recognize that the circle evokes a “profile” or “person” elsewhere in Material, which makes sense for Artists, but this is stark compared to other parts of the app.

Potential versions of artist cards. Square is too close to albums, and circles introduce visual noise and white space. 

*16:9 images per Material dimensions recommendations; it differentiates Artist cards from Album cards (which are square-ish, like physical albums).

I played with some circular concepts in trying to re-card-ize these, but ended up settling on a 16:9 photo card* with supporting text, as well as pulling a secondary gray button style from the new Google Plus design (we’ll pull more from Google Plus later).

In my All Artists page, there are alignment and content tweaks, especially in the main view and top navigation, but the major update is the navigation pane on the left. Here’s the full screen:

My mocked up “all artists” view. Tweaks abound, but the biggest change is the left side nav panel. 

*I chose a shuffle button instead of ‘play’; the latter would play songs in a currently-invisible album order, which I don’t see users committing to memory. Additionally, there’s a ‘master’ shuffle button added here as a page floating action button (orange, bottom right). Same logic as before.

Similar to the existing application, the main view is a photographic array of artists: just click to see that artist’s music (or click the card’s shuffle button* to start playing music from that artist). But the left navigation pane adds both an alternate list for rapid navigation (redundant, but optimized), and controls for switching organizational units (e.g., see by album, playlist, genre, etc.).

The left panel is the first place I see some “breakage” in Material: it’s typical to have “higher elevation” items (like menus) that dictate which “lower elevation” items (like content or cards) are visible. I’ve pulled the below image from the Google Material page on elevation and shadows:

Elevation points for UI element types, from the Google Material page on elevation.

*My left nav actually demands some behavior changes in the old main nav, including making it NOT sticky. I have thoughts around this that I won’t go into, but  know that I haven’t ignored it.

My new left nav breaks this a bit: there’s a faint border between the left navigation pane and the main content, but otherwise they appear to be on the same plane (the same “elevation”) despite the left navigation controlling what appears in the main content pane. 

But I didn’t cheat! Google has used similar shortcuts on other products, including one in Google Music (the existing main navigation*, which is ‘sticky’ in the Desktop app), and a few in Google Plus.

Examples of Material Design already stretching to include navigation and content at the same elevation.

Whether these existing patterns “break” the core nature of Material Design is perhaps a philosophical question — Google made these products, so is this what Material Design is? — but I’ll take what I can get. The ‘same-elevation’ cheat I’m using is convenient for now, but I do hope that Google eventually codifies how this type of navigation should work in Material. 

The second “break” involves the controls at the top of the left nav bar, the area where you switch the content’s organizational unit (e.g., playlist, album). The navigation pattern, which is essentially “tabs” in a normal website navigation bar, is commonly used in Material for high-level page navigation. Here it is in Google Music and Google Plus:

The main navigation bars for Google Music (top) and Google Plus Collections (bottom).

What is not typical is the application of this navigation style on secondary navigation. In my screen, the top bar is the main navigation, with this smaller tab bar being secondary. Depending on the precise navigation behaviors—which could change per organizational unit, e.g., playlists vs. artists—this navigation probably could be baked into the top/main bar (similar to the orange Google Music example above), but I wanted to experiment a bit more. This approach also frees up space in the main content area that a thicker top nav bar would have occupied.

A few versions of the pane navigation controls, some with painful color contrasts.

*Most Google products trend toward one end of the color wheel, hence the white labels, but I wanted to stretch things a by taking advantage of colors in Google Music’s logo.

I tried a few different color combinations within Google Music’s existing color palette — which is limited and difficult to achieve good color contrasts with* — and Material guidelines. I settled on the yellow on gray. Google typically leans more heavily on white (and translucent white) for navigation, but, again… experimentation.

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. 

The left navigation pane especially comes into play once the user is in the Single Artist view: this is one way we avoid pogo sticking and speed up horizontal navigation. If we were to click on a different artist in the list, we’d see a similar screen for that artist. Just one click!

*Also a “boon”: working with awesome photography, like some of these Adele photos, certainly makes the job easier.

The (darker) artist overview pane is a boon: its vertical orientation helps squeeze the excessive white space that’s seen in the current desktop experience, so the albums on the right feel orderly without getting lost in space*. The inspiration for this style pane came from Google Plus Collections; an individual collection displays a left side summary for the content displayed in cards in the main (right) view.

The end 

There’s 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

Learn more

Subscribe to our mailing list and stay up to date on our latest thought leadership and learning opportunities.

Connect with us

Want to know how we can help your company drive real business progress?

Let’s talk

Stay up to date on our latest thought leadership and learning opportunities