Designing your mobile navigation
When designing for mobile an appropriate navigation pattern needs to be established that is intuitive to the user and maintains a content first approach in a scalable manner. Today there are many ways to present navigational UI, taken from both the web and native mobile platforms. What’s important is maintaining a natural behaviour that is transparent in interaction and encourages usability.
Who will be using your navigation? New users, returning users, seasoned users… keeping your navigation accessible to everyone is key.
Designing for small screen devices where we are limited on space we want to saturate our users in rich content and traditional UI patterns try to solve this by minimising it’s impact on screen. However these patterns still come up with some problematic user cases. When considering the appropriate navigational UI its understanding what is optimal in its given context.
I am going to cover a few of the more frequently seen navigational patterns and how they are beneficial yet still provide some friction in usability.
Hamburger menu/ Android side drawer
This is likely the most common navigational pattern you will find as it is a go to for responsive web design whilst also becoming the native UI pattern for android and finding its place within material design.
This pattern is heavily used as it amplifies the available space on screen by hiding the menu entirely and providing a minimal design approach. It is also very scalable giving you the flexibility to add many navigation items in the side menu and if intended adding a second sub menu layer to this aswell.
By hiding the menu you are reducing the visibility of your products content under the assumption your users are aware of the Hamburger recognition.

If your user base does make the ‘Menu’ connection you are still limiting visibility of content by forcing user interaction to open a hidden menu and in some cases scroll to further hidden content. As a user progresses through this journey of side menu content there is no immediate visual feedback on your current location, no active states. You are forcing users to remember where they are and/or navigate back to the side menu this just provides an experience with hindering friction.
Whilst this is the material design pattern for android, as soon as we try and implement this to the IOS platform it can have negative affects as it sits in conjunction with native IOS navigation rules.

Doing so increases visual clutter on what should remain functional native controls, it begins to blur the relationship between icon, text and other functional elements on the same navigation bar. Before using this menu solution think about how you are presenting menu items, you will have higher engagement exposing menu items alternatively you can prioritise your content within the side menu to focus on product features.

Within material design
IOS Tray
The tab bar which has become native to the IOS platform is a lot more direct in user experience, it provides exposed access to your products content which shares a similar value of importance. Additionally there is some visual feedback for active/inactive states so a user can now identify their position which is easily recognised. This tab bar remains consistent across every view of the app giving a clear communication of context.

However, size is a factor of this navigation menu, unlike the hamburger, this has to forfeit real estate of your devices view port reducing the content that can be seen at any given time. Similarly, you can only fit a maximum of 5 menu items (following apples guidelines) before falling in to the same visibility trap as the hamburger. At any one given time you should only use a maximum of 5 menu items which will include an accompanying icon and description label. This is the maximum number that can comfortably sit together and not lose quality in size or impact the touch hitbox area of 44pt.
Gesture based
In addition to the solid navigation patterns undertaken by IOS and Android, as we develop smarter phones along with that becomes new ways of interacting with our devices. Apps are becoming more and more gestural relying less on the visual UI and instead relying on intuitive gestural commands such as swiping left, right, up and down for small tasks like scrolling and next page. These gestures have become embedded in our culture so much that it is now a universal form of communication that any culture can pick up, there is no language barrier in this visual communication.

Doing this removes any UI clutter to focus on core interactions that will define your product.
Conclusion
When designing your app, you should take a content first approach to establish your navigation pattern. Understand your audience, why are they using this app? What goals do they want to achieve while using it? If they fail at navigating or meeting those goals they will likely drop off. Make it easier to use with no friction in usability and you will retain users.

