Menu Search
Jump to the content X X

Just Keep Scrolling! How To Design Lengthy, Lengthy Pages

Websites with long or infinite scrolling1 are becoming more and more common lately, and it’s no mere trend or coincidence. The technique of long scrolling allows users to traverse chunks of content without any interruption or additional interaction — information simply appear as the user scrolls down the page.

Infinite scrolling is a variety of long scrolling that allows users to scroll through a massive chunk of content with no finish line in sight (it’s the endless scrolling you see on Facebook, Twitter and Tumblr feeds).

Further Reading on SmashingMag: Link

Long scrolling has the following benefits:

  • It has more potential to engage users. (Scrolling minimizes the interaction cost6 required to attain a variety of user goals. The advantage of not having to click “next” keeps users engaged with the content and less focused on the mechanics of navigating to the next page.)
  • It translates well to mobile devices. The increased use of mobile screens has played a key role in the widespread acceptance of this technique: The smaller the screen, the longer the scroll. The gesture controls of mobile devices make scrolling intuitive7 and fun.

Scrolling opens a lot of new doors to designers. However, this pattern is not without its drawbacks. It requires designers to pay strong attention to content and navigation8. In this article, I will discuss some of the benefits, things to consider and quick tips for long scrolling. If you’d like to get more creative with your designs, you can download and test Adobe XD9 for free and get started right away.

When To Use Long Scrolling? Link

Long scrolling is not for every website. It is appropriate in the following circumstances:

  • For storytelling (it creates a linear structure that storytellers can leverage);
  • For continuous and lengthy content, such as a long article or a multi-step tutorial (it provides a better user experience than slicing it up into several separate pages);
    10
    Dropbox’ “User Guide” is an example of long scrolling in action. (Source: Dribbble11)
  • When the content cannot be divided into separate parts and should be presented as a whole (for example, an infographic12);
  • To highlight the features, qualities or attributes of a product in a story.
13
Long scrolling on Hans Brinker14’s website highlights the qualities and attributes of a service in a story. (View large version15)

In these contexts, long scrolling and long reading are synonymous.

How To Implement Long Scrolling Link

The following 10 rules will help you to provide a good user experience for long scrolling.

1. Encourage Users To Scroll Link

Despite the fact that people usually start scrolling16 as soon as the page loads, content above the fold is still very important. What appears at the top of the page sets the initial impression and the expectation of quality for visitors. People do scroll, but only if what’s above the fold is promising enough. Thus, put your most compelling content above the fold:

  • Offer a good introduction17. (A good introduction sets the context for the content and helps to answer the user’s question, “What’s this page about?”)
  • Use engaging imagery18. (Users pay close attention to images that contain relevant information.)

2. Keep Navigation Options Persistent Link

When you create a longer-scrolling website, keep in mind that users still require a sense of orientation (i.e. their current location) and a sense of the navigation (other possible paths). Long scrolling can make navigation problematic for users: If the navigation bar loses its visibility when the user scrolls down, they will have to scroll all the way back up when they’re deep within the page. The obvious solution to this problem is a sticky menu19 that shows the current location and that remains on screen in a consistent location at all times.

20
Scroll-activated sticky navigation (Image: Zenman)

For mobile devices only: Because a mobile screen is much smaller than most other devices, a navigation bar can take up a relatively largely portion of the screen. If the screen shows a scrolling feed, then you could hide the navigation bar when the user is scrolling for new content and then reveal it once they pull down to get back to the top.

21
Facebook saves some vertical space by hiding the navigation bar based on the scrolling direction. (Image: lmjabreu22)

Tip: You can also enable users to jump between sections of a page with supplementary navigation. For example, the solution shown in the animation below helps the user to track their progress and at the same time can be used as a shortcut to a particular section.

23
(Image: WebDesignCrowd24)

3. Make Sure the “Back” Button Works Properly Link

Long scrolling often causes the user to lose their position on the page. This happens when they click away from a long scrolling list and, upon returning by clicking the “back” button, are brought to the top of the original page instead of where they left off. But when the user follows a link on the page and then clicks the “back” button, they expect to return to the same spot on the original page. Losing their spot forces them to have to scroll through content they have already seen. It’s no surprise that users get frustrated quickly by not getting proper “back to position” functionality.

When activating an element in the feed, users must be able to return to the original element that activated it. Flickr is a good example of matching the browser’s “back” button behavior to the user’s expectation. The website remembers the user’s scroll position, so when the user presses the “back” button, they return to their original position.

25
Flickr matching the browser’s “back” button behavior to the user’s expectation.

4. Change URL Based on Scroll Position Link

