10

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.

Google horizontal nav bar 1

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

Google horizontal nav bar 2

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?

2
  • 1
    Put the overflowing options into a new menu, which can be opened by clicking on the ellipsis ... at the end of the horizontal options list. Never require horizontal scrolling. Nov 7, 2020 at 17:44
  • Google may have made the decision that it's distracting to make that horizontally scrolling bar more noticeably scrollable, when the vast majority of users who use that page only care about the first couple menu items, and those who care about others are likely to figure out how to get there. Nov 7, 2020 at 18:16

4 Answers 4

7

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.

7

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.

enter image description here

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:

enter image description here

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.

2

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) enter image description here

2

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.