Scrolling in Web Design

Scrolling Best Practices

Long scrolling, parallax effects and similar mechanisms are still relatively new to the realm of design (~4 years) , but still some rudimentary trial-and-error has produced some fundamental best practices.

Summarized from Web Design Trends 2015 & 2016, here are some everyday tips for successfully implementing long scrolling.

  1. Don’t be afraid to alternate long with short scroll. Let the content dictate the scroll length, not the other way around. It’s totally fine (and quite popular) to use a short-scroll homepage and long-scroll landing pages (like Products, Tour, etc.).
  1. Consider sticky navigation, such as that used by Free Range Designs, so that users can always “get back” quickly or bounce from element to element in the scroll.
  2. Suggest scrolling with design elements or tools so that every user can quickly see how the site works. Arrows, animated buttons or similar user interface tools are fun and easy ways to help the user determine what to do next. Some sites even include a small button with instructions like “Scroll for More” or “Get Started” to help navigate a site with unconventional techniques.
  1. Make clear distinctions between scrolling clicks or taps and other calls-to-action so that your website gets the desired interaction.
  1. Do some research and look at how users are interacting with the scroll. In Google Analytics, for example, you can open the “In Page Analytics” tab to see how many people click below the fold. Based on the data, you can then tweak the design as necessary.
  1. Don’t go overboard. Long scrolling does not mean 500 pages of continuous content – a long scroll can also be simple. Tell your story and then stop. Don’t force it. Deca, below, uses a scroll that is only a few pages long.

Focus on your user goals and accept that even infinite scrolling sites are not truly endless. When creating longer-scrolling sites, understand that users still require a sense of orientation (their current location) and navigation (other possible paths).

  1. Include visual cues that help orient users in the scroll, such as the helmet icons used in the left hand side for “The Seven Types of Motorcycle Rider” site below.

Scrolling can be a double-edged sword, so stick to its recommended usage to avoid it doing more harm than good.