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.
  • Need not to download all the data at once,can be downloaded in parts (Prafulla)

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)
  • Twitter currently has a patent application for it although their current policy is not to enforce. http://www.google.com/patents?id=C3PTAAAA (Royce Shin)

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).

3 Responses 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

  2. Web Designer says:
    April 15, 2012 at 10:30 am

    Great, thanks for your share!
    @2012-04-15 18:29

  3. Marijn van der Werf says:
    July 31, 2012 at 9:06 pm

    Might just be me, but on Android pull to refresh doesn’t really make sense to me.
    This is because the default way of scrolling is showing an ‘overscroll glow’ on a side whereas on iOS you can tease your users if the scroll up, because of the bounciness.

Leave a comment