Pull-to-refresh

Last updated
Pull-to-refresh in the Wikipedia mobile app

Pull-to-refresh is a touchscreen gesture developed by Loren Brichter. It 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.

Contents

The purpose of the gesture is to make refreshing immediately accessible. Criticism has been raised at pull-to-refresh for causing unwanted refreshes when the user is in the process of scrolling upwards. [1]

Other names for the gesture include "pull-down-to-refresh", "pull-to-reload", "swipe to refresh", and variations thereof. [2]

History

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.” [3] 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. [4]

The gesture was added as an option to the mobile edition of Google Chrome, the most used mobile web browser at that time, in version 41, 2015, and is mandatory since version 75, 2019. [1] [5]

Mozilla first added it to the "nightly" edition of their mobile Firefox web browser in 2020, and the year after they added it to the main version lineup, also known as "stable". [6] [2]

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.” [3]

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. [3] [4]

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. [3]

Mechanism

Steps involved in the original version of pull-to-refresh as released in Tweetie 2.0:

  1. 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”.
  2. If the user releases before reaching the refresh threshold, the refresh aborts and visual feedback disappears.
  3. 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”.
  4. Once the user releases, the refresh will occur.

Reception

Upon its initial release, pull-to-refresh received positive reviews from Tweetie users. [3] 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.” [3] 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. [7] 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. [8]

Related Research Articles

<span class="mw-page-title-main">Pointing device gesture</span>

In computing, a pointing device gesture or mouse gesture is a way of combining pointing device or finger movements and clicks that the software recognizes as a specific computer event and responds to accordingly. They can be useful for people who have difficulties typing on a keyboard. For example, in a web browser, a user can navigate to the previously viewed page by pressing the right pointing device button, moving the pointing device briefly to the left, then releasing the button.

<span class="mw-page-title-main">Web browser</span> Software used to navigate the internet

A web browser is an application for accessing websites and the Internet. When a user requests a web page from a particular website, the browser retrieves its files from a web server and then displays the page on the user's screen. Browsers are used on a range of devices, including desktops, laptops, tablets, and smartphones. In 2020, an estimated 4.9 billion people have used a browser. The most used browser is Google Chrome, with a 65% global market share on all devices, followed by Safari with 18%.

<span class="mw-page-title-main">Scrollbar</span> Graphical user interface element

A scrollbar is an interaction technique or widget in which continuous text, pictures, or any other content can be scrolled in a predetermined direction on a computer display, window, or viewport so that all of the content can be viewed, even if only a fraction of the content can be seen on a device's screen at one time. It offers a solution to the problem of navigation to a known or unknown location within a two-dimensional information space. It was also known as a handle in the very first GUIs. They are present in a wide range of electronic devices including computers, graphing calculators, mobile phones, and portable media players. The user interacts with the scrollbar elements using some method of direct action, the scrollbar translates that action into scrolling commands, and the user receives feedback through a visual updating of both the scrollbar elements and the scrolled content.

<span class="mw-page-title-main">Screen reader</span> Assistive technology that converts text or images to speech or Braille

A screen reader is a form of assistive technology (AT) that renders text and image content as speech or braille output. Screen readers are essential to people who are blind, and are useful to people who are visually impaired, illiterate, or have a learning disability. Screen readers are software applications that attempt to convey what people with normal eyesight see on a display to their users via non-visual means, like text-to-speech, sound icons, or a braille device. They do this by applying a wide variety of techniques that include, for example, interacting with dedicated accessibility APIs, using various operating system features, and employing hooking techniques.

<span class="mw-page-title-main">Sleipnir (web browser)</span> Web browser developed by Fenrir Inc

Sleipnir is a tabbed web browser developed by Fenrir Inc. The browser's main features are customization and tab functions. It supports HTML5 and multiple layout engines.

<span class="mw-page-title-main">Zotero</span> Open-source reference management software

