Re-Imagining The Bottom Navigation Bar

Michael Barsky
Dec 24, 2019 · 5 min read

Inspired by Suchit Poojari’s article, Redesigning the bottom navigation for 2020, I have decided to re-evaluate the way we treat bottom navigation.

Bottom navigation iterations of Facebook

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.

Photo from UX Matters

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.

Diversity of Phone Sizes and Edges

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

Vertical Pop Up Side Navigation

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

Horizontal Pop Up Side Navigation

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.

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.

Reduced Horizontal Navigation

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.

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.

Center Navigation Drop Down

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.

Diamond Navigation

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.

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.

Condensed Fixed Navigation

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.

Concluding Thoughts

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!

The Startup

Medium's largest active publication, followed by +566K people. Follow to join our community.

Michael Barsky

Written by

Aspiring UX Designer and student at the University of Michigan. Content Creator @ Warner Music Group. Learn more about me at:

The Startup

Medium's largest active publication, followed by +566K people. Follow to join our community.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade