Well, this topic might be a little bit old since the last bunch of discussions, but I still have a little bit more to talk about this UI pattern that I have missed in my last writing and also some new idea popping-up since last month.

I personally still think the Side Navigation (a.k.a Fly-in menu, Sliding Menu, Nav Drawer etc.) in Android is pretty interesting even though it is not a relatively new UI pattern – it allows a fresh (and better?) navigation style on small screen mobile devices, and it helps in efficient use of screen estate for content. A number of apps are already using it (each app has slightly different kind of behavior and interaction though) even though it is not (yet) an official Android UI Pattern, which is always great for Android development scene because innovation doesn’t stop at stock design/pattern. However, I really think it’s time to have some consistency and guideline for this UI pattern for better user experience because I can foresee more apps will be using this, only with different kind of behavior. Some of the official Google apps like Google+ and YouTube are using it mainly for navigation purpose, but unfortunately they are not good example since the Side Navigation implemented has different interactive behavior.   

More tips and suggestions

Some extra suggestions from me since the last one if you are looking into Side Navigation for your app:

Don’t confuse the user

This is like the #1 UX rule if you really care about the user. The latest update of Google+ app during the launch of Jelly Bean is pretty awesome, and I think most of the Android user will agree with me. The Card Style pattern (which is another interesting UI pattern) offers some fresh experience into social networking app, and the redesigned Side Navigation menu since the last one is great – but not the visual indicator for it. The Up affordance are still used for it, and it will further confuse the user with the Up affordance when there is already user confusion in Up and Back affordance in Android 4.0+. My suggestion: If you really have no better idea on the visual indicator, use an icon for it (eg. Facebook and Prixing), or just the app icon (eg. Evernote), but please do not use the Up affordance to confuse the user.

Bezel Swipe, please

As mentioned previously, I still think Bezel Swipe is a great match with Side Navigation. It is very easy to understand, and bezel swipe isn’t something hard to perform on a mobile device, though I would have to agree that discoverability might be an issue for it. Another reason that I think Bezel Swipe should be there – most of the apps that have Side Navigation, for example Google+ and YouTube, allow the user to touch and hold the main activity and swipe-closing the Side Navigation (try to hold the main activity and swipe to left side), and this user-perceived closing animation can introduce the user expectation of swipe-right-to-reveal gesture for Side Navigation. Try Dolphin Browser HD and Prixing, I think it is completely make sense.

Improve Discoverability (and create curiosity)

Well, this isn’t something new. Every now and then, there are new UI patterns and new user interaction invented in mobile apps. To make the user aware of your new UI patterns and/or user interactions, what you can really do is improve the discoverability of those new patterns. As I said, Bezel Swipe/Side Navigation might have issue in discoverability, so just don’t stop there after the implementation.

  • Introduce it in the first run tutorial and let the user play around with it.
  • Make the Side Navigation a little bit more obvious when the user first running the app – a great example for this is the Prixing app which make the Side Navigation panel ‘jump’ when the user first entering the app, creating user curiosity.
  • Use a good indicator to represent the Side Navigation.

They are not perfect solution for the discoverability issue, but those are some possible improvements.

New indicator?

After some suggestions in the previous post, I am still actively thinking for new indicator that can be used for the Side Navigation. Below are some of my new idea, what do you think?

Conclusion

I really like Side Navigation pattern and I think it is especially useful in mobile devices with small screen, but it’s pretty important that the user experience that comes with it has to be carefully crafted so it doesn’t cause user frustration and confusion. If you are looking for some reference while implementing, I strongly suggest you to look into Prixing.

For developers, if you are looking for library for this UI pattern, you must check out the SlidingMenu library by Jeremy Feinstein. It uses Bezel Swipe which I prefers a lot and generally it has quite some good reviews.

 

 

8 thoughts on “Side Navigation UI Pattern in Android, Part 2”

    1. Hey Juhani,

      Thanks! Indeed, my favourite goes to the first one as well. Hopefully someone can try to implement it in library and set a standard for this UI pattern.

      Rgds,
      Taylor

      Reply

  2. Great article, thanks for him and I look forward to the next. Examples show that you did not take me, I used the inverted triangle, the top left-aligned, that I think is a good style.

    Reply

  3. I love this “new” nav pattern however there are some issues that needs fixing for it to be fully compatible with Android navigational patterns.

    Issue 1: Should the Actionbar be static or should it animate with the content? Google is doing one thing in Youtube and another in Google+. If animating the whole page does this mean we can’t use the native actionbar?

    Issue 2: The up button is now used in several app to open the sliding nav. This is not the documented intention of the up button. I think your solution of designing the up button at root level an ok solution however it doesnt provide a solution where you want to be able to access the navigation througout the app and not just at root level.

    I really hope to see this pattern more and I hope we find good ways to iron out these few last issues.

    Reply

    1. Hey Joakim,

      In Android Design guideline, they recommend to use the Nav Drawer in the YouTube style, but really I am more preferred to the Google+ style. One main reason is that I do not like how the Up caret and the app title just disappeared like that to indicate the opened drawer.

      http://developer.android.com/design/patterns/actionbar.html

      About your issue 2, actually Nav Drawer UI pattern is meant for only at the root level. I know some apps are doing it different way (accessible anywhere), but I thought it doesn’t serve the purpose anymore, because really, Nav Drawer is a (new?) UI pattern to replace the Dashboard UI pattern.

      Rgds,
      Taylor Ling

      Reply
  4. Pingback: Anonymous

  5. I agree, I like it either, I think I saw it first time in Facebook or Google+ as far as I remember then it moved to be part of many other Apps main navigation, many experience are close to it, if you think about split-view in tablets even in iOS/iPad, application like Twitter on iPad has a left-menu that stick to screen, it’s seems that the dark-left menu keeps the navigation consistent and easier, this is remind me of obsolete-frames & web-browsing :-).
    Glad of your article, thank you very much.

    Reply

Leave a comment