A Small Checklist for Infinite Scroll Websites
Love it or hate it, infinite scroll is here to stay. It’s the user interface to which users have grown accustomed on leading social media websites like Facebook and Pinterest, and with good reason. In a social environment, it’s easy and intuitive to process content by scrolling, rather than by clicking “next page” every 30 seconds. Many content websites, as well as ecommerce sites, have adopted this technology. Some have implemented endless scrolling well, while others have fallen short in key areas. Often, a decision-maker says “Hey that looks cool; implement it” without giving enough thought to what that change might mean. If you’re thinking about using infinite scroll, or if you already have it on your own website, then this post is for you. I’ve compiled a short list of important considerations to help you get the most out of your infinite-scroll webpages.
A Little Background: Where Are We Coming From?
A website we recently began managing is BabyBlankets.com. It’s a simple site where you can buy personalized baby blankets, but the space is highly competitive, with major brands like Pottery Barn, Toys “R” Us, Walmart, Personalization Mall, Things Remembered, and Etsy dominating Google search results. This inspired us to brainstorm new ways to drive traffic and sales. For example, we decided to run a Groupon promotion, but in order to make the numbers work, it was necessary to manufacture a large quantity of blankets overseas to drive the cost per unit down below wholesale, rather than reselling the popular brands we carry and taking a loss on every sale. The Groupon sale put us in front of thousands of people who would not otherwise find us and generated a respectable number of conversions. We were able to walk away with a small profit. [clearboth]
The projected total sales volume was off, however, and we were left with a warehouse full of unsold merchandise. So we started brainstorming ways to liquidate this unsold inventory to free up cash for a wider selection of baby products. One of our options was to contact Overstock.com and see if we could get our blankets listed there. I visited the website, landed here, and, after scrolling through a seemingly infinite number of blankets, I wanted to talk to someone. I scrolled a bit more but never reached the footer where that coveted “Contact Us” link usually resides. I also did a CTRL+F and typed in “contact” to highlight it on the page to no avail. Frustrated, I resorted to viewing the source code of the page and searching for the contact link, and then I said “Wait a minute, you do this stuff for a living. You know where clients like to bury stuff like contact information.” So I closed out the source code, and, right before giving in to the temptation to leave the Overstock website and go to Google to run a search on “contact site:overstock.com,” I clicked the logo, scrolled to the footer, and clicked the “Sell Your Products” (not contact) link to get to the page I’d been scrambling to locate. Needless to say, this irritated me to the nth degree, and I decided to let it out here!
1. Make Sure People Can Contact You from Any Page
This is the first item on the checklist because it inspired this article. It amazed me that a billion-dollar company that reported 17% sales growth in Q2 overlooked this simple strategy. Granted, they are Overstock, and people like me will likely put forth the extra effort necessary to get in touch. But this could be a disaster for the typical (smaller, less famous) ecommerce business. If your contact information is in the footer of an infinitely scrolling page, people will never find it. The solution is very simple: put your contact information into the header of your website, or make it otherwise easy to find from any page. We always advise our clients to put their contact information front and center, even the ones who want to hide behind their websites and prefer not to engage their customers. Customers like to know that there’s someone on the other end who can help them when they have a question or problem. If they assume there’s no way to contact you, you’ll see a drop in conversion and sales, and, most likely, some nasty reviews scattered around the web from irate customers who have had a hard time reaching you. [clearboth]
2. Add Page Numbers to the Bottom & Change the URL while Scrolling
3. Make Your Top Navigation Sticky, or Provide a Scroll-to-Top Button
If you’re going to implement infinite scroll, then make sure your top navigation never leaves the page. It’s frustrating for users to scroll through hundreds of products only to not find what they’re looking for and have to scroll all the way back to the top of the page to navigate elsewhere. Sometimes the back-button will save the user some of this hassle, but I’ve found that, at least on mobile devices, the back-button often creates more problems than it solves. The solution is also pretty simple by today’s standards: if you’ve got a WordPress or Magento website, there’s probably a plugin or theme that will suit your needs almost perfectly. If you’re a developer, then a bit of CSS is all you really need to create a fixed navigation bar that always stays at the top or side of the page. You may also consider a navigational element somewhere towards the bottom that allows the user to scroll all the way back to the top with just a click, rather than resorting to reloading the page.
Always Think About Users First and Google Second