Long-scrolling websites, i.e. sites that let you scroll down for an extended amount of time, have been around for years.
The reason? Users love them!
That isn’t about to change, which is why we wanted to give you some tips and best practices in this article. Because long-scrolling or infinite-scrolling alone doesn’t mean the user is going to spend a long time on your website.
Have fun reading and scrolling 😉
What was changed through Long-Scrolling or Infinite-Scrolling Websites
Back in the day, Websites followed the same rules as newspapers: The most important content was supposed to be on top. There was even an expression for that: above the fold.
It still applies to Facebook ads and blog post teasers. The teaser determines if the user will click on the blog post or Facebook ad or not.
But this is exactly where the difference lies: When clicking something, the user makes a conscious decision. When scrolling, the user just keeps doing what he or she is doing already. The conscious decision would be to stop scrolling.
The argument for above the fold content therefore only partially applies to websites. The front page may contain the main claim and maybe a teaser, but it might not contain all of the relevant information.
You can see the difference at first sight:
Apple Website 1997.
Apple Website 2016.
Contrary to the original idea, endless scrolling is not causing higher bounce rates. Quite the contrary, it keeps the user entertained. At least, if it’s done right. The longer a user stays on your website, the more likely he or she is to react to your call to action.
When Will Users Keep Scrolling?
Users keep on scrolling as long as the content is interesting to them. The more the content becomes irrelevant to the user, the more likely they are to abort a session.
Another reason for the popularity of long-scrolling websites is the growing usage of mobile devices. Scrolling is especially convenient on the small screen compared to using buttons for navigating a website.
Long-Scrolling & Story-Telling
The challenge for designers and marketers is telling a story with their website.
There are multiple design possibilities and effects for this. Examples are animations or parallax scrolling (more on this shortly).
Alternating between different types of content, text, pics, videos and gifs is another thing that makes long-scrolling more attractive.
The Feeling of Control
Long-scrolling gives users a feeling of control, which is extremely important for user satisfaction.
Users can navigate long-scrolling sites at their own pace: they can stay on relevant content or keep scrolling if the content is not interesting for them.
Parallax scrolling and animations can partly be controlled by the user, giving him or her a feeling of control.
Scrolling also keeps the user focused and on topic instead of instead of having him click around all the time. Clicking a link always creates a delay. If the page takes too long to load, the danger of the user leaving is relatively high. This can’t happen with long-scrolling websites.
Structuring Content Appropriately
One challenge with long-scrolling websites is structuring the content in a way that makes sense. This is also important from a SEO perspective.
Theoretically you only need one page, although this is not reasonable in most cases. It makes more sense to have a horizontal navigation bar with the most important categories on your website. On the Usersnap homepage these are:
Tour / Our Customers / Pricing / Integrations / Blog
Each of these pages has different parts, but we chose not to use long dropdown-menus.
Our navigation bar takes the visitor to different sections, from which he or she can navigate further within the site.
A big challenge with long-scrolling sites is determining the optimal length for the user.
Too much content will overwhelm the user.
Too much content can overwhelm users and result in a bad user experience. It’s hard to give general tips about this issue, as it largely depends on the type of industry or niche the site is in. Long-scrolling or infinite-scrolling sites with products are more widely accepted on e-commerce sites.
Long-Scrolling and Interaction
Animations and hovering have been around before long-scrolling, yet the effects are still popular. The reason is simple: long-scrolling creates entertainment and interaction for the user.
Interactive elements keep users busy and also create a little mental break. A good example is the website of Pirate Code: http://piratecode.ru/en/
http://piratecode.ru/en/
This site shows animated waves and lets the user scroll horizontally.
Parallax & Long-Scrolling
The parallax effect has been around for years. In the beginning, it was especially popular in retro video games, before being quickly adapted by the web design community.
The parallax effect incorporates different backgrounds that move at varying speeds. The result is a pseudo 3D effect. The term “parallaxis” stems from the Greek and means “change”.
A fantastic example of a combination of storytelling, parallax and long-scrolling is the website The Boat.
It takes Nam Le’s graphic novel about escaping Vietnam and transfers it using technology of modern web design.
You can watch the video below, but I suggest you visit the site so you can scroll it yourself.
The parallax effect is still a little limited on mobile devices, but that should change shortly due to improvements to Ajax. Parallax is an effect that entertains users and is therefore becoming increasingly important.
Wrapping it up.
Long-scrolling websites have established themselves as an integral part of the internet. Users love them and companies have the possibility to present different kinds of content and offers to their users.
Still they involve challenges, as only content that is consistently relevant and presented through stellar web design will keep the user scrolling down.
Here is an overview of the pros and cons of long-scrolling websites:
PRO:
- Interactive story telling
- Low bounce rates
- Higher immersion
CON:
- Challenging for SEO
- Hard to measure
- Content is difficult to set up
- Complicated cross-browser testing
We are excited to hear about your favourite long-scrolling website!
We at Usersnap hope that you like this post and would love it if you follow us on Twitter. We post and offer solutions about web development, web design and UAT on a regular basis.
Usersnap is a customer feedback solution. Get immediate feedback from the visitors of your websites or web products. Try it now for free!
Resolve issues faster with visual bug reporting.
Simplify and reduce issue & bug reporting efforts with screen recordings, screenshots, and annotations.
And if you’re ready to try out a visual bug tracking and feedback solution, Usersnap offers a free trial. Sign up today or book a demo with our feedback specialists.
