The pull-to-refresh (or swipe-to-refresh) pattern lets a user pull down on a list of data using touch in order to retrieve more data. The “Pull-to-refresh” gesture was first introduced by Loren Brichter in the Tweetie app and in no time it became so popular that countless apps adopted this gesture. Today “pull-to-refresh” feature is a natural part of many popular apps, including Twitter, Gmail, Tweetbot, and others.
In this article, we’ll overview the pattern and see when and why pull-to-refresh is implemented well, as well as talk about other options for refreshing.
The refresh indicator appears only in conjunction with a refresh gesture or action. The animation below shows you the complete interaction model.
Swipe to refresh manually refreshes screen content with a user action or gesture. It’s quite obvious, but still sometimes designers use refresh indicators to show automatically update content. Since the automatic refreshing mechanism doesn’t require any actions from the user side, automatically update content shouldn’t display a refresh indicator.
Swipe to refresh works good for lists, grid lists, and card collections that are sorted by recent content (a collection is strictly sorted by descending date). This collection usually represent constantly-updating stream of items, and you can’t use an automatically update content (e.g. sync) because as you scroll up to the top it’s almost expected that you’ll automatically scroll up past the top since new items will be downloaded automatically all the time. So, instead of having the UI just automatically load more, the pull-to-refresh gesture is used to give the user a chance to “back out” of the refresh operation. Appropriate use cases for pull-to-refresh are:
Twitter, for instance, has a list of tweets which is ordered with recent tweets on the top. User pull to see the most recent tweets. They reach the top of the list — last tweets are added.
Swipe to refresh should not be used in the following situations:
Transitions should act as intermediaries between the different states of the UI, helping users to understand what is going on when the screen changes. As the refresh indicator translates and/or scales into view, it should remain visible until the refresh activity completes and any new content is visible, or the user navigates away from the refreshing content.
Any user activities with the content on the view during this update (such as scrolling) shouldn’t move the refresh indicator off-screen:
A lot of developers consider using ‘pull-to-refresh’ as a way to save space on screen. And it obviously saves space as nothing is visible on screen at all. But like with any other gesture-based action, you have to know it’s there. Thus, it’s not as intuitive as a simple but clear “Refresh” button. Most of the time a refresh button would have been way easier to implement from a developer perspective and to use from a user point of view (since it’s always visible and available).
A user’s wait time begins the moment when they swap the screen (initiates an action). Immediately, the system should give some visual feedback to communicate that it has received the request. A big part of UX is keeping a user informed about what’s happening and reassuring him or her that the app is working properly. The user’s confidence that the refresh happened directly related to its technical representation. That’s why your refresh indicator should continue to spin until the data is available. This engages the user and prevents confusion.
The action of pulling when visualizing a list is natural on a mobile device, but it looks kind of odd on the iPad in landscape mode. You need either stretch your thumb or put the device on a flat surface in order to comfortably operate with UI.
Pull-to-refresh is a great place for creativity. As it was said before, transitions should act as intermediaries between the different states of the UI. Animation for pull-to-refresh can help the user to follow the motion of an element on the screen and to understand exactly how the two UI states are related.
Used correctly, pull-to-refresh acts as facilitators for content update interaction, with feedback, notifications, and sometimes even a little entertainment.
Main image credit by Tubik
About the Author: Nick Babich is a software developer and author of a blog dedicated to usability
Essential tips for team managers and members to enhance collaboration, improve communication, and achieve exceptional…
Discover top Figma plugins to streamline your workflow, enhance visuals, and add creative flair to…
Learn how to manage visuals in blog posts to optimize them for SEO in this…
Unraveling Figma’s pricing structure: tips to avoid hefty bills and save money. (more…)
Don't switch tabs to browse icons, illustrations, and photos for your websites. Get them inside…
Transform your Notion space with custom covers! Dive in for easy steps, pro tips, and…
This website uses cookies.