Home > UI Design and Prototyping > 5 must know mobile UI patterns to consider in your next interactive prototype
Five essential UI patterns that make seamless navigation a reality

Five essential UI patterns that make seamless navigation a reality

When it comes to starting a prototype or designing your mobile UI 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 UI patterns to consider before embarking on a mobile app prototype.

1. The Hamburger Menu

The infamous hamburger menu. Some designers love it, others simply tolerate it (and a small number want to eradicate it from existence).

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 menu settings in an effort to save precious mobile real estate.

mobile-ui-patterns-hamburger

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.


Download Justinmind and prototype awesome mobile apps

DOWNLOAD FREE


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 you design an 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.

mobile-ui-patterns-bottom-navigation

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

3. Cards

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 design.

mobile-ui-patterns-cards

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.

4. Tabs

Tabs are not too dissimilar from navigation bars when it comes to UI design 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.

mobile-ui-patterns-tabs

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. 

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? 

mobile-ui-patterns-gesture-navigation

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.

Steven is the web editor at Justinmind

3 comments

Your email address will not be published. Required fields are marked *

  • Thank you for posting this awesome read with great images, totally agree with the gestural navigation part!

  • You seem to be equating iOS GUI patterns with MOBILE. They are NOT the same. The bottom menu on Facebook you display above is the iOS pattern, the layout and interface is not the same on Android mobile devices. Ditto, the use of tabs (actually, iOS calls them segmented controls, NOT the same as tabs.

    You might consider updating this piece to differentiate iOS vs Android UI patterns.

    • Chris, thanks for your insight. The functionality between tabs and segmented controls is strikingly similar & we appreciate the distinction! Always happy to take some advice and amend.

Download Free