The scroll is sacred

Scroll and click.

Since the dawn of the internet, this is how we’ve interacted with websites. Unless you’re (un)lucky enough to fill out a form, your experience on the web consists of scrolling pages and clicking links.

In the days of slow internet and small screens, scrolling was unfashionable. This led to terms like ‘above the fold’ where it was assumed visitors wouldn’t venture past what they could see on one screen. Entire websites were built to exist solely within a window (I’m guilty of this, but everyone was at the time).

Over time, internet connections got faster, screens got more varied in their size and the scroll became smoother and more tactile with touch screen devices. Visitors were happier to scroll through content.

So, pages got bigger. Sites got better looking. Win win.

There were lots of benefits but also new technical challenges. Internet speeds had improved but these big pages were packed with high resolution images and autoplaying videos and were still slow to load. They also needed to be optimised for devices with slower internet connections. A solution widely used today is to load content dynamically as the user reaches that part of the page. Simple but problematic. If the user scrolls too quickly, the content can still be loading when they fly past it. I’m a self confessed ‘skimmer’ so often when I’m visiting websites I’ll miss the content the creators have spent so long designing.

Scrolling on mobile also behaves differently. The page can only detect where you are when you stop scrolling, so if you swipe hard and let the momentum of the scroll take you through the page, the content won’t appear.

Another challenge was how to keep visitors engaged as they scrolled.

Improved browser support for CSS3 allows pages to animate as you scroll, bringing them ‘to life’. While it can be impressive when implemented well, ‘on scroll’ animations suffer many of the same issues as dynamically loading the content. If your user scrolls too quickly or is on mobile, your animations may never appear, leaving your site looking less than impressive.

Animations are also so easy to implement, it can be tempting to overuse them. If everything on a page is grabbing your attention, nothing is.

Remember, you don’t own the scroll

You visit a site. It’s a ‘cool’ site. Big full screen video, animations. You go to scroll and nothing happens. You think ‘oh, that’s strange’. Then you realise your scrolling is animating in some text. You reach a point where you’ve scrolled enough that the site decides you are worthy to progress and suddenly the page jumps, skipping to the next section for the experience to be repeated. You are no longer in control of the page. It’s unpredictable. Wanting to escape, you quickly close the window.

This dramatisation epitomises my experiences with sites that are trying too hard. Apple’s infamous Mac Pro page is an example and one that takes control away from the user. Apple just about gets away with it because of the product, but despite the execution it’s still a pretty poor experience.

There are ways to achieve a similar effect without taking away control and it seems to be a lesson Apple itself has learned. Its new iMac Pro page still offers an engaging experience, but the user is in control of the scroll at all times.

To be honest I didn’t expect to write so many words about something as simple as scrolling a website, but it just goes to show how far the user experience extends.

My take away would be to respect the scroll, respect the user and challenge yourself. Does this box need to animate in? Does every element need to load dynamically? What can I use as placeholders if my content fails to load? These little touches can really help a site stand out, but as with everything, using them in moderation and in smart ways is key.

Always keep in mind that visitors only have two ways to interact with your content, so try not to screw with the scroll.