Back to top

Android Material Design: 4 Navigation Principles you need to Know

While commuting from your home to workplace and back, if you’ve observed yourself, you would have realized that your maneuvering is sort of automatic. You know the travel path, every turn, every bump, every lights and their duration, and so on. Your maneuvering is easy because your navigation is clear and set.

The same is true with mobile app navigation. Effective navigation are ones that do not take too much of a mental effort of users when they move from one screen to another to accomplish their task. It’s like letting the users know in advance about every turn and every bump even if they are using your app for the first time.

The ultimate goal of a navigation in an app is to seamlessly guide users through in achieving their objective. It should be fluid, not complicated. It should be intuitive, yet predictable.

Irrespective of the platform you are working on, navigation plays a crucial part in the entire mobile app development process. Android Material Design has a wealth of information on navigation that is helpful for both developers and the app owners.

Different types of Navigation

Generally, on an app’s information architecture, users tend to move in one of these navigational directions.

  • Forward navigation
  • Reverse navigation
  • Lateral navigation

Forward Navigation: Is a method of navigation where users move between screens at continuous levels of hierarchy or through a flow. The behavior of forward navigation is embedded into elements such as buttons, links, containers (like cards, lists, images), or through search.

The below example demonstrates how a user is guided with forward navigate to find a particular song.

You allow the user to navigate by two ways:

1 Hierarchically from a music album to a song, or

2 Search for the song, bypassing the hierarchy screens

Reverse Navigation: As the name suggests, you navigate backwards through either chronologically (within one or across different apps) or hierarchically (within an app).

You allow the user to navigate:

1 Back to song’s parent, or

2 Chronologically to the Search (if that is how the user had navigated to the song)

Lateral Navigation: This refers to moving between the screens at the same level of hierarchy. Here, the app primary navigation component should provide access to all destinations at the top level of its hierarchy.

Forward navigation

In the forward navigation, you will guide the users from higher level of hierarchy (a parent screen) down to the lower level (a child screen). It could be from the top-most level of the hierarchy to lowest level.

Contrary to the lateral navigation, which uses dedicated navigation controls, the forward navigation is embedded into the screen’s content through a variety of components.

You can implement the forward navigation using the following components:

  • Buttons that take users to another screen
  • In-app search (on one or more screens)
  • Links
  • Containers (such as cards, lists, or image lists)
Reverse navigation

In reverse navigation, the users are guided either chronologically backwards to the recently viewed screens, or upwards, as they call it, through the app’s hierarchy. In this type of navigation, you can take users between different screens within an app, or across multiple apps. The back button on a web browser is a good example of reverse chronological navigation.

When we say upward navigation, it means that we lead the users one level up in the app’s hierarchy until the top level (or home) screen is reached. However, the upward buttons are showcased differently in Android and iOS.

In Android and web apps the upward navigation is presented as shown above.

However, in iOS, the upward navigation is shown like this.

While optimizing reverse navigation there are certain considerations to be upheld.

  • Provide clear messaging when a screen’s prior state is either changed or is no longer available. For example, the information on a form is cleared for privacy reasons
  • Help users identify the Parent screen. When a user moves to the child screen they should be able to easily identify the parent screen to which they can navigate upwards. To put it simple, clearly indicate the child screen’s relationship with other screens above.
  • In order to speed up the information recall, return users to their prior screen position and     state (such as their vertical scroll position).

Lateral navigation

As mentioned earlier, a lateral navigation is when you allow users to move between different screens at the same level of hierarchy, while enabling access to other app destinations and features.

Developers might ask at which instance they can implement lateral navigation. The lateral navigation can be provided when the app has two or more top-level destinations, and it can be provided through:

  • Navigation drawer
  • Bottom navigation bar
  • Tabs

The below table explains it much better.

Endnote

Material Design is aimed at helping developers and designers to strengthen and support the app development processes through a series of best practices adhering to the set guidelines of a specific platform. Apple (iOS) and Google (Android) have their own material design guidelines to help developers.

If you are interested in knowing iOS design guidelines, here’s a detailed article on design guidelines for developing apps for iPhone X.

Images Source: Android material.io

Post a Comment