Infinite List

Problem

A very extensive VERTICAL LIST can become quite heavy on mobile devices. It would not be advisable to load and display all information in the list at once.

Solution

Design a normal VERTICAL LIST or any of its variations but only fetch the beginning of the list, loading the rest as the user scrolls through the page.

This pattern is based on a homonym pattern from Designing Mobile interfaces1. It is very similar to the VERTICAL LIST with the main difference that only a portion of the list is initially loaded. It is most adapted for displaying a list of data with an uncountable number of items. For example, when loading all the news of a site in the same page we can be dealing with hundreds of items. It would not be a good idea to load all that information at once. That would be extremely heavy in terms of download and load time; it would add an unnecessary burden in terms of browser memory and rendering time; and probably, users would not need all that information from the beginning. Thus, we can start by loading only a few items, and only load subsequent items when the user provides some signal that he wants to keep browsing through the page. The number of items to load on each action varies, but it will depend on the length and download size of the content.

This pattern takes advantage of methods for asynchronously loading additional content without the need to refresh the page: new items are just appended to the interface following the previous ones. Because the browser does not need to reload the page, we can get a perceivably faster response. It can be used as an alternative to a common pagination, which normally implies more touches and a refresh on each load. Since there is not any refresh, users never lose the context of where they are at the list.

There are two main alternatives that can be used for its implementation: explicit and implicit loading. On the first, the content is loaded with a direct action of the user; on the second, the list is loaded automatically as the user reaches its end.

When designing a list in which the user has to explicitly load new content, place at the bottom of the list a button that indicates that more data will be loaded on the same page. You can use a label with “more”, “load more”, or another appropriate variation. You can also use that button to indicate how many more items will be loaded.

While the browser is loading the next chunk of the list, provide some feedback of the action that is occurring. In Figure 1, the page displays a ‘More’ button that when pressed changes to a loading animation.

Web Design Patterns for Mobile DevicesWeb Design Patterns for Mobile Devices
Figure 1. Loading animation at The Verge.

In the implicit loading mode there is not any direct action of the user to load additional content. Instead, the browser detects when a user reaches the end of the page and automatically loads another portion of the list. This is a type of implementation that is normally called lazy loading. To give the impression that the list is really bottomless, you can start preloading the adjacent content before the user gets to end of the list.

Although this pattern is normally used with content that is virtually endless, it is still possible for users to reach its end. Therefore, provide some indication when there are no more items to fetch.

Because this pattern is a variation of the VERTICAL LIST, it can be combined with any of its other variants, such as: THUMBNAIL LIST, EXPANDING LIST.

***

Web Design Patterns for Mobile Devices
The Verge, 04/2012
Web Design Patterns for Mobile Devices
Facebook, 04/2012
Web Design Patterns for Mobile Devices
Authentic Jobs, 04/2012
  • Infinite List, in Designing Interfaces.
  • Infinite List, in Designing Mobile Interfaces.

  1. Hoober, Steven, and Eric Berkman. Designing Mobile Interfaces. Sebastopol, California: O'Reilly Media, 2011.