Best practices for scrolling

Scrolling is a widely applied web design feature, and its popularity is increasing nowadays, especially because of the growth of touchscreen mobile devices usage. Well organized and thought out scrolling in combination with current graphic design trends will motivate your site visitors to interact with your website. Read our best practices for scrolling to know how to encourage users to scroll and how to meet their expectations, so they are satisfied with the user experience when scrolling on your website.

How to encourage users to scroll?

• Sticky header for better navigation

While scrolling further is engaging and interesting as it reveals new information, scrolling a long way back is boring and irritating for users. A sticky menu (as well as sticky filters and a sticky search bar) that has an unchangeable location is a great and easy solution. As it is visible during the whole scrolling process, it helps users not feel lost and quickly skip to any other part of your page and website.

Place your sticky menu on the top or on the sides, and highlight the current position with color, bold text, an underline or any other recognizable way.

Besides a sticky header, you can use a sticky “back to top” button or up arrow to accelerate scrolling and get right to the starting point from any stage of scrolling. This web design technique works well for pages with long scrolls and non-segmented content of the same type, like feeds.

• Different URLs for different scrolling positions

When there is only one URL for a whole long scrolling page, it’s impossible to copy and share an address directing to a certain part of page. So if you want your site visitors to spread your content to get more traffic to your website and more attention to your business, make this process convenient for users. Provide a number of URLs to reflect each logical scrolling point without reloading a page.

Changing URL-addresses during scrolling automatically, as is shown on the example below, is one of the best practices for scrolling that provides positive UX. Also, clicking on navigation bar sections can bring users to the appropriate page scrolling spot, but this way is also harder for users to know where they need to click in order to get the needed URL. By the way, the # sign is commonly used before a section name to indicate that this URL belongs to a long scrolling page.

• Visual feedback when loading more content

If your scrolling page dynamically loads its content, let your users know that it is doing this. Keep them informed about what operation is currently executed and keep them from guessing to provide better UX. To do so, use clear visual feedback like a looped animated progress indicator to show that new content is loading and will soon appear.

To keep your visitors on the site it’s also important not to make them wait for too long. If your content is loading for more than than 2-10 seconds, think about ways to optimize your page load speed.

• Layout cutting off to avoid fake page bottom

Your web design shouldn’t look like there’s nothing to scroll. Instead, give users a clue that there is more content below the fold, and that the end of the visible content doesn’t equal the end of the page. One of the useful practices for scrolling is to make your content above the fold look incomplete by cutting images and titles. In this case users will intuitively want to scroll to see the rest of the visible part, and then they will be encouraged to keep on scrolling further until they hit the real bottom of the page.

This practice is especially useful for websites which use a grid layout or card-based web design on pages displaying a list of blog posts, news articles, online store products or search results. As these grid web pages contain a large amount of items, it’s important to encourage users to scroll to see them all. This will increase the likelihood that site visitors will be interested in items below the fold.

• Explicitly asking users to scroll

Usually users make a decision to scroll intuitively based on the length of scrolling bar and other website design hints. However, it’s totally normal to be straightforward and tell site visitors that a page requires scrolling to display more content.

So put a direct call to action on the the browser window bottom which encourages users to scroll and explore your website. Beside words, you can use just an arrow pointing  down or something like a “v” sign, which is a simplified version of an arrow. This web design feature can be removed after the user starts scrolling.

 
Use best practices for scrolling to make your website convenient to navigate through and provides a great user experience. Encourage users to scroll and interact more with your website, which will encourage them in turn to convert.

If you want your website design or speed to be better, contact our website development team. Order a Drupal or WordPress performance audit or any other website maintenance services to make your web resource be well scrolled and well displayed, not to mention working well.