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?
Infinite scroll on Pinterest makes sense, because users can consume image content easily while browsing for inspiration.
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.
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
Although Overstock.com does a great job with a “back to top” button (1), you can never quite reach the footer for contact info, no matter how far you scroll (2)
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.
2. Add Page Numbers to the Bottom & Change the URL while Scrolling
Google can read the content of your infinite page without scrolling infinitely through everything, since JavaScript/jQuery is generally the engine that drives infinite scroll, and for the most part, search engine robots ignore this. They’ll more or less read the static HTML on the page to determine what the content is. So, if you’ve got those links in the code of the page, then your products will be crawlable. I say more or less because this isn’t 100% true: Google takes your page layout into consideration when determining what the content is about and will render it visually to see what you’re hiding. Remember when spammers were using invisible text to stuff keywords into pages until Google cracked down on it? Well, hiding content using JavaScript and CSS is today’s equivalent of putting white text on a white background back in 2003. The challenge is that sometimes (more often than not), this is actually a good thing, as it improves the user experience when people can expand and collapse the content they need, rather than scrolling through pages of content they don’t. Google (and Bing and Yahoo and others) have had to become “intent engines” rather than mere search engines. So, as long as the intent behind hiding content is to improve the user experience, then theoretically, you should be okay. Google also recognizes that design trends like infinite scroll require workarounds, like hidden links at the bottom that users never see. This is a case where hidden links are okay. In addition, HTML5 has a nifty feature for rewriting history: maybe not the history of the world, but certainly the history of a browser! Put simply, this allows you to code your infinite pages such that the URL changes to the appropriate page number as the user scrolls further down. This can be especially useful for readers who want to bookmark your page when they find what they’re looking for … without having to scroll through countless entries to find it again.
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.
Polyvore.com does a great job of floating an ‘about’ button that expands the footer when clicked.
Always Think About Users First and Google Second
There is certainly plenty more worth your consideration when implementing infinite scroll on your website, including deciding on whether or not infinite scroll is, in fact, the right solution for you. I wanted to keep this checklist small so that it might serve as inspiration for future projects, rather than a boilerplate ‘how-to’ article. When you or your UX/UI designer execute any sort of design change, always ask yourself two questions: How will this affect users? and How will this affect our Google rankings? If the user is unable to access your footer links because infinite scroll prevents it, then you need to provide another way of finding relevant information like methods of contact, return policy, FAQ, and any other common and important links typically found at the bottom of a page. And, if you’re implementing lots of JavaScript (often in the framework of jQuery) to help users navigate your website, then make sure you’ve got a back door built in so that Google can find that content, too.
The post A Small Checklist for Infinite Scroll Websites appeared first on Consorte Marketing.