Load More

The load more pattern displays an initial set of results by default, then the user triggers loading more content. It is an alternate solution for pagination or infinite scrolling.

Also known as: View more button, Lazy Load

Design Specs

Desktop/Tablet

  1. There is 20px of spacing between end of content and the load more button.
  2. When the Load More indicator is a primary button, it should follow standard enterprise primary button styling.
Not Pictured
  • In cases where Load More indicator is not a primary button, it should be link text that follows standard enterprise link text styling. No caret should be used in this instance.

Production Examples

Desktop/Tablet/Mobile

An example use of Load More inside of an Accordion

When Do I Use This?

Use when you want to show a user a portion of a result set by default. It is an alternative to pagination or infinite scrolling. If well executed, it has cognitive benefits over infinite scrolling, and findability and recall benefits over pagination (a user can scroll a single page to find an item vs attempting to remember which page it is on).

Compared to infinite scrolling, the user is in control of the load event, and can scroll past the "bottom" to access content below the area such as footers, or neighboring modules.

Compared to inline expand, the user has no ability to collapse. Use accordingly.

Usage Guidelines

1. On click, more of a content set is is displayed to the user.

From one to infinite "load" triggers are allowed.

2. Use a button or link at the bottom of the content area.

Do not use a caret as part of the trigger element because no "hide" functionality exists, as in Inline expand.

A correct example of the load more pattern, without a caret.

An incorrect example of the load more pattern because the link is being used with a caret. Do not use a caret with the load more pattern because a user cannot collapse the information. If collapse functionality is required, use the Inline Expand pattern.

3. Copy Guidelines for Load More

Do: read more, show more products, show all orders, show more, view more
Don't: see more, see details, learn more. Anything w/ caret.

An example of correct copy usage for the Load More pattern.

An example of correct copy usage for the Load More pattern.

An example of incorrect copy usage for the Load More pattern.

An example of incorrect copy usage for the Load More pattern.

ADA Compliance

Load more is an acceptable variation of Infinite scrolling. Infinite scrolling presents a number of usability, accessibility and SEO issues. When implemented properly, load more offers a similar solution. To ensure minimal negative impact on users with disabilities including those who use assistive technology, the pattern code base must meet the following criteria:

  • Focus is not lost when navigating back
  • Ability to access footer content
  • Ability to quickly navigate through all of the content
  • No difficulty locating content
  • Ability to get to the end of the page easily
Useful Links:

Rationale

SHC Rationale:

Informed by an SHC audit to review all example uses, followed by efforts to clarify and provide distinct patterns for each use case - see all expand/collapse. Trigger styling and copy maintain a few minor cues to make its utility distinct from Inline expand:

  • The trigger is aligned center to communicate to the user that additional rows will be added. In a small real estate scenario, it can be left or right aligned to the content above.
  • Caret should be avoided because no "hide" functionality exists, as in Inline expand.
Copy:
Use terms like show more, load more, show all products, view more; ideally with a noun like products, orders, etc ... and avoid the use of the following terms: "see details" (used for legal), "learn more" (used for page turns, or layers/modals), "view all", or "see more" without a noun (ambiguous use cases)...in order to keep the utility of the element clear. The user should get the impression they are triggering the system to display more of whatever is already being displayed.

Research

Infinite Scrolling, Pagination Or “Load More” Buttons?

Usability Findings In eCommerce

view article

6 Guidelines for Truncation Design

view article

Post a New Comment

Your feedback will help us improve this page. If you have a comment about the content of this page, use the form below, and the Patterns Team will get back to you within a business day.

For general questions or assistance, email the Patterns Team directly.