5 mobile UI navigation patterns for interactive prototypes
Five essential mobile UI patterns patterns that make seamless navigation a reality
When it comes to starting a prototype or designing your mobile app navigation with a tool like Justinmind, there are a few simple things to consider before getting stuck in. One of those simple things is mobile UI patterns.
UI patterns are employed to guide and aid users by creating a seamless experience by reducing friction and pain points. In practical terms, UI patterns are solutions to recurring problems. So it stands to reason that mobile UI patterns are there to help users on their mobile devices.
Since designers are natural problem solvers, here are 5 essential navigation patterns to consider before embarking on a mobile app prototype.
1. The Hamburger Menu
Whatever your thoughts are on the humble hamburger menu, those three little horizontal lines which sit comfortably in the corner of a mobile app are a useful method for hiding more advanced navigation settings in an effort to save precious mobile real estate.
Be cautious, however. In saving real estate, you may hinder a user’s experience because this innocent little menu is so nondescript that it can go unnoticed and those extra options you want to impress with will go unseen and hurt usability. So it’s best to avoid throwing any important call to actions within the hamburger.
If a crisp, minimal and clean interface with effective functionality is what you’re looking for, a striking color will make the hamburger menu stand out and put you in good stead.
Prototype mobile navigation patterns that work for users. Download Justinmind.
2. Bottom Navigation
Bottom navigation is exactly that – a useful row of navigation buttons found at the bottom of your screen. With a simple tap, users can intuitively explore and negotiate between top-level views.
Bottom navigation bars are especially effective when designing a mobile app. This UI design pattern allows users to hold their phone while using their thumb comfortably, requiring less strain and reducing the need to change the method of grasping the device thereby enhancing usability.
To reduce fatigue, most bottom navigation bars have between three and five destinations for quick access.
For example, Facebook uses 5 destinations in their navigation bar below. These buttons are persistent, which means they don’t change and are always present, creating consistency across the app.
Since bottom navigation requires just a single tap, it take less time and effort to use than a hamburger menu where more than one click may be necessary.
And if something takes a little too long or one too many clicks, this can result in the dreaded cognitive friction.
If you’re thinking of trying out bottom navigation in a mobile app prototype, check out Smashing Magazine’s golden rules first.
Get the most out of your navigation design with this run down of everything you need to know.
Cards are a brilliant UI design pattern and can really make your mobile UI pop as a result of their highly visual and customizable nature.
They come in all shapes and sizes and are a great way to showcase various elements such as text, a link or a photo in one place and have become very popular in mobile app navigation.
As content has become more compartmentalized and personalized over the last few years, cards have been proven to be a great way to aggregate individual pieces of information in one place.
In an effort to improve your UX design, cards can be personalized to display different content. Spotify makes excellent use of cards to group together pieces of content, as shown above.
Simply click and you’ll be taken to a new view with relevant information tailored to you.
Tabs are not too dissimilar from navigation bars when it comes to UI patterns. They share the same layout, that is to say, a tab will be a row of multiple options leading to different views.
Where they differ, however, is a navigation bar will contain options that are unrelated to each other.
For example, in a navigation bar you might have a home button, which will take you to the home view of an app. Next to the home button may be a search function or even a favorites button which will take you to those respective views.
Tabs on the other hand will often be related to each other and can be found at the top of the screen.
Apple’s App Store, to illustrate, uses a navigation bar at the bottom and the top employs tabs.
Within the Top Charts section of the App, a user has the ability to explore Paid, Free and Top Grossing tabs creating coherency and awareness of alternative views. Essentially, tabs are used to switch between alternative views within the same context.
Nick Babich over on UXPlanet has some great tips for prototyping tabs.
5. Gesture Based Navigation
Gesture based navigation enables users to quickly swipe in their desired direction to navigate through an app or perform a particular action.
As a UI navigation pattern, it has been around for decades but gestural navigation really gained traction among mobile app users with the advent of popular dating app Tinder. Swipe right, anyone?
Using gestural navigation helps to create a journey between different scenes within an app and gestures include touching and dragging, both horizontally and vertically, as well as zooming in and out.
The great thing about this UI design pattern is that it’s relatively simple to grasp for even the most inexperienced user as the gestures are often intuitive and only require a little experimentation to get right.
Consistency is key when it comes to UI design and seamless navigation should be a priority for any designer, no matter where they are in their design career. Our 5 must know UI mobile patterns will put you on the path towards creating an interactive prototype that is functional and follows those all important design principles.
- Banking app design: 10 great patterns and examplesThe growing importance of mobile banking app design brings with it the need for more engaging UIs so that financial institutions can stay competitive. If you’re wondering what constitutes a great banking app UI design, check out these 10 great examples.