Introduction

This is the third part of our Essential Mobile Components series and we will be focusing on all the design patterns and user experience concepts around the Navigation category.

When developing a mobile application, there are some standard elements that are expected to be in place, functioning in a way that's intuitive to the user. It becomes counterproductive to divert from some best practices because it could cause confusion, making the user experience a hard one.

After a long time processing two books that changed the way we design mobile apps (Mobile Design Pattern Gallery, 2nd Edition & Designing Social Interfaces, 2nd Edition), we created a series of articles and resources for you to learn the fastest way possible!

Knowing that sometimes it's impossible to keep up to date with the latest trends in mobile design, we created a list of essential mobile components that you should use in when building your app.

We're going to be releasing them every week so stay tuned to and don't miss them!

Before we start thinking about navigation, we must consider the type and amount of data you want to display in your app. Don't forget you will use navigation to show and structure your data, that's why it should follow the information structure of your app and not the other way around.

Navigation

It's important to keep the best practices for navigation design to ensure that people will be able to use and find the most valuable features in your app.

Good navigation, like good design, is invisible.

We can classify navigation patterns in many ways, but for this post we followed this convention:

  • Primary Navigation

    • Persistent

    • Transient

  • Secondary Navigation

Primary Navigation Patterns

Persistent Navigation

Persistent navigation encapsules menu structures like Tab Menu or the List Menu. When you open an app with this type of navigation, you'll notice right away what are the options for the primary navigation.

Springboard

The Springboard pattern, sometimes also referred to as a Launchpad, was the most popular navigation design pattern since 2011. The design is a landing screen with options that act as launch points into the application.

One of the reasons it enjoyed popularity was that it worked equally well across platforms.

At the time, the general thinking was still in terms of OS agnostic designs that allowed for consistency and reuse. It was also popular because up to nine options (in a 3×3 grid) could be displayed, compared to the limit of three to five tabs imposed by iOS and Android tab bars. Also, by adding a paging indicator (the small dots at the bottom), designers could provide even more menu options.

This pattern is still widely used, both Android and iOS launchpads rely on this pattern to show all the installed apps on the device.

Cards

Card style navigation is based on a card deck metaphor, and usually includes common physical card deck manipulations such as stacking, shuffling, discarding, and flipping.

This pattern has become popular again with the release of Google Now, which stacks information rich cards vertically to display a long list of launch points into the app, or quick context based actions.

Other recent applications use Cards as the main way to navigate and interact with content. E.g. when you swipe a card down to remove it from the screen - a new card replaces it.

Other styles of card interaction include swiping left on the top card in the stack to skip the content; swiping right to move the content to a new pile, the ‘keep' pile, the most well know example of this style is Tinder.

Lists

The List Menu pattern is a similar pattern to the Springboard as each list item is a launch point into the application. Switching between modules requires navigating back to the beginning of the list in the same way that the Springboard pattern functions.

In a hierarchical app a user navigates by making a single choice per screen until they reach the desired destination. To navigate elsewhere, users must retrace some of their steps, or begin again from step one and make different choices.

Consider utilizing List Menus when the use case is navigating within a hierarchy.

Lists also work well for menus with long item names, and in cases where items need descriptions added to the item titles. Follow OS conventions for implementing this navigation pattern.

Gallery

The Gallery pattern displays live content such as news articles, photos, or recipes arranged in a grid format, a carousel or a slide show.

The Gallery pattern works best for showing highly visual content, where no hierarchy is implied, and content is frequently updated.

Tab Menu

Android, iOS, and Windows Phone each have their own specific naming conventions and design guidelines for Tab Menus. It is important to understand these, even if you choose to go in other directions in your design iterations.

In an app with an information structure, users can navigate directly from one primary category to another because all primary categories are accessible from the main screen.

Transient Navigation

Transient navigation has to be revealed in an explicit way through a gesture or tap. This is because of the change in screen size with smartphones, which have made designers to think "outside of the box", literally. These normally include Side Menus and other off-canvas elements.

Transient as a term means staying a short time, which is how the following navigation menus actually work. They are normally hidden until we make an action to reveal them; then making a selection and they disappear again. The two important patterns we'll look at here are Side Drawers and Toggle Menus.

Side Drawer / Side Menu

There are two styles of Side Drawers.

The first is an overlay, meaning a swipe or tap gesture will reveal a drawer that partially covers or overlaps the original screen content.

The second style is an inlay; in this case a swipe or tap will open a drawer that pushes the original screen content partially off screen.

The most popular orientation for the Side Drawer is on the left, but it can be on the right instead, or there can be drawers on the right and the left.

Toggle Menu

Like the Side Drawer, the Toggle Menu can be an inlay that pushes the content down below the menu, as with, or an overlay that appears as a layer above the content. It's a good-looking approach, scalable and user-friendly.

This pattern is not difficult to implement and allows you to keep your whole menu and for users to easily navigate with it.

The nice thing about the Toggle Menu is that it appears in place and keeps the users there, without the risk of disorienting them.

When to use them?

It's important to ask yourself these questions when deciding when to use persistent and transient navigation:

  • Is your application "flat"?

    Are the menu categories equivalent in hierarchy, and are there just a few primary categories (i.e., three to five) in the app?

  • Do your users need the menu to be always visible for quick access?

  • Do the menu categories have status indicators, like the number of unread emails, for instance?

Did you answer any of these questions with a yes? Then you'll probably need to choose persistent navigation.

Secondary Navigation Patterns

You can combine a primary navigation pattern with a secondary navigation pattern to help you better navigate the information structure.

The primary navigation patterns may also serve as secondary navigation patterns. It's common to see Tabs with Tabs, Tabs with Lists, Tabs with a Dashboard, a Springboard with a Gallery, and more.

Page Swiping

This pattern can be used to navigate through content in a fast and easy fashion by using the swipe gesture.

The important thing about page swiping is that the user knows it exists – i.e. That there is more than one page- most common way to communicate this information is via page indicators, which are the horizontal line of small dots usually placed near the top of the screen, although occasionally you may see these at the bottom of the screen. These dots that indicate further pages exist off-screen.

The card metaphor also works for paging. If the pattern is used in this fashion, partially visible background cards or pages prompt the user to swipe.

Scrolling Tabs

This pattern is useful when you need to display multiple categories or views within a specific module. Scrolling Tabs are usually thinner than standard Tab Bars since they don't necessarily touch targets and more often ask the user to swipe horizontally.

Don't use tabs for carousels or pagination of content as those use cases involve viewing content, not navigating between groups of content.

If you incorporate this pattern, make sure your design clearly indicates the selected tab.

Accordion

An Accordion lets the user see more information while staying on the same screen. In this way, it acts much like Navigation Tabs, as menu items are collapsed when a new panel is clicked.

Where Navigation Tabs are most often used horizontally, Accordion menus are usually vertically implemented.

Accordion menus can also function quite well as sub-navigation for a specific section of a website.

Final thoughts

We have learned a lot in our journey to develop great mobile apps and we aim to share all that knowledge (both design and technical) with the community.

If you are planning to build a mobile app, we suggest you to consider Ionic Framework.

Ionic is an open source front-end SDK for developing awesome hybrid mobile apps with HTML5, CSS and JavaScript, that's focused mainly on the look and feel and UI interactions of your app.

Check out all of our handy tutorials to learn the how to's of every major mobile capability (maps, geolocation, facebook login, form handling and validation, etc). You can also get inspired with our design inspiration section.

We also want to help you create awesome apps! You can find many high quality ready-made mobile templates covering most of the patterns mentioned above that will ease your pains and save you weeks of developing time so can you just focus on customization and the core value of your app.