One of the most common problems with long scrolling is that sharing a URL to a particular spot on the page is impossible: The user’s scroll position isn’t reflected in the URL, and the URL leads to the top of the page. The user will become easily frustrated when they can’t easily switch between devices to continue browsing from their current spot because the URL doesn’t capture that spot. Starting with HTML5, changing the URL displayed in the browser without reloading the page is possible. The history.pushState()26 function enables us to invoke a URL change without reloading the page, thus allowing us to match the scrolling behavior to the user’s expectation.

5. Consider Jump-To Options Link

Another common problem with long scrolling is disorientation: The user might have difficulty finding something they have previously seen on the page. This can be a serious problem when content is broken down into multiple equally important sections or blocks (such as a long tutorial). A “jump to section” option would solve this. For example, on Tumblr, users can jump down the page or jump back to the start if they get lost. The content on the page is broken down into several blocks that are clearly distinguished, and big indicator dots are fixed to the left side of the screen.

27
In one click, users can go to their desired section of the home page. (View large version28)

Tip: If you are going to use the “jump to section” feature, make sure that the series of dots are easy to use. If they’re small or hard to click with a mouse or to press accurately on a touch device, then they will frustrate users. Thus, make sure the dots are sized appropriately.29

6. Provide Visual Feedback When Loading New Content Link

According to one of Jakob Nielsen’s original 10 heuristics for usability30, visibility of the system’s status remains among the most important principles in user interface design. The user wants to know their current context in a system at any given time, and a website shouldn’t keep them guessing — it should tell the user what’s happening via appropriate visual feedback. If your website dynamically loads content, then users need a clear sign that the website is doing this. Keep them informed; use a progress indicator31 to show that new content is loading and will soon appear on the page.

Because loading of content is supposed to be fast (it shouldn’t take longer that 2 to 10 seconds), you can use looped animation to indicate32 that the system is working.

33
Subtle animation (such as Tumblr’s loading indicator) tells the user, “I’m loading some more content for you.” (View large version34)

7. Don’t Hijack Scrolling Link

Websites that hijack scrolling take control of the scrolling and override a basic function of the web browser. Scroll hijacking is bad because the user no longer has full control of the page and is unable to predict its behavior.

The problem can be seen on Apple’s Mac Pro page35. No matter how fast you scroll, the layout moves at a predetermined speed. Because all content on this page is tied to scrolling, the visitor is forced to browse the page at a slow pace.

36
No matter how fast you scroll, the layout moves at a predetermined speed. (View large version37)

8. Optimize Page-Loading Time Link

Slow loading times are a common problem with long scrolling pages. But for websites, slow performance is a death blow. In fact, 47% of users expect a web page to load within 2 seconds.38 If a page hasn’t loaded within 3 seconds, 57% of users will leave.

Though loading time is a problem for long scrolling pages, it can be solved. Page-loading time can be optimized with sequential loading techniques, such as lazy loading39, enabling users to access basic content really quickly. Read about the performance improvement that the team at Smashing Magazine achieved40 based on The Guardian’s redesign.

9. Consider How Much Resources Your Page Consumes Link

Always consider how much resources (CPU and memory) your page consumes if you’re using long scrolling (especially for pages with a lot of images and animation). Scrolling through multiple pages of photos, animated GIFs and videos without the page reloading can take a significant toll on system resources, and devices with limited resources, such as the iPhone, can start slowing down because of the sheer number of assets it is loading. Thus, test your website using different devices, and use tricks like pausing animation and video when the user scrolls past them.

10. Consider User Behavior on the Page Link

To determine how effective long scrolling is, find out how users are interacting with it. Analytics data are able to answer this question. In Google Analytics, for example, you can open the page analytics41 to see how many people click below the fold. Based on the data, you can then tweak the design if necessary.

Long Scrolling For E-Commerce Websites Link

Long scrolling is often used on e-commerce websites. For product listings and search results, this pattern has one key benefit: Users can scroll the list of products or results without any interruption. No interaction is needed — products simply appear as the user scrolls down the page.

However, to create a good user experience, you need to address a few common issues.

Make Navigation and Filters Sticky Link

When done right, filters enable the user to narrow down a website’s selection of thousands of products to only those few items that match their needs. As with navigation menus, keeping filter options persistently visible is important because users want to feel in control.

42
(Image: id90travel43)

Enable Individual Items to Be Bookmarked Link

A simple bookmark (or “save for later” feature) of favorite items for future reference is a powerful tool for users.

44
Bookmarks help users get back to certain items before making a decision. (View large version45)

Display the Number of Matching Results Link

Show the number of items available, so that users can decide how long they want to spend scrolling through results.

