Websites using alternatives to the ‘hamburger’
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. In this post I detail a list of websites that are using the tab bar navigation.
1,965 views
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. So I wanted to explore as an alternative for websites tab bar style navigation. 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 there is more freedom for implementation, as has long been part of iOS and as more recently Android.
However, it still remains elusive for websites, in the sense of the behaviour and experience in apps. For example, usability could be better on iOS and the potential clash with other UI elements, can make it 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 and is it now a balance of trade offs? I’ve found several websites that haven’t been afraid to question this.
ysdn2016.com
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.
pitchfork.com
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 main navigation. It’s the potential to keep key features within reach at all times.
It also 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.
studiothick.com
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.
davidhellmann.com
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.
joycewang.com
Like the Studio Thick navigation, this uses an icon in the lower right avoiding the double tap in most instances. It works well and the style of this is interesting.
roscoproduction.com
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.
whitehallinteriorsnyc.com
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.
eventbrite.com
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
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
Quartz have an array of navigation and their bottom bar serves as a kind of filtering of their stories.
Summary
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.