Complex Material: Yatse Media Player
Brief: In the Fall of 2016, I got the chance to help with the design of a very complex Android app. Yatse is built to cast media files between various sources and targets, and has to support your whole media library while also offering remote controls for the wide variety of devices it supports.
I’d worked on complex apps before — redesigning settings for Nova Launcher required a lot of getting to know the users and how they used the launcher. What people customized, what was important for them to see, which controls worked best, and how to organize things in a way that made steps toward cleaner organization while still keeping everything familiar.
And in some ways, working on Yatse was similar. But where Nova runs as a launcher on a pretty predictable variety of devices (smartphones and tablets), this app is actually reaching out to control completely different types of hardware, so the controls you’re using on screen are completely physically divorced from the devices you’re controlling. At the same time, there’s an on-device world where you can browse these remote media libraries, manage queues, and switch between servers and targets.
After completing the initial redesign in November, I waited a while to actually enumerate my thoughts about the project and our design explorations, but now seems like as good a time to discuss it as any - designing dense and complex experiences with Material Design is just as relevant as ever.
Before writing this case study, I had a conversation with someone about a common concern designers seem to express about applying material design to their interfaces — information density.
There’s a perception, I think, that material design as a system encourages informationally sparse UI. That white space is its own kind of component, as important as any basic controls.
In reality I think the intention is to suggest careful, intentional use of white space and information, emphasizing — as I love to do — hierarchy over density, but not ignoring density altogether. A good approach to a complex interface meant for power users has to find this balance.
Truthfully, we didn’t find this balance in initial testing. Originally, I had reimagined the remote screen to pull apart the controls and reconfigure them in a way that — I thought — would make more sense hierarchically. Shortcuts for things like music and TV shows went at the bottom, and the square control buttons went together in a layout similar to a TV remote — the main controls anchored closer to where your thumb might rest, with other buttons falling in rows with generous empty space reserved around the main controls.
After all, a glass display doesn’t offer the tactile sensation of raised buttons you’d find on a normal remote, so it made sense to me to leave some open space.
Once we tried this design in an early release, it became clear that it didn’t work for existing users who had very specific desires for very specific buttons and button placements. And in fact the buttons, for all their extra space, were still too small.
Another example of dense controls in Yatse is the overflow menu seen in the media library. Users were accustomed to a high level of filtering and customization, with a handful of different library layouts and methods of arranging media.
To fit all of this into one - relatively - simple menu, we customized the overflow. Like the overflows in Google Drive, this overflow has multiple levels. The user can tap "Layout" to view options for how media will be displayed in the library, while on the top level a careful arrangement of list controls allows the user to filter and sort. Since the user can only sort by one piece of information at a time, we used radio buttons. Filtering on the other hand can include multiple criteria, so for that control we used checkboxes.
Additionally, we changed the overflow's default behavior. Rather than applying changes and immediately closing the overflow on tap, we allowed it to stay open so the user could select their preferences and apply them all at once.
The media player
In the in-app media player, we needed to expose a variety of common controls, and in the same way that the app itself interacts with many types of hardware, the media player's controls had to account for many types of media playback, including music, movies, tv shows, and other video files.
This is another case in which users were able to tell us which controls they needed on screen, and we devised a layout that accommodated them.
We built the queue functionality to be familiar to users of other media apps like Play Music, with a similar system of overflows connecting songs, artists, albums, and even genres, so users can jump from one to the other no matter where they are or what they're playing.
On tablets, the queue could appear as a popover rather than taking up the entire display, allowing users to more easily keep the context of the underlying player.
We also needed to build a rich system for media "details" screens to accommodate the different types of assets, metadata, and other associated information with each type of media. Bands, albums, movies, and TV shows all contained different informational hierarchies and had different associated information. The design ended up using an extensible header block that could add album or cover art, tabbed navigation, download options, and additional information (like runtime, genre, or release date) based on what kind of media was being displayed.
On tablets, what could become a long scrolling list of information condensed into a two-column layout, showing more information on the larger screen while maintaining a highly visual focus.
The icon system
Yatse's complexity extended beyond the app itself to its launcher and system icons. I ended up templatizing its icon set to accommodate various share actions, plugins, and launcher shortcuts, including a dark variant of each icon and a grayed-out variant for deprecated plugins that would still show up on the Play Store for users who had downloaded them.
There's a lot more that could be said about the new Yatse interface. We designed, revised, and built experiences for setting up devices, managing them, controlling casting, digging into details about movies, finding out more about cast members, and even getting support on any potential issues you may run into.
But primarily, I think the Yatse redesign solidified my feeling that - to successfully design something custom, complex, or dense with material - it's best to think about material as the system it is, based on the metaphor of paper and ink, and to use white space as an active tool to enhance - not eliminate - visual hierarchy.