Bottom Navigation : An Essential Part of Mobile Applications

Sep 06, 2019

Umesh Kumar

Architects realize that structure is more than great looks. Configuration likewise covers how clients connect with an item, regardless of whether it's a site or application. It resembles a conversation. Navigation is a discussion. Since it doesn't make a difference how great your site or application is if clients can't discover their way around it.

Why Is Base Route Significant?

Steven Hoober in his research of cell phones use, found that there was an interesting breakdown in terms of how individuals use their phones
49% used one hand
36% cradled their phone
15% used both their hands
While designing one needs to keep in mind that even though 40% use one hand the other user base number isn't very small either when transformed into hard numbers.

Another fact to keep in mind is that smartphone screen usage is not static. It is an ever changing number. People use their phone depending on the task at hand.

While interpreting this data a designer needs to understand just because one hand is being used, placing all functionality to the bottom of the screen will not help as the user might switch to cradling their phone. Also differing are the dimensions of every mobile phone, the use of landscape and portrait orientation and the limitations of this data.

Tab Bar

Numerous applications keep this standard and utilize the base route (a.k.a. tab bar) for the most significant application's highlights. Facebook makes principle bits of center usefulness accessible with one tap, permits fast exchanging between highlights.

3 Pivotal Minutes For Base Route Plan

Route is commonly the vehicle that takes clients where they need to go. Furthermore, base route ought to be utilized for the top-level goals of comparative significance. These goals requiring direct access from anyplace in the application.

Great base route configuration adheres to these three standards.

1. Show just the most significant goals

Utilize three to five top-level goals in base route. In the event that there are less than three goals, consider utilizing tabs.
Abstain from utilizing in excess of five goals in base route as tap targets will be arranged excessively near each other. Placing an excessive number of tabs in a tab bar can make it physically hard for individuals to tap the one they need. Furthermore, with each extra tab you show, you increment the unpredictability of your application.

On the off chance that your top-level route has in excess of five goals, give access to goals not canvassed in base route through elective areas.

Maintain a strategic distance from scrollable substance
In part shrouded route is an entirely evident answer for little screens you don't need to stress over the constrained screen home, simply place your route choices into a scrollable tab. In any case, scrollable substance is less productive, since you need to scroll once before you're even permitted to see the alternative you need.

"No longer of any concern" issue in Rookie Cam application for iOS.

2. Impart the present area

Neglecting to show the present area is presumably the absolute most basic mix-up to see on applications menus. "Where am I?" is one of the principal addresses clients need to reply to effectively explore. Clients should realize how to go from indicate A point B dependent on their first look and with no direction all things considered. You should utilize the proper obvious signals (symbols, names and hues) with the goal that the route doesn't require any clarification.


Since base route activities are exhibited as symbols, they ought to be utilized for substance that can be appropriately spoken with symbols. There are an all inclusive symbols that clients know well, generally those speaking to usefulness like inquiry, email, print, etc. Tragically "all inclusive" symbols are uncommon. Also, application creators regularly conceal usefulness behind symbols that are in reality truly difficult to perceive.

Past rendition of Bloom.fm application for Android, made it extremely difficult to comprehend current area for the client.


Abstain from utilizing diverse shaded symbols and content marks in your base tab bar. Rather utilize the application's essential shading to show the view in core interest.

Left: Different shaded symbols makes your application resemble a christmas tree. Right: Use just a single essential shading.

Pursue a straightforward rule tint the present base route activity (counting the symbol and any content mark present) with the application's essential shading.

Base bar menu in Twitter application for iOS. Messages view is dynamic.

On the off chance that the base route bar is shaded, make the symbol and content mark of the present activity dark or white.

Left: Avoid blending shaded symbols with a hued base route bar. Right: Use dark or white iconography.

Content names

Content names ought to give short and seriously definitions to route symbols. Keep away from long content marks as these names don't truncate or wrap.

Abstain from wrapping, truncating and contracting content marks.

Menu components ought to be anything but difficult to filter. Clients ought to have the option to comprehend what precisely happens when they tap on a component.

Target size

Make targets enormous enough to be effectively tapped or clicked. To figure the width of each base route activity, separate the width of the view by the quantity of activities. Then again, make all base route activities the width of the biggest activity.

Android rule proposes the accompanying measurements for the base route bar on portable.

Fixed base route bar on versatile. Units in thickness autonomous pixels (dp).

Identification on a tab

You can show an identification on a tab bar symbol to demonstrate that there is new data related with that view or mode.

Consider badging a tab bar symbol to convey inconspicuously.

3. Make route undeniable

Great route should feel like an imperceptible hand that aides the client along their adventure. All things considered, even the coolest component or the most convincing substance is pointless if individuals can't discover it.


Each base route symbol must prompt an objective goal, and may not open menus or other pop-ups. Tapping on a base route symbol should manage client legitimately to the related view, or revives the right now dynamic view.

Try not to utilize a tab bar to give clients controls that follow up on components in the present screen or application mode. In the event that you have to give controls utilize a toolbar.

Take a stab at consistency

However much as could reasonably be expected, show similar tabs in each direction. It's best when you can give clients a feeling of visual dependability by giving similar tabs in each direction.

Try not to evacuate a tab when its capacity is inaccessible. On the off chance that you evacuate a tab sometimes however not in others, you make your application's UI flimsy and capricious. The best arrangement is to guarantee that all tabs are empowered, however clarify why a tab's substance is inaccessible. For instance, if the client doesn't have disconnected documents, the Offline tab in the Dropbox application shows a screen that discloses how to have them. This component called "Void state".

Conceal it

On the off chance that the screen is a looking over feed, the tab bar can be concealed when individuals looking for new content and uncovered on the off chance that they start dismantling down attempting to return to the top.

The base route bar can show up and vanish powerfully after looking over.

Visual Delight

Abstain from utilizing parallel movement to change between perspectives. Progress among dynamic and idle perspectives should utilize a cross-blur liveliness.


Base route ought to be

Unmistakable and Well-Structured

Utilize three to five top-level goals and maintain a strategic distance from scrollable substance in base route.


Bar components ought to be anything but difficult to sweep and targets ought to be enormous enough to be effectively tapped.


Ensure that every route symbol lead to the best possible goal and utilize all components, including base route, over your application reliably.


Helping clients explore ought to be a high need for pretty much every site and application. The objective behind this minutes is to make a communication framework that normally lines up with the client's psychological models.

You're structuring for your clients. Continuously consider your client persona, consider the objectives they have when utilizing your application, and utilize your route to enable them to meet those objectives. The simpler your item is for them to utilize, the more probable they'll be to utilize it regularly.

Umesh Kumar