2. 11 2
Touch
Swipe, speed is not a
factor
Stop point is nearby
(not fixed at the end)
Flick
11
Touch
Typically quicker than swipe Stop point is fixed at end,
you can stop prior to end.
2+
Swipe
Gestures in Mobile Games
Jennifer Zamora, Stephanie Ross, Andrew Hon
Abstract
Goal
Types of Gestures
Multi Touch
• Multi touch: Simultaneousinput of 2+ touches
• Other than pinch-zoom, less commonly used
Action Gesture Examples
Zoom Pinch fingers. Touch surface
with two fingers and bring
them closer or move apart
Most gameswith an iso-space
Sims Freeplay
Hay Day
Dragonvale
Smurfs Village
Rotate Touch surface with two
fingers and move them in a
clockwise or
counterclockwise direction
Sims Freeplay
Apple Maps
Multi Task Touch and control multiple
objects simultaneously
Plants vs Zombies
Hay Day
Letter Press
Cut the Rope
Fingle
Multi Touch
Gesture, Definition, Example
Human Interface Principles
The objective of this project was to identify the usage and
trends of gestures in mobile games. The increasing
development of mobile games surfaced the need for
standard vocabulary and best practices for UI gestures.
A competitive analysis of themes in top mobile games, and
application of human interface principles set the framework
for the use of gestural interactions.
Eight distinct gestures are defined by action, use case, and
supportive example. Mobile usability guidelines vary by
product, however general best practices include the
following: (1) direct manipulation (2) immediate feedback
and (3) cognitive mapping between game and real world
experiences. Product teams can leverage this document to
effectively communicate and implement gestures in mobile
games.
1. Establish a lexicon of gestural interaction in mobile games
2. Identify themes and trends that suggest best practice
1. Aesthetic Integrity
2. Consistency
3. Direct Manipulation
4. Feedback
5. Metaphors
iOS Developer Library -> User Experience -> iOS Human Interface Guidelines
http://developer.apple.com/library/ios/navigation/
Conclusion
• Standard vocabulary has been defined for gestures
• Direct manipulation creates a more engaging
experience
• Cognitive mapping draws on real world experiences
and helps users understand functionality of objects
• Apple and Android developer libraries offer more
insights:
• http://developer.apple.com/library/ios/navigation/
• http://developer.android.com/design/patterns/gestures.html
Swipe vs Flick?
Finger speed and proximity of stop point
• Swipe: slower speed and closer stop point – example:
Apple Photo list, toggle switches
• Flick: faster speed and indeterminate stopping point –
example: Apple Contacts, Email
Gesture Action
Tap
To press or select a control or item (analogous to a single
mouse click).
Drag
To scroll or pan (that is, move side to side).
To drag an element.
Flick To scroll or pan quickly.
Swipe
With one finger, to reveal the Delete button in a table-view
row, the hidden view in a split view (iPad only), or the
Notification Center (from the top edge of the screen).
With four fingers, to switch between apps on iPad.
Double tap
To zoom in and center a block of content or an image.
To zoom out (if already zoomed in).
Pinch
Pinch open to zoom in.
Pinch close to zoom out.
Touch and
hold
In editable or selectable text, to display a magnified view
for cursor positioning.
Shake To initiate an undo or redo action.
Tap
Gesture Action Apple Use Case Example from Tap Tap Revenge
Tap Briefly
touch
surface with
fingertip
To select a control
or item
Tap to press the keys on a keyboard
Drag
Gesture Action Apple Use Case Example from Angry Birds
Drag Move fingertip
over surface
without losing
contact
To scroll or pan
(move side to side)
To drag an element
Drag to pull back sling shot
FlickGesture Action Apple Use Case Example from Flick Kick Football
Flick Quickly brush
surface with
fingertip
To scroll or pan
quickly
Flick to swing your leg and kick the
ball
Gesture Action Apple Use Case Example from Fruit Ninja
Swipe Brush surface
with fingertip
To reveal Delete
button in table-view
row
To reveal hidden
view (Notification
center)
Swipe to cut the fruit
Swipe
Double tap
Gesture Action Apple Use Case Example from Mega Run
Double Tap Rapidly touch
surface twice
with fingertip
To zoom in and
out
Double tap to double jump
Pinch
Gesture Action Apple Use Case Example of zooming
Pinch Touch
surface
with two
fingers and
bring them
closer
together
To zoom in and
out
Pinch to compress image or
Spread to stretch image
Gesture Action Apple Use Case Example from Hay Day
Touch and hold Touch surface
with fingertip
Display a
magnified view
while editing text
Touch and hold to grasp
and move object
Touch and hold
Shake
Gesture Action Apple Use Case Example from Words With Friends
Shake Shake
device
To initiate or
undo an action
Shake the bag of tiles to scramble
letters