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