In computing, multi-touch refers to the ability of a surface (a trackpad or touchscreen) to recognize the presence of more than one or more than two points of contact with the surface. This plural-point awareness is often used to implement advanced functionality such as pinch to zoom or to activate certain subroutines attached to predefined gestures. - Multi-touch
Simulating realistic responses digitally is by no means easy, but when done correctly it is rewarding. Rachel Hinman, Mobile UX Researcher at Intel, compiled a list of the 12 basic principles for animation, taken straight from the 1981 book The Illusion of Life: Disney Animation, but adapted to mobile design . - Gestures & Animations: The Pillars of Mobile Design
- Squash & Stretch: Be mindful of an object’s mass and rigidity, displayed by how it “squashes” or “stretches” when moved. Will your object move as a solid block, or will it display some flexibility?
- Anticipation: Visually anticipating the next action can help alleviate some user confusion, as well as make the UX more enjoyable.
- Staging: Presenting your content properly will help anchor your user so that they feel more comfortable interacting with your app/site.
- Straight-Ahead and Pose-to-Pose: Use straight-ahead animation to capture dynamic and complex movement, and pose-to-pose to cover more predictable movement.
- Follow-Through and Overlapping Action: Most movement isn’t stagnant throughout; pay attention to the differences between different areas, for example, a man walking moves his arms differently than he does his legs.
- Slow In and Out: Adding more frames to the beginning and end of, say, scrolling through a menu, will give the impression that the app/site follows the laws of inertia like any other real-world object.
- Arcs: Movement along an arc feels more organic, while movement along straight lines seems mechanical.
- Secondary Action: In the real world, actions have multiple consequences; a good example of a secondary action in a mobile app/site would be, if the user opens a new window, animate the old window closing.
- Timing: There is no one-rule for timing, as different speeds convey different tones. Fast might work best for light, fun apps/sites, while slow might be better for more structured and complex ones.
- Exaggeration: Don’t be afraid to take things bigger—just because you’re following reality doesn’t mean you can’t bend the rules when appropriate.
- Solid Drawing: Make use of 3D space, weight, and volume, as a real world object does.
- Appeal: A more theoretical principle, give your app/site some personality and charisma. A personal touch can go a long way in improving UX.
Gestures are important in app design, but never become over reliant on them. Moreover, avoid using a gesture-accessed menu or action as the only point of access.
Created by Mobile Tuxedo.
Enjoy this freebie and want to show support? Spread the word.
Share & Like is appreciated!
We hope you enjoy this freebie and find it useful!