Pull-to-refresh

Pull-to-refresh is a touchscreen gesture that consists of touching the screen of a computing device with a finger or pressing a button on a pointing device, dragging the screen downward with the finger or pointing device, and then releasing it, as a signal to the application to refresh the contents of the screen.

The pull-to-refresh gesture first appeared in the Tweetie mobile application developed by Loren Brichter. Brichter developed Tweetie, an iOS application for Twitter, as a personal project in 2008 after he quit his job at Apple Inc. in 2007.

While Brichter was initially developing Tweetie, he wanted to add a refresh function to the application. Regarding other mobile applications of that time, he said “They all had to find a spot and just cram a refresh button somewhere. Usually in one of the corners in a toolbar bordering a scrollable list. That was the most valuable real estate for navigation and action UI, so using it up for something as mundane as a refresh button just seemed wasteful.” Brichter thus decided to create a different method of refreshing such that the valuable corner space could be utilized for something else. Although he initially planned to create a refresh mechanism that follows Apple’s platform conventions, Brichter’s work with pull-to-refresh resulted in a novel interaction new to Apple’s platform at the time.

In the initial design of Tweetie’s refresh mechanism, Brichter placed a refresh button at the top of the Tweet list because users typically expected new tweets to appear at the top of the page. This design rolled out in Tweetie Version 1.0. Although it provided users with the ability to refresh their Twitter feed, the button utilized valuable screen real estate that Brichter wanted to use for other features. Brichter said “Tweetie 1.0 (with the refresh button at the top of the list) was so close to pull-to-refresh in hindsight, and it wasn’t much of a leap to go from a button to a gesture.”

Brichter experimented with two primary iterations of pull-to-refresh before releasing the final version. In the first iteration, users triggered the refresh when they scrolled across an invisible threshold on the screen. However, in this iteration there was no visual feedback that signaled to users that a refresh was occurring. Brichter believed it necessary to provide users with visual feedback, so the second and final iteration of pull to refresh added visual feedback when refreshing so users could better understand the gesture. This final iteration also included text alerting users that if the top of the page is pulled beyond a threshold and subsequently released, a refresh would occur. Brichter included this description text because he felt that since the gesture presented a new interaction technique that most users likely have not seen before, the purpose of the gesture had to be explicitly stated for users to understand its functionality. These two iterations of pull to refresh were created in a single afternoon with no user testing. Brichter states that he manually tested the iterations and the invisible threshold of the gesture until it felt “right” - that the threshold cannot be too small causing people to accidentally trigger the gesture, but it also cannot be too big causing it to be difficult for users to activate.

...
Wikipedia