Scrolling is a basic functionality of the web as we know it. However, some websites like to alter the way scrolling works, which can not only take you by surprise, but affect your overall experience in a negative way.
In a nutshell, functionality such as scrolling should be kept simple. In this article, we’re going to talk about how scrolling can affect your user’s experience. Then we’ll discuss two popular scrolling UI tricks you should avoid, and talk about better alternatives.
Scroll down to keep reading!
Why Scrolling Has an Impact on Your Website’s Functionality
Websites these days can be incredibly complex, both from functionality and style standpoints. However, the way we interact with them is usually very simple. In most cases, interactions with a website come down to either clicking, typing, or scrolling. We all know how those three functions work, and more importantly, we expect them to be universal.
For example, imagine visiting a website that scrolls down the page each time you click anywhere within it. It would make navigation confusing, and in some cases, it might even make you believe there’s something wrong with your browser or computer, particularly if you’re not tech-savvy.
However, there are ways you can change how scrolling works without it impacting your website’s usability. Take parallax, for example. It works by creating a false sensation of depth, achieved by scrolling through sections at different speeds:
However, parallax works because the scrolling functionality remains the same for the user. It’s simply a visual trick, and if implemented well, looks stunning. With this in mind, let’s talk about some types of scrolling UI tricks that don’t necessarily improve the user experience, but are commonplace.
2 Scrolling UI Tricks You Should Avoid (And Why)
Whenever you implement new functionality on your website, you need to ask yourself two things: Does it fulfill a purpose, and does it make your site more complicated to use? The answers, ideally, should be “Yes” and “No” respectively. Otherwise, you have a problem on your hands.
Here are two common scrolling tactics that offer different answers to the questions above.
1. Infinity Scrolling
An infinitely scrolling site is stylish, but it’s not overly practical.
Infinity scrolling is a catchy name for websites that never seem to end – almost literally. Implementing it means users will load more content dynamically as they scroll, until you run out of content.
Often, infinity scrolling is used on either galleries or blog indexes. The goal is usually to improve time on site metrics, without having to jump through several pages. While the effect can look cool, and has a logical purpose, there are three key downsides to implementing the tactic:
- It doesn’t work well with most footers. If your site has no end, you won’t be able to use a footer unless you make it sticky, which takes up screen real estate.
- Too much content on a single page can impact performance. Increasing the content on a page will eat up resources for your visitors. This means your website can potentially start to feel sluggish as users scroll through.
- You need to implement loading animations. You’ll often need to add some sort of visual cue to indicate more content is loading when you scroll down to the bottom of a page. Otherwise, visitors may not understand what’s going on.
The simple alternative to infinity scrolling is ‘pagination’. If your website is content-heavy, it makes sense to break it down using pages. Not only will your layout look less cluttered, but jumping from one page to the next is about as simple as navigation gets.
Divi users can choose how many posts to display on an index, and the theme will automatically add pages relative to the content. The same goes for the Gallery module, which supports pagination for those occasions where you have too many images to fit in a single page comfortably.
You can avoid adding more pages to your website if you only have a modest amount of content. However, as it grows, you need to make design choices that don’t impact user navigation. Adding pages is an elegant solution to a complex problem, and we bet none of your users will complain about it.
2. Scroll Hijacking
Scroll hijacking can make for an interesting, yet user-unfriendly narrative experience.
Normally, scrolling happens at a set speed depending on whether you’re using your keyboard or a mouse. However, some websites ‘hijack’ those functions, making you jump between sections with little transition. It sounds minor, but can be jarring when you encounter it in the wild.
Usually, design- and style-heavy sites implement scroll hijacking. They have lots of animations, video backgrounds, and other bells and whistles. While they can look stunning, they’re also overwhelming. Here’s why we’re against scroll hijacking specifically:
- It makes navigation seem sluggish. In most cases, transitions will be artificially slowed down, so as not to seem instant. The result, however, is your website ends up feeling sluggish.
- It takes away freedom from your users. Users should be able to navigate your site freely, and scroll hijacking can make them feel like they’re constrained by what you want them to see.
- Some visitors can be confused by the change. If a user needs to be tech-savvy to navigate your website, it probably scores very low with regard to usability.
The goal behind scroll hijacking is to increase interactivity. It’s perfectly fine to have this as a goal, and fortunately, there are several ways you can do this without affecting your website’s usability. Adding microinteractions, for example, is an excellent way to make visitors feel like your website is more ‘alive’.
However, you don’t need to fill your website with animations to create a compelling user experience. If you want your site to break the mold, the best way to do it is to design a unique navigation scheme, which is something Divi can help you achieve thanks to its modular system.
Conclusion
Scrolling is not something a lot of us pay attention to when it comes to web design. After all, the functionality works the same in most platforms and applications. With this in mind, altering it is usually a bad idea because your website’s usability is inherently affected for all visitors.
Generally speaking, we’re against making changes to your website that negatively impacts its usability, and altering the way scrolling works is one of those. There are two scrolling UI tricks we recommend you avoid in particular, and they are:
- Infinity scrolling: This design trick can look great, but it can affect your website’s performance.
- Scroll hijacking: Basic functionality such as scrolling and clicking should remain the same on any website you visit.
What do you think about altering the way scrolling works on your website? Share your thoughts with us in the comments section below!
Article image thumbnail by mamanamsai / shutterstock.com.
