The days of “above the fold” are over. Long scrolling and infinitely scrolling sites are becoming more and more common lately, and it’s no mere trend or coincidence. The technique that allows user to scroll the chunks of content without any interruption or additional interaction (information simply appear as the user scrolls down the page) has following benefits:

• It simplifies navigation.
• Has more storytelling potential to engage users.
• Translates well to mobile devices.

The increased use of mobile screens has definitely played a key role in the widespread acceptance of this technique:

The smaller the screen, the longer the scroll

Furthermore, the gesture controls of mobile devices make scrolling intuitive and fun. However, long scrolling isn’t without its drawbacks. Here are a few best practices to follow to make sure that your long scrolling meets user expectations.

Use Visual Cues

Inform users that most of the content is below the fold

Suggest scrolling with design elements so that every user can quickly see how the site works. A subtle visual cue, such as an arrow pointing off-screen or a copy “scroll down”, can inform users that most of the content is available below the fold.

Keep Navigation Options Persistently Visible

Use sticky navigation or jump-to-page option

One of the biggest risks of long scrolling is disorientation — users may get lost along the way. This inability to determine current location and other navigation options causes annoyance and confusion to the users, and hurts the overall user experience.

When creating longer-scrolling sites, keep in mind that users still require a sense of orientation (their current location) and navigation (other possible navigation options). The obvious solution for this problem is a sticky navigation menu which shows current location and remains on the screen in the same position at all times.

If it’s impossible to add a navigation bar due to the limited screen space, you should consider a jump-to-page option:

Mobile devices only: Because a mobile screen is much smaller, a visible navigation bar can take up a relatively largely portion of the screen. It’s a good idea to hide a navigation bar when users scrolling for new content and revealed if they start pulling down trying to get back to the top.

Design Screen as Page

Let the content dictate the scroll length, not the other way around

A site wants to tell a story in a smooth, linear fashion. You need to keep the site organized and help the users understand it by designing each screen in a fold as a page. For example, each section in Le Mugs site includes its own piece of information that is wonderfully bolstered by activated animation.

Tip: Keep the total number of pages as small as possible to simplify navigation. Long scrolling doesn’t mean 100 pages of continuous content!

Incorporate Functional Animation

Use animation to establish a connection with users

Interaction design is the foundation of long scrolling site design and animations is essential part of the design. Animations bring their own touches and appeal to the site by providing users with a more smooth and comfortable exploration. Long scrolling enables creative elements like parallax scrolling and scroll-activated animations. They turn scrolling into something more fun and makes the user wonder “what will happen next?”

Parallax Effect for Storytelling

Parallax scrolling involves the background image moving slower than the content in the foreground, creating an illusion of depth and immersion. Parallax is more than an entertaining visual effect. When properly used, it can provide the kind of smooth visual narrative that will keep a user engaged.

Conclusion

Long scrolling can create a completely immersive browsing experience. If users like the UI and find it intuitive, then they won’t really mind the length of the scroll. Thus, focus on your user goals and make things more convenient for your users.