Article

Jenny Stanley
Jenny Stanley 9 August 2021

Top 6 Basic Patterns for Mobile Navigation: Pros and Cons

There are many types of mobile navigation, and new ones are constantly created. In this article, we will discuss 6 of the most common types of mobile navigation found in an app and their advantages and disadvantages.

What is Navigation in App Design?

Imagine mobile apps are cities in the world and you (the user) are a tourist. Every city has its own culture, language, roads, and architecture that you might not understand. App navigation design is like a map or GPS that allows you to navigate those cities.

Good navigation design makes it effortless for you to move between the different screens of an app, it is intuitive and makes you feel in control the whole time, letting you know where you are going and where you are at all times.

Every app is different, so is every navigation. This article will discuss some of the most common types of navigations found in an app.

Types of Navigation

1. Menu

Designers have an additional problem when creating an app for a phone because of its limited screen dimensions. For this, they need to carefully think about how each pixel will be occupied.  A lot of apps contain multiple menus which allow you to access the different parts of an app. The more complex the app, the more menus it will have. Some of these menus are in the following.

1.1 Hamburger

You might have seen this menu many times on websites or apps without even knowing its name. It is usually found on the left top corner of the screen, and it usually appears as 3 lines stacked on top of each other.

Advantages

  • Over the years it has gained a lot of popularity, making it recognisable almost everywhere
  • It occupies a very small space on the screen
  • Allows you to hide large menus or primary navigation while being always accessible

Disadvantages

  • Even though it is widely understood as a menu, its shape might be confusing to some users
  • It takes one more step or action to discover that you must click on the icon first
  • It can be challenging to access on mobile screens due to its position on the top corner of the screen

UfR3Ok702vFLEz27UvZUle7OtfpCYsEbXAWwkNq2.png

1.2 Hierarchical - Dropdown

This type of menu is mostly common on websites, but it can also be used on mobile. It allows for multiple options to be found from a top tier menu on a single screen. This design requires a lot of planning and it is usually used to display sub-categories or sub-lists as a dropdown menu. You might find this kind of menu with a small icon of a downward triangle or arrow next to a menu label.

Advantages

  • It can offer countless options in one single screen
  • It does not have to occupy the whole screen

Disadvantages

  • Too many options or levels might make the interface seem very complex and frustrating

GediowPaUfw6F57NmfCyF3b02LK0sF14penZq7rn.png

1.3 Hierarchical – Full Screen

Essentially, this menu is very similar to a dropdown with the main difference being that each subcategory is shown on a different screen and it allows for more than one level. This type of menu is usually implemented in settings or configuration options.

Advantages

  • It is clearer than a dropdown and makes information easy to find if properly organised
  • Allows for multiple levels

Disadvantages

  • It occupies the whole screen and does not allow other content than the menu itself
  • Too many options or levels might make the interface seem very complex and frustrating

m779WRD9Jl28YB8ghLRKjdGMoF7D4At9fnvxNh0i.png

2. Tab Bar

Tab bars are a great alternative to a hamburger menu for mobile design, especially when you have a limited amount of high priority navigation options. They usually appear as a static bar at the bottom or top of the screen with either an icon or label for each tab.

Advantages

  • They are very intuitive and are a clear indicator of the user’s journey in the app. For instance, changing the colour when you are in the tab
  • A tab bar helps to bring consistency throughout the app
  • Immediate access compared to a hamburger menu
  • Friendly location when located at the bottom of the screen near your thumb

Disadvantages

  • They occupy more space than other navigation types like hamburger menus
  • A limited number of tabs can be displayed on a phone

kh6Qh6YSUCut9yF9QVlL8AKz6haXUdYJqBck0qsg.png

3. Tabs

Tabs play a similar role as a tab bar. However, there is the main difference that the content of tabs is in some sort of way related to each other or at least part of a common category

Advantages

  • Help organising similar content
  • Universally understood
  • A convenient method of adding additional content

Disadvantages

  • Hard to give the third level of navigation
  • A limited number of tabs can be displayed horizontally
  • Content is hidden within tabs which might be overlooked by the user

qAdfkLxvJLVpbf5MCspL7u7abkOHXGxlLnl9ATn8.png

4. Gestures

