Where's the Beef? Going Hamburgerless on the Mobile Web
This isn't another debate about the pros and cons of using the so-called, "Hamburger" menu - a topic which has already been well-covered elsewhere. Instead, this post focuses on a relatively new, alternative navigation pattern for the mobile web, quietly making it's way to the mobile web - the "Snail Trail", as I call it.
Some Top-Level Navigation Links are Always Visible
Having first seen this approach used on Gilt.com's responsive website, the key benefit to this mobile navigation pattern is that it addresses the use of screen estate, allowing for some (but not necessarily, all) of your top-level navigation links to be made immediately visible to your users. In essence, your links are displayed horizontally across the viewport within the mobile site's header, in a manner similar to that seen across desktop sites, thereby helping to build a sense of familiarity among your users.
Truncation and Teasing
If holding your smartphone in portrait orientation, it's never going to be possible to display all of your top-level navigation links in a single bar, without introducing an element of truncation. The "Snail Trail" pattern plays on this (similar to the Windows Phone UI) with a tease of a link, before it's cut off by the edge of the viewport. In doing so, it's intended to visually indicate to the user that they can swipe across the nav bar in a right-to-left fashion to reveal the rest of that link, and subsequently, other top-level navigation links in the nav bar. Once they've reached the last link, the user can then again swipe across the nav bar, this time in a left-to-right manner, to cycle back through the links.
On the flip side, when you rotate your smartphone to landscape orientation, the navigation bar responsively expands to fill all of the available horizontal space in the viewport. In turn, this means you can fit even more of your top-level navigation links into the viewport on first load, reducing the level of swiping needed.
Making the "Peek" More Transparent
How obvious is this "peek" effect to users? Will they instinctively know to swipe across the nav bar, or will they just deem this to be be a display bug with the mobile site? The simple answer is, I don't know. It's something I'd like to user test though to get a better idea.
That said, one way to further highlight the truncation, would be to apply a transparency gradient to the right edge of the navigation bar. As the user starts swiping across the nav bar, in a right-to-left fashion, a transparency gradient could then be applied to both the left and right edges, until the user reaches the very last top-level link, at which point the transparency gradient would only feature on the left edge of the bar.
Gilt use this approach on their responsive nav bar, and it seems to make the truncation more prominent, compared to other mobile sites like Beyond the Rack, which don't.
How does it handle secondary and tertiary levels of navigation?
The only example I've seen where second-level navigation links are present, is on Sephora's mobile site. Tapping one of the top-level links will result in a drop-down menu being displayed (again, like you'd see on a desktop site), with a list of child links separated on individuals rows. There's an adequate level of padding between each of the secondary links in the stack, making it easy to home in your tap on the link of interest. You can also just as easily, swipe across the top-level navigation links to select a new parent category, whilst the secondary links previously bought in, remain visible in the viewport.
The "Snail Trail" mobile navigation pattern could be a little more difficult to implement if you are dependent on introducing tertiary-level navigation links too. My advice would be to review your information architecture (and your user journeys) if this is the case, as it may be, that you don't actually need that third level of navigation.
Who else has adopted the "Snail Trail" pattern?
Along with Gilt, I've also seen this mobile pattern used across the following sites:
Will we see a shift away from the use of "Hamburger" / "Basement" menus on the mobile web, anytime soon?
In a recent review I conducted of mobile sites belonging to 75 of the world's leading retailers, 72 of those sites all used "hamburger" / "basement" menus. In light of that alone, I'd say, no - not just yet anyway.
In my experience, the larger the organisation, the more averse they are to taking risks. It goes without saying, that any sort of a design / functional change is a risk, as far as the Business is concerned. No matter how small or large a change, it should always undergo thorough, iterative user testing throughout the various stages of the project lifecycle - be it a combination of guerilla testing, A/B testing, Multi-Variate Testing, or similar. Fact speaks louder than opinion, and having the data / analytics to back up reasoning for seeking a move to a new style of navigation, will certainly help the cause, particularly if you can show a positive impact to conversion, and subsequently, revenue.
That said, convincing the Business to consider making such a change in the first place, is often easier said than done. The saying, "If it ain't broke, don't fix it", comes to mind.
I think it'll be down to market leaders like Amazon, Walmart, Target, The Home Depot, Tesco, ASOS and John Lewis, to take the lead from Gilt & co, before we see other retailers start to follow suit.
I'm not at all surprised to see the likes of Gilt, Sephora and Apple, open the door to a new navigation pattern for the mobile web, for others to consider. They're all digital innovators in the Retail sector, well-known for putting customers at the heart of their business operations.
The "Snail Trail" pattern is a feasible option for going "hamburgerless". It offers the benefit of making some of your top-level navigation links visible, at all times. Once you know how to interact with the navigation bar, it's quick and easy to cycle through the primary links, with a swipe of the finger. The main issue as I see it, lies with understanding how to initially interact with the menu. Given that mobile site users might not be as familiar with the concept of horizontal scrolling compared with app users, could this be deemed a usability concern?
Nevertheless, it's an option worth considering - just be sure to user test first, before making any such change to your mobile site's navigation menu design! What's right for some, doesn't always mean it's right for everybody.
UPDATE (25/11/2016): Be sure to read my follow-up post, "Where's the Beef? Revisited", written 18 months after this one, which revisits the state of navigation design on the mobile web, to see what, if anything, has changed.
You Might Also Be Interested In
- Why and How to Avoid Hamburger Menus by Luis Abreu - https://lmjabreu.com/post/why-and-how-to-avoid-hamburger-menus/
- Hamburgerless by Lukasz Przywarty - http://www.slideshare.net/LukaszPrzywarty/hamburgerless-on-creative-mobile-navigation
- Navigation Patterns for Mobile Optimized Retail Sites by Theresa Neil - http://www.slideshare.net/theresaneil/mobile-retail-navigation-patterns
- Img1.nymag.com, (2015). [online] Available at: http://img1.nymag.com/imgs/daily/grub/2013/08/07/07-hamburger-bun.w529.h352.2x.jpg [Accessed 14 Jun. 2015].