Mobile “Pull to Share” Interaction Experiment

A mobile "pull to share" interaction that allows to share a page by using the familiar "pull to refresh" movement. Based on the action for refreshing and opening/closing a tab in Google Chrome for mobile.

From our monthly sponsor: Automate manual QA and catch visual bugs with Percy’s all-in-one visual testing and review platform.

Today’s experiment is an attempt to create a pull-to-share interaction that is based on the same Google Chrome interaction on iOS for opening/closing a new tab or refreshing the current tab. The sharing interaction in this experiment will do the following: when at the top, the user “pulls” or drags down the page, revealing a sharing bar. If the touch is released before a specific threshold is reached, the bar will close again, cancelling the sharing action. If pulled down enough, a selection circle will appear that will indicate which social sharing network is selected. By moving the finger horizontally, the selection can be changed. If released, the currently selected network link will trigger, resulting in a scaling effect of the selection circle for a success feedback.

Please note that this is highly experimental and only a proof-of-concept.
“Pull to share” interaction (move example)

The second demo in this experiment will work with the device’s orientation; so instead of having to move the finger, one only needs to tilt the device in order to change the selection.

“Pull to share” interaction (tilt example)

This is a very raw attempt to use the pull interaction for easy social sharing. There are many pitfalls here and the concept might be problematic because it’s taking an existing interaction and doing something else with it. The idea is to simply show it’s possibilities and implement it for fun. Maybe it will lead to new ideas for creative and useful mobile interactions.

Tagged with:

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

Receive our bi-weekly Collective or official newsletter right in your inbox.

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

Feedback 28

Comments are closed.