This is a draft
Touch Screen/ Gestures are the most popularly used technology to make user experience more smart and simple. Touch pads/screens make gaming more interactive and fun, and are being used widely all over the globe.
Touch methods
These methods allow for touch control of a device:
- finger
- stylus
Touch devices
These devices often have touch control capabilities:
- smartphones
- tablets
- TVs with a touch screen
- smart watches
- touch pads on laptops
- digital drawing boards
- electronic signature pads
Touch gestures
Every gesture listed below can be performed from 1 to potentially 10 fingers.
For each gesture, a JS Fiddle code example is provided.
Tap
Briefly touch surface with fingertip
Purposes/real world use cases:
- primary action
- selecting
- submitting
- option menu: in touchpads using 2 fingers
Demo:
Double tap
Rapidly touch surface twice with fingertip
Purposes/real world use cases:
- to unlock the phone (Windows phone)
- to double jump in games
- to zoom in/out
Press/Hold
Touch surface for extended period of time
Purposes/real world use cases:
- to learn or get info about an item
- to select and then drag or move (app icons)
Slide
Brush surface with fingertip from one side to another of the device.
Purposes/real world use cases:
- go to next/prev page/slide
- in touchpads: in Macs, you can switch desktops sliding with 4 fingers
- in touchpads: navigate throught browser history using 2 fingers
Flick
Quickly brush surface with fingertip
Purposes/real world use cases:
- yes/no or like/dislike, depending on the direction
- in touchpads (on Macs, switch desktops by flicking with 4 fingers)
- in games (like to throw ninja stars)
- to create a different animation, compared to slide
Drag
Move finger over surface without losing contact.
Purposes/real world use cases:
- move icons
- perform actions
- make a choice
Swipe
Brush surface with fingertip
Purposes/real world use cases:
- to select
- from edge, for system/app commands
Pan
Press and hold, then drag the finger in any direction
Purposes/real world use cases:
- in games (to select and use items against a character, in addition to a "drag" gesture)
- to view an expanded area on screen (for example, view the playing field in Angry Birds)
Rotate
Brush surface following a circle with 1 finger
Purposes/real world use cases:
- make a choice following a graphic element
Pinch
Touch surface with 2 fingers and bring them closer to each other
Purposes/real world use cases:
- zoom out
Spread/Stretch
Touch surface with 2 fingers and move them apart
Purposes/real world use cases:
- zoom in
Press and tap
Press surface with one finger and briefly touch surface with second finger
Purposes/real world use cases:
- in games
Press and drag
Press surface with one finger and move second finger over surface without losing contact.
Purposes/real world use cases:
- in games
Rotate
Touch surface with 2 fingers and move them in a clockwise or counterclockwise direction
Purposes/real world use cases:
- select a function on smart watches
Touch Events
Touch Events: https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Touch_events
touchstart
touchend
touchmove
touchcancel
Touch action
touch-action CSS property: https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action
The touch-action CSS property is part of the Pointer Events W3C specification: https://www.w3.org/TR/pointerevents/#the-touch-action-css-property