Touch Gesture Set for wireframes and mock-ups (more than 50 symbols)

When going through the various guidelines regarding the gestures, you can see and explore the different gestures that allow users to interact.

However, I like to mention one thing at the beginning, because I started to write parallel an article about „intuitive control“‚ more or less non of these gestures is intuitive – or do you think that the iPad's four-finger swipe up gesture, that shows you the bar with the most recently used apps, is self-explanatory?

OK back to our gestures – I provide you my symbol set of gestures and movements as download:
Free Gesture Icon Set (51Quality Icons)
Visio stencils / shapes (vss) download
Adobe Illustrator (ai) download
Photoshop (psd) download
It's all in all more than 50 symbols for your wireframes and mock-ups.



Quick summary of the gestures, descriptions and the supporting platforms ...

GUI Gesture Description Platform
Tap Quick touch and remove
A tap is a single, brief touch on the screen within a 
bounded area and back up off the screen again.
iPad
iPhone
Windows Phone
Window 8
Microsoft Surface
Palm webOS
Android
GestureWorks (Flash)
Double Tap A double tap is two quick taps short after another 
within a bounded area.
iPad
iPhone
Windows Phone
Window 8
Microsoft Surface
Palm webOS
Android
GestureWorks (Flash)
Press Touch and hold - Users touch the screen, 
leaving their finger motionless until the information
is displayed or the action occurs.

iPad
iPhone
Windows Phone
Window 8
Microsoft Surface
Palm webOS
Android
GestureWorks (Flash)
Flick Place a finger on the screen and quickly wipe / flick
it in the desired direction

iPad
iPhone
Windows Phone
Window 8
Microsoft Surface
Palm webOS
Android
GestureWorks (Flash)
Swipe Very similar to 'Flick' but not so quick
Apple describes the single-finger flick gesture as one 
"where the user quickly swipes a finger across the screen". However in iOS development, the technical difference 
between a flick and a swipe is actually defined by the 
developer, taking into account when and where touch 
events occur on the screen.
iPad
iPhone
Windows Phone
Window 8
Microsoft Surface
Palm webOS
Android
GestureWorks (Flash)
Pinch Using 2 fingers, to zoom out iPad
iPhone
Windows Phone
Window 8
Microsoft Surface
Palm webOS
Android
GestureWorks (Flash)
Spread Using 2 fingers, to zoom in iPad
iPhone
Windows Phone
Window 8
Microsoft Surface
Palm webOS
Android
GestureWorks (Flash)
Rotate Touch with 2 fingers and rotate, to rotate content iPad
iPhone
Windows Phone
Window 8
Microsoft Surface
Palm webOS
Android
GestureWorks (Flash)


These are my shapes and icons for wireframes and mock-ups:



... you can download these icons as ...

Visio 2010 vss  :  

Adobe Illustrator (CS6) ai  :  

Adobe Photoshop (CS6) psd  :  



One interesting idea to mention are the multi-touch gestures and their possibilies in the future. Technically possible and in theory the number of possible gestures are limitless. As far as I know Window 8 and Microsoft Surface supports up to 10 touch points but there aren’t really any devices that support 10 touch points and the minimum support for all Windows Phone 7 devices is 4 or 5 points – I have no Information how many touch points might be supported by iPhone or iPad.


I suggest you as UX, visual designer and developer to visit the guidelines of Microsoft and Apple. The Guidelines describes the principles that help you design a useful and easy-to-use user interface and user experience for your website, app, software, kiosk and what ever you like to touch or let touch.
And you should never forget your interface on several devices, because I own and use several devices and not everything works on every device - e.g. I own for example two HP touch sensitive laptops same operating system and software but there are gestures which are recognized by one but not by the other especially in case of two or more finger gestures.

Therefore my unmistakable hint - test test test  !

  
Microsoft's  UX, Design and Development Guidelines:
http://msdn.microsoft.com/en-us/library/windowsphone/design/hh202915(v=vs.92).aspx
  
Apple's  UX, Design and Development Guidelines  :
http://developer.apple.com/library/ios/#documentation/userexperience/conceptual/mobilehig/Introduction/Introduction.html

Windows 8 Touch Gestures and Keystrokes Overview by HP
http://www8.hp.com/us/en/support-topics/windows8-support/touch-gestures-keystrokes.html



Easy to hit and hard to reach touch areas:









Comments

  1. hi
    These look great.
    I have tried to download the Visio stencil, but it keeps saying it's unable to generate. Have you removed the file? Or is this a weird glitch...?

    thanks!

    ReplyDelete
  2. Hi Marg
    no 'weird glitch' - it is a case of bad UX and UI by Google
    - click the link
    then you see Google’s screen with the annoying message:
    'Sorry, we are unable to generate a view of the document at this time. Please try again later.'
    ... BUT in general there should be in the upper left corner an arrow next to the print button - where you can download the file

    I know it's not user friendly but even Google isn't perfect ;-)

    please drop me a line whether it works now

    best wishes
    holger

    ReplyDelete
  3. And I just discovered that e.g. a few versions of the Internet Explorer doesn't show this arrow - in this case you can use the submenu of 'file'

    ReplyDelete

Post a Comment