Once, long-scrolling sites were deeply unpopular. Websites were all about the concept of “above the fold,” a term named after the important content that appears above the physical fold of a newspaper.
Today, the opposite is true. There’s little sense of a “fold” anymore – with such a huge variety of screens, ranging from the smallest mobile to the largest desktop, my fold probably isn’t the same as yours. And it certainly differs as I switch between devices.
But thanks to the popularity of mobile devices and social media sites, scrolling has become second nature to most of us. Just because users absentmindedly scroll up and down pages, however, doesn’t mean designers should take this for granted. With users overwhelmed by content and battling an ever-decreasing attention span, designers need to learn new rules to ensure that long scrolling engages users and entices them toward a conversion.
1. Start strong
While the concept of placing your most important content “above the fold” is largely defunct, you still only get one chance to make a good first impression. When landing on a site, users will make a split-second assessment of whether it’s worth hanging around. So you need a strong introduction to hook them in.
Place your most compelling content at the top of the page and offer them a good reason to keep on reading.
2. Create engaging content
“The success of your website depends on the strength of its content. ” Luckily, a long-scrolling site is the perfect canvas for storytelling. When creating your content, think about the beginning, middle, and end of your story, be it a sales page, about page, or product/services page.
Sprinkle the content with relevant, high-resolution images, videos, and infographics, and write enticing copy using action verbs to capture people’s imaginations and keep them moving toward the end. Consider how authors use chapters to draw readers through a story and employ the same techniques at the end of each piece of content.
3. Get clear on your goals
A long-scrolling site shouldn’t feel like it’s never-ending and rambling. Before you start to think about the design, you need to consider what your main goal is for that page, and ensure every single piece of content you include is geared toward nudging your users in that direction.
This means you should think about including CTA buttons in several locations down the page. Remember, not everyone will scroll to the bottom.
4. Avoid the false bottom
The “false bottom” is when people think there’s nothing else on the page and stop scrolling. While you want your prime content at the top to hook them in, ensure you include a visual cue that makes it’s obvious there’s more good stuff if they scroll on.
There are several options that accomplish this easily, such as an arrow or a simple text instruction to “scroll down.” If you want to get more creative, you could opt for a design cue, such as a line that leads down the page drawing people’s attention with it, or arranging content in an editorial-style layout avoiding hard lines so the scroll becomes natural.
5. Provide a clear roadmap
Navigation is one of the biggest make-or-break elements of a website. Especially on a long-scrolling site, where user disorientation can be a risk if it’s not done correctly. Users need to know exactly where they are on a page and have a clear path to wherever they want to go next.
Sticky navigation is a great option, as it shows the current location and remains visible at all times. This can take up prime screen space on mobile devices, however, so you may opt to hide the navigation bar when not in use.
If your page is particularly long, you may choose to include a jump-to option or consider a different URL for different stages of the page. Whatever you do, ensure that the back button works properly, so if people follow a link away they will return to the same part of the page they left.
6. Delight people with creative interactions
Long scrolling lends itself to immersive storytelling, so including creative scrolling techniques such as parallax scrolling or scroll-triggered animations is a fun way to engage users and encourage them to scroll more.
Parallax scrolling creates a completely immersive browsing experience. With the background moving at a slower pace than the foreground, it creates a sense of depth. Scroll-triggered animations, on the other hand, are great for breaking your content into chunks, with animations capturing people’s imaginations as it leads them through the content.
7. Don’t hijack the scrolling
Finally, avoid scroll hijacking. Users should retain full control over the site navigation at all times. With scroll hijacking, the page is set to move at a specific pace, regardless of user actions, something most often used to force people to browse content slower. This isn’t good and will disrupt the user experience, often resulting in them leaving the site. Let them dictate the pace they want to consume your content, and focus instead on creating great content that encourages them to consume it all.
“Long-scrolling websites are nothing new, but they have been undergoing a renaissance in recent years. ” The methods for enhancing the user experience are continually developing. Find the sweet spot between great content and an intuitive interface, and people won’t mind the length of the scroll. Like anything, regularly check your analytics to see how successful your long-scrolling site is and be prepared to tweak it as necessary.
Do you like using long-scrolling sites, and do you have any great tips to add to this list? Tell me in the comments below.