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.
Arrow pointing off-screen informs users that most of the content will be laid out below. Image credits: Fillet
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.
Scroll-activated sticky navigation. Image credits: Google
If it’s impossible to add a navigation bar due to the limited screen space, you should consider a jump-to-page option:
Jump-to-page option located in the right hand side of the screen. Image credits: brightmedia
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.
Facebook saves some vertical space by hiding the navigation bar based on the scrolling direction. Image credit: lmjabreu
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.
Image credits: Le Mugs
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?”
Animation makes scrolling more visually interesting. Image credits: codemyui
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.
Parallax effect creates a mesmerizing three-dimensional feel.
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.