
Android: Emerging UI Pattern - Side Navigation - sandipc
http://www.androiduipatterns.com/2012/06/emerging-ui-pattern-side-navigation.html
======
talklittle
This pattern comes from the official Android Design recommendations for
Android 4.0: [http://developer.android.com/design/patterns/multi-pane-
layo...](http://developer.android.com/design/patterns/multi-pane-layouts.html)

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.

~~~
Zigurd
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.

------
needle0
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.

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

~~~
eelco
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.

------
alexlande
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
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.

------
xarien
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
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...](http://msdn.microsoft.com/en-
us/library/ff941104\(v=vs.92\).aspx)

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

~~~
untog
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.

------
mrich
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
FireFox for Android has been doing this since I started using it two years
ago.

~~~
zobzu
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.

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

~~~
joelhaasnoot
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.

------
tbergeron
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?!

~~~
Zigurd
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.

------
sjmulder
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
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.

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

------
AznHisoka
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
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.

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

------
Xcelerate
Congratulations. You've re-invented the menu.

------
piyushco
Well written article.

~~~
NirDremer
+1

------
89a
<https://github.com/Inferis/ViewDeck>

OpenSource Path 2.0 style menus for iOS

