What exactly is the deal with slide-out sidebar navigation? Is it a standard Holo thing? Is it not? 3rd-party developers aren't really sure what to do with it, and even Google-made apps are all over the place. Some apps have sidebar navigation, some don't. The ones that do have it all function a little differently and none of the implementations were actually any good - until now.

Google Earth and Google Shopper were just updated with a new sidebar design, and, well, have you seen them? Google has fixed the biggest problem I have with all the previous designs: unpredictability.

In order to understand what's so great about the new design, we have to talk about what's so crappy about the old designs. In order to do that, we're going to need some vocabulary:

The Old Up Button

wm_2013-05-09 18.51.58

This thing is called an "Up" button. Yes, I know it points left; it's still called the "Up" button. It's Google; just go with it.

The design doc for the Up button is right here. If you do read it, be sure to promptly forget everything, because, in the real world, this page is completely ignored.

If a screen is the topmost one in an app (that is, the app's home), it should not present an Up button.

The system Back button is used to navigate, in reverse chronological order, through the history of screens the user has recently worked with. It is generally based on the temporal relationships between screens, rather than the app's hierarchy.

Yeah... that sort of happens, but lately, instead of hiding the Up button at the top level, Google apps (and some third party ones) show an Up button that opens a slide-in navigation panel. It looks like this:

wm_2013-05-09 18.52.03wm_2013-05-09 23.25.43wm_2013-05-09 23.26.10wm_2013-05-09 23.26.21

These are neat looking, and useful, but really confusing for most users. The Up buttons go back, until you hit the top level navigation, at which point they pop open the navigation panel. From here things diverge depending on what app you're using: notice all the different Up button states (carat/no carat) in the above screenshots.

Once the panel is open, the YouTube Up button won't do anything. It doesn't show an Up carat because it's not a button anymore. This is in contrast to Currents and One Today, which don't show an Up carat, but are still buttons. Tapping on them will close the panel. Google+ always shows an Up carat, and, when open, will close the panel.

wm_2013-05-09 18.51.58wm_2013-05-09 18.52.14

The biggest problem though, is you just never know what the Up button will do in these apps. In these screenshots, one of the Up buttons will go back, and one will open the navigation pane. They do 2 completely different things, but aren't differentiated in any way. Good luck keeping straight which does what.

The New Up Button

Screenshot_2013-05-10-00-15-16Screenshot_2013-05-10-00-16-42wm_2013-05-09 23.41.54 copywm_2013-05-09 23.45.34 copy

This is the awesome, new design Google has come up with for Earth and Shopper. A simple, three-line icon replaces the Up carat when the sidebar will open, and magically, all the unpredictability issues go away. When it points back, it will go back, when it looks like a menu, it will toggle the menu. Brilliant.

This also has the bonus addition of adhering to the design docs. At the top level, no Up button is shown.

The Old Slide Gesture

The other problem with slide out navigation is the swipe-to-open gesture. Apps that only scroll vertically, like YouTube and One Today work just fine - a side swipe opens the menu; no problem.

But what happens when your app scrolls horizontally? Well, everyone's been handling that a little differently.

wm_2013-05-10 11.29.28wm_2013-05-10 11.31.18wm_2013-05-10 11.31.42

There's Google Currents, which uses a swipe gesture to scroll pages horizontally, until you hit the last page on the left, at which point a swipe will open the navigation menu. You can only open with a swipe when you are on the leftmost page. So, in order to know what a swipe will do, you need to have a perfect model of the apps navigation layout in your head. In the above pictures, a scrolling left from the "Entertainment" picture will scroll over, while scrolling left from the "News" picture will open the navigation panel, because "News" is the leftmost page. You need to remember that.

The other crazy thing is that, from the "Entertainment" page, you can use the Up button to open the navigation panel, swipe to close it, but then you can't swipe to open it again. Madness.

Update: Here's a perfect example of just how confusing inconsistent design can be: I screwed the Currents description up a bit. Currents can open the side menu from a swipe on some screens, it's just a much, much smaller than normal target than something like Chrome, or even Currents when you're on the left page. There is a one-pixel edge on the side you can swipe in from which will open the menu. This doesn't work in news sections, though.

What confused me, is that on the left most page, any left swipe, from anywhere, will open the side panel. So, since I don't really use Currents, this is just how I assumed it worked everywhere. Having  on type of swipe open it on one screen and another type of swipe on it on another confused the crap out of me.

wm_2013-05-09 23.26.10wm_2012-06-06-16.20.49

The worse offender of swipe-to-open is Google+, which won't let you open the navigation panel with a swipe gesture, but will let you close it with one. The real kicker is that Google+ only scrolls vertically. My head hurts.

The reason for the lack of swipe-to-open? The old Google+ design, the one that introduced the side navigation panel, scrolled horizontally. When they redesigned it to scroll vertically, they never added the swipe-to-open gesture.

The New Swipe Gesture

Shopper and Earth fix this mess, too, even on apps that already have a horizontally scrolling view. Google Earth is particularly impressive: it scrolls up, down, left, and right, and has a horizontal swipe gesture. "How is that even possible," you ask?

wm_2013-05-10 12.09.49wm_2013-05-10 11.53.24

Have you ever switched tabs in Google Chrome? Swiping in the middle of the screen will scroll horizontally, but swiping from the edge will switch tabs. That's the model Shopper and Earth have adopted, and it works brilliantly. Shopper even adds the bonus feature of allowing you to bring up the navigation panel from anywhere in the app with this gesture, even in places where the Up button would go back.

Conclusion

Have you noticed the sections in this article about the inconsistent, old designs are really long, and the sections about the new designs are really short? That's a hallmark of a good user interface: consistent, intuitive designs don't take much explaining. They work how you expect them to work. They make sense.

Google has a winner here. Shopper and Earth have side panel navigation designs that no one has come up with before, but seem blindingly obvious after you use them.

So, the big question here is, is this a new design Google will be pushing out to all their other apps? We've heard rumors of a Gmail redesign featuring a sidebar, which hopefully means Google is looking to finally make this a standard thing. Let's hope this is the design that sticks, because it is so, so much better than the rest of the stuff out there. I would love to see all the Gapps outfitted with a something like this. And with these updates coming so close to Google I/O, let's hope for an easy, plug-in template Google can give out to 3rd-party developers, too.

Googler Updates!

After this post went up, Android Engineer Dan Morrill (go join the fan club) dropped a big hint on G+ that this new drawer just might be a standard thing from now on:

2013-05-10_14-30-21

He also says in the comments that the action bar should not slide, which means the Google+ app's days are numbered.

Another Update: Now we even know what I/O session this will be in! Android UI developers Roman Nurik and Nick Butcher will be talking about this new drawer design at Android Design for UI Developers. Be sure to tune in! I/O is only 5 days away!

Thanks to XBIRDIE98 for the tip. <3