Zotero is free and open-source reference management software to manage bibliographic data and related research materials, such as PDF and ePUB files. Features include web browser integration, online syncing, generation of in-text citations, footnotes, and bibliographies, integrated PDF, ePUB and HTML readers with annotation capabilities, and a note editor, as well as integration with the word processors Microsoft Word, LibreOffice Writer, and Google Docs. It was originally created at the Center for History and New Media at George Mason University and, as of 2021, is developed by the non-profit Corporation for Digital Scholarship.

<span class="mw-page-title-main">Google Chrome</span> Web browser developed by Google

Google Chrome is a web browser developed by Google. It was first released in 2008 for Microsoft Windows, built with free software components from Apple WebKit and Mozilla Firefox. Versions were later released for Linux, macOS, iOS, and also for Android, where it is the default browser. The browser is also the main component of ChromeOS, where it serves as the platform for web applications.

<span class="mw-page-title-main">Tweetie</span> Twitter client for Apple devices

Tweetie was a client for the social networking service Twitter. There was a mobile version that ran on iPhone, iPod Touch, and iPad, and a desktop version ran on Mac OS X Leopard, Snow Leopard and Lion.

<span class="mw-page-title-main">Sencha Touch</span> JavaScript framework

Sencha Touch is a user interface (UI) JavaScript library, or web framework, specifically built for the Mobile Web. It can be used by Web developers to develop user interfaces for mobile web applications that look and feel like native applications on supported mobile devices. It is based on web standards such as HTML5, CSS3 and JavaScript. The goal of Sencha Touch is to facilitate quick and easy development of HTML5 based mobile apps which run on Android, iOS, Windows, Tizen and BlackBerry devices, simultaneously allowing a native look and feel to the apps.

<span class="mw-page-title-main">Android Ice Cream Sandwich</span> Ninth version of the Android operating system

Android Ice Cream Sandwich is the fourth major version of the Android mobile operating system developed by Google. Unveiled on October 19, 2011, Android 4.0 builds upon the significant changes made by the tablet-only release Android Honeycomb, in an effort to create a unified platform for both smartphones and tablets. The first phone with Android Ice Cream Sandwich was Samsung Galaxy Nexus.

Firefox was created by Dave Hyatt and Blake Ross as an experimental branch of the Mozilla browser, first released as Firefox 1.0 on November 9, 2004. Starting with version 5.0, a rapid release cycle was put into effect, resulting in a new major version release every six weeks. This was gradually accelerated further in late 2019, so that new major releases occur on four-week cycles starting in 2020.

<span class="mw-page-title-main">Android Jelly Bean</span> Tenth version of the Android operating system

Android Jelly Bean is the codename given to the tenth version of the Android mobile operating system developed by Google, spanning three major point releases. Among the devices that run Android 4.1 to 4.3 are the Nexus 7 (2012), Nexus 4, Nexus 10, Nexus 7 (2013), and Hyundai Play X.

A lock screen is a computer user interface element used by various operating systems. They regulate immediate access to a device by requiring the user to perform a certain action in order to receive access, such as entering a password, using a certain button combination, or performing a certain gesture using a device's touchscreen. There are various authentication methods to get past the lock screen, with the most popular and common ones being personal identification numbers (PINs), the Android pattern lock, and biometrics.

<span class="mw-page-title-main">Samsung Galaxy Note 3</span> 2013 Android smartphone by Samsung

The Samsung Galaxy Note 3 is an Android phablet smartphone produced by Samsung Electronics as part of the Samsung Galaxy Note series. The Galaxy Note 3 was unveiled on September 4, 2013, with its worldwide release beginning later in the month. Serving as a successor to the Galaxy Note II, the Note 3 was designed to have a lighter, more upscale design than previous iterations of the Galaxy Note series, and to expand upon the stylus and multitasking-oriented functionality in its software—which includes a new pie menu opened through the button on the stylus for quick access to pen-enabled apps, along with pop-up apps and expanded multi-window functionality. It additionally features new sensors, a USB 3.0 port, 3 GB of RAM, and its video camera has been upgraded to 2160p (4K) resolution and doubled framerate of 60 at 1080p, placing it among the earliest smartphones to be equipped with any of these.

