{"id":1823,"date":"2021-05-08T15:12:00","date_gmt":"2021-05-08T15:12:00","guid":{"rendered":"http:\/\/nyxditech.com\/blog_staging\/?p=1823"},"modified":"2021-06-10T08:49:31","modified_gmt":"2021-06-10T08:49:31","slug":"horizontal-scrolling-design-tips","status":"publish","type":"post","link":"https:\/\/nyxditech.com\/blog_staging\/horizontal-scrolling-design-tips","title":{"rendered":"All You Need To Know About Horizontal Scrolling"},"content":{"rendered":"\n

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? <\/p>\n\n\n\n

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\u2019ll come across.<\/p>\n\n\n\n

Horizontal Scrolling: A Quick Definition<\/h2>\n\n\n\n

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\u2019s finger on a touchscreen.<\/p>\n\n\n\n

When To Use Horizontal Scrolling?<\/h2>\n\n\n\n

1. Displaying several images (e.g. for a photography site or a design portfolio)<\/p>\n\n\n\n

2. Displaying information in a large visual area that is not easy to see at a glance (e.g. a map)<\/p>\n\n\n\n

3. Displaying discreet sections or slides of information on applications<\/p>\n\n\n\n

4. Displaying a large catalogue of products or items so that different product categories can be easily shown<\/p>\n\n\n\n

Best Practices<\/h2>\n\n\n\n

Don\u2019t Use Horizontal Scrolling On Full Webpages<\/h3>\n\n\n\n

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
<\/p>\n\n\n\n

Horizontal Scrollbars Should Be Designed Like Vertical Scrollbars<\/h3>\n\n\n\n

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<\/p>\n\n\n\n

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\u2019t show a scrollbar if the contents of a container loop back to the beginning at the end of the content stream.<\/p>\n\n\n\n

Other Interaction Methods Must Be Offered<\/h3>\n\n\n\n

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.
<\/p>\n\n\n\n

Horizontal Scroll Option Must Be Visually Apparent<\/h3>\n\n\n\n

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.<\/p>\n\n\n\n

Horizontal Scrolling Advantages<\/h2>\n\n\n\n

So, how will incorporating a horizontal scroll on your website help you?<\/p>\n\n\n\n