What is load more in UX design?
Load more is a content loading pattern in which a button or link at the bottom of a content list, when clicked, appends the next set of items to the page without a full page reload. Unlike pagination, users stay on the same page and their scroll position is preserved. Unlike infinite scroll, loading is triggered by an explicit user action rather than scroll position.
When should you use load more in UX design?
Load more works well in contexts where users benefit from continuous content but also need to maintain their position and access the page footer. E-commerce product listings, blog post archives, and search result sets with moderate depth are good candidates. The pattern allows users to see more content when they want it without losing their place or having the footer pushed permanently out of reach as happens with infinite scroll.
How to design an effective load more button?
The load more button should be visually prominent and positioned directly below the last visible item in the list. Show how many additional items will be loaded if the total is known, for example "Load 20 more results." Show the total number of remaining items when possible so users understand how much content exists. Provide a loading state on the button itself while new content is being fetched. After loading, move focus appropriately so keyboard users are not disoriented.
What are the accessibility considerations for load more?
The load more button must be reachable by keyboard and have a descriptive label that communicates its purpose to screen reader users. After new content loads, announce the addition using an ARIA live region so screen reader users know new items have appeared. Maintain logical focus order so keyboard users can continue navigating through newly loaded content without returning to the button. These considerations reduce the cognitive load of the pattern for all users, not just those using assistive technologies.