Oct 19, 2020

Horizontal Scrolling for Ecommerce Sites: A Balancing Act Between Usability and Innovation

The advent of smartphones has completely revolutionised the way we scroll on mobile or laptops. Today, scrolling vertically is natural and expected. The moment one has to use a mouse on either a laptop or a desktop, any other scroll apart from vertical seems forced!

There was a time before smartphones when users were comfortable with both vertical and horizontal scroll due to the mass use of mouses. As more and more users got hooked on mobiles, the nature of scrolling started evolving. Not surprisingly, 61% of digital media time is spent on mobile, with only 39% on desktop. Everything from reading a message, to viewing a video list to checking notifications on social media, involves moving in a vertical pattern. With such a huge dependency on smartphones, a vertical scroll is the natural reflex of most users.

Therefore, it's only fitting that most websites prefer to go for it and not a horizontal one. However, as with most tech, many elements make a comeback, stay strong for a few years and then disappear into the abyss only to reappear after a few years. The same goes for our topic of choice; horizontal scrolling.

Does that mean it’s not dependable and should be avoided?

There was a time in the early 2005s when horizontal scroll was considered a complete taboo. It was the worst thing you could do to your website. This was because the whole UX of sideways scrolling was confusing to the user and it just didn't comply with conventional web design standards. Also, factor in that vertical websites are considered to be simpler to implement and more efficient. Hence, a relatively difficult concept that needed public support and would make developers spend a lot more time on coding, was not taken to too kindly.

Let’s take a look at what a few people had to say about horizontal scrolling on Quora:

Quora user 1 (2012):

Horizontal scrolling is worse. It's counterintuitive and does not work with the scroll wheel on the mouse. I can't see any use case other than when you want to position something to stay fixed below the objects being scrolled.

Quora user 3 (2014):

Most consumers find it annoying to scroll both horizontally and vertically. Make sure the content is presented in a manner that makes sense and I think you won't have problems. Horizontal scrolling is best used when the client doesn't have to use the horizontal scroll bars to see it. This means using interactive arrows/buttons or swipe capabilities to make scrolling easy and simple.

However, this perception started to change with the invention of tablets. These devices made it possible for users to scroll instead of horizontally instead of vertically due to the screen dimensions it offered for viewing. This was the impetus that a daring and bold design such as a horizontal scroll needed and that's when the users and developers' opinions started to change.

Even though mobile dependency supported vertical scroll, Apple products continue to integrate horizontal scroll to subconsciously get the user accustomed to it.

The white dots at the base of the menu screen are pretty much standard on all devices. No matter which software version or which new device they launch, the menu can only be completely accessed by swiping horizontally. This is starkly different when compared to android as some devices use the above-mentioned techniques while others stick to having a vertical scroll for their menu.

So, what does it mean for brands that use it?

It's not an unheard thing for brands to use some elements of the horizontal scroll on their websites. Most have elements on it on their desktop view by default but experiment with it in their mobile views simply to reduce the length of their webpage. However, some are declaring their individuality, uniqueness, and their unwillingness to fit into societal standards.

Check out a few examples of brands defying the societal norms:

Polygon Design:

Joseph Mark Ventures:

So, when should a brand go for horizontal scrolling?

Before getting into that, we strongly advise you to read Jerry Cao’s, article on “The New Rules for Scrolling in Web Design”, to understand the advantages of scrolling and how they affect a website’s success ratio.

Now, let’s get into when a brand should opt to use horizontal scrolling.

In most cases, horizontal scroll works best when you want to display a subset of a category such as below:

Displaying several images (e.g. for a photography site or a design portfolio)
Displaying information in a large visual area that is not easy to see at a glance (e.g. a map)
Displaying discrete sections or slides of information on applications
Displaying a large catalogue of products or items so that different product categories can be easily shown

Check out “Horizontal scrolling in mobile” by CanvasFlip to understand how these pointers can be shown visually.

Can horizontal scrolling be a part of a brand’s website but not the only scrolling option?

Oh, absolutely!

You do not have to reinvent the wheel and resign a completely new website! Most ecommerce sites use horizontal scroll. Check out a few ways in which it is used on ecommerce sites either on desktop of on mobile view below:

The arrow icon on the image of the footwear on Net-a-porter’s desktop view indicates to the user that while they can see the thumbnails in a vertical format, for them to see the expanded view, they will need to scroll horizontally.

In the mobile view of Myntra’s app, you can see faint dots under the image which encourage the user to swipe horizontally to view different images of the same product.

While most websites prefer to do the above, there are others that use it as a primary scroll simply due to the magnitude of information they want to share. Check out a few examples below:

Netflix India:

Amazon Prime India:

Amazon.in

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.

But, there have to be certain drawbacks as with everything!

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

So, how can it be tackled?

As a rule of thumb, there are a few things that should be kept in mind. Reactive Graphics, in their article, “Horizontal Scrolling: The Controversial Web Design” mention a few pointers to keep in mind as you create your own horizontal scrolling website:

Don’t make ‘swiping’ the primary navigation
Ensure you consider every device and understand that your users may not have the capabilities to swipe. Apply a click option to be accessible or a scroll that works horizontally with a vertical mouse scroll.
Tell the user how much content is left.
Add a scroll bar or a page number indicator so that your user isn’t just left to scroll into the abyss.
Create obvious, visible cues for horizontal swiping.
Use cues such as arrows and “click here, view more, see more” tags to introduce swiping, scrolling and clicking and allow users a stress free navigation.

Check out “The Case Against Horizontal Scrolling Websites” by Design Your Way, for more information on incorporating horizontal scrolls.

Having worked on our fair share of websites in the past, here are a few things that we keep in mind:

Designing a website with elements of horizontal scroll will work well on all devices however a completely horizontal website would not fare well on a desktop. The user will be forced to use the scroll bar instead of the scroll pad on their mouse to navigate. Most mice today do not have a horizontal scroll pad. This is slowly changing with smart mice like the Apple Magic Mouse but may still take some time before they’re mainstream and easily affordable for all
The experience of scrolling horizontally can makes the screen judder and create a headache inducing feeling
If you do not incorporate control in the speed of the scroll, it can quickly turn problematic with content whizzing past or taking forever to move
Users are used to reading left to right within the confines of a page making their way slowly downwards. When used for websites that have a lot of content to be read, it should be as a subpart and not the core scrolling strategy.

Check out what Damian Reese has to say about the UX of horizontal scrolling in his article, “A UX perspective on Horizontal scrolling”

Conclusion

The final consensus on whether completely horizontal scrolling websites are the next big thing in tech is still divided. Three user groups have been formed. The first hate it, the second is not sure and the third loves it. However, we cannot ignore the fact that using it for certain elements on your website surely has its benefits and is being done by many websites!

The final decision as to whether you should go for it or not is completely dependent on the brand image that you want to showcase.

It’s a bold and gutsy move. We’re not sure how it would fare but the best person to see it through is the one who wants it to work the most, YOU!