It’s been proven as apps have shifted away from the ‘hamburger’ navigation, to a bottom bar, engagement and browsing metrics have increased. Over time these findings have an impact on the thought process of those designing websites. I’ve detailed a list of websites that are using the tab bar navigation.
Why the change?
Usability research posts have found it improves engagement and exploration of a website. Which is something most people want to improve1. In apps this has more freedom for implementation, it’s long been part of iOS and as of more recently Android.
However, it still remains elusive for websites in the sense of the way it’s implemented in apps. It’s usability could be better on iOS and the potential clash with other UI elements can make it more difficult to use.
As phones have got larger and Google has started recommending it for Android, is the usability issue something to reconsider on websites? I’ve found several websites that haven’t been afraid to question this.
I like how this combines the navigation with the event details. You can scroll through the page and access that at any point as well as other areas of the website.
It hides on scroll, so it forces you to scroll up a bit at least to bring it back. This can get around the ‘double tap’ and gives you the ease of reaching the navigation.
The Pitchfork website is probably one of the websites where I first realised is it coming back into fashion? What I like about this navigation is it gives access to other features within the website as well as the navigation.
It affords them the freedom to have a larger logo, (not that I believe you need to do that,) which means you don’t have to overwhelm that initial space.
This is a repositioning of essentially what would be a ‘hamburger’ menu without the icon, it’s clear and visible, without being distracting. It is in the region to avoid the double tap and nicely allows you to jump to the top of the page too.
The navigation would feel at home on iOS as much as it does apart of the website. So it’s easy to use and the way search can be utilised is a nice touch.
Like the Studio Thick navigation, this uses an icon in the lower right avoiding the double tap in most instances. It works well and I like the style of this.
This is more of an obscure navigation but it’s usable with one hand to give you access to the portfolio. I like the ease of use it offers generally, but I would have liked the logo pinned to the bottom to link to the homepage.
A discrete navigation initially, which hides on scroll down and it reappears when you scroll up. It could equally have been fixed to the top, but it wasn’t.
This is an interesting one and a really good use of the space, the button to checkout is simply very easy to reach. As part of researching this post, I found that eventbrite uses a technique to ensure the browser chrome is always visible. This means they avoid the need for double tapping.
For an ecommerce experience this seems like a no brainer, make the checkout steps easy to reach and you’ll frustrate buyers less.
Basecamp have gone with their main call to action fixed to the bottom on scroll. This means it’s always present whilst you’re browsing. No need for repetition. Just one clear button.
I’m sure this will emerge as a trend for pages of this type.
Quartz have an array of navigation and their bottom bar serves as a kind of filtering of their stories.
Many of the examples work very well, because of the ease that they can be reached. Some examples can bypass the double tap, due to their positioning, but others require it. I’ve found that while it is an inconvenience, it’s less so over trying to reach the top of the phone one handed.
This is definitely more of a reemerging trend, as I remember seeing other websites with it and trialling a bottom navigation in version three of this website. I removed it due to thinking there was potential for tapping the wrong parts of the browser UI. I believe that’s why it hasn’t been used more until now.