<span class="mw-page-title-main">Xiaomi Mi 4</span> Smartphone by Xiaomi

The Xiaomi Mi 4 is a smartphone developed by the Chinese electronics manufacturer Xiaomi for its high-end smartphone line, and was released in August 2014. Xiaomi held an event to formally introduce the high-end phone, and its complementary smart-accessory, the Xiaomi MiBand, during the Xiaomi New Product Launch Event 2014 on 22 July 2014.

<i>Letterpress</i> (video game) 2012 word game

Letterpress is a 2012 turn-based word game developed by Loren Brichter and published by atebits. In the game, two players take turns creating words to cover the most territory. Brichter based the game design on Boggle, color wars, and SpellTower. The gameplay gradually evolved during beta testing; in the prototype, players would stall games by avoiding remaining tiles on the board.

<span class="mw-page-title-main">Mercury Browser</span> Defunct mobile browser

Mercury Browser is a discontinued freeware mobile browser for Android, developed by iLegendSoft. Mercury Browser uses the Webkit engine. It was formerly available for iOS, but in 2017, it was removed from the App Store.

<span class="mw-page-title-main">Loren Brichter</span> American software developer

Loren Brichter is an American software developer who is best known for creating Tweetie and the pull-to-refresh function. After atebits, his self-founded company, was bought by Twitter, Inc. in 2010, he developed a word game for iOS called Letterpress.

<span class="mw-page-title-main">Android Pie</span> Ninth major version of the Android mobile operating system

Android Pie, also known as Android 9 is the ninth major release and the 16th version of the Android mobile operating system. It was first released as a developer preview on March 7, 2018, and was released publicly on August 6, 2018.

<span class="mw-page-title-main">Android 10</span> Tenth major version of the Android mobile operating system

Android 10 is the tenth major release and the 17th version of the Android mobile operating system. It was first released as a developer preview on March 13, 2019, and was released publicly on September 3, 2019.

References

  1. 1 2 "You Can No Longer Disable "Pull to Refresh" on Chrome for Android". Chrome Story. 22 July 2019. Retrieved 19 October 2023.
  2. 1 2 Keverenge, Hillary (11 August 2021). "Firefox for Android swipe/pull down to refresh after latest v91 stable update". PiunikaWeb. Retrieved 20 October 2023.
  3. 1 2 3 4 5 6 Brichter, Loren (April 21, 2016). "Email Interview with Loren Brichter" (Interview). Interviewed by Samantha Lee, Sijia Zhang & Jenna Choo.
  4. 1 2 Brichterr, Loren. "Interaction Techniques. Carnegie Mellon University, Pittsburgh. 24 Feb. 2016. Web. 24 Feb. 2016".
  5. ↑ "Chrome v41 adds pull-to-refresh functionality, Beta v42 brings 'site notifications'". Android Authority. 11 March 2015. Retrieved 20 October 2023.
  6. ↑ Wright, Arol (23 October 2020). "Mozilla adds pull-to-refresh for Firefox Nightly on Android". XDA Developers. Retrieved 20 October 2023.
  7. ↑ Carr, Austin. "Why The Pull-To-Refresh Gesture Must Die". Co.Design. Archived from the original on 4 December 2020. Retrieved 28 April 2016.
  8. ↑ Arnott, Nick. "WHY PULL-TO-REFRESH ISN'T SUCH A BAD GUY". Neglected Potential. Retrieved 28 April 2016.
This page is based on this Wikipedia article
Text is available under the CC BY-SA 4.0 license; additional terms may apply.
Images, videos and audio are available under their respective licenses.