Android: Emerging UI Pattern - Side Navigation

http://www.androiduipatterns.com/2012/06/emerging-ui-pattern-side-navigation.html

by sandipc • 14 years ago

99 35 14 years ago

alexlande• 14 years ago

It's funny, I didn't know that the Google+ app did this until I read the article. I always assumed that it was a back button.

RobAtticus• 14 years ago

I am actually not a fan of its use in the G+ app. I prefer the dashboard because it felt like there was a more defined separation between each part. I don't particularly like the new G+ look in general for the Stream since it feels like there is way too much going on, and I guess the menu just adds to that.

dsirijus• 14 years ago

Neither have I. That says much.

In general, I dislike having anything to interact with in upper left corner. Hard to reach.

talklittle• 14 years ago

This pattern comes from the official Android Design recommendations for Android 4.0: http://developer.android.com/design/patterns/multi-pane-layo...

It's clearly a way to adapt the tablet multi-pane paradigm to fit on small screens. Based on my Android experience, this unified approach requires a lot less work than maintaining completely separate layouts (and Activity design) for tablet and phone.

Zigurd2• 14 years ago

The death of the dreaded dashboard is very welcome, but "side navigation" is nothing but a half-baked transformation of the same idea into a pseudo-fragment implementation.

Google+ is a particularly bad example how to do this. The Google+ layout is much better than it used to be, but it needs a real two-fragment layout on large screens, which it still does not have. Why have a layout that is half-hidden on the right, especially on large screens when two fragments could easily be placed side by side?

Is is possible, even easy, to do a single code-base that "auto-magically" adapts to one Fragment object visible, or two, depending on the platform's choice of layout.

uwemaurer• 14 years ago

Lets hope there will be a good implementation which handles tablets and phone. According to the Android library stats this pattern is not widely used yet, or devs do their own implementation: http://www.appbrain.com/stats/libraries/dev

mrich• 14 years ago

Dolphin Browser also uses this to slide in the bookmarks from the left side and it makes for very rapid browsing - you don't even have to type in parts of Urls anymore.

TwoBit• 14 years ago

FireFox for Android has been doing this since I started using it two years ago.

tomerv• 14 years ago

I generally like the way Firefox implements the sidebar, but there's one problem with it - it doesn't work well with websites that expect horizontal gestures. For example, a drawing app wouldn't work very well.

zobzu• 14 years ago

Unfortunately they removed it in the Firefox Beta.

According to screenshots they might put it back but it's not there yet. That was my favorite feature.

Produce• 14 years ago

How revolutionary - a menu system with less horizontal pixels because you have another unusable screen being partially presented at the same time. Yawn.

eelco• 14 years ago

The partially unusable screen acts nicely as an easy to hit back button offering context about where you'll go back to. The spatial organization and animation showing the menu adds even more context, making this way of implementing a 'global' menu a pretty clever design all in all.

My only gripe with it that it might make it too easy to bring the complexity of big menus of the desktop to mobile device. As programmers we're (hopefully) all aware about the power and dangers of using globals.

tbergeron• 14 years ago

Good article but still I believe that this is far from innovative. What's wrong with dashboards? I mean why not take all the space when you've got something to present to the user?

The useless right part of the screen is a complete waste of space and looks totally weird.

I really don't like where the general UI concepts are going. Apple UX is now very discussable, Windows' tiles are a good idea but replacing the start menu with them is kind of a misstep... Argh I could go on for days...

Apple, what's happening with the futuristic look and feel? Why including leather in your calendar?!

AznHisoka2• 14 years ago

The blog described the problem. But basically, you have to click more to go to where you want.

Zigurd2• 14 years ago

The problem with dashboards is that they do nothing. Imagine slapping a dashboard screen on the top of the GMail UI: You would only interact with the dashboard to get someplace else. Ugh! A literally useless place. You always want to be someplace else.

