What are the pros and cons with an overflowing horizontal scrollable nav bar?

Question

On the team with designers and coders at my office, we're currently having a discussion about horizontal navigation bars when they overflow on mobile. This is not a discussion about using cards that are scrollable, like in the Netflix app, but rather in a menu/sub menu.

We took a look at what Google is doing and they fade out other options that are not visible.

But what happens when the screen size is smaller than that?

Suddenly, there's no indication whatsoever that there are more options.

That's my biggest concern with these types of solutions. Other things I'm worried about are accidental edge swipes and back navigation. Wouldn't a "More" menu be a better solution?

What are your thoughts? Are people used to this type of navigation? Do they actually use it? What are the options?

Answer 1

Although a bit older, this article mentions:

Our research found that even strong cues such as arrows frequently remain unnoticed. People expect to scroll vertically for additional content, but they don’t expect to scroll sideways. Horizontal scrolling works against their preexisting mental model of a web page.

If you must, always provide a visual cue. Might be a bit tedious for the google example, but finding a way to always have a label peeking might work.

A "more" menu or "contextual menu" usually triggers relevant actions for the selected item. Its implementation on a menu may seem unfamiliar to users. It might be interpreted as "actions I can do with the current page", rather than "more menu items".

Here is a primer for mobile navigation patterns. Each pattern has its deficiencies and the decision depends on minimizing downside for your users.

Answer 2

The Priority+ pattern is an option to deal with overflow of elements in place of a horizontal scroll.

You'll see an example of this in sites with lots of top level (and also secondary categories). The Guardian UK is one example. They have potentially overflows at both levels.

It looks like the Guardian has a couple of tradeoffs: because they have so many nodes, the top level gets a 'hamburger' menu on mobile, so there's not 2 'more' links.

SB Nation also uses this pattern, adding a dropdown or menu signifier depending on the viewport width:

From Revisiting the priority+ pattern

This ability to scan these labels left-to-right and feed right into the overflow “more” link feels like a more natural discovery flow compared to everything hiding beneath an ambiguous icon. The Priority+ pattern simply gives a much better scent for the user to follow.

Try testing this pattern, as it might be a possible solution for your domain and what your users expect.

Answer 3

you never take google as best UX or reference unless your working on something similar Browser project

personally i prefer overflowing horizontal scroll specially on mobile projects based on my states and A/B testing 98% user think horizontal scroll is a swipe,

mobile i prefer burger menu, or bottom fixed menu on the web project i have large menu i use to MORE solution that the guy just mentioned

there is other solution like categories in different way and use MEGA menu (submenu)

Answer 4

When I worked at a large streaming media and broadcast TV company, we required having a peek of the other options on side-scrolling menus so viewers would know the options were there. The psychology is slightly different when navigating a smart TV UI or using an AppleTV remote, but there was a drop-off in side-scrolling when the peek wasn't available.

On the flip side, I would imagine Google would have tested that significantly before pushing an update to their search results page.