46
A total number of items is displayed below the category title. (View large version47)

People understand the concept of a footer, and they expect to find links to important website information there (such as contact information), but long scrolling often impedes the user’s access to the footer: New items continually load as the user approaches the bottom of the list, pushing the footer out of view. While this sounds like a serious problem, it can be solved with a “Load more” button. With this solution, content is loaded on demand: New content won’t automatically load until the user clicks the “More” button. This way, the user can get to the footer easily without having to chase it down. You can find practical tips on how to implement this solution in the article ““Infinite Scrolling, Pagination or ‘Load More’ Buttons? Usability Findings in eCommerce48.”

49
Load content on demand using a “Load more” button. (Image: Skechers50) (View large version51)

Parallax Effect For Long Scrolling Link

Interaction design underlies long-scrolling websites, and animation is an essential part of this design. Considering that users’ attention span on the web is about 8 seconds52, a delightful scrolling experience will certainly prolong user interest. One interesting animation that can delight users is the parallax effect.

With parallax scrolling, the background image moves more slowly than the content in the foreground, creating the illusion of depth and immersion. This effect makes imagery feel less flat and more three-dimensional.

When Is Parallax Scrolling Effective? Link

In web design, the journey can be as enjoyable as the destination. Parallax is an entertaining visual effect that can make a great first impression and encourage visitors to scroll more. It’s very useful when you want to wow your audience.

53
The parallax effect creates a mesmerizing three-dimensional feel. (Image: firewatchgame54)

Parallax scrolling is also very effective in guided storytelling. When you want to tell a story in a smooth, linear fashion, pairing long scrolling with the parallax effect can create a completely immersive browsing experience. In The Boat5755, shown below, as users scroll, animations take them to the next screen while creating a path of content to follow. This turns scrolling into something more fun and makes the user wonder “What will happen next?”

56
The Boat5755 tells a story in a smooth, linear fashion. (View large version58)

When Is Parallax Scrolling the Wrong Approach? Link

Avoid this technique if the majority of your users are looking to accomplish clearcut tasks (for example, purchase a product). Imagine, for instance, how frustrating Amazon would become if you had to see a parallax effect each time you wanted to buy a product.

Parallax and Page Performance Link

The vast majority of websites that use the parallax effect suffer from terrible scrolling performance. It’s especially bad on devices with high pixel densities, like the iPhone. While all potential performance problems cannot be completely solved, you still can improve scrolling performance by following simple techniques:

  • Only use properties that are cheap for the browser to animate. These are translate3d, scale, rotation and opacity.
  • Don’t animate massive images or dramatically resize them. Forcing the browser to resize images (especially huge ones) could be costly.
  • Avoid animating a lot of things at once.

You can find more practical tips for the parallax effect in the article “Parallax Done Right59” by Dave Gamache.

Parallax and Accessibility Link

Consider how users with visually triggered vestibular disorders will use your website. Animation is capable of making this group of users feel dizzy. Val Head has a few practical recommendations60 for designers on how to design safer motion, with one perfect recommendation for parallax: If your website has a lot of movement that covers a lot of visual ground, provide an alternative way to view that content — consider an option to turn off motion. This can be accomplished via a button or toggle switch to reduce or turn off animation globally on your website. To explore this idea, Nat Tarnoff developed a prototype of a toggle switch61 that could be used on any website.

Conclusion Link

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

This article is part of the UX design series sponsored by Adobe. The newly introduced Adobe Experience Design CC (Beta) tool is made for a fast and fluid UX design process62, as it lets you go from idea to prototype faster. Design, prototype and share — all in one app.
You can check out more inspiring projects created with Adobe XD on Behance63, and also visit the Adobe XD blog64 to stay updated and informed. Adobe XD is being updated with new features frequently, and since it’s in public Beta, you can download and test it for free65.

(ms, vf, al, il)

Footnotes Link

  1. 1 https://www.smashingmagazine.com/2013/05/infinite-scrolling-lets-get-to-the-bottom-of-this/
  2. 2 https://www.smashingmagazine.com/2016/07/quick-ux-prototyping-with-adobe-xd-shortcuts-pdf-cheatsheet/
  3. 3 https://www.smashingmagazine.com/2016/03/pagination-infinite-scrolling-load-more-buttons/
  4. 4 https://www.smashingmagazine.com/2017/01/how-functional-animation-helps-improve-user-experience/
  5. 5 https://www.smashingmagazine.com/2016/11/the-golden-rules-of-mobile-navigation-design/
  6. 6 https://www.nngroup.com/articles/interaction-cost-definition/
  7. 7 https://uxmastery.com/infinite-scrolling-fad-or-fab/
  8. 8 https://www.smashingmagazine.com/2017/04/overview-responsive-navigation-patterns/
  9. 9 https://adobe.ly/2rO2QeI
  10. 10 https://www.smashingmagazine.com/wp-content/uploads/2017/05/long-scrolling-in-action.gif
  11. 11 https://dribbble.com/shots/1748038-Dropbox-Guide
  12. 12 https://www.smashingmagazine.com/2011/10/the-dos-and-donts-of-infographic-design/
  13. 13 https://www.smashingmagazine.com/wp-content/uploads/2017/05/long-scroll.gif
  14. 14 http://hansbrinker.com/amsterdam/
  15. 15 https://www.smashingmagazine.com/wp-content/uploads/2017/05/long-scroll.gif
  16. 16 http://www.lukew.com/ff/entry.asp?1946
  17. 17 https://www.nngroup.com/articles/blah-blah-text-keep-cut-or-kill/
  18. 18 https://www.smashingmagazine.com/2017/01/more-than-just-pretty-how-imagery-drives-user-experience/
  19. 19 https://www.smashingmagazine.com/2012/09/sticky-menus-are-quicker-to-navigate/
  20. 20 https://www.smashingmagazine.com/wp-content/uploads/2017/05/01-Best-Practices-for-Long-Scrolling.gif
  21. 21 https://www.smashingmagazine.com/wp-content/uploads/2017/05/02-Best-Practices-for-Long-Scrolling.gif
  22. 22 https://lmjabreu.com/post/why-and-how-to-avoid-hamburger-menus/
  23. 23 https://www.smashingmagazine.com/wp-content/uploads/2017/05/Scrolling-Progress-Bar.gif
  24. 24 https://dribbble.com/webdesigncrowd
  25. 25 https://www.smashingmagazine.com/wp-content/uploads/2017/05/09-Best-Practices-for-Long-Scrolling.gif
  26. 26 https://developer.mozilla.org/en-US/docs/Web/API/History_API
  27. 27 https://www.smashingmagazine.com/wp-content/uploads/2017/05/04-Best-Practices-for-Long-Scrolling-large-opt.png
  28. 28 https://www.smashingmagazine.com/wp-content/uploads/2017/05/04-Best-Practices-for-Long-Scrolling-large-opt.png
  29. 29 https://www.smashingmagazine.com/2016/11/a-quick-guide-for-designing-better-buttons/
  30. 30 http://www.nngroup.com/articles/ten-usability-heuristics/
  31. 31 https://www.smashingmagazine.com/2016/12/best-practices-for-animated-progress-indicators/
  32. 32 https://www.smashingmagazine.com/2016/12/best-practices-for-animated-progress-indicators/#types-of-progress-indicators
  33. 33 https://www.smashingmagazine.com/wp-content/uploads/2017/05/05-Best-Practices-for-Long-Scrolling-large-opt.png
  34. 34 https://www.smashingmagazine.com/wp-content/uploads/2017/05/05-Best-Practices-for-Long-Scrolling-large-opt.png
  35. 35 http://www.apple.com/mac-pro/
  36. 36 https://www.smashingmagazine.com/wp-content/uploads/2017/05/06-Best-Practices-for-Long-Scrolling-large-opt.png
  37. 37 https://www.smashingmagazine.com/wp-content/uploads/2017/05/06-Best-Practices-for-Long-Scrolling-large-opt.png
  38. 38 http://conversionxl.com/11-low-hanging-fruits-for-increasing-website-speed-and-conversions/#
  39. 39 https://en.wikipedia.org/wiki/Lazy_loading
  40. 40 https://www.smashingmagazine.com/2014/09/improving-smashing-magazine-performance-case-study/#front-end-optimization
  41. 41 https://support.google.com/analytics/answer/6047802?hl=en&visit_id=1-636304004334890615-3209512487&rd=1
  42. 42 https://www.smashingmagazine.com/wp-content/uploads/2017/05/navigation.gif
  43. 43 http://interliner.id90travel.com/july-id90-product-update/
  44. 44 https://www.smashingmagazine.com/wp-content/uploads/2017/05/01-Best-Practices-for-Long-Scrolling-preview-opt.png
  45. 45 https://www.smashingmagazine.com/wp-content/uploads/2017/05/01-Best-Practices-for-Long-Scrolling-preview-opt.png
  46. 46 https://www.smashingmagazine.com/wp-content/uploads/2017/05/02-Best-Practices-for-Long-Scrolling-preview-opt.png
  47. 47 https://www.smashingmagazine.com/wp-content/uploads/2017/05/02-Best-Practices-for-Long-Scrolling-preview-opt.png
  48. 48 https://www.smashingmagazine.com/2016/03/pagination-infinite-scrolling-load-more-buttons/
  49. 49 https://www.smashingmagazine.com/wp-content/uploads/2017/05/03-Best-Practices-for-Long-Scrolling-preview-opt.png
  50. 50 https://www.skechers.com/en-us/
  51. 51 https://www.smashingmagazine.com/wp-content/uploads/2017/05/03-Best-Practices-for-Long-Scrolling-preview-opt.png
  52. 52 http://time.com/3858309/attention-spans-goldfish/
  53. 53 https://www.smashingmagazine.com/wp-content/uploads/2017/05/10-best-practices-for-long-scrolling.gif
  54. 54 http://www.firewatchgame.com/
  55. 55 http://www.sbs.com.au/theboat/
  56. 56 https://www.smashingmagazine.com/wp-content/uploads/2017/05/08-Best-Practices-for-Long-Scrolling-large-opt.png
  57. 57 http://www.sbs.com.au/theboat/
  58. 58 https://www.smashingmagazine.com/wp-content/uploads/2017/05/08-Best-Practices-for-Long-Scrolling-large-opt.png
  59. 59 https://medium.com/@dhg/parallax-done-right-82ced812e61c#.a5yxbjfir
  60. 60 https://alistapart.com/article/designing-safer-web-animation-for-motion-sensitivity
  61. 61 http://codepen.io/gregtarnoff/pen/JoMxpK/
  62. 62 https://adobe.ly/2rO2QeI
  63. 63 https://www.behance.net/galleries/adobe/5/Experience-Design
  64. 64 https://adobe.ly/2rOmEi0
  65. 65 https://adobe.ly/2rO2QeI

