Design

When and How to Use Long Scrolling: A Collection of Examples

Sites with long scrolling are not an isolated trend or an exception. These are new opportunities for web designers. However, there are also pitfalls.

In this article, you will learn what long scrolling does, when to use it, and what to consider.

Benefits of long scrolling

This technique allows you to browse the site effortlessly – the user receives information as he flips through the page.

Firstly, scrolling does not require additional actions to get involved. The focus is on content, not navigation.

This is ideal for mobile. The smaller the screen, the longer the scrolling, but the touch-sensitive nature of the devices makes learning the material intuitive.

When long scrolling is the best solution

  • For storytelling: A linear structure is appropriate for stories.
  • For voluminous articles and multi-step tutorials.

Example – a guide for users of the cloud service Dropbox:

  • When the content is a single whole, and it cannot be divided into parts – for example, infographics.
  • To highlight the characteristics and benefits of the product, as on the Hans Brinker hostel website:
Long scrolling - Hans Brinker hostel website

Here are 11 tips to improve the user experience on long scrolling assets.

Motivate visitors to scroll

The content above the fold makes the first impression. It depends on him whether people want to scroll further. So put there:

  • An introduction answering the question of what this page is about.
  • Engaging Image Gallery – A picture grabs attention if it contains relevant information.

Make navigation sticky

Remember that users want to know where they are and see available paths to other sections of the site. If the menu disappears from view while scrolling, the visitor is forced to constantly go back.

The solution to this problem is sticky navigation:

Long scrolling - sticky navigation example

For mobile

On a small screen, the panel takes up an impressive portion. While the user is scrolling through the news, you can hide the navigation, and return when he scrolls in the opposite direction.

This is effective for endless scrolling that leads through a large amount of content without a visible finish, like in social media feeds.

Long scrolling is an example of sticky navigation in mobile

Tip: develop additional navigation. It creates shortcuts for the blocks viewed and helps you track progress.

Long scrolling - additional navigation with shortcuts

Make sure the back button is working properly

It is easy to get lost on the page when the Back button returns to the beginning instead of the position from which you follow the link when scrolling. You expect to return to the same fragment, but here you need to re-scroll the material. Nobody will like that.

Photo hosting Flickr is an example of how to meet user expectations. The site “remembers” where they were and returns to the same place.

Long scrolling - Flickr example

Consider scrolling position in URL

If the URL does not reflect the position and leads to the beginning, you cannot share the page snippet. This causes inconvenience when switching between devices if the user wants to continue from a specific place.

In HTML5, this is possible without reloading the page.

Create jump-to options

Another problem is disorientation: it is difficult to find anything that the user has already seen on the site.

The jump-to option will help you decide if the content is composed of roughly equal blocks. On Tumblr, you can jump down or back to the start if you get lost. To help – indicators in the form of dots on the left side of the screen.

Long scrolling - Tumblr example

You can reach the desired fragment of the home page with just one click!

If the dots are small or inconspicuous, and it is easy to miss when pressed, discard the idea.

Set up visual feedback when uploading content

The user doesn’t like surprises and wants to know what is happening on the page at any time. System status visualization is an important interface principle.

Visual feedback makes the design intuitive. If a site is downloading content, a clear sign is needed that this is indeed happening. Place a progress bar to show that new content is coming soon.

You can demonstrate how the system works using loop animation.

Long scrolling - example loop animation

Don’t limit scrolling speed

On the Mac Pro page, it runs at the set speed. No matter how quickly a person moves the cursor, they cannot select a convenient scrolling pace.

Long scrolling - mac pro page with fixed scrolling speed

Give the user control over their browsing. Otherwise, he may leave the site.

Optimize loading times

47% of visitors expect an opening in 2-3 seconds. If longer, 57% leave the page.

Analysis services and optimization tips come in handy:

Determine how many resources the page is consuming

Scrolling through photo and video materials, GIFs uses too much CPU memory. Especially on devices with limited resources such as iPhones, as many multimedia objects slow down the site.

Test on different devices and set up slowing animations for elements that the visitor has already viewed.

Study user behavior

Do you need long scrolling on the page? Analytical data will help answer this question.

It is used a lot in e-commerce. It is easy to scroll through the list of products or search results without stopping – nothing distracts from the choice.

Here are guidelines on how to create a positive user experience for your online store visitor.

Sticky Filters

They narrow down the list of thousands of products to the one that suits the interests. If the filters are always visible, the user feels that everything is under control and is not afraid to miss out on what’s important.

Long scrolling - example of sticky filters

Bookmarks

Provide the ability to bookmark individual items for later viewing.

Long scrolling - the ability to add to bookmarks

This helps to get back to specific items prior to ordering decisions.

Number of search results

This makes it easier for users to decide how long a viewing will take.

Long scrolling - number of search results by category

In the example, the total volume of search results is shown under the name of each category.

Accessible site footer

Usually they look for the necessary links and contact information there. Long scrolling often makes access difficult: new results are constantly released as the visitor approaches the end of the list.

This will help to solve the button “Load / Show more”, “Next” and the like. This is how content appears on demand, not automatically. The user easily reaches the basement and does not lose sight of it.

Long scrolling - accessible footer of the site

Parallax effect

The user’s attention online is 8 seconds, but convenient scrolling prolongs the interest. Especially if the animation is pleasing to the eye.

The background moves more slowly than objects on the page. This creates the illusion of 3D, motivates you to scroll further and causes the audience to wow.

Long scrolling - example of parallax effect

It is not only the “destination” that fascinates me, but also the “journey” around the site itself.

A stunning storytelling example is The Boat’s interactive graphic plot. As users scroll, animations move them to the next screen with new content, followed by more. I wonder what happens next.

Long scrolling - storytelling + parallax effect

If the user’s task is to make a purchase, scrolling parallax is a bad idea. Imagine how this would put Amazon visitors on guard every time they want to buy something. Leave this trick for entertainment and learning resources.

How not to pierce with parallax effect

  • Use simple animation features that are cheap to implement and not annoying. This translate3d (shift of an element along the X, Y, Z axes), rescale, rotation, darkening.
  • Do not use heavy pictures. This can get expensive.
  • Don’t sculpt too many animations onto one page. Not everyone can handle such a “visual clutter” on the site.

If the motion overlaps the background, add an alternate view of turning it off. Screw on a special button or switch for this.

Focus on the goals of your users and create a positive experience for them. If everything is intuitive and convenient, the amount of content does not matter.

High conversions for you!

The article was prepared based on the materials blogs.adobe.com.

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *