Home > Dealing With Data > let users load more items? > Pull to refresh

Pull to refresh

It works like this:

  1. The user pulls down a list.

  2. A message appears, telling the user he can pull down the list to refresh.

  3. The user pulls the list further down.

  4. A new message appears, telling the user that the list will refresh when he releases it.

  5. The user lets go.

  6. A refreshing or loading message appears.

  7. The refreshing message disappears and a new list is shown, with the new items at the top of the list.

Use when

The pull to refresh pattern can be applied when you need to show a list of items that is dynamic, e.g. containing news items, and you don’t automatically refresh this content. By 'pulling to refresh' the list of items is refreshed, and the new items are shown at the top.

An other way to let users refresh content is by applying an refresh button, but you need to have the space to put one.

The Good

  • It saves space as you don’t need to place a refresh button.
  • Easy to discover as long as the newest item is at the top of the list. It is a natural consequence of scrolling to the top.
  • Are you serious? (Jedsseake)

Add Good

The Bad

  • No visual clue to discover this functionality other than ‘scrolling further up’.
  • It may be better in some cases to simply keep the list up-to-date automatically so that no interaction is needed at all.
  • Click on an element of the list may some times not work because the move is interpreted as a pull down and not a click. (alexandre durandet)

Add Bad

Examples

Twitter

1 Twitter for Android contains the classic pull to refresh pattern. The timeline shows a long list with tweets.

2 When the user pulls the list a bit down, a message is shown which shows the user that he can refresh the list by pulling it.

3 When he pulls the list further down, the message says he only has to release it to refresh.

4 When the list is released, a loader is shown.

5 And when loaded, the new list items are shown.

Tweakers.net

1 In Tweakers.net, a Dutch technology blog, a pull to refresh pattern is also implemented. without the arrows as shown in the previous example. Here the user gets the cue to pull the screen down to refresh.

2 The second message, when the user pulls the list back more, tells the user to release to refresh.

3 When the user lets the list go, a message is shown telling the user the list is refreshed..

4 And when the list is loaded, the new items are shown at the top.

Pulse

1 Newsreader Pulse shows horizontal carousels each containing news items coming from a news sources. The list contains multiple carousels and can be scrolled up. Each carousel can be refreshed by pressing the update buttton on the top right of the carousel.

2 But the user can also pull down the list to refresh. Here the first message is shown.

3 And when pulled down some more the second message is shown.

4 When the user lets the list go, all the update buttons at the top right of the carousels turn into a loader. The top one is loaded already.

5 And when all carousels are loaded, all update buttons are shown again, and new items are shown (not the case here).
Martijn van Welie
Creative Lead/User Experience Manager at Philips Design
http://www.welie.com/
Published on: November 24, 2011

One Response to Pull to refresh

  1. Alex Debkaliuk says:
    November 24, 2011 at 2:51 pm

    C’mon, it has to do it automatically with no hints or interaction whatsoever.

    If too many items keep coming, pause button will do.

    IMHO

Leave a comment