Websites with long or infinite scrolling are becoming more and more common lately, and it’s no mere trend or coincidence. The technique of long scrolling allows users to traverse chunks of content without any interruption or additional interaction — information simply appear as the user scrolls down the page.
Infinite scrolling is a variety of long scrolling that allows users to scroll through a massive chunk of content with no finish line in sight
Long scrolling has the following benefits:
• It has more potential to engage users. (Scrolling minimizes the interaction cost required to attain a variety of user goals. The advantage of not having to click “next” keeps users engaged with the content and less focused on the mechanics of navigating to the next page.)
• It translates well to mobile devices. The increased use of mobile screens has played a key role in the widespread acceptance of this technique: The smaller the screen, the longer the scroll. The gesture controls of mobile devices make scrolling intuitive and fun.
When To Use Long Scrolling?
Long scrolling is not for every website. It is appropriate in the following circumstances:
• For storytelling (it creates a linear structure that storytellers can leverage);
• For continuous and lengthy content, such as a long article or a multi-step tutorial (it provides a better user experience than slicing it up into several separate pages);
• When the content cannot be divided into separate parts and should be presented as a whole (for example, an infographic);
• To highlight the features, qualities or attributes of a product in a story.
How To Implement Long Scrolling
Some rules will help you to provide a good user experience for long scrolling.
1. ENCOURAGE USERS TO SCROLL
Despite the fact that people usually start scrolling as soon as the page loads, content above the fold is still very important. What appears at the top of the page sets the initial impression and the expectation of quality for visitors. People do scroll, but only if what’s above the fold is promising enough. Thus, put your most compelling content above the fold:
○ Offer a good introduction. (A good introduction sets the context for the content and helps to answer the user’s question, “What’s this page about?”)
○ Use engaging imagery. (Users pay close attention to images that contain relevant information.)
2. KEEP NAVIGATION OPTIONS PERSISTENT
When you create a longer-scrolling website, keep in mind that users still require a sense of orientation (i.e. their current location) and a sense of the navigation (other possible paths). Long scrolling can make navigation problematic for users: If the navigation bar loses its visibility when the user scrolls down, they will have to scroll all the way back up when they’re deep within the page. The obvious solution to this problem is a sticky menu that shows the current location and that remains on screen in a consistent location at all times.
3. MAKE SURE THE “BACK” BUTTON WORKS PROPERLY
Long scrolling often causes the user to lose their position on the page. This happens when they click away from a long scrolling list and, upon returning by clicking the “back” button, are brought to the top of the original page instead of where they left off. But when the user follows a link on the page and then clicks the “back” button, they expect to return to the same spot on the original page. Losing their spot forces them to have to scroll through content they have already seen. It’s no surprise that users get frustrated quickly by not getting proper “back to position” functionality.
The website that remembers the user’s scroll position, so when the user presses the “back” button, they return to their original position is often have more visitors.
4. CHANGE URL BASED ON SCROLL POSITION
One of the most common problems with long scrolling is that sharing a URL to a particular spot on the page is impossible: The user’s scroll position isn’t reflected in the URL, and the URL leads to the top of the page. The user will become easily frustrated when they can’t easily switch between devices to continue browsing from their current spot because the URL doesn’t capture that spot.
Starting with HTML5, changing the URL displayed in the browser without reloading the page is possible. The history.pushState() function enables us to invoke a URL change without reloading the page, thus allowing us to match the scrolling behaviour to the user’s expectation.
5. CONSIDER JUMP-TO OPTIONS
Another common problem with long scrolling is disorientation: The user might have difficulty finding something they have previously seen on the page. This can be a serious problem when content is broken down into multiple equally important sections or blocks (such as a long tutorial). A “jump to section” option would solve this. The content on the page is broken down into several blocks that are clearly distinguished, and big indicator dots are fixed to the left side of the screen.
6. PROVIDE VISUAL FEEDBACK WHEN LOADING NEW CONTENT
The user wants to know their current context in a system at any given time, and a website shouldn’t keep them guessing — it should tell the user what’s happening via appropriate visual feedback. If your website dynamically loads content, then users need a clear sign that the website is doing this. Keep them informed; use a progress indicator to show that new content is loading and will soon appear on the page.
Because loading of content is supposed to be fast (it shouldn’t take longer that 2 to 10 seconds), you can use looped animation to indicate that the system is working.
7. OPTIMIZE PAGE-LOADING TIME
Slow loading times are a common problem with long scrolling pages. But for websites, slow performance is a death blow. In fact, 47% of users expect a web page to load within 2 seconds. If a page hasn’t loaded within 3 seconds, 57% of users will leave.
Though loading time is a problem for long scrolling pages, it can be solved. Page-loading time can be optimized with sequential loading techniques, such as lazy loading, enabling users to access basic content really quickly.
8. CONSIDER HOW MUCH RESOURCES YOUR PAGE CONSUMES
Always consider how much resources (CPU and memory) your page consumes if you’re using long scrolling (especially for pages with a lot of images and animation). Scrolling through multiple pages of photos, animated GIFs and videos without the page reloading can take a significant toll on system resources, and devices with limited resources, such as the iPhone, can start slowing down because of the sheer number of assets it is loading. Thus, test your website using different devices, and use tricks like pausing animation and video when the user scrolls past them.
9. CONSIDER USER BEHAVIOR ON THE PAGE
To determine how effective long scrolling is, find out how users are interacting with it. Analytics data are able to answer this question. In Google Analytics, for example, you can open the page analytics to see how many people click below the fold. Based on the data, you can then tweak the design if necessary.
Parallax Effect For Long Scrolling
Interaction design underlies long-scrolling websites, and animation is an essential part of this design. Considering that users’ attention span on the web is about 8 seconds, a delightful scrolling experience will certainly prolong user interest. One interesting animation that can delight users is the parallax effect.
With parallax scrolling, the background image moves more slowly than the content in the foreground, creating the illusion of depth and immersion. This effect makes imagery feel less flat and more three-dimensional.
WHEN IS PARALLAX SCROLLING EFFECTIVE?
In web design, the journey can be as enjoyable as the destination. Parallax is an entertaining visual effect that can make a great first impression and encourage visitors to scroll more. It’s very useful when you want to wow your audience.
Parallax scrolling is also very effective in guided storytelling. When you want to tell a story in a smooth, linear fashion, pairing long scrolling with the parallax effect can create a completely immersive browsing experience.
WHEN IS PARALLAX SCROLLING THE WRONG APPROACH?
Avoid this technique if the majority of your users are looking to accomplish clear-cut tasks (for example, purchase a product).
While all potential performance problems cannot be completely solved, you still can improve scrolling performance by following simple techniques:
• Only use properties that are cheap for the browser to animate. These are translate3d, scale, rotation and opacity.
• Don’t animate massive images or dramatically resize them. Forcing the browser to resize images (especially huge ones) could be costly.
• Avoid animating a lot of things at once.
Long scrolling can create a completely immersive browsing experience. If users like a UI and find it intuitive, then they won’t really mind the length of the scrolling. Thus, focus on their goals and make things more convenient for your users.