The lack of space on the screen of a phone is compensated by the gestures that can be performed. As technology evolves, more gestures are introduced into mobile devices. Some examples of these gestures are swiping, double-tap, pinching, rotating and 3D touch amongst others.

Advantages

  • Enhances interaction and replaces actions such as scrolling through a page which would not be possible without a mouse or keyboard
  • Reduces the use of buttons in some instances such as moving through different pages, images, lists and similar
  • They have become a standard making it easy for people to recognise instinctively
  • Once learnt, increases the ease of use of the app
  • Can be implemented creatively in numerous ways
  • Can be implemented to enhance the actions of other navigation buttons such as a back button by swiping right on the screen 

Disadvantages

  • Most of them would require prior explanation to establish a relation between gesture and function
  • When overused might be difficult to implement
  • It might be difficult for some users to perform certain gestures

VYRqsOsrNXk2SBBMyjllPzdoaQdTV4FkCfLh68Gj.png

5. Back Button

This is an essential button in many apps, and it is usually located on the top-right part of a screen. The idea behind a back button is simply to take you back to the previous screen you were at. This is extremely useful, especially in large applications which contain several sub-categories.


Qe5dzzurqatJfacK070yP1ZwViu5uV367nbGUJhF.png

6. Close button

Close buttons main purpose is to cancel actions. They are typically used to cancel searches, filters, pop-up windows and more. You can usually find this button in the right corner.


kCziAndnKSThcJf6uMVEt731QhzxxJ4zuQy6ogdM.png

Important Things to Consider

For every type of navigation that is implemented in an app, there are several things that should be considered.

  • Navigation should be clear by making use of layout and pattern principles
  • The design should be made considering human-computer-interactions making it as intuitive as possible
  • Every element should be concise and straightforward using meaningful labels and having the right number of options
  • Make sure the navigation’s structure is clear and its flow is consistent

Conclusion

There are many types of mobile navigation, and new ones are constantly created. When deciding which navigation elements to use, a designer needs to weight the advantages and disadvantages of each element against the needs of the app whilst creating an ultimate user experience.

If you have any questions or need help with a project, feel free to reach out. We are a world-class web design agency that specialises in high-end web design and creating websites. We create designs of all shapes and sizes, from small sites to large e-commerce sites, but all with the same level of passion and skill. We connect brands to their audiences in today's world.

Please login or register to add a comment.

Contribute Now!

Loving our articles? Do you have an insightful post that you want to shout about? Well, you've come to the right place! We are always looking for fresh Doughnuts to be a part of our community.

Popular Articles

See all
New Research Reveals Content Marketers’ Biggest Battle

New Research Reveals Content Marketers’ Biggest Battle

A crucial step in the journey to content marketing maturity involves converting senior management enthusiasm into an in-depth understanding of the benefits of a strategic approach, and what is required to establish one.

Michael Nutley
Michael Nutley 27 September 2021
Read more
7 reasons why social media marketing is important for your business

7 reasons why social media marketing is important for your business

Social media is quickly becoming one of the most important aspects of digital marketing, which provides incredible benefits that help reach millions of customers worldwide. And if you are not applying this profitable...

Sharron Nelson
Sharron Nelson 6 February 2018
Read more
Top 10 B2B Platforms to Help your Business Grow Worldwide

Top 10 B2B Platforms to Help your Business Grow Worldwide

Although the trend of a Business to Business portal is not new but the evolution of technology has indeed changed the way they function. Additional digital trading features and branding has taken the place of...

Salman Sharif
Salman Sharif 7 July 2017
Read more
The 3 Most Important Stages In Your Presentation

The 3 Most Important Stages In Your Presentation

If you want to deliver a presentation on a particular topic and you have to prepare yourself for it you should make sure that you go through several very important stages in order to craft a compelling, persuasive and...

Nicky Nikolaev
Nicky Nikolaev 16 February 2016
Read more
How Can a Virtual Shopping Experience Ramp Up Your Festive Sales?

How Can a Virtual Shopping Experience Ramp Up Your Festive Sales?

Virtual shopping experiences – a perfect blend of the offline and online world – has made last-mile delivery possible to locations where no stores were giving the product demo.

Sukhdev Singh
Sukhdev Singh 13 October 2021
Read more