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
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.
*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.
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).
Using Google Music's Desktop app as an example, we try to improve the navigation of a Google product using only elements from the Google Material toolbox.