Scrolling is a fundamental capability of the internet as we understand it. Alternatively, some web sites like to change the best way scrolling works, which will now not handiest take you through marvel, however impact your general enjoy in a damaging method.

In a nutshell, capability corresponding to scrolling must be saved easy. On this article, we’re going to speak about how scrolling can impact your person’s enjoy. Then we’ll speak about two widespread scrolling UI methods you must steer clear of, and speak about higher possible choices.

Scroll all the way down to stay studying!

Why Scrolling Has an Affect on Your Web site’s Capability

Web sites nowadays will also be extremely advanced, each from capability and grace standpoints. Alternatively, the best way we have interaction with them is generally quite simple. Usually, interactions with a web page come all the way down to both clicking, typing, or scrolling. Everyone knows how the ones 3 purposes paintings, and extra importantly, we think them to be common.

For instance, believe visiting a web page that scrolls down the web page every time you click on anyplace inside it. It might make navigation complicated, and in some circumstances, it would even make you imagine there’s one thing incorrect along with your browser or pc, in particular in the event you’re now not tech-savvy.

Alternatively, there are techniques you’ll exchange how scrolling works with out it impacting your web page’s usability. Take parallax, for instance. It really works through making a false sensation of intensity, accomplished through scrolling via sections at other speeds:

An example of parallax scrolling.

Alternatively, parallax works since the scrolling capability stays the similar for the person. It’s merely a visible trick, and if applied neatly, appears surprising. With this in thoughts, let’s speak about some sorts of scrolling UI methods that don’t essentially support the person enjoy, however are common.

2 Scrolling UI Methods You Will have to Steer clear of (And Why)

Every time you put in force new capability in your web page, you want to invite your self two issues: Does it satisfy a function, and does it make your website extra sophisticated to make use of? The solutions, preferably, must be “Sure” and “No” respectively. In a different way, you might have an issue in your palms.

Listed below are two commonplace scrolling techniques that provide other solutions to the questions above.

1. Infinity Scrolling

An infinity scrolling example.

An infinitely scrolling website is fashionable, but it surely’s now not overly sensible.

Infinity scrolling is a catchy title for web sites that by no means appear to finish – virtually actually. Imposing it way customers will load extra content material dynamically as they scroll, till you run out of content material.

Ceaselessly, infinity scrolling is used on both galleries or weblog indexes. The purpose is generally to support time on website metrics, with no need to leap via a number of pages. Whilst the impact can glance cool, and has a logical function, there are 3 key downsides to enforcing the method:

  1. It doesn’t paintings neatly with maximum footers. In case your website has no finish, you received’t be capable of use a footer except you make it sticky, which takes up display screen actual property.
  2. An excessive amount of content material on a unmarried web page can affect efficiency. Expanding the content material on a web page will devour up sources to your guests. This implies your web page can probably start to feel sluggish as customers scroll via.
  3. You want to put in force loading animations. You’ll steadily wish to upload some sort of visual cue to signify extra content material is loading while you scroll all the way down to the ground of a web page. In a different way, guests won’t perceive what’s occurring.

The easy selection to infinity scrolling is ‘pagination’. In case your web page is content-heavy, it is smart to damage it down the use of pages. No longer handiest will your structure glance much less cluttered, however leaping from one web page to the following is set so simple as navigation will get.

Divi customers can make a choice what number of posts to display on an index, and the theme will mechanically upload pages relative to the content material. The similar is going for the Gallery module, which helps pagination for the ones events the place you might have too many pictures to slot in a unmarried web page conveniently.

You can steer clear of including extra pages on your web page in the event you handiest have a modest quantity of content material. Alternatively, because it grows, you want to make design alternatives that don’t affect person navigation. Including pages is a chic method to a fancy drawback, and we guess none of your customers will whinge about it.

2. Scroll Hijacking

An example of scroll hijacking.

Scroll hijacking could make for an enchanting, but user-unfriendly narrative enjoy.

Typically, scrolling occurs at a suite velocity relying on whether or not you’re the use of your keyboard or a mouse. Alternatively, some web sites ‘hijack’ the ones purposes, making you leap between sections with little transition. It sounds minor, however will also be jarring while you come across it within the wild.

Most often, design- and style-heavy websites put in force scroll hijacking. They’ve a number of animations, video backgrounds, and different bells and whistles. Whilst they may be able to glance surprising, they’re additionally overwhelming. Right here’s why we’re in opposition to scroll hijacking particularly:

  • It makes navigation appear slow. Usually, transitions shall be artificially bogged down, in order to not appear quick. The outcome, on the other hand, is your web page finally ends up feeling slow.
  • It takes away freedom out of your customers. Customers must be capable of navigate your website freely, and scroll hijacking can cause them to really feel like they’re constrained through what you wish to have them to peer.
  • Some guests will also be at a loss for words through the exchange. If a person must be tech-savvy to navigate your web page, it almost definitely rankings very low in regards to usability.

The purpose in the back of scroll hijacking is to extend interactivity. It’s completely wonderful to have this as a purpose, and fortuitously, there are a number of techniques you’ll do that with out affecting your web page’s usability. Adding microinteractions, for instance, is a wonderful solution to make guests really feel like your web page is extra ‘alive’.

Alternatively, you don’t wish to fill your website with animations to create a compelling person enjoy. If you wish to have your website to damage the mould, the easiest way to do it’s to design a unique navigation scheme, which is one thing Divi help you succeed in due to its modular gadget.


Scrolling isn’t one thing numerous us take note of in the case of internet design. Finally, the capability works the similar in maximum platforms and packages. With this in thoughts, changing it’s generally a nasty concept as a result of your web page’s usability is inherently affected for all guests.

In most cases talking, we’re in opposition to making adjustments on your web page that negatively affects its usability, and changing the best way scrolling works is a type of. There are two scrolling UI methods we suggest you steer clear of particularly, and they’re:

  1. Infinity scrolling: This design trick can glance nice, however it could possibly impact your web page’s efficiency.
  2. Scroll hijacking: Fundamental capability corresponding to scrolling and clicking must stay the similar on any web page you discuss with.

What do you consider changing the best way scrolling works in your web page? Percentage your ideas with us within the feedback phase under!

Article symbol thumbnail through mamanamsai /

The publish 2 Scrolling UI Tricks You Should Avoid seemed first on Elegant Themes Blog.

WordPress Web Design

[ continue ]