Infinite and long scrolling is gaining popularity, and it’s not just a coincidence.
There are a number of reasons why people are scrolling now more than ever, so it’s important that your website does it right.
- Long-form content: Long-form content is gaining popularity when attempting to boost SEO. Having to click through a long article can drive visitors away but providing an easy-to-navigate scroll feature makes them more likely to get through the entire piece.
- Touch Screens: Touch-screen technology has blown up and naturally lends itself to scrolling. As mobile devices and touch screen technology continue to dominate the market, scrolling is becoming a standard practice.
Scrolling Best Practices
Scrolling opens a lot of new creative doors for web designers. But, you can’t have more freedom without a couple of drawbacks to be aware of. Designers have to pay strong attention to content, navigation, animations, and SEO when it comes to long or infinite scrolling. Keep these four scrolling best practices in mind when working with long scrolling:
Encourage scrolling
Adjust Navigation
Use animation
Follow SEO Guidelines
1. Encourage Scrolling
Although people typically start scrolling as soon as they land on a page, content above the fold is super important. What you present to users at the top of the page forms their initial impression and sets expectations for your users. People will scroll, but only if what they see above the fold is interesting enough to push them. This remains true for a page on any size screen, whether it be a desktop, mobile, or tablet.
Provide Good Content
What users see on a page without any action is what encourages them to keep scrolling. To ensure people will get past the top of the page, you need to provide them with content that excites them.
Offer a good introduction to set the context for your content and help them get an idea of what the page is about.
Provide interesting facts at the top of your page to attract readers and keep their attention.
Using engaging imagery will allow readers to pay closer attention to your page.
Avoid False Bottom Using Scroll Indicators
Any content above the fold should signal that there is more content below the fold. When you present a false bottom, you don’t give users any reason to believe there is more to see.
To avoid a false bottom scroll, indicators are your best friend. Providing users with a visual cue that there is information below the fold encourages scrolling and eases confusion. A subtle scrolling cue such as an arrow pointing down the screen or even text reading “scroll down” helps users understand that there is more to see.
Once we added a scroll indicator to our home page, more of our website visitors made it all the way to the bottom of the page. In addition, we found that users continue to need encouragement beyond the initial fold. People typically will scroll once but need the extra reminder to keep moving down, so don’t ditch the scroll indicator until your users have seen it all.
2. Adjust Navigation for Scrolling
Your website navigation must be running smoothly so users can quickly locate where they are on a page and get to where they want to go next.
Sticky Navigation
Long scrolling makes navigation problematic for users. Basically, if users lose visibility of the navigation bar as they scroll, they have to scroll all the way up when they get deep into the page. Sticky navigation is the perfect solution to the problem. While it is best to keep the navigation constantly visible, if you are worried about valuable screen space, you can hide the navigation in the scrolling direction and make it available by request.
The latter option is particularly useful for mobile devices since mobile screens are much smaller than laptops, desktops, or tablets.
Consider a Jump-to Option
A common problem with long scrolling is disorientation, meaning users might have trouble finding something they had already seen on the page. This can get problematic when content is broken down into sections or blocks.
A jump-to section is composed of a series of links that can take users to the page-related content they want. Think of it as a table of content for a webpage.
Make Sure Back Button is Fully Functional
Nothing is more frustrating to a user than when they follow a link on a page, click the Back button, and don’t return to the same spot on their original page. It is crucial the user’s position on the page is maintained so the users don’t lose their place on a page.
3. Use Animations
As humans, we don’t have the longest attention spans; with this in mind, it’s important to provide a delightful scrolling experience to prolong a user’s interest. Animations can be a great way to guide users through a scrolling experience.
Scroll Triggered Animations
Breaking up your page into scrollable “chunks” allows you to introduce content through animations within each “chunk.” As a user scrolls, the animation will transition them to the next screen, creating a path of content to follow. It’s a great way to highlight the flow of content to your users while keeping them engaged.
4. Follow SEO Guidelines
Long or infinite scrolling can hurt your SEO but not if you are careful to follow some basic guidelines. Check out Google’s best practices to ensure your website is towards the top of the search engine result page. In addition, monitor your progress using Google analytics to see if you need to make any adjustments along the way.
Takeaway
Mobile devices and long-form content are making scrolling more relevant than ever before. Users are willing to scroll below the fold but only with some extra encouragement and simple but functional navigation. Implementing intuitive design and the right visual cues will increase a visitor’s website time allowing you to secure more conversions.
