What is a horizontal slider?
As the name suggests, a horizontal slider is a way to present content on a website or app side by side, allowing the user to scroll left or right instead of up or down.
If you want a more in-depth understanding of this topic, check out the FAQ section below:
Question #1: How does a horizontal slider work?
As we have seen in the previous section, a horizontal slider presents content side by side instead of stacking it. This means that the user has to scroll (or swipe) left or right to reveal other parts of the content.
Question #2: What are the benefits of using a horizontal slider?
The main benefits of using a horizontal slider are:
- It helps save space
- It helps present certain types of content in a cleaner, more intuitive way
Let us go over each one in more detail:
First, horizontal scrolling is a great way to save space, especially on devices with smaller screens such as smartphones. Instead of displaying everything stacked, you can just show, say, the main category of a menu and just have the user scroll or swipe left or right if they want to see all the available options—which brings us to the next benefit: it is a great way to present specific types of content in a cleaner, more intuitive way.
Examples of this include:
- Product or service categories
- Song categories and options
- Movie and TV show categories and options
- eBook categories and options
Question #3: What are the disadvantages of using this slider?
The biggest disadvantages of using a horizontal slider include:
- It is unfamiliar—or at the very least, unexpected—to most users
- It has a higher interaction cost than vertical scrolling
- It presents accessibility issues
Let us take a closer look at each one:
First, for most people, vertical scrolling is way more familiar than horizontal scrolling. This means that users of your website or app may end up completely missing your horizontal slider (and the rest of your content as a result). This is why if you must use a horizontal slider, make sure that you include some prompt—such as arrows or some form of swiping animation—so your users know it is there.
The second disadvantage of using a horizontal slider is that it requires significantly more processing power and effort from the user, who, as we have established earlier, may not be expecting horizontal scrolling. In addition, it also makes things more challenging for users who use a mouse because it requires them to do one of three things:
- Switch to the arrow keys on their keyboard
- Click on virtual arrows on the screen
- Click and drag the scroll bar (or the actual content)
Needless to say, all of these take significantly more effort than just using the mouse wheel to scroll up or down.
The third and final disadvantage of using a horizontal slider is that it can cause accessibility issues for people with motor issues, physical and mental limitations, or limited experience with technology when used in conjunction with vertical scrolling.
Question #4: Is horizontal scrolling better than vertical scrolling?
For most applications, no, horizontal scrolling is not better than vertical scrolling. The latter is just significantly more familiar, intuitive, and easy to do for most users.
However, as we have seen earlier, there are instances that using a horizontal slider may help improve the overall usability of your website or app. The key is using it for content that actually requires it and not just using it for the sake of doing so.
A great example of this would be Netflix. Instead of just stacking all the movies and TV shows on their catalogue vertically, the platform groups them by categories—which can be browsed using vertical scrolling—and then presents the titles under each one using horizontal sliders, which makes things so much easier for users.