Navigation drawer
The navigation drawer design patterns is widely used today. We initially noticed it as a sidebar navigation in the YouTube app, LinkedIn mobile and the Facebook app. Gradually Google updated almost all their mobile apps to equip it and today it feels like every second app utilize it.
The navigation drawer pattern is a great solution in a user interface that has more than three top level views and so the action bar is too small to be used.
One special thing I found most valuable in the drawer design template is that design is almost identical when utilized it for iOS and Android. You can finally have a single design that works well and well understood in both platforms.
Navigation drawer is finally a standard
By June 2013, Google introduced a new set of guidelines for the Android navigation drawer in an attempt to put an end to confusion and endless variations. The most confusing UI element was the “Up” button that was interpreted differently in each application. The same “Up” button sometimes opened the navigation drawer, sometimes navigated to a page in higher level hierarchy and sometimes took you to the previous page visited. Google defined a drawer indicator next to the app icon that distinguish a drawer open action from an “Up” action.
Navigation drawer template for Axure
I am sharing here an Axure template for navigation drawer based on the latest Android standard. I was trying to make it “light” as possible so it will work fast and smooth even when testing it on an old mobile devices. In order to achieve that goal I used an iFrame widget that reflects a single active page one at a time (eliminating the use of multiple, heavy dynamic panels) and also used the “Crazy flicker” technique to monitor page changes.
You will find it easy to add and edit new pages into the prototype and easily define action bar title and drawer indicator behavior.
Things to know
In order to efficiently use the template you should first get familiar with these: Axure sitemap has a “Desktop view” page and a “Mobile view” page. Use the URL to “Mobile view” in order to view the prototype on a mobile device and open the “Desktop view” when watching it on a desktop…Each page added under the “Mobile view” should be configured inside a special dynamic panel named “iHandleJumps” that can be found inside the “Mobile view” page.Each page added under the “Mobile view” should also have an OnPageLoad interaction that sets a value to define the action bar title text (parameter name: ‘ActionBarTitle’) and another parameter should be set that defines the drawer indicator symbol – having a carat or a three bar shape. (parameter name: ‘ActionBarState’)Transition from one page to another is made by setting the target page name value into a third, global parameter named: ‘JumpToPage’ See the exampes in the RP file.
