Horizontal scrolling has always been considered a controversial web design technique and for a long time and with the advent of devices such as tablets, the swiping movement has enabled a comeback for horizontal scrolling. Could it be that because of the swiping movement, users have become more accustomed to horizontal navigation? 

A few years ago, the users used to remain reluctant to move sideways through content. However, the users have evolved since then and are more receptive to the idea of scrolling in both directions. It is more preferable to scroll through vis-a-vis clicking multiple pages or screens. Scrolling is completely natural and more efficient. We are seeing an increase in designs using non-breaking lists that are scrolled horizontally for more content especially on mobile, where horizontal space is limited.On the other hand, vertical scrolling works as a mainstay of virtually every digital interaction you’ll come across.

Horizontal Scrolling: A Quick Definition

Horizontal scrolling is a page navigation method in which the user scrolls left and right to reveal content from the sides of the window or container. Horizontal scrolling can be achieved by clicking and dragging a horizontal scroll bar, swiping sideways on a desktop trackpad or trackpad mouse, pressing left and right arrow keys, or swiping sideways with one’s finger on a touchscreen.

When To Use Horizontal Scrolling?

1. Displaying several images (e.g. for a photography site or a design portfolio)

2. Displaying information in a large visual area that is not easy to see at a glance (e.g. a map)

3. Displaying discreet sections or slides of information on applications

4. Displaying a large catalogue of products or items so that different product categories can be easily shown

Best Practices

Don’t Use Horizontal Scrolling On Full Webpages

Horizontal scroll should never replace vertical scrolling on a full web page. Violating this convention will alienate the majority of users. If you want different sections of your main page to transition horizontally, consider triggering a horizontal animation with a vertical scroll

Horizontal Scrollbars Should Be Designed Like Vertical Scrollbars

On desktop, horizontal scroll bars should be available within their containers. Horizontal scroll bars should look like and function like their vertical counterparts for design consistency. Avoid custom styling in your scroll bars, since they serve to assist and should not steal focus

There are a couple of exceptions to placing visible scrollbars. If there are buttons on both sides of the container which allow users to scroll, users can click these instead of dragging a scrollbar. Also, don’t show a scrollbar if the contents of a container loop back to the beginning at the end of the content stream.

Other Interaction Methods Must Be Offered

Even if horizontal scrolling serves your page, we recommend giving desktop users another way to reveal hidden content. An arrow button can have the same function. Mobile users will experience fewer issues swiping sideways, so buttons aren’t necessary on mobile sites. Still, the primary scrolling orientation should stay vertical on touchscreen devices.

Horizontal Scroll Option Must Be Visually Apparent

Be sure to minimize the chance of visitors missing your content by signaling that horizontal scrolling is possible. In addition to button indicators like arrows, you might set your scrolling containers such that a horizontal scrollbar appears on mouseover. Or, try showing a sliver of hidden content in your scrollable container.

Horizontal Scrolling Advantages

So, how will incorporating a horizontal scroll on your website help you?

• As a design, it is almost 100% consistent across all devices
• It saves a lot of vertical screen space as it is designed to allow room for secondary information, that doesn’t hog page area
• It allows users to see options within a category by swiping to the side or scrolling down to see different categories.

Horizontal Scrolling Disadvantages

• To use horizontal scrolling on desktops, users have to rely on scrollbars as compared to scroll arrows on laptops or handheld devices. This burdens the user by requiring constant attention and greater physical effort to maintain the dragging
• Due to a subconscious dependency on a vertical scroll, users may ignore content accessible through horizontal scrolling as they don’t expect content there
• Even if people do notice cues for horizontal scrolling, they may not want to risk loading content that is hidden and they have no control over

Conclusion

There is a lot of debate over the internet about the usage of the bidirectional scroll and its impact on UX. But it helps a lot in compartmentalizing the content and saves a lot of vertical space on an app if used wisely. If your app and website are struggling with responsive design issues, feel free to contact our experts.

Read more about long scrolling implementation here.