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.

Motivation

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.

Creation

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.

Following its initial release in Tweetie 2.0, further evolutions of the pull-to-refresh design were made by the design community as interaction designers applied different stylistic takes to the technique. Brichter currently does not have any plans to continue work on pull-to-refresh.

Mechanism

Steps involved in the original version of pull-to-refresh as released in Tweetie 2.0:
#User pulls down on the screen and visual feedback appears at the top of the list showing a down arrow and text displaying the message “Pull down to Refresh”.
#If the user releases before reaching the refresh threshold, the refresh aborts and visual feedback disappears.
#If the user pulls down enough to reach the refresh threshold, new visual feedback appears at the top of the screen showing an up arrow and text displaying the message “Release to Refresh”.
#Once the user releases, the refresh will occur.

Reception

Upon its initial release, pull-to-refresh received positive reviews from Tweetie users. Users praised the mechanism for its convenience and intuitive nature. Aside from general users, pull-to-refresh was also well received by the overall interaction design community. Designer Tim Van Damme reportedly emailed Brichter following the release of pull-to-refresh, saying “Thanks to you, I just tried to refresh my inbox by pulling the list down and releasing it. I hate it when you do things better than Apple.” Other interaction designers expressed similarly positive sentiments regarding the technique.

An article published by Co.Design in late 2013 titled “Why The Pull To Refresh Gesture Must Die”, written by Austin Garr, criticized the gesture, stating that given smartphones have become fast and strong enough to auto-refresh, the pull-to-refresh technique has now become outmoded - essentially an unnecessary step. However, since the gesture has now become so universal that users implicitly expect it to be part of the mobile app experience, it is hard for developers to move beyond it. The article reports that even Brichter agrees and believes that it is time for the gesture to evolve. Brichter is quoted in the article saying "The fact that people still call it ‘pull-to-refresh’ bothers me—using it just for refreshing is limiting and makes it obsolete...I like the idea of ‘pull-to-do-action’.” The article concludes by stating that rather than being used exclusively for refreshing, vertical swipe interactions should now evolve to perform other actions, thus giving birth to a new style of app interactions.

Following the publication of said article, an article on Neglected Potential, written by Nick Arnott, responded, countering that while smartphones are theoretically capable of auto-refreshing, data speeds for many users is still a limiting factor. Arnott adds that having the ability to manually refresh is still important to allow the user assurance that the content they are viewing is indeed up-to-date, and that pull-to-refresh is brilliant design since users would be scrolling to the top anyway if they wanted to see new content and refreshing is a logical extension of scrolling, as opposed to a different action to which a pulling gesture would be less intuitive.

References

{{Reflist

User interface techniques