Inspired by Suchit Poojari’s article, Redesigning the bottom navigation for 2020, I have decided to re-evaluate the way we treat bottom navigation.
The importance of the bottom navigation bar
The bottom navigation bar breaks an interface into its core components and allows users to quickly and easily toggle between high-level functions. Its easily accessible and comfortable location makes it incredibly pervasive on mobile applications.
The current state of the bottom navigation bar
While the bottom navigation bar is incredibly useful, the sheer diversity in device size, shape, and edges makes it very difficult to design a uniform bottom navigation bar.
As Poojari puts it, the problem is “that designers, as well as developers, would/are facing is the different corner radius and bottom chin of the devices.”
With all of this in mind, how might we redesign the bottom navigation bar to accommodate for the increase in device diversity?
Bottom Navigation Bar Exploration
I created 6 different iterations for what the future of the bottom navigation bar could be. I used the Facebook app when creating my mockups as it is commonly used and has 4 key functions (generally navigation bars have between 3–5).
The Vertical Pop Up Side Navigation
The Vertical Pop Up Side Nav relies on a single icon to show more options. It can be fixed to either the right or left side of the device depending on which hand the user prefers.
The floating icon would change depending on the page the user is currently on. For example, if the user is on Notifications, the floating icon would change to the Bell icon. Its fixed location slightly above the bottom edge accommodates any device type.
The Horizontal Pop Up Side Navigation
The Horizontal Pop Up Side Nav also relies on an icon to open up more options. The open nav does not span the full screen to accommodate for all device types.
This iteration provides slightly more space to view content and is similar to existing interaction patterns. This should make it easier for new users to adjust to this navbar.
Reduced Horizontal Navigation
This design is based on Pinterest’s beta version navigation. The interaction patterns are the same, but the goal of this iteration is to show their concept could be applied to other applications.
This design condenses the navigation more toward the center which accommodates any device size. When a user scrolls down the navigation disappears allowing them to see more content. When they scroll up, the navigation bar re-appears and users can dive into any function.
Center Navigation Drop Down
This design relies on a centered icon to display more options. Upon pressing the icon, the entire navigation window opens and is fixed on the scroll.
Having one icon slightly above the rest is a salient design choice to show the user where they are on the interface. From a development/design standpoint, it fits slightly more content on your navigation horizontally. The icon in the center is relatively small, so it shouldn’t distract too much from the page content.
The diamond navigation bar has a central icon that folds out similar to the way people navigate on a game controller. While this interaction pattern is slightly less space-efficient, it does easily divide up the content.
This iteration is more playful which could make it useful for entertainment applications. For apps like Facebook or Instagram, I am not sure how productive it would be.
Condensed Fixed Navigation
This navigation option is most similar to the traditional bottom navigation bar. However, the content is slightly more condensed to the center of the page, accommodating any device shape.
Due to its similarities with existing navigation bars, this would be the easiest adjustment for users. The rounded edges also make the application feel more friendly and organic.
2020 could be the year where we change the traditional bottom navigation bar. Although the existing iteration is very strong, new design choices could improve the overall user experience and make it far easier for designers/ developers to create uniform navigation.
This was a preliminary exploration of how might we improve the bottom navigation and I encourage you to try some iterations as well. Please let me know your thoughts on which navigation style you like the best!
Thanks for reading!
I am a student designer with a lot to learn! Any insights, differing opinions, or expert advice is always welcome. I am always open to having a dialogue with others and recognize that I am not an industry expert just yet. Thanks so much for reading!