The unrealised importance of pull to refresh

Pull down to refresh_Freebie by Hanna Jung

How do we save time and retrieve new data on our smartphone? With a simple gesture called pull to refresh. As minor as it may seem, every element of the designing and its placement has to be thought through before implementation.

At times you may have designers who offer extraordinary ideas but the developers may not be able to execute it. Both these members have to work in a synchronize to develop a pull to refresh gesture that is alluring with minimalist design and keeps the user entertained while they wait.

It’s a feature that feels so obvious, so natural, and so much like the way things are supposed to work.

What is Pull to Refresh?

Pull to refresh or swipe to refresh pattern lets a reader retrieve new data simply by using touch. This gesture was first introduced by Loren Brichter in the Tweetie app and in no time it gauged popularity amongst countless apps. Today, almost majority of the famous apps use the ‘Pull to refresh’ feature.

It is a touch screen gesture where you touch the screen of the 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, this is a indication for the application to refresh the content on the screen.

Everyone has a story

refresh by ranganath krishnamani

Isn’t it always good to give the user what they want, at their own convenience and without them asking for it? This is exactly what Loren Brichter did with Tweetie. Just like any other application, Brichter was trying to fit in a refresh button to the application. Others developers would find a spot somewhere on the app screen to fit in the button. Usually this button would be cramped in a toolbar bordering a scroll list. Brichter thought this was the most prime spot for navigation and action UI, so occupying it up for something as mundane as a refresh button just seemed wasteful.

Brichter then brainstormed to create a different method of refreshing and thus developed the ‘Pull to refresh’ feature.

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 effects that signaled users about a refresh occurring. Brichter believed it was crucial 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.

A single afternoon is all it took to invent these two pull to refresh gesture that too without any user testing.

After its initial release in 2008, the interaction designers from the design communities created an evolution for pull to refresh by adding their own styles and techniques.

Twitter has a Patent over it

Patenting the pull to refresh gesture did not catch attention for no reason. Every tech company under the sun has numerous patents at their disposal, why run after this one? Its simple to guess, it all comes down to the nature of the interaction being published.

In 2013, Twitter was granted a patent for the pull to fresh feature which was named as ‘user interface mechanics’. The patent was granted to Loren Brichter who introduced the gesture to Twitter when it acquired Tweetie developer Atebits back in 2010.

While applying for the patent, Brichter was worried about the rampant abuse of patents in the tech industry. To alleviate these patent problems, Twitter agreed to only use his patent defensively — the company wouldn’t sue other companies that were using pull-to-refresh in apps unless those companies sued first.

Brichter knew he had invented something valuable which would cause him to take a bullet in the chamber.

Design Elements Involved in Pull to Refresh

Keep the Users Engaged

#5 Pull to refresh_Freebie — Bow by Yup Nguyen

Transitions act as intermediaries between the different stages of the UI, giving the users a heads up when the screen changes. As the refresh icon scales to view it should remain on the screen while until the refresh activity is complete and any new content is visible.

The refresh indicator should not be outlandish to over designed or else it may annoy the users. Their role to make sure the user is kept engaged while they wait for the application to refresh.

Use the gesture to an advantage

Pull Down to Refresh by Hoang Nguyen

Developers usually use ‘pull to refresh’ as a way to save space as the screen. But like all gesture based actions, users have to know it is there. For developers it is easier to put a button but to enhance the user experience a pull to refresh icon is more appealing.

Keep it Spinning

Pull to refresh_Freebie — Weather Concept by Yup Nguyen

To avoid users drifting away from the app, the minute they swap the screen a visual feedback should pop up. This is a way the users are reassured about app functioning in a systematic manner. During the wait time, the refresh indicator should be constantly spinning until the data is available.

Functional Animations

Pull to refresh_Freebie — Coffee Concept by Yup Nguyen

Pull to refresh is a good way to explore creativity. Animations can guide the users to follow a motion of an element on the screen and to know how two different pages are connected.

Conclusion

The importance of pull to refresh in providing a superior User Experience is often ignored. Implement pull to refresh in a manner that it will be engaging and fun for the users, without taking too much attention of the actual application.