← All terms

Fig. 04 / Pull to Refresh · In motion

Mobile UI Patterns

Pull to Refresh

EXPLAINED SIMPLY:Pull to refresh is the gesture where you drag a list downward past its top and let go to reload it.

Pull to refresh is the gesture where you drag a list downward past its top and let go to reload it. Tug your inbox, a spinner appears in the gap you opened, and the newest items drop in at the top.

It was invented in 2009 for Tweetie, an early Twitter app, and within a few years it had spread to nearly every feed on every phone. The gesture won because it matches the wish: new things arrive at the top, so you reach up and pull them down. Somewhere along the way it stopped being a feature and became a reflex. People tug on lists that don't even support it, just in case.

The feel is half the design. The list stretches out of place while you drag, resists a little, and snaps back when you let go. Engineers call the stretchy part rubber banding, and it's what makes the list feel like a physical thing you're tugging instead of a picture of one.

It only makes sense where fresh content lands on top: inboxes, feeds, chats. If nothing new ever arrives at the top of the list, there is nothing to pull for, which is why you never see it on a settings screen. If the reload takes a while, some apps swap in a skeleton screen while the new content lands.

You'll also hear swipe to refresh or pull down to refresh. Same gesture, same result.

When a screen shows anything that goes stale, ask for pull to refresh. Your users are already tugging on it anyway.