Few days back, I read an article on Android UI Patterns by Juhani discussing about the emerging Side Navigation UI Pattern on Android, and it is a pretty interesting topic. This new unofficial (yet?) building block for Android starting to make its way into more apps in the market, including Google+ official Android app. This Side Navigation (I will just stick with this term used by Juhani since there isn’t any official term for it yet) UI Pattern is an interesting design, especially on the phone that has smaller screen estate compared to tablet, but it can end up confuses, or even frustrates the user if it doesn’t get implemented in an elegant way, resulting in bad user experience for the entire app.

Inspired by iOS?

The official Facebook Android app has been using the Side Navigation pattern for quite some time, and that was my first experience with this new UI pattern. Well, I never been a fan of this app because it brought over too much iOS designs and patterns into it (it’s a direct porting), and this Side Navigation pattern is actually part of the bad porting. I always think that it’ll be great for all Android users if Facebook can re-design the app with Android ICS UI/UX, so I went ahead and made a very simple mockup of new design without the Side Navigation and personally I think it’s looking good with better Android experience.

Google+ Android app is most probably the first official Android app that uses Side Navigation UI Pattern, however, as mentioned by Juhani and Alexander Blom, they are doing it in a wrong way that destroys the great user experience and design introduced in ICS. First, they used the Up affordance to represent that Side Navigation Panel, which can confuse the user easily because it is used universally in ICS for navigation between sub-screen and main screen. User experience become even worse when the Up button in the Google+ app isn’t fully representing the Side Navigation; it works as Up button sometimes (Hangout and Local, for example). Well, look at the Google+ app on the iOS make me thinks that the Google+ team tries to unify the user experience for both platforms when they decided to scrap the dashboard style main screen (I like this one more actually).

Great examples of Side Navigation

Of course, Side Navigation UI Pattern isn’t a bad thing if it’s implemented in a proper way (clear and not confusing). Some of the apps in the Play Store have nice implementation of Side Navigation.

Evernote

Evernote for Android has an interesting implementation of the Side Navigation. The team didn’t use it only for navigation purpose, but it also contains some actions and sync status. I like the use of device vibration when the Side Navigation is opened or closed (some people might find it annoying though). However, there are still some room for improvement in my opinion, which I will discuss about it later.

Prixing

Although the app is in French, but Prixing has a very beautiful implementation of Side Navigation, with well thought user experience in it. I especially like the use of bezel swiping (swipe from the bezel to the screen) as the gesture to call for the Side Navigation because it doesn’t interrupt with the UX in ICS. The lead developer even sharing his experience in implementing the Side Navigation for the app, and these are just awesome stuffs!

Dolphin Browser® HD

Dolphin Browser HD is a great example that has a nicely implemented Side Navigation that enhances user experience. This app has the Side Navigation on both sides, which effectively maximizing the screen estate for browsing, while still providing quick access to Bookmarks and Add-ons. They are also using bezel swiping, which is well-matched for Side Navigation. I like the hint they provides during the sliding of the Side Navigation, and the use of shading on the main body when Side Navigation is fully opened.

Tips of using Side Navigation

Side Navigation does seems to be useful when your app have many different type of actions (eg. Evernote), or too many views (eg. Facebook), however, if you feel like using it mainly for navigation purpose (eg. Google+), Collapsed Tabs can be a good choice. This view control on the action bar has been used in quite a number of apps, for example Pocket (formerly Read It Later) and Google Map (shown above). It use a minimal space in the action bar, easy to understand pattern (Spinner-like behavior) and has great perceived affordance to the user.

However, if you still prefer Side Navigation, here is some tips from me that hopefully can enhance the user experience for this UI pattern:

Iconified Side Navigation panel

Instead of displaying the full menu with icons and texts, a Side Navigation panel with only the icons isn’t too bad, but obviously the icons have to be unique and easy to recognize, for example those in Google+ app. This way the Side Navigation only use up a minor portion of the screen and the user is still able to interact with the content in the main view. Besides navigation, I can imagine that it can be used for different options for some productivity tasks – it can show the text options during typing, or brush properties during sketching.

Good icon (or hint) for Side Navigation

The Side Navigation isn’t in the list of Android UI Design Pattern, therefore there isn’t any consistent icon to represent that panel, but please remember DO NOT ever use the Up caret like in the Google+ app, it doesn’t help in anything but end up confusing the user. I don’t like the usual icon used for Side Navigation (the three lines icon), for example, in Facebook, it totally replace the main app icon which remove the app identity. Juhani and Alexander Blom have some simple ideas on the icon for it, which looks fine, but I think they might have the possibility to confuse the user with the Up caret that is placed at the same location. I have a slightly different idea which can eliminate such confusion: to show the user there is a side navigation panel, a hint bar can be used on the side (shown above). Of course, some screen estate will be used by that hint bar, but it can be easily perceived by the user that there is something on the side while not being intrusive, and yes, it will have to be paired with the bezel swiping gesture.

Let the user know his current view

