I am looking to create a menu solution for web across desktop to mobile. Whether it is better to use one solution for desktop and one for smaller screens is unclear. I have a series of categories but all on one level, however there are currently 11 of these (with a range of title lengths) and I need the site to be adaptive in case content decide to add more.

What I am looking at is either an overflow 'Other' menu to condense some of the less popular options or a horizontal scroll menu. What works best for touch/desktop and what do people suggest to adapt to small and large screen sizes?

  • Other than keeping the menu with a horizontal overflow, a suggestion is to either collapse the whole menu behind a Navigation drawer which displays the elements vertically, or hide the overflow elements behind a More button (like suggested here for Tabs).
    – Alvaro
    May 5 '17 at 13:40
  • The category sections I'm referring to are not the top section in the hierarchy, so don't think a navigation drawer would work in this case. Think it may have to be a More button.
    – lg365
    May 5 '17 at 15:14

The closest I can think of would be Brad Frost's collection of Responsive Design Patterns. There are several examples of menus there which works across resolutions ranging from Full HD down to mobile.

Some examples I think might be relevant for you:

I'd generally recommend to avoid horizontal scrolling, as also pointed out by NNGroup (which base their articles in user research and usability testing):

While horizontal scrolling is acceptable in some situations, it should be applied with caution. Be aware: horizontal scrolling on the desktop is one of the few interactions that consistently generate negative responses from users. (Anecdotally, the disdain for it is so widespread, that I like to use it to illustrate what user experience is to people unfamiliar with the field. I ask if they can think of a website scrolling horizontally. They usually groan and say they hate it, and then I explain how we look at things like that and find ways to make them better. Usually they respond along the lines of “Thank you, I wish there were more of you.”).

Note that although “swiping” on the desktop does not evoke the same level of negative reaction as the traditional horizontal scrollbar, it does still pose similar risks. Let’s look at 3 main reasons why horizontal scrolling and “swiping” are problematic on the desktop.

1. The traditional horizontal scrollbar burdens the user by requiring constant attention and greater physical effort to maintain the dragging. Most people use scrollbars to scroll, and not the scroll arrows. However, moving across a thin tunnel (like the scrollbar) is difficult because it requires careful steering of the pointing device. (This is an instance of the steering law, which says that the time it takes a user to steer a pointing device through a tunnel depends on the length and the width of the tunnel: the longer and narrower the tunnel, the more time it takes users to move the pointer from one end to another. The steering law is derived from Fitts’ law, which we discuss in our Human-Computer Interaction course). As a result, using a scrollbar on the desktop has a high interaction cost and slows people down. In a recent user test, a participant became frustrated scrolling sideways through product listings and complained, “It’s taking me forever to scroll through this.”

2. Users may ignore content accessible through horizontal scrolling or “swiping” as they don’t expect content there. 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.

3. Even obvious cues for horizontal scrolling have weak information scent. Even if people do notice cues for horizontal scrolling, they may not want to risk loading content that they cannot predict. Content hidden by a horizontal scroll is at a disadvantage because even salient visual cues don’t offer strong information scent: users can hardly guess what information they will get once they click on an arrow or scroll horizontally. In implementations where the entire page “swipes” to reveal new content, the risk of disappointment is even higher: the user may have to wait through a long page load only to discover that the new page is irrelevant for her needs.


If you choose to hide some content, you will require one more user action to see all the available categories.

I don't think of many options when it comes to such a problem as having a list of categories/filters, but you should keep the things consistent and display them the same way (i.e. vertically/horizontally displayed as a list of options).

You can also display them as a select list, but depends on your project needs, if it is good to have them all displayed, or if it is ok to have them in a select/dropdown list.

  • For smaller screens, I will definitely have to use a select list (not decided whether to make a custom one or not yet) as due to the category names and tappable sizing, only 2-3 options alongside a More button. Think that will be the way to go, thanks!
    – lg365
    May 5 '17 at 15:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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