How to Use Scrolling to Your Advantage in eCommerce

One of the most common concerns we hear when building an eCommerce website, is that our clients want as much information as possible “above the fold”. In most websites, the “fold” tends to be the top 550px of the page, varying on theme or style. While the fold is still important to engage users, it […]

By Beth Shero

above-the-fold

One of the most common concerns we hear when building an eCommerce website, is that our clients want as much information as possible “above the fold”. In most websites, the “fold” tends to be the top 550px of the page, varying on theme or style. While the fold is still important to engage users, it is not the end all of the design user experience. Many businesses want to avoid scrolling through a web page to find what they’re looking for.

With the rise of the mobile devices, more people are scrolling naturally every day. Customers have started to be trained on how to scroll to get where they want to go, and that trait has begun shifting onto laptops and computer screens as well. More and more frequently, visitors to websites are scrolling to the bottom of a page first before going back up to the top. 

Therefore, it might be time to start rethinking just where your call to action triggers are on your website, and how you can design your eCommerce website to increase your conversions.  

How Do Your Users Behave?

First let’s see how do users behave.  There are three main ways that people are scrolling through websites:

  1. They are scrolling before all of the page loads. This means that they may not even see the top of the page content. While it may seem counter-intuitive to move before your content is even loaded, this behavior has started to become more common. Load speed times have a huge impact on this as well, as the user convinces themselves that what they’re looking for is at the bottom of the page and starts moving to avoid having to wait for what’s at the top of the page to load. If the user does not see the information they need right away, they will naturally begin to scroll to the bottom of the site and back up to determine if it is worth reading.
  2. Habit. Certain information is usually always found in specific places on a website. Contact information is usually located in the footer, as are addresses and other important data. Visitors to your website have grown accustomed to where this information is, and they habitually move about websites expecting that information to be where they think it is. With the high rise of mobile devices and tablets, scrolling has been a no brainer. In fact, the younger generations do not even think about it twice. They move naturally around the site, navigating through fold sizes that could vary from 300pixels to 2000pixels, in order to get what they want to find, and they’ve been trained to do this on every website they frequent.
  3. The “fold” was a term originally used in the newspaper industry. Important information, or the most eye catching stories would be placed “before the fold” of the paper so that those passing by would be able to see it. Websites aren’t newspapers, they’re their own organic outlet, and someone who is going to your website is going there for a specific purpose. You don’t need to fit everything above the fold, because your customers will scroll to find it. By ensuring that your website isn’t segmented into specific boxes, you will be giving yourself the ability to make your website flexible and capable of growing in scale.

Why are these behaviors important? It may make you rethink your strategy for designing your eCommerce site with conversions.

Here are a few great examples:

  • You may want to enable an auto scroll feature for product categories so that the products can load as the user scrolls.
  • Or you may want to add calls to action in a different area to not lose any opportunity to get your customer to opt in. A great example of this is to have a promo banner at the top of your website explaining the current sale. Then including it again on the product page so they can see it on the individual product. Finally on the cart before they checkout to help drive the sale on the product to push the person to checkout.
  • Use parallax scroll to encourage engagement and to improve the user experience
  • Give indicators or icons that the user can scroll
  • Move the “Add to Cart” button on the product page around using A/B testing. You may get better results if it right at the top or further down. This varies depending on your customer we have heard and seen mixed results for where to add the Add to Cart Button on the product page.

How can you truly measure to gauge the impact of these changes?

There are a number of ways to see how these changes have affected your website. Here are a few great examples:

  1. First, test to see where the fold falls on your site to see if critical information is being cut off or needs to be adjusted. Try using a site like https://www.foldtester.com/ This will help determine what percentage of the people are seeing different areas of your site.
  2. Use in page analytics with Google analytics or use a service like https://www.clicktale.com/ to allow you to view heat maps, funnels and more. In fact, ClickTale has a great feature that lets you use a heat map to to see where visitors abandon the page. This will help you adjust the content and page content to improve conversions.
  3. A/B Testing can be set up using Optimizely

How Can You Use Your Design to Encourage Scrolling?

The simplest thing you can do is to encourage scrolling by building anticipation. (may want to add more like this site – https://www.conversion-rate-experts.com/scrolling-tips/)

Conclusion

Working with the scroll on your eCommerce site can help engage your customer, improve the user experience and conversions. Scrolling will not hurt your business, but in fact help get the customer more engaged to learn more, purchase a product or read the content. However, keep in mind that If the scrolling feels forced it will not work well. Keep your designs flexible so they do not feel forced and focus on the content so that you take your customer on the proper path to purchase your project or learn more about your brand so they can engage in a different level versus being stuck in a box without any flexibility. Do not be afraid to break out of the box with responsive design in your eCommerce business.

Co-founder & CEO