Most of the apps using Side Navigation are missing one thing: They didn’t tell the user which is his current view. Take a look on the one in Facebook app, once I open up the side navigation panel, I have no way to know which is my current view. My idea? An indicator and/or stand-out icon (shown above) will definitely help. It might not have a huge impact on the user experience, but sometimes all these tiny details matter to the user. Prixing development team did a great job implementing the arrow indicator, and I hope more apps that using Side Navigation can do the same.

Use shadow/shading to create perspective

The Side Navigation in Google+ and Reddit Sync, for example, are too flat, in my opinion. A little bit of shadow (might have a performance hit?) or shading can enforce perspective, so the user can quickly understand the layering sequence of all these views and panels. I have used Reddit Sync as an example in the above screenshot, does it looks better with the shadow (to show the user that the side panel is on top of the main view) and shading (to show that the user will not be able to interact with the main view)? Dolphin Browser HD and Prixing are some examples that are doing it right, and I think this is pretty important to enhance the user experience.

Use Bezel Swipe Gesture

In Ice Cream Sandwich (ICS), there is a Labs feature in the stock Browser app called Quick Control which make use of the bezel swipe gesture to call for quick menu, and I think the same gesture should be applied to Side Navigation UI Pattern as well. Besides that, try to avoid the use of the usual swipe gesture to call the side navigation panel, because it confuses the user since the left-to-right and right-to-left swipe gestures are usually reserved for view swiping. One of the example of such case is the Evernote app. The swiping works fine when you are in main page – All Notes page, but say if you are at Places, or Tags page, swiping from right to left will leave the user confuse with it because the scrollable tabs swiping are also in effect. If the app used bezel swipe gesture, this problem can be easily eliminated.

Conclusion

Side Navigation UI Pattern is interesting, but if only it’s done right and doesn’t confuse the user. Make full use of the Android UI Patterns to design an app with pure Android experience, it can become unique and beautiful! Sometimes you might have to ask yourself: ‘”Why fix something that isn’t broken?”

All the above are just my opinion and suggestion without any UX research involved, but I will leave the UX research part to the UX Award Winning Android Team to figure out what’s the best for the user.

8 thoughts on “Side Navigation UI Pattern in Android”

  1. Great article. I agree that this pattern is kind of in the wild west in-terms of standards and that a lot of apps, like Google+, seem to do it wrong.

    I have implemented a simple library that allows the developer to completely customize the way their navigation (I’ve been calling it FAN for Fly-in App Navigation) looks and acts. I have just handled the hiding and showing of the views. Developers can write the two UI’s separately and then use my FanView to bring them together.

    https://github.com/Gregadeaux/android-fly-in-app-navigation

    Reply

  2. Interesting article, definitely made me think. Never did like the FB side navigation, and was kind of disappointed when it showed up in G+. However, I have to disagree with using the bezel swipe for this. To me, the bezel swipe is more like a system gesture – a kind of super-app gesture. Don’t get me wrong, I loved the browser labs navigation feature (until I started using Chrome), but with the big screen of the SGS3 I recently got I needed some one-handed controls, and that included setting up my left border (as more than 60% of the time I use the phone in my left hand) with SwipePad actions (I really can’t comfortably press the home button on it without fearing for my device’s life, so recent apps & important apps/widgets are awesome to be just a bezel swipe away). I know it’s a special use-case, but there are other cases where bezel swiping is inadvisable (a lot of cases interfere with it, sometimes even the screen protectors do). For these reasons, I feel a bit leery of helping the bezel swipe become too prolific. It will probably end up frustrating users quite a bit, and that’s definitely not what we (developers and/or ui/ux designers) want.

    Reply

    1. Hi Ionut Costica,

      Interesting comment! You got some points there, but I still think Bezel Swipe is great for side navigation (or some other UI patterns) rather than a system gesture. As you mentioned, it’s a special case to consider for the gesture to use as System Gesture, but definitely it’s not part of an app designer/developer job to consider about third-party features, unless it is an official system gesture. This also applies to screen protector and case etc. Those are optional accessories which should not (or only minimally), in my opinion, considered and affects the app design.

      Another reason why Bezel Swipe is great for Side Navigation is the perceived animation of the fly-in panel. Most, if not all, of the apps that has Side Navigation have this slide-to-close animation when the user wanted to go back to the main screen, and I personally think that it’s pretty natural that the user should be able to open that panel again via swiping. But why Bezel Swipe? That’s because swiping left-right is a system gesture to change the tabs, therefore normal swiping won’t work well (look at Youtube app, it uses normal swiping, which can confuse the user because it does have swiping tabs in the app). Not sure if you are aware but Chrome actually has a bezel swipe feature to change tab, which is really useful in my opinion.

      I won’t say Bezel Swipe can solve anything for the Side Navigation, but I think it’s a start. Try Prixing and you know what I mean. Hard to please everyone though. 😛

      Thanks again for your comment!

      Rgds,
      Taylor

      Reply
  3. Pingback: Side Navigation UI Pattern in Android, Part 2 | Android User Interface | User Experience

    1. Hey,

      Nice work! Perhaps you can have a look at my suggestion for the indicator and see if it’s help to enhance this UI pattern?

      Thanks!

      Rgds,
      Taylor

      Reply
  5. Pingback: Haploid » Un slide menu sur Android ?

Leave a comment