"Pull-to-Return" - A New App Interaction to Consider

"Pull-to-Return" - A New App Interaction to Consider

Introduction

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?

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 a 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.  

To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video

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 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

You can help make that journey a little bit more pleasant for the user (at least as far as numbing the pain of the thumb stretch), by allowing them to pull down and over-drag on the Product List screen, thereby dismissing that layer, and returning to the underlying layer - the Search Results screen.

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

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.

Be sure to check out Röland Losslein's excellent article on the subject, which was inspiration for my post.  He's put a great Framer.js prototype together too - http://prototypes.weaintplastic.com/pull-to-return/


Update (23/06/2015): Zara's Approach - "Pull Up" / "Pull Down" to Reveal More Products:

I discovered another great implementation of the "pull and over-drag" gesture today, this time in Zara's iPhone app

When on a Product List screen, you can pull down and over-drag at the top of the first row of item listings, to bring into view the item listings for the product category listed above, the one you're currently viewing the item listings for.  Similarly, doing the reverse gesture on the bottom-most row of item listings, will bring the products into view, for the category listed below the one you're currently viewing.

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 forwards to the Product List screen again.  As long as the item listings your interested in, are in adjacent categories (as per the IA 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!


Further Reading

Attributions


Further Reading

15 Ways to Optimise Product Screens in Native Retail Apps

15 Ways to Optimise Product Screens in Native Retail Apps

Where's the Beef? Going Hamburgerless on the Mobile Web

Where's the Beef? Going Hamburgerless on the Mobile Web