Shared publicly  - 
 
A (not so) new UI design pattern is emerging on Android. It is slowly replacing dashboard in many apps and seems to work nicely on Android as it does in iOS. I'm talking about the side navigation what we've seen on Facebook, Spotify and now on Evernote. What should this pattern be called? A side navigation, fly-in navigation, navigation drawer? Ideas?
47
24
Michael Babcock's profile photoFrans Thamura's profile photoAbhilash Kuduvalli's profile photoBaptiste Carlier's profile photo
55 comments
 
I'm curious to see if the updated G+ for Android will also follow this pattern as they do on iOS.
 
+Gyuri Grell I believe they will. I think dashboard has served its purpose and the critique of it's performance is causing people to rething solutions to the navigation problem. I think this navigation pattern could work on Android very well.
 
+Juhani Lehtimäki I'm in the process of redoing part of the CardStar app, and this is the pattern we're looking at to place an emphasis on the cards, rather than on the list of cards (as was done in the iOS version). Leaves a level of navigation out of the stack as well as allowing a swipe gesture (in addition to the button) to get to it quickly.
 
I don't know how to name it, but I definitively don't like it. I don't see any advantage, just a portion of my screen being wasted. In my Galaxy Nexus is acceptable, but in a Galaxy Mini for example it's probably worse.

Or maybe i'm wrong and it is the future and everyone loves it.
 
I think this design pattern is pretty nice. I am not sure how to reach it though? You will need a button to open the menu but usually you have the application icon on the far top left so there is no space their. Placing it inside the action bar as a regular action doesn't fit either.

Only having the menu available via swiping is a bit weak i think.
 
I love the feeling that you don't leave the current screen when accessing the navigation drawer. And it is a cool reminder where you've been. I'll definitely going to use it.
 
+Rafa Vázquez Sánchez Are you talking about the space that is used when the navigatio is open? When it is closed there's no wasted space.

+Michal Harakal Unfortunately no :( +Cyril Mottier said that he's working on a blog post about technical implementation so hopefully we have that soon.

+Moritz Post That's a problem. All the apps that use this now replace the app icon or use the app icon to open the navigation. It replaces the up button in the UI. I'm not fan of the up concept anyways so I really don't mind it being overridden. You are absolutely right that swipe only is not enough although it is a good gesture and users are probably going to use it a lot.
 
I'm not sure what is open and close :P I mean in the dashboard screen.
Anyway it feels odd. Looks more like a bug than a feature. Again, it's just an opinion, maybe I need to get used to it, don't know.
 
+Rafa Vázquez Sánchez :) I think this could be pretty nicely scalable to smaller devices too... really need to get me one of them wildfires or so to try these things.
 
Maybe we could see this new pattern as a dashboard... Instead of going to DashboardActivity, you simply open "this" to the left.

I guess that would not break the navigation icons...
 
As a developer, I find this to be a very compelling UI pattern - especially as it presents itself in Evernote. I would like to point out the difference between Evernote and other apps like Facebook. Facebook fills its side view with a fairly straightforward list view comprised of links to different screens. I would argue that this duplicates the functionality of Action bar tabs and nav drop-downs. In Evernote, however, we see a non-scrolling tray of information. It doesn't use the side view as a link list, but as an ever present , in-app widget with dynamic information and its own nav drop-down. I consider this to be an evolved form of the original UI pattern, and much more suitable for android.
 
I think it's quite innovative and nice. Usage will tell us if it's a good design pattern.
 
It would be interesting to see some implementation details. This feature is not implemented via the ViewPager imo.
 
+Moritz Post definitely not. It looks like it is simply activated via swipe gesture. It also appears to work alongside view pagers, with the ability to swipe only enabled on the leftmost view pager page.
 
how you could implement it... tap your phone on the side. Every phone now a days has the technology to read bumps. Tap it from the other side and it's gone.
 
I think the Bezel swipe is the strongest contender for the gesture to open it.
 
got a small phone, the slide navigation completely hides the relevant content. It reduces the loading/unloading of a dashboard. But at the same time, you load two fragments with only one visible.
 
I'd call it "distraction sidebar" because destroys the clarity of a screen. Especially in Evernote, the sidebar is draining focus because it's brighter and much more colorful. I hope we'll add it to the anti patterns.
 
+Markus Junginger You mean the part of the UI that still shows when the navigation is open? I wonder if applying a dimming effect to it would make it better...
 
+Markus Junginger I agree with the distraction part. I think the scope of these "sidebar menus" is to provide glimpsable content. You will want to jump in, select something and leave very quickly.
 
It might also have to do on how the sidebar menu is revealed. In the spotify app it uses parallax scrolling which feels very natural. If the side menu is just "glued" to the main screen it might feel a little awkward.
 
In a recent Android Office Hours +Reto Meier talked about Google moving away from the dashboard concept and moving do a Spinner in the Actionbar like Google Maps.

I really don't like the Spinner in the Actionbar but it does allow for the Up icon. I prefer this Slide Over Nav because it's faster and has more room for less common nav options.

I strongly recommend that anyone doing this make it accessible with a swipe action, but I think I would like it to feel the same as swiping between tabs. The swipe in Evernote is much slower than switching tabs.
 
This is an anti-pattern for me. The new Evernote app mixes navigation with actions in its sidebar. They chosen complexity and functionality over simplicity and clean UI that we have in true ICS apps (e.g. Gmail). This is the choice of geeks that is not good for common users.

