Where's the Beef? Revisited - Navigation Design for the Mobile Web, 18 Months On
In June 2015, I wrote a post entitled, “Where’s the Beef? Going Hamburgerless on the Mobile Web”, which looked at an alternate navigation pattern being adopted on the Mobile Web - the “Snail Trail”.
18 months on, I wanted to check back, to see:
- Which of those retailers were still utilising the “Snail Trail” pattern;
- If any, had reverted back to a “Hamburger Menu”; and
- Other navigation patterns emerging on the Mobile Web.
The “Snail Trail” Navigation Pattern
As a reminder, the “Snail Trail” is essentially a horizontal navigation bar, which extends beyond the width of the immediate viewport, disappearing off the right hand edge of the screen. There is often a “peek” of the last visible link in the immediate viewport - usually, in the form of a solid to transparent gradient, layered over the top of that link. This visual aid is intended to help educate the user that there are additional links, which can be swiped into view, with a right-to-left swipe over the navigation bar, itself.
When I wrote the original post in 2015, there were only a handful of early adopters, of this navigation pattern:
Of the above, Gilt, Sephora and Guardian are still adopting this pattern today. Apple and Audi Canada have reverted back to a hamburger menu, and Beyond the Rack have unfortunately, gone bankrupt. It’s worth also noting that both Sephora and The Guardian, actually use a snail trail menu and a hamburger menu - this was also the case in 2015. In Sephora’s case, the snail trail houses their department links, whereas the supporting hamburger menu, consists of tertiary links to other key areas of their website - “Book a Reservation”, “Give Feedback”, “About Sephora”, etc.
There are however other retailers who have now caught onto the snail trail:
Interestingly, all but Next, are utilising the snail trail, with the support of a hamburger menu, in a similar fashion to Sephora.
Update (28/11/2016): Although, not retailers, Fox News, Product Hunt, NewsNow, and UX blog, uxdesign.cc, are other examples of websites, which feature a "Snail Trail" navigation menu. Oh, and there's Google too (at the top of their SERPs).
As a Senior Mobile UX Architect working for Next, I played a pivotal role in pushing for a move to incorporate a snail trail menu into our mobile website, distancing ourselves from the hamburger menu that had been in place for some time. We conducted in-depth research and usability testing with our customers, and the response was seen to be received favourably, which is why we committed to the change.
Following the introduction of the menu at the end of January 2016, it’s apparent that the move has proven to be a successful one, so much so, that this style of navigation menu now exists across our iPhone app, and new-look, Android smartphone app too - released today. Whilst I can’t share specific stats on its performance, what I will say is, that of the 8 departmental links featured, the “Clearance” link - the last link in the menu - is the most clicked link in the menu, across both our mobile site and iPhone app. That serves to suggest that our users, have little to no trouble, in understanding how to interact with the menu, swiping links into view that are initially hidden off the edge of the screen.
That’s not to say, it’s the go-to option for every retailer, but hopefully, this insight may inspire others to consider it as a feasible alternative to the hamburger menu. Test and learn.
Emerging Navigation Patterns for the Mobile Web
Placement of the Hamburger Menu Icon to the Right of the Viewport
Only this week, I started to notice a seemingly, new trend in the placement of the hamburger menu icon - particularly, on luxury retail websites.
Traditionally, the hamburger menu has primarily been positioned in the top left-hand corner of the viewport. With the ever-increasing, physical size of handheld devices, it was quickly becoming increasingly difficult and uncomfortable, to stretch up and across, to interact with this icon. As a right-handed user, who primarily uses a iPhone 6S Plus, single-handed - it’s impossible for me to stretch my thumb to this position. Even when holding the device with two hands, my left thumb can’t reach that far up. In turn, it means I have to hold the device with my left hand, and use my index finger to tap the icon. It may not seem like much of a chore, but it’s enough of an unnecessary inconvenience, to warrant the need for improvement.
One such initiative, is the relocation of the hamburger menu icon to the top right-hand corner of the viewport. Arguably, a step in the right direction for right-handed users of smaller-screen smartphones, but it still doesn’t solve the problem of being unable to comfortably interact with the icon, on a larger-screen equivalent.
By storing all of your website’s key links, within a hidden navigation drawer like this, the frequency of needing to open the menu via this icon, could quickly become an annoyance. Sliding the navigation drawer open, by swiping across from the right hand edge of the screen, towards the center, isn’t a viable option on the mobile web either, as browsers like Safari, have already reserved this interaction to proceed forward to a previously viewed web page. In addition, you can’t rely on the user discovering this behaviour. These aren’t new issues that have been introduced as a result of relocating the hamburger menu icon to the right; however, they still warrant careful consideration.
So, who’s bought into this new approach? As I say, there’s a particular prominent adoption rate among luxury retailers - here’s a few:
Update (30/11/2016): Add The Home Depot, Startup Vitamins, Wells Fargo, The North Face, StubHub, Bell, Chelsea FC, Illamasqua, Westfield, Frontier Airlines and Hollywood Bowl to the list too! In fact, Aaron Field, Digital Manager at Hollywood Bowl, AMF Bowling and Bowlplex, advised via LinkedIn, that through A/B testing, he saw the right-hand placement of the hamburger menu, drive more page views to sessions, allowing their customers find the information they needed, and help improve lane bookings, compared to one placed on the left. His team are looking to A/B test this, against a "Snail Trail" approach, in 2017.
Only yesterday, I noticed an A/B test being carried out on Nordstrom’s mobile-optimised website, where they were very clearly trialling a significant change to the arrangement of their header, with a view to move the hamburger menu icon over to the top right. This is definitely worth keeping a close eye on, as Nordstrom would be one of the first major retailers to introduce this, should the test prove to be favourable towards the right-hand placement. It could open up the door for other retailers to follow suit, following similar trials.
Hamburger Menu, Combined with a Top Tab Bar
I’ve also come across a handful of retailers, who appear to be repurposing, what was once a navigation pattern, solely native to iOS apps (primarily, iPhone) - the “Tab Bar”.
According to the iOS Human Interface Guidelines:
“A tab bar appears at the bottom of an app screen and provides the ability to quickly switch between different sections of an app.”
I’d argue that this is now the most commonly-used navigation pattern across iPhone apps. Even Google, have their own version of a tab bar - the “Bottom Navigation Bar”.
So it’s no surprise to see businesses trialling the use of this on their mobile-optimised websites. There are however two notable differences. The first being, that the bar is being used at the top of the viewport. Again, on larger-screen devices, it can be a challenge to stretch the thumb that far. Secondly, they’re largely being used, in addition to either a snail trail menu, or a hamburger menu - not in isolation.
Have a look at these four examples, for inspiration:
Bottom Tab Bar
Now for the most intriguing approach I’ve seen to date on the mobile web - the use of a tab bar positioned at the bottom of the viewport (inside the confines of the browser), as per many iPhone apps.
The Forerunner Ventures-backed, beauty “upstart”, Glossier, have taken a rather bold decision to integrate such a navigation menu, into their mobile-optimised website. It’s certainly the first, and only, example of a website I have seen adopt such a navigation menu design - and you know what, it actually works surprisingly well!
The key benefits here, are those of comfortable thumb reach to access key sections of the website, irrespective of whether using the device, single-handed, with two hands, left-handed, or right. It’s also aesthetically-pleasing, although the choice of iconography is questionable, given the sections of the website they are intended to visually represent. Quirky, but somewhat confusing.
My initial concerns of the tab bar, pinning to the bottom of the browser on scroll, weren’t necessary, as there is no noticeable lag or blinking effect - it’s a smooth transition - certainly when browsing the website in Safari, on an iPhone 6S Plus, at least.
All in all, a pretty nice implementation - and a usable navigational solution. However, on more complex websites, with deeper levels of information architecture and more complex product taxonomies, a tab bar alone, probably wouldn’t work so well. Certainly for E-Commerce websites, it would inevitably need a supplementary means of navigating key departments - be it a snail trail, hamburger menu, or similar - as per the likes of Harrods and Zalando, referenced above.
Update (29/11/2016): Movie ticket provider, Fandango, also feature a "Tab Bar" on their mobile site.
Update (04/01/2017): As Misha Scholte (@MishaScholte) kindly pointed out to me today, via Twitter, there is a slight drawback with this tab bar approach on the mobile web, in that Safari reserves taps in the lower portion of the browser to bring its full UI into view. So, if the footer element of Safari's UI isn't already visible, tapping one of the tabs (like "Skincare", in Glossier's case), would actually then make it visible. It's only on the second tap of the tab (now that the Safari's full UI is visible), that the user is directed to the destination URL. Somewhat of an annoyance, but hopefully, Apple will address it, in due course.
Update (05/01/2017): China's leading casualwear apparel company, Meters/bowne, also have a "Tab Bar" pinned to the bottom of their mobile site.
So What Does All This Mean?
Well, it seems to me like retailers are still somewhat undecided about which navigation pattern, best accommodates the needs of their users, when it comes to the mobile web and larger-screen smartphones and "phablets". There’s no clear cut, one-size-fits-all approach to navigation design - even, 18 months on.
More and more retailers are experimenting with new approaches, but rightly or wrongly, there still seems to be this resistance against moving away from a hamburger menu approach. It could be sparked by one of a number of things, such as fear of the unknown, and pushback from senior stakeholders, unwilling to take what they may deem to be a significant risk. After all, tampering with the navigation menu, isn’t something to be taken lightly - product discoverability and findability, has a direct impact on conversion.
That said, with the success of the tab bar in iPhone apps, and Google’s spin on it, dare I say, it’s only a matter of time before this approach starts to gain traction on the mobile web.
Kirsten Green, Founder of Forerunner Ventures has a strong reputation for investing in ambitious entrepreneurs, and a great portfolio of customer-centric, E-Commerce clients to back it up - Dollar Shave Club, Warby Parker, Birchbox and Bonobos, to name a few. It therefore comes as no surprise, that they are exploring and pushing the boundaries of E-Commerce as we know it - in this case, taking what was traditionally seen to be an app-focused, navigation pattern, and making it work well as a primary navigation mechanism in a mobile-optimised website.