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 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.
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!
- The making of Prixing #1: Fly-in app menu
- The making of Prixing #2: Swiping the fly-in app menu
- The making of Prixing #3: Polishing the sliding app menu
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.
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.