Furthermore Evernote's UI only looks like ICS UI, but there are loads of small differences that make me fill uncomfortable all the time.
 
+David Shellabarger I would agree. Evernote's implementation is just a triggered slide animation, and I wish that it responded to touch like a viewpager does.
 
+Juhani Lehtimäki OK, I mixed it up. Evernote started with that expanded dashboard-like thingy on the left, so I thought it's the main screen and the tiny bar on the right is some content teaser. So, while my initial impression was wrong, it still confused me. It's not Android language.
 
I don't really like this pattern ... Most of the time you need to user to find it which is a bit anti-user experience...
Adding a button can help but you lose the Up button as you put it in the top-left corner normally.

Also as a developer, your app doesn't look like a tree of Activity but has a lot of loop. therefore cleaning the loop to have a clean back history becomes a nightmare ...

On the other side when it's really well done I can see the point. I've got to see a preview of +Cyril Mottier's version and it looks really nice and well implemented !

So mixed feelings about it
 
I'm in favor of using the spinner like Maps does. It allows for icon branding in the top left corner. Branding in iOS is generally centered in the top bar so it allows space for the menu/dashboard button on the left. It also makes sense to have the button there because that way it is not just left empty if there is no back button. Since that is not the case in android, the spinner just makes more sense visually.
 
How about Crap? I do not like This navigation. It sucks......
 
I keep trying to use bezel swipe, but it's not the most reliable gesture.

This fly-out nav seems to have replaced the More... in iOS as a dumping ground, and I still don't feel it fits in with Android.
 
I will need to live with it for a few days before I can form a thoughtful opinion. My first impressions; The transition to the expanded navigation view helps convey the purpose. I don't think of this is a replacement for a dashboard (term used here to loosely mean a navigation page, not strictly a grid of navigation icons), but rather think of it as a dashboard with a "peek" (peek-a-view anyone??) at where you are currently. I could see the same navigation view (sans the current peek) as the landing view for an app. Once you make your first navigation from the view you are never fully get back to the top of but rather get the peek when at the top. I see a need for improving / standardizing how the trigger for the navigation view is presented, something like an arrow that changes orientation when the view is open.
 
Is this only in the ICS version? Because I don't have it. From the comments though, I don't like anything that isn't obvious. That is one of my big complaints with IOS. You never know how to bring up a menu, if there is one. 
 
I don't like it and I think it's especially difficult on larger screens like tablets. What about landscape?

I also like the spinner navigation better as it's more clear and doesn't mess with the left icon, which is usually for navigating to the root of the app.

In a recent app we changed the "swipe panel" navigation on iOS to spinner navigation on Android and it works pretty well.
 
The big problem with this is the back stack.... How should I handle that? Once you have traveled through the different activities.. What will happen when the user press back button?

Should the whole navigation be kept or should he leave the app?
 
I think we should bring this discussion back now that the G+ app is using this pattern!

What does everyone think of the app using the "up" symbol for this menu? I'm against it myself and have possibly a better solution. Now that Android can add the "<" symbol automatically, why not make it so they can add an overlay with the three menu lines over the app icon when you go to the sidebar instead of up? Here's my extremely fancy mockup that I made in paint: https://plus.google.com/photos/109939184735417343526/albums/5746146012365135009?authkey=CK-Vmubs8KOGCA

Thoughts?
 
The Android Google+ navigation menu is an overlay that sides out and over the content , while the FaceBook and Evernote solutions slide the content over revealing the navigation menu. Still need to think about the appropriateness of using the up icon for this but at the least I think the up arrow (left facing, <) should change orientation (face down, V) when the menu is revealed.
Kun Li
 
What's the exact advantage from side navigation comparing with drop-down? I have been using the drop-down spinner in Gmail for a while and it's also pretty handy. It's also recommended in the Android design guide. I'm not sure if it will be replaced by side navigation eventually though
 
+Kun Li The side nav is much more flexible concept. It can incorporate global actions as well as navigation. It can also include much more information about the navigation like for example the notifications count in the G+ app. The drop down is basically a folder selector where it is a good component. But for example Google maps which uses the drop down for more complex navigation it becomes more fuzzy . I'd bet that the next release of Google maps moves to the side navigation especially for this reason.
Kun Li
+
1
2
1
 
I see. If they decided to use side nav to replace drop-down, they'd better integrate that into SDK. drop-down may be more fuzzy but much easier to implement.
 
I finally installed ICS on my phone and can see what this whole thread is about. At first I didn't care for it at all, but I'm getting over it. When I saw this pattern in G+, I thought it was hideous, because this replaces what used to be a full screen. As a pop-out menu, however, it seems to work.
 
i try evernote in tablet, the side nav gone, and side bar with icon in the right. the icons to small ... why?
 
+Frans Thamura Evernote is currently working on a tablet redesign to follow the phone design but it's not released yet. So the current evernote tablet design is still the old one.
 
i cannot wait what will evernote do... 
 
In palm Webos enyo framework, This UI element named Sliding Panels.
 
Necro the topic here, sorry, but I honestly prefer spinners for the initial launch (I agree with others that the list is hidden unless the user knows about it) but I love the sidebar for navigation once its open.  I think I'd simply much prefer a visible indicator that there's a hidden menu that can be opened.
 
Does somebody know if there is an implementation of the navigation bar with somethimg like viewpager like in yahoo`s wether app?

Add a comment...