Magazine for designers and web developers
20 Collect me

20 Playful Click & Hold, Drag & Gesture Interactions in Web Design

Article by Awwwards Team in Web Design - April 03

In mobile, multi-touch interactions like pinch to enlarge, pull to refresh and double tap etc. are natural navigation elements, it’s more difficult to find the same variety of interactions on desktop versions, examples that aren’t so much for the user interface but for a purely playful element. It’s true that while swipe or drag are quite common and intuitive actions to navigate a site or gallery, it’s more common to use other types of actions such as click and hold, drag or gesture recognition in an experimental form, in games or animations.

In some cases behind these interaction models there is amazing technical development, this is the case in the Land Lines project by Google Data Arts Team and Zack Lieberman where machine learning, data optimization and gesture recognition are fused.

Gestures and unusual triggers make the user experience playful and exploratory, many of them have a strong intuitive component. The following examples contain clear case of skeuomorphic drag interactions, leaving the user with no doubt to as how they should interact.