Last Updated on September 13, 2024
Web design can be incredibly ethereal – it can be a big challenge to figure out what a website needs to make it work just right. One of the things that’s most difficult to pinpoint is movement, and scrolling is the most dominant movement on a website.
Different types of scrolls and when to use them
Choosing the right type of scrolling can have a huge impact on the way that a website feels and how easy it is for visitors to navigate.
The possibilities for scrolling are many, with options for every taste and need in terms of functionality and aesthetic. This is how users access the content of a website and that sliding motion is a central pillar of the user experience.
Horizontal scrolling
A highly intuitive way to interact with text and images is to move from left to right, like reading a book or flipping through a magazine.
What is horizontal scrolling?
Horizontal scrolling provides content that moves horizontally (obviously). Though just a few years ago this kind of website navigation was clunky and awkward, thanks to the advent of the sideswipe on touchscreens horizontal scrolling is now incredibly easy for users to explore content with. Users can move through content above the fold, with little to nothing below.
When should you use horizontal scrolling?
For companies that have a high level of activity on mobile devices, horizontal scrolling can offer interest and ease of use. It works well with highly visual content as opposed to text heavy content, as lots of text can be difficult to read with the constant breaks that are necessary with horizontal scrolling.
Slideshow style content that prompts users to click right or left is incredibly popular on the web today, meaning that horizontal navigation with large scale images can be a great way to highlight content and provide a gateway into future content.
It’s critical to be keenly aware of the user experience when utilizing horizontal scrolling. Without adequate navigation, information can quickly get lost in the peripheral areas of a website.
Vertical scrolling
There’s a reason that vertical scrolling dominates the internet – it works. You are likely vertical scrolling RIGHT NOW.
What is vertical scrolling?
Moving from top to bottom, vertical scrolling invites users to keep going down the page. Basic vertical scrolling goes all the way back to the beginnings of the internet, though today vertical scrolling has taken on other forms beyond the basics (see infinite scrolling and parallax scrolling below).
When should you use vertical scrolling?
Vertical scrolling works well for in depth content, allowing users to dig deeper into what they’re seeing. It works flawlessly across platforms and the simplicity of the form is appealing to many audiences.
Infinite scrolling
Web pages don’t have to be pages anymore. As the format of the online experience ventures further and further from a simple imitation of the printed word, there are far more possibilities than just flipping a page.
What is infinite scrolling?
Basically, infinite scrolling goes on, and on, and on, etc. It’s most definitely a trend, but it’s one that’s here to stay thanks to the influence of social media. People are accustomed to web pages that continue to load as they move down the page, knowing that they’ll never actually get to the end. Most “infinite” scrolling sites do actually have an end, it’s just a long way down. That’s why you’ll see this same effect called long scrolling.
When should you use infinite scrolling?
Infinite scrolling is perfect for sites that have a great depth of content that’s updated regularly. New content can be loaded at the top of the page with older content being bumped down to make room. Sites that don’t have a significant log of content won’t be able to effectively implement infinite scrolling. Though infinite scrolling was once seen as detrimental because users became frustrated at never reaching the bottom, today it’s become so commonplace that there are very few drawbacks. In fact today long scrolling is an effective way to improve user engagement.
A big tip if you’re considering infinite scrolling is to add floating navigation at the top or the bottom of the page so that users have the ability to move around the site effectively no matter where they are in the scroll. This works well across devices, affording visitors the chance to dig deeper into content or to be guided to specific areas of a website.
Parallax scrolling
For a complex, interesting and innovative spin on scrolling, parallax scrolling is a great option.
What is parallax scrolling?
In this kind of scrolling, the background moves at slower rate than objects in the foreground, offering a 3D effect that can be used with vertical, horizontal or infinite scrolling. The effect of parallax is something in-between animation and scrolling, and as such should be used judiciously as with animation. Unlike most animation however, the user has control over the rate at which the motion happens as they scroll.
When should you use parallax scrolling?
Parallax scrolling can be used with all kinds of content and with a heavy hand or a light one. The key is to use this scrolling technique as a supportive piece for content rather than the dominating the landscape of the site. Too much of the effect can easily roll into a turn off for visitors. Scale is also an important factor in parallax design, particularly when thinking about how a site translates to mobile.
A hot trend, parallax scrolling can add dimension and interest to a site. As long as it’s done carefully it doesn’t have to be overwhelming.
Keep scrolling in perspective
Scrolling is something that we very often don’t think about when it’s working well, but turns awkward and gets in the way when integrated poorly. Whatever kind of scrolling you decide to use on your website, what’s most important is that you create that visitor experience with intention, utilizing every tool at your disposal to customize something that aligns with your vision while also being easy to navigate.
