{"id":715,"date":"2010-01-10T17:02:38","date_gmt":"2010-01-11T01:02:38","guid":{"rendered":"http:\/\/blog.rongeorge.com\/?p=715"},"modified":"2013-11-08T10:04:11","modified_gmt":"2013-11-08T15:04:11","slug":"gesturcons","status":"publish","type":"post","link":"https:\/\/rongeorge.com\/blog\/gesturcons\/","title":{"rendered":"Gesturcons: an icon language to describe natural user interface gestures"},"content":{"rendered":"
Updated on March 20. Todd Sieling was kind enough to put the Gesturcons into an Omnigraffe stencil, so those are included in the package as well. Thanks!<\/div>\n
Updated the link on March 4th. Thanks to all that emailed me.<\/div>\n
Current Version v1.51 : have just made the second revision, corrected some spelling and updated a definition.<\/div>\n
I purposely left out some of the icons at first launch because I wanted to hear some feedback before people thought I had a fully thought out the solution. So, I have updated this post with the additional icons and the explanation for the purpose of them at the bottom. Enjoy!<\/div>\n

One of the prevailing themes of my writing is the ability for everyone to gain common grounds when discussing interactions. I believe one of the keys to this is a common metaphor, OCGM (Objects, Containers, Gestures, and Manipulations) as well as a set of icons for use in design. When sketching out the user experience it’s important to note the interactions. This is especially true in state diagrams, specs, and other interaction design documents. In my first installment of Gesturcons, I present to you the Gesturcons : Touch Pack 1.0<\/strong>. These are being released under the Creative Commons License and I hope that you all find some good use for them in your designs and experiences.<\/p>\n

This is the first batch, for touch. I also have Spatial, Voice, and a few others in the works.<\/p>\n

\"\"<\/a><\/p>\n

Updates<\/h3>\n

I’m using a simplistic graphic design language to represent the actions by a user. If we use OCGM to boil down each action, we get just a few basic actions that all can be constructed from. To combine these actions together I use only two different states. They either happen at the same time, or they happen consecutively.<\/p>\n

\"\"<\/a>After we have established exactly when the action takes place, we can then talk about the specific actions. I use only a few different types of basic actions as well. The only addition you see here is the Location Specific Icon<\/strong>. That means that the exact placing of that particular input is predetermined by the system for the manipulation or the gesture to be successful. As an example, the Red X at the top right of Windows is a location specific manipulation.<\/p>\n

\"\"<\/a><\/p>\n

The path icon is pretty straightforward. It means that the path the user has to take to accomplish the goal is specific and is going to be bound by guidelines. Those rules are what you have devised, but the path is specific.<\/p>\n

\"\"<\/a><\/p>\n

The rotation icons are dual purpose. They can mean an actual spin of the input or a spin of the action. This could be boiled down to a Path, because they have to follow a certain pathway to achieve success. I find it easy, but others find it difficult to also put a rotation as a simple path. So I added it here for ease of use. Notice the use of Twin <\/strong>when its dual simultaneous inputs.<\/p>\n

\"\"<\/a>To sum up the use of the Gesturcons<\/strong>, I present an example of how you could build your own gestures using this language. In this example I demonstrate the visual identifiers to show a gesture of the question mark.<\/p>\n

\"\"<\/a>I’ve also updated the Zip file with all these new gestures. Enjoy and happy designing.<\/p>\n

\"\"<\/a>
\nHere is the ZIP, which contains all the PNGs, the Illustrator File and an EPS as well. These are being released under the Creative Commons, which means you can use them internally as much as you want but you cannot package them, redistribute them, or include them in any professional product.<\/p>\n

License here
\n\"Creative<\/a>
\nGesturcons<\/span> by Ron George<\/a> is licensed under a Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 United States License<\/a>.
\nBased on a work at blog.rongeorge.com<\/a>. Permissions beyond the scope of this license may be available at http:\/\/blog.rongeorge.com\/design\/gesturcons\/<\/a>.<\/div>\n","protected":false},"excerpt":{"rendered":"

Updated on March 20. Todd Sieling was kind enough to put the Gesturcons into an Omnigraffe stencil, so those are included in the package as well. Thanks! Updated the link on March 4th. Thanks to all that emailed me. Current Version v1.51 : have just made the second revision, corrected some spelling and updated a […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-715","post","type-post","status-publish","format-standard","hentry","category-design"],"_links":{"self":[{"href":"https:\/\/rongeorge.com\/blog\/wp-json\/wp\/v2\/posts\/715","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rongeorge.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rongeorge.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rongeorge.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rongeorge.com\/blog\/wp-json\/wp\/v2\/comments?post=715"}],"version-history":[{"count":3,"href":"https:\/\/rongeorge.com\/blog\/wp-json\/wp\/v2\/posts\/715\/revisions"}],"predecessor-version":[{"id":844,"href":"https:\/\/rongeorge.com\/blog\/wp-json\/wp\/v2\/posts\/715\/revisions\/844"}],"wp:attachment":[{"href":"https:\/\/rongeorge.com\/blog\/wp-json\/wp\/v2\/media?parent=715"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rongeorge.com\/blog\/wp-json\/wp\/v2\/categories?post=715"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rongeorge.com\/blog\/wp-json\/wp\/v2\/tags?post=715"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}