by Joe Pendlebury (@theuxchap)

“Pull-to-Return” — A New App Microinteraction to Consider

We’ve all seen the “Pull-to-Refresh” action that now appears to be a staple of most apps, which focus around a timeline or news feed of some description — Facebook, Twitter, LinkedIn, Instagram, BBC News, Sky News, and so on. But what about those apps, which don’t need such a facility that allows the user to regularly refresh content, on demand? Retail apps, for example. Why not reuse this “pull down” interaction to serve another purpose, like allowing the user to dismiss the current layer they’re viewing, thereby returning to an underlying layer?

How about something like this, by Roland Lösslein?

Example of a In-App Customer Journey

To help visualise this concept further, imagine a customer journey, which has resulted in you (the user) reaching a Product Details screen, having arrived here as a result of interacting with an item listing on a Product List screen. Now that you’ve viewed that screen, you decide to go back to the Product List, to take a look at some of the other products featured.

First port of call, locate the “Back” button.

Thumb-Reach Issue

The most common position for a “Back” button in an app, is towards the top left-hand corner of the viewport. If you’re a right-handed user, interacting with an app on an iPhone 6 Plus (or a smartphone of a similar size), chances are, it’s an uncomfortable thumb stretch to reach that “Back” button.

Likewise, you’re also going to be regularly interacting with that “Back” button, flitting back and forth between the Product List screen and Product Details screen, as you browse through and compare the range of products that take your fancy.

The “Pull-to-Return” Behaviour

To further highlight the fact that the layer is being dismissed, the layer could begin to fade to transparent, with the level of transparency increasing, inline with the depth of the pulling motion. Past a certain point of pull, the layer could then dismiss completely, so the user doesn’t have to pull all the way down to the bottom of the viewport.

When to Use this Interaction

Here’s a great example of the concept, demonstrated by Dribble user, Bady —

I see this interaction concept, working primarily in apps which make use of layers. The idea of dismissing a layer to reveal an underlying layer makes perfect sense where various screens in an app, are designed to sit on top of one another. The ability to stack and dismiss layers also helps to maintain that sense of visual hierarchy, as far as the user’s understanding is, of where they are in the app. This “pull-to-release”-style of interaction would slot in nicely, as a result.

Zara — A Working Example

Since originally writing the article, I discovered a great implementation of the proposed gesture in Zara’s iPhone app.

Since originally writing the article, I discovered a great implementation of the proposed gesture in Zara’s iPhone app.

For example, let’s say you’ve opted to view the ‘Bags’ product category in the ‘Man’ department, which resides between the ‘Shoes’ and ‘Perfumes’ categories. If you pull down and over-drag above the top row of item listings, you can bring all of the item listings into view, belonging to the ‘Shoes’ category. Pulling up and over-dragging below the bottom row of item listings, will bring the products belonging to the ‘Perfumes’ category, into view.

In adopting this technique, you don’t necessarily have to go back to the navigation menu to view item listings belonging to a new product category, only to then go forward to the Product List screen again. As long as the item listings you’re interested in, are in adjacent categories (as per the Information Architecture of the app), this ‘pull down’ and ‘pull up’ gesture, provides a convenient way of bringing more products into view, without needing to leave the screen you’re already on. Nice job, Zara!

As mentioned at the beginning of the article, be sure to check out Röland Losslein’s excellent article on the subject, which was the inspiration for my post. He’s put a great Framer.js prototype together too —

Originally written and published to on June 21st 2015, by Joe Pendlebury.

One Last Thing…

If you liked this article, please applaud it 👏 and share it with your friends, work colleagues and followers. Remember, you can clap up to 50 times — it makes a big difference for me in helping to focus my writing on what you guys enjoy reading the most.

You’re also welcome to follow me on Medium, on Twitter, or even connect with me on LinkedIn. Thank you for your support! 😊