Saturday, 2 April 2011

UI Design Pattern - Dynamic List

Many Android apps use lists components to display large amount of data. Often this data is loaded over a network connection. Using dynamic lists greatly improve user experience over preloading everything and forcing user to wait.

[Android UI Pattern Index now contains this pattern too]
More details after the jump...

Pattern card


Loading a lot of data can be very slow especially if the data is loaded over a network connection. When displaying this data to users forcing them to wait for the whole data set before letting them start working with the data can ruin the user experience. 


Instead of waiting for all the data to load it is better to load only the most relevant data and populate it to a list immediately. Then either provide a way for user to manually request more data or automatically load more when user reaches end portion of the previously loaded data.

  1. User interface is more responsive.
  2. Data loading is non-intrusive.
  3. No non-necessary data is loaded.


Endless list
Most common way this patter is implemented in currently available apps is to start loading new data when user scrolls the list down to the end. Usually the loading is triggered when last ten or so elements are visible. There's no need to wait user to reach the very end. A loading progress spinner is shown at the end of the list to indicate loading process.

CommonsWare endeless list adapter is a neat open source library that can be used to implement the endless list. This StackOverflow question also has an example piece of code that can be used.

Engadget app uses paging instead of long lists. This requires users to tap on the next label to trigger loading of more articles. A pop-up spinner is shown while the app loads more content.

Pull to refresh
In some cases new elements should be loaded at the top of the list instead of end. A good example of this is the twitter app. Latest tweets are loaded when user pulls down the on the list while it is fully scrolled up.

Android-pulltorefresh is an open source library that can be used to implement this kind of functionality in a list.

Elsewhere in the web

CommonsWare endeless list adapter open source library.
StackOverflow thread about endless list including example code.
Android-pulltorefresh open source library.

More from this blog