The problem with "side navigation" is that it is only a visual change. It tantalizes you with the idea that you are someplace else, sort of, with a mostly-useless, partly obscured view on the right. Otherwise it is the same as a dashboard.

batiudrami• 14 years ago

As well as the comments below, side navigation allows a consistent UX between phones and tablets - just on tablets, the navigation bar is always visible.

needle0• 14 years ago

Doesn't seem to me like it's specific to Android. Facebook implemented the same thing in Android, iOS and mobile website almost simultaneously, and many iOS apps followed suit as well, eg. Sparrow, Path, Steam.

Also, a small gripe: with the Facebook iOS app, dragging the top-left menu button with your finger actually caused the side menu to follow exactly where you finger was, following the principle of Direct Manipulation (http://en.wikipedia.org/wiki/Direct_manipulation_interface). The Facebook app on Android and mobile web fail to do this, as with the many other apps mimiccing this UI.

xarien2• 14 years ago

Take a look at the now defunct webOS. Many of the newer UI enhancements are taken directly from it. I really wish HP went somewhere with it, but alas, it's just an extra boot option on my fire sale touchpad....

masklinn• 14 years ago

Doesn't this look a bit closer to W7P's navigation? I don't remember seeing that kind of interfaces on webOS (may have missed it of course) but having the "next" screen "leak" into the current one is a prevalent pattern of W7P, it's a major feature of "panorama" navigation[0][1] (and more toned down but still present in "pivot" navigation[1], where only the title/top of the screen leaks, but the content part isn't leaked)

[0] http://msdn.microsoft.com/en-us/library/ff941104(v=vs.92).as...

[1] http://msdn.microsoft.com/en-us/library/ff941098(v=vs.92).as...

untog• 14 years ago

As someone who went from pre-ICS Android -> WP7 -> ICS Android, I have to say that a lot of the new Android UI conventions seem to borrow WP's "horizontal pane" concept.

xarien2• 14 years ago

Take a look at the 3rd party (HP) Facebook app on WebOS.

AznHisoka2• 14 years ago

What's wrong with tab bars? I mean, most iOS apps use it and if you need more navigation items, you devote one tab for "More". the Android version of Instagram does this the right way.

snitko• 14 years ago

The difference is convenience. You don't have to reposition your fingers to access the menu. IMO, the best example of this UI pattern is Android Browser (at least on tablets, don't have an Android phone yet) - you slide your finger from either side of the screen and get a circle menu, which looks rad and is really much more convenient to use.

jcromartie• 14 years ago

The tab bar is pretty poor compared to this. You get 4 things and a "More" button, but what if you commonly need to access more than 4 things?

andos• 14 years ago

Pro: tab bars are modeless. Con: less content, more chrome.

Xcelerate• 14 years ago

Congratulations. You've re-invented the menu.

pixie_• 14 years ago

I like it. The hard menu button is unintuitive. Pressing it is always a last ditch effort to find something.

piyushco• 14 years ago

Well written article.

NirDremer• 14 years ago

sjmulder• 14 years ago

I’m actually really liking the new ICS-style action bar dropdown, like used in the Gmail and calendar apps. Seems to do roughly the same in a more consistent manner.

king_jester• 14 years ago

The upside to this approach is that you can still use the home as up behavior on a subscreen if you like. I don't see why the G+ app didn't do something like this considering there are only 6 main sections in the app and they continue to use home as up in some subscreens.

andreigheorghe• 14 years ago

Wasn't the Twitter for iPad app the first to come up with this pattern, in september 2010?

joelhaasnoot• 14 years ago

Played with that for just a bit, but that just has three different columns that scale and scroll, this is sortof a popover on the left side.

magoon• 14 years ago

Interesting how Windows Phone 7 and Metro are not mentioned anywhere, given their pioneering of this.

89a• 14 years ago

https://github.com/Inferis/ViewDeck

OpenSource Path 2.0 style menus for iOS

Android: Emerging UI Pattern - Side Navigation

Related Stories