Juan has been recently playing with paper in order to explore some possibly new interactions. This person is trying to pinch, tear, flip, curl, fold, and peel UI’s in new ways just for kicks without the limitations of pixels. In a way this kind of stuff resembles paper prototyping a bit but probably focuses more on discovering new gestures. Either way, it’s an awesome way to think outside the box in my opinion, as tactile play breads creativity. Thanks for sharing!

In Juan’s own words:

In a previous post, I mentioned a way of thinking about interactions and interface within a framework of depth and space. The ideas were centered around the digital space, but as a designer I find it’s important to remove myself from that space and explore solutions that can originate in physical space.

One of the easiest ways to do this is to break out scissors and paper. With paper you can remove the constraints of working in pixels to fold, tear, flip, curl and manipulate the medium to discover solutions that may have otherwise been missed.

To illustrate this, I created a few examples based on some familiar apps and others based on former concepts I’ve played around with in the past.

Credits: Juan Sanchez

PJ recently took another stab at making gesture icons more comprehensible and released Cue under Creative Commons. It’s a proposed system for representing gestures more clearly that makes use of thumb like icons. He explains his motivation for the project in a blog post as well. The icons come in PNG (4 sizes), SVG, Omnigraffle and InDesign formats. Awesome. It’s always great to see explorations in visual language. Thanks PJ!

Here is how he puts it:

These gesture icons act as roadsigns to an app for interaction way-finding. As expected, there has been a significant collection of gesture icon sets that have been made available to fill this need. The current crop of icons succeed in clarity, but they lack the iconic qualities necessary to act as a standard representation of gestures. My goal is to help create a foundational set of icons that are flexible, clear and distilled to a point where they could become a standard visual system to build from – ultimately to be used within apps for when explicit communication is needed.

Credits: PJ Onori

The gesture library from gestureworks has been recently expanded to contain a total of 200 illustrations. The library now contains multi-touch as well as stroke gestures in a variety of bitmap and scalable formats. It’s loaded with swipes, drags, flicks, holds, scrolls, taps, and even 3D gestures. For showing stroke direction, they’ve come up with an interesting way of starting off each stroke with a blue circle and ending with a red one. Pretty cool and inspirational ways of showing off user actions.

Credits: gestureworks

Another great gesture compilation brought to you by Luke Wroblewski and others. The researched document describes how touch gestures are supported on platforms such as: iPhone OS, Windows 7 Phone, Palm webOS, Android, OSX (trackpad), OSX (Magic Mouse), Microsoft Windows 7, Wacom Bamboo, GestureWorks (Flash) and Microsoft Surface. The compiled document also comes summarized as a downloadable PDF as well as more wireframe friendly formats (PDF, EPS, Omnigraffle).

The guide contains: 1) an overview of the core gestures used for most touch commands 2) how to utilize these gestures to support major user actions 3) visual representations of each gesture to use in design documentation and deliverables 4) an outline of how popular software platforms support core touch gestures.

Credits: Craig Villamor, Dan Willis, Luke Wroblewski, and Jennifer Rhim

GestureWorks has released 20 something gesture icons for their Flash and Flex development environment. Although their multitouch library is geared at developers, the icons still look interesting in their own right. A lot of the interactions supported include two handed, as well as multi finger gestures. The downloadable library comes in various formats (PNG, PDF and EPS). Enjoy.

Also, I just created the gestures tag to keep track of all these related posts.

Credits: GestureWorks

Ron has recently initiated a project with the intention of creating a visual language for representing gesture based user actions. He shares the belief of “gain[ing] common grounds when discussing interactions” and has just released the Gesturcon Touch Pack under a Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 United States License. The zipped file contains EPS, PNG and Illustrator files for your use. His approach supports such interactions as taps, holds, double taps, flicks and is achieved with circular shapes. @vitorious also threw the idea of combining this with my own notation. Hmm, pretty cool.

Credits: Ron George

Vincent, a friend of mine, has been tinkering with some new ways of portraying simple touch screen interactions on his Get Around application. He uses a big overlaid thumb with a set transparency to indicate the touch. For indicating a dragging action, the thumb also contains an arrow with a direction. Just thought to share this as I found it interesting. To refresh quickly, Elaine has also approached the same problem previously in a slightly different way.

Credits: Vincent Steurs

Recently, quite a few representation about human activity have been merging in with the wireframe. Similarly, here is a template which contains various possible gestures on a touchscreen. Elaine came up with interesting ways to represent: taps, double taps, drags, flicks and pinching. Unflattened PNG can be grabbed from here (Elaine says: “I’m okay with people using the images for wireframes, presentations and educational purposes, but no modifications please”).

On the same note, Dan also posted another gestural icon set over here.

Credits: Elaine Chen