UI cheat sheet: pagination, infinite scroll and the load more button

When you have a lot of content, you have to rely on one of these three patterns to load it. So, which is best? What will your users like? What do most platforms use? These are the questions we will explore today.

Before you start, I would recommend checking out my other two related cheat sheets, one on searching and browsing and the other on grids and lists. While these aren’t critical to understanding the three pattern types, they will give you some background and context.

In this cheat sheet we will cover:

1. Introduction

2. Pagination
2.1. Fact-ish sheet
2.2. How many items per page
2.3. Component: Navigation
2.4. Component: Filters
2.5. Component: Sorting
2.6. Component: Items per page
2.7. Component: Showing results
2.8. Component: Grid to list switcher
2.9. Component: Alphabetical index
2.10. Component: Jump to

3. Infinite scroll
3.1. Fact-ish sheet
3.2. Component: Sticky nav bar
3.3. Component: Instagram’s ‘You are all caught up’ component
3.4. Component: Loader

4. Load more button
4.1. Fact-ish sheet
4.2. Components: ‘Load more’ button
4.3. Component: Loader
4.4. Component: Search suggestions tags
4.5. Component: Scroll to top button

5. Closing thoughts

6. Further reading & references

1. Introduction

Imagine you’re a happy little server in a big server room. You can handle a few tasks at a time, mostly just sending stuff to people when they ask for it, life is good. And then one day, you are asked to send 926 trillion items for 4 million different people. You would probably freak out and die* and the people asking for these results would also die (but of boredom…