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.
There’s also a newer, follow-up article to this — “Where’s the Beef? Revisited — Navigation Design for the Mobile Web, 18 Months On”
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 likeBeyond 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” or “Basement” menus on the mobile web, any time 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.
Conclusion
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.
Enjoyed reading this? Check out the follow-up article — “Where’s the Beef? Revisited — Navigation Design for the Mobile Web, 18 Months On”
One Last Thing…
If you liked this article, please applaud it 👏 and share it with your friends, work colleagues and followers. Remember, you can clap up to 50 times — it makes a big difference for me in helping to focus my writing on what you guys enjoy reading the most.
You’re also welcome to follow me on Medium, on Twitter, or even connect with me on LinkedIn. Thank you for your support! 😊
Originally written and published to www.uxchap.com on June 15th 2015, by Joe Pendlebury.
