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 ...
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.
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
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
hi
ReplyDeleteThese 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!
Hi Marg
ReplyDeleteno '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
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