Stretching Google Material to make better desktop navigation
- 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
I really 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:
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.”
On desktop, Google Music’s simple, vertical navigation leads to lots of white space, heavy-handed photography, and click-heavy navigation.
Side note: 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 some troubling “get me outta here!” moments.
While the “browsing” scenario I described above isn’t necessarily common — in fact, it may be that the Google design research team has 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, independently-scrollable list menus with immediate selection and visual feedback.
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 thing that struck me first: the circles. Lots of ’em. Really, this is a strange implementation for Material: circles as standalone cards, with labels floating outside of them. It’s clean enough, 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 a bit stark compared to other parts of the app.
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 (you’ll see me pull more from Google Plus later).
*I chose 16:9 images here, in part due to Material dimensions recommendations, and to differentiate these artist cards from the Album cards (which are obviously shaped like physical albums, square-ish).
**Make sure you navigate to the “new Google+” when you navigate to the site: it should be promoted across the top, if you don’t see it.
In my All Artists page, there are alignment and content tweaks, especially in the main view and across the top navigation, but the major update is the navigation pane on the left. Here’s the full screen:
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).
When I first designed and posted this, I used the same left navigation on this Artists screen as I do on the artist-specific screen (i.e., the headlining image for this article, and the next topic of discussion). It seemed like a useful redundancy, but after getting some feedback it seems that we can remove it and bake in the category navigation (i.e., show me Artists instead of Albums) in the top header. As of this update (Dec 2016) Google Music has changed and does appear to use a similar system in the header.
I also used a master “shuffle play” button, with a shuffle symbol (the two arrows crossing in an “X” shape) previously, but feedback suggested that it wasn’t clear what the utility was. Really, the point was to ensure that if a user plays from “All artists” or “All albums” (etc.), that the system would shuffle the music, rather than simply starting from the first artist alphabetically. I still think that the system should work that way, to more sensibly fit in with that use case, but it doesn’t necessarily need to be that visible to the end user (i.e., using a unique “shuffle” symbol rather than just the well-established “play” arrow).
^ Those are the updates (Dec 2016), so we’ll get into more of the original thinking and detail in the Single Artist view.
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 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!
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:
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.
****My new left nav actually demands some slight behavior changes in the old main nav, including making it NOT sticky anymore. I’ve got some thoughts around this that I won’t go into, but for now just know that I haven’t ignored that relationship completely.
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 (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.
******Also a “boon”: working with awesome photography, like some of these Adele pictures, certainly makes the job easier.
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.
As always: comment away, and feel free to reach out to me at couch [dot] ux [at] gmail [dot] com.
— Alex