↑ Back to top Tweet itShare on Facebook

Nick Babich is a developer, tech enthusiast, and UX lover. He has spent the last 10 years working in the software industry with a specialized focus on development. He counts advertising, psychology, and cinema among his myriad interests.

  1. 1

    Long scrolling is creating a new trend especially in all the website of 2017. I agree with your words that, it shouldn’t be used everywhere. Its ok with some sites but a normal or novice user may lose interest scrolling all the way down.

    2
    • 2

      I agree this shouldn’t be used everywhere, people will become bored just scrolling constantly. People want information quickly and having no other form of revealing said information except from scrolling will make users leave the site.

      5
  2. 3

    It’s only my personal taste, of course, but I loathe long scrolling sites. I am yet to visit one that was worth the effort. I usually have back-buttoned out of the site before I scroll too far. I think they’re a blight (yes, I know I’m in the minority).

    16
    • 4

      I agree totally — and you may not be in the minority after all. Just because a technique is in vogue and espoused by site developers as the latest way to present information does not necessarily make it “right” or useful for those visiting a site.

      6
  3. 5

    Jaideep Asher

    May 27, 2017 2:09 pm

    Well it’s pure torture to scroll long pages in Safari on the iPhone! Unless the website is using an overflow container and -webkit-overflow-scrolling: touch;

    And theres no great solution to this so far but one fix I’ve found is this app extension for Safari. https://itunes.apple.com/app/fasterscroll/id1233595663

    2
  4. 6

    Long or endless scrolling runs contrary to how many people were conditioned to use websites over almost a decade. I really wish designers that came up with this idea would explain this to my parents or even my wife. Endless scrolling is just not intuitive for the avarage joe visiting a website.

    1
  5. 7

    Laura Müller

    May 30, 2017 11:05 am

    I think for exploring content scrolling is great, it is easy and fun and the user is not forced to make any explicit decision where to navigate.

    In order to find something specific, especially on mobile, long scrolling is rather annoying. A good information architecture and navigation is much better for this case.

    As always you have to ask yourself, what and who am I designing for? Only then you can really decide if a long scroller is the right design pattern.

    1
  6. 8

    Glad to see I’m not the only one who hate scrolling.
    – On my phone, just scrolled for 5 minutes
    – Oh I want to go back to something I saw near the top
    – Tap top of screen to go to very top
    – SCROLL SCROLL SCROLL
    – OK now I want to go to the bottom and continue reading
    – SCROLL SCROLL SCROLL SCROLL SCROLL… (x 3minutes)
    – Figure cramp, drop phone, break screen

    2
  7. 10

    Thanks for writing this article, I will likely never work on a transportation map but enjoyed learning about the history, process and the way constraints shape the way each country has tackled their design challenge. Genuinely interesting article, thanks again!

    0

↑ Back to top