A Closer Look At The Design Of YouTube Gaming (Creator Preview)

ARTICLE CONTENTS

Yesterday, we took a look at the YouTube Gaming app (at least the creator preview). Navigating through the app, users will see several elements obviously informed by YouTube's existing design - the video player can be minimized and dismissed, the navigation model relies entirely on tabs, and getting users to discover more content is the name of the game. But the app branches off from YouTube's design and UX - and the design of all of Google's Android apps - in some really remarkable and unique ways.

For that reason, I thought it may be fun to take a closer look at the design of YouTube Gaming (Creator Preview). We'll pick out a few of the most interesting parts of Gaming's design, but if you haven't already I recommend downloading the app and checking it out yourself, too.
You're already watching

One new design element is sure to smack you in the face as soon as you open the YouTube Gaming app - video preview clips. Rather than relying solely on thumbnails, Gaming shows looping previews of promoted videos, making it feel like you've already started diving into content even if it's your first time opening the app.

Only time (and data that I'll never see) will tell, but if I had to guess, I'd say the move to animated clips of featured videos is meant to drive engagement. Picking thumbnails for YouTube videos is already a science, and it's probably one that can only be enhanced with motion.
Living tabs

But perhaps the most interesting part of Gaming's design is the tab bar. There are new patterns here that we haven't seen anywhere else in Google's portfolio, and which do a great job of building on Google's existing design language without breaking its aesthetic.

First, the tab labels. Designers have been debating forever whether text labels or icons are "better" for discoverability, UX, or just aesthetics. Icons save space and look pretty, but do they communicate actions or destinations clearly on their own? Text labels can communicate but they take up valuable space, and make localization that much harder. Having both, in the context of a tab bar, is virtually out of the question. Unless you do what Gaming does - transform between the two as the user navigates. Check this out:

The idea here is great, but what if it were reversed? Instead of leading with text labels, lead with icons. This gives a more minimal appearance, and when the user taps they get a more descriptive text label, a technique that might empower the user to explore further and tap some more things. Of course text labels will always be more explicit than icons, though.

There's more, though. Take a look at a channel or game page. The tab area doesn't just show the current page, but hints at content on adjacent pages, with about 24dp worth of content peering in from both sides. Just enough to, again, embolden the user to swipe or tap and discover something else to see.

Tiered toolbars

Even toolbars have unique behavior in the Gaming app. This is best demonstrated on the channel page. The primary toolbar is up top where it always is, but there's a second-tier toolbar with channel and subscriber info and the tab bar. But check out what happens when the user scrolls down - the tab bar overlaps the top part of the secondary bar and meets with the primary bar, shoving it off screen as the scroll continues. Structurally this is kind of fascinating. The content related to navigating the channel page (which you're doing while scrolling) stays available through the whole transition, while channel metadata and secondary actions are dismissed according to their relative importance. It seems like a small trick, but it's evident that a lot of thought went into this interaction.

Non-standard search

One odd quirk about YouTube Gaming is the search bar. On the main screen, there's a search bar embedded in the toolbar. Tapping it will open a full search bar (like the one used in Google Now and the Play Store) - which is a weird enough interaction on its own - but there's something off. Compare the two search bars below. The one on top is from Gaming while the one below it is Google's standard bar.

YouTube Gaming's bar is obviously non-standard. In fact, while the normal search bar is 48dp tall (the minimum size any touch target should be, since that's about the size of a human fingertip), the Gaming search bar maxes out at 40dp tall. It also has slightly smaller icons.

But look again at the search bar's "closed" state. It's actually even smaller than the open state, and its spacing from the edge of the canvas is also non-standard.

It's possible that the team wanted to just use a smaller bar for aesthetic reasons, which led to the various compromises outlined above. But why make the search bar such an odd size to start with? The answer is probably that it looked bad at the normal height. Here's what a 48dp tall search bar would look like in a 56dp toolbar with the avatar in the same place as it appears now (corrected for 8dp padding on the left). It's a little awkward.

The right answer here might be to keep the smaller open-state search bar, or it might be to take over the whole toolbar like many of Google's other apps do, though even that would be a less-than-ideal transition.
Mini-drawers on tablet

Those super awesome tabs we talked about a second ago? They're gone on larger devices, at least on the main screen. In their place, Google's implemented a really interesting new paradigm that I'm going to call mini-drawers. These are two translucent overlays that flank the screen. One for games and one for channels. They scroll up and down showing channel avatars or game box art respectively.

Your first thought might be "that's insanely distracting," and you're right! But Google has taken measures to reduce the distraction with yet another visual trick - desaturating all the content of the mini-drawers until you interact with them.

If you're noticing that the user avatar in the top right doesn't line up with the mini-drawer avatars, you aren't alone. If you weren't noticing it, I apologize.

The mini-drawers also force out the content peeking I mentioned before - channel pages have two columns per tab, but no hints on the sides. This makes sense, though - the peeking content under each mini-drawer would compound the already pressing issue of distracting visual information.

Of course the flip side of this loss is that you can access the channels and games lists from more pages in the app, so there are more opportunities to hop around and discover more content without going back to the main screen.

 

Final thoughts

The purpose of this post is to point out that YouTube Gaming's unique touches and new interface elements - while non standard - are a good thing. I don't think the app got everything right, but it does innovate and iterate on material design in new and interesting ways, and that should be celebrated.

In the same way that Inbox has innovated through the paper metaphor with beautifully expanding messages and that fun swipe-to-go-back mechanic, YouTube Gaming has introduced several new ideas that designers and developers can inspect, marvel at, and draw from in their own ways. Most of the new elements are gorgeous to look at, fun to use, empowering to users, and serve what I must assume is a main product goal (discovery and engagement) without being annoying. Any time you can check most of these boxes, I'll consider it a win. Plus, it's really fun to stare at gifs of a beautiful new app.