Home > Mobile prototyping > 5 must-know mobile navigation patterns

Looking for the perfect mobile UI pattern? Explore five awesome UI patterns and level up your mobile app design skills in no time!

What would we do without our smartphones? We’ve got an app for everything – from ordering our favorite cold-brew coffee, to complaining about shipping delays, to sharing our delight with said beverage with the online community. Our mobiles make our lives easier and more pleasurable. That is, when we can get around them alright.

Yes folks, we’re talking mobile UI patterns. A good mobile UI pattern isn’t just a nice to have, it’s what helps brands reach a wider audience, improve an app’s user experience, and gets you your morning coffee.

So, what’s the perfect UI pattern for your mobile app? Read on and find out! We’ve rounded up the top five mobile UI patterns, plus some tips on how to get designing them with prototyping tool, Justinmind.

5 must-know mobile UI patterns

The top navigation bar

One of the big challenges when implementing a successful mobile UI pattern is prioritizing content while maintaining an accessible and discoverable navigation system. A frequently-used solution for navigation is to keep it at the top. This is where users expect to find navigation and avoids it being overlooked.

Itemizing the main navigation items across the top of the screen, the top navigation bar comes from the classic desktop navigation system. Navigation bars appear at the top of the page but may disappear once the user scrolls down. This helps organize content to follow natural eye movement and decreases the cognitive load.

mobile-ui-patterns-top-navigation

Find out all about the top navigation bar and other navigation design patterns here

Hub and grid style menus

The navigation hub or grid-style menu – usually featured on the homepage of the app – lists all of your navigation options at once. To navigate to a new location, users return to the hub or grid menu, and then select one of the options listed there.

This type of mobile UI pattern usually takes up the whole screen and puts emphasis on the navigation, making it clear and and easy to interact with. This approach is also useful for displaying several links, such as within an eLearning app.

Download an example of this here.

mobile-ui-patterns-grid


Practice makes perfect. Try out these mobile UI patterns in your prototypes now!

DOWNLOAD FREE


Sticky navigation

Sticky, or fixed, navigation is a form of web or mobile navigation that is locked into place. This is what makes it accessible anywhere on the website or app, as the user scrolls through the page.

Sticky navigation usually comes in the form of a tab bar, presented as a selection of icons linked to other pages. It typically appears at the top (in Android devices) or at the bottom (in iOS devices) of the page. Similarly to the top navigation bar, it’s present on most pages within an app. However, unlike the top navigation bar, tab bars are always visible on the screen, independent of the user’s scroll.

Tab bars are well suited for sites and mobile apps with relatively few navigation options.

You can simulate this mobile UI pattern in your prototypes by using parallax features, creating a fixed position menu that will remain always visible on top of the screen when scrolling. Likewise, by using sticky elements on scroll in your prototypes, you will be able to pin an element to a specific location in your web or mobile prototype, so it is always visible as you scroll down.

 

mobile-ui-patterns-sticky-navigation

Expand and collapse behavior

When it comes to designing mobile UI patterns, one of the biggest challenges is space. And with much less real estate to play around with than on desktop.

Expand and collapse behavior is a creative way of saving mobile screen space. If screen space is scarce, a search box or navigation links at the top of the page can interfere with the user’s ability to get to new information quickly and may make the user work more than they signed up for – doom! Expand and collapse behavior is simple and easy-to-use, a space saver that gives you enough freedom to separate your app from others.

 

Accordions

If your app is content-heavy, you’ll need to be particularly smart about your navigation choices. If you need to present lots of navigation options, accordion navigation is the one for you.

Accordions are a type of expanding menu, hold the main navigation options neatly, hiding the detailed options and making them visible upon user interaction – out of sight, out of mind! This approach is best suited to content-heavy, browse-mostly mobile apps.

Expanding menus are great for informative content and/or tightly-packed interface designs. Within an expanding menu, you incorporate the toggle approach, in which the user can choose from a set of primary links, which ‘expand’ to reveal secondary links. When the menu is initially opened, sliding open from the hamburger menu icon, the user can clearly see all primary links. This pattern is not difficult to implement, allows you to include a lot of content, and is easy for users to navigate.

You can simulate an expanding menu with the toggle approach in your prototypes with the use of accordions. These provide multiple panes and display them one at a time, through expanding and collapsing behavior, as you can see in the example below. Download our example here.

The slide menu

The side, or slide menu, is nothing new: as Design Modo’s Nataly Birch explains: “various website designs and desktop applications include sidebar menus in order to make the user’s experience more convenient, and interface more comprehensive and user-friendly”. She goes on to add that although we usually see conventional horizontal mobile UI patterns, you can find examples of app designs that offer “amazing, aptly-executed side menus with great functionality and interaction” abilities.

You can download an example of Justinmind’s slide menu here.

 

 

Download Justinmind today and improve your app navigation with these awesome mobile UI patterns!

download-justinmind-prototyping-tool-banner

Emily is Marketing Content Editor at Justinmind

Add comment

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

Download Free