Your SlideShare is downloading. ×
0
Motion & Gesture
Interactions
in the digital age
Antonio De Pasquale
Senior Interaction Designer at frog
@myinteraction
Si...
My name is Antonio De Pasquale
I'm a Senior Interaction Designer at frog Milan

A little about me
I'm specialized in digit...
My name is Simone Lippolis
I'm a Design Technologist II at frog Milan

A little about me
Simone Lippolis is a Design Techn...
Motion, what?

Motion & Gestures interactions in the digital age
MotionGraphicsDesignInteractions
Motion graphics are graphics that use video footage and/or animation technology to
create...
MotionGraphicsDesignInteractions
Motion Design is a subset of graphic design in that it uses graphic design principles in
...
MotionGraphicsDesignInteractions
Objects that don’t move don’t interact. An interaction is some sort of communication,
and...
Without motion,
there can be no interaction.
You press a key, and an email window closes.
There is motion on your screen.
...
From the first personal computing with

Static interface and physical controls

Motion & Gestures interactions in the digi...
To an incredible new powerful devices with

Dynamic interface and Motion control

Motion & Gestures interactions in the di...
Motion & Gesture
Interaction
in the Digital Age

Introduction

Motion Design & Digital Artifacts
Animation Design Principl...
INTRODUCTION
Motion Design & Digital products

I was giving the demo to someone a little while ago,
and I finished the demo and I said w...
Introduction Motion Design & Digital products

The beginning
Games used motion for the first time to visualize the effect
...
Introduction Motion Design & Digital products

Web 1.0: Java & Gif
At the beginning of the Web, few technologies allowed
m...
Introduction Motion Design & Digital products

The Golden Age of Flash
From a simple animation tool, Flash changed the way...
Introduction Motion Design & Digital products

The App World
With the explosion of mobile apps, motion started to
became a...
Introduction Motion Design & Digital products

The Web Reloaded
With the introduction of the new w3c specifications, html ...
Introduction Motion Design & Digital products

Gesture & Motion
Gesture recognition became a common pattern on console and...
Introduction Motion Design & Digital products

The Future
New desktop physical control, css4 html6, smartphone
gesture rec...
Introduction Motion Design & Digital products

The Evolution of Motion Interaction
Webkit
Technology

Applet Java, 1989
Ja...
Introduction Motion Design & Digital products

?
What are the UX principles
that helps technologist & designers
in shaping...
Introduction Animation Design Principles

Disney animation principles

Disney's Twelve Basic Principles of Animation is a ...
Introduction Animation Design Principles

Motion & Gestures interactions in the digital age
Introduction Animation Design Principles

Many of this principles can be applied to 6 macro UX categories
to improve funct...
Introduction Animation Design Principles

Extension
Spatial Extension reduces the complexity of the user interface
by exte...
Introduction Animation Design Principles

Orientation
Orientation describes the way in which a logical connection can
be c...
Introduction Animation Design Principles

Feedforward
Feedforward functions as a conveyor of possible interactions.
An ill...
Introduction Animation Design Principles

Feedback
Feedback comprehensively indicates what the result
was of the user's in...
Introduction Animation Design Principles

Highlight
Highlighting is the guidance of attention by using animations.
This ca...
Introduction Animation Design Principles

Awaking
Awaking Controls allows the user to focus on contextual
controls. They a...
CODE (and) MOTION
Technology Vs Motion

Technology makes what was once impossible possible.
Design makes it real.
MICHAEL	
  GAGLIANO
Code (and) Motion Technology Vs Motion

Technology Vs Motion
Why the web?

• Large audience both on desktop & mobile
• New...
Code (and) Motion Technology Vs Motion

Development Tools
How we build this examples:

+
To create the structure of the
la...
Code (and) Motion Technology Vs Motion

General principles
Always prefer CSS3 over JavaScript animations
BUT

Without Java...
Code (and) Motion Technology Vs Motion

The examples
Demo code

These examples are not real-life cases!
it is almost impos...
Code (and) Motion Design with code

Animation patterns
For every category we selected a relevant example to show the
motio...
Code (and) Motion Design with code

Extension

1. Folding
A transition to show that only a part of an object is visible.
B...
Code (and) Motion Design with code

Extension

2. Area split
A transition to show a direct connection between
the object o...
Code (and) Motion Design with code

Extension
Example

3. Flip / Half flip
A transition to show a direct connection betwee...
Code (and) Motion Design with code

Orientation

1. Fan of stack

Example

A transition to explain the arrangement of obje...
Code (and) Motion Design with code

Orientation

2. Page turn

Example

A Transition to explain the information architectu...
Code (and) Motion Design with code

Orientation

3. Saving indicator

Example

A transition to tell the user where to find...
Code (and) Motion Design with code

Feedforward

1. Affordance
A transition to present a possible interaction.

Card movem...
Code (and) Motion Design with code

Feedforward

2. Hidden features
A transition to explain what is necessary to activate
...
Code (and) Motion Design with code

Feedforward

3. Explaining directions

Example

A transition to explain
a specific dir...
Code (and) Motion Design with code

Feedback

1. Availability

Example

A transition to show the progress of a loading beh...
Code (and) Motion Design with code

Feedback

2. Heal
A transition to show that the objects of a list reacts directly on
t...
Code (and) Motion Design with code

Feedback

3. Position accepted
A transition to show that a movement into
a new positio...
Code (and) Motion Design with code

Highlight

1. Change depth to
A transition to direct the user‘s view by an attention
g...
Code (and) Motion Design with code

Highlight

2. Expand to
A transition to show which object is active
on interaction by ...
Code (and) Motion Design with code

Highlight
Example

3. Blur to
A transition to direct the user‘s view
by an attention g...
Code (and) Motion Design with code

Awaking

1. Swipe to delete
A transition to support an intuitive interaction
of deleti...
Code (and) Motion Design with code

Awaking

2. Spring to refresh
A transition to use the intuitive interaction of a list....
Code (and) Motion Design with code

Awaking

3. Mode switch

Example

A transition to introduce new controls by sliding in...
Code (and) Motion Design with code

Design with code
it's a good practice when you have:

a Designer

a developer

Coding ...
The future is already here.
It's just not evenly distributed.
WILLIAM	
  GIBSON
FURTHER READING
Motion and Gesture Interaction in the Digital Age Further reading

The Illusion of Life: Disney animation

Designing Inter...
Motion and Gesture Interaction in the Digital Age Further reading

CSS Animations

Designing gestural interfaces

Val Head...
Motion and Gesture Interaction in the Digital Age Further reading

Articles & Insights
Design principles

Motion resource
...
Thanks!
Follow us on twitter
@myinteraction • @simonelippolis
to continue the discussion!
Upcoming SlideShare
Loading in...5
×

Motion & Gesture Interactions in the digital age

25,283

Published on

Technological advances have allowed, in the last few years, a big step forward in the dynamic behaviors and interactions patterns that we used to do on the web, in the past. Starting from understanding the rules of motion design and how people interact with it during the processes of interaction we'll discover through practical insights and examples what is "under the hood" and how to prototype and develop all this design patterns with a more integrated and efficient design to code workflow.

Conference link:
http://www.codemotion.es/talk/19-october/202

Material & Sample code:
http://simonelippolis.com/codemotion/

Published in: Design, Technology, Business

Transcript of "Motion & Gesture Interactions in the digital age"

  1. 1. Motion & Gesture Interactions in the digital age Antonio De Pasquale Senior Interaction Designer at frog @myinteraction Simone Lippolis Design technology II at frog @leepolis
  2. 2. My name is Antonio De Pasquale I'm a Senior Interaction Designer at frog Milan A little about me I'm specialized in digital interfaces & user experience I'm passionate about the "aesthetics" of movement I'm from Sicily and I love the sea. @myinteraction
  3. 3. My name is Simone Lippolis I'm a Design Technologist II at frog Milan A little about me Simone Lippolis is a Design Technologist at frog design with over 10 years of experience in software and web development. @leepolis
  4. 4. Motion, what? Motion & Gestures interactions in the digital age
  5. 5. MotionGraphicsDesignInteractions Motion graphics are graphics that use video footage and/or animation technology to create the illusion of motion or rotation, and are usually combined with audio for use in multimedia projects. Motion graphics are usually displayed via electronic media technology, but may be displayed via manual powered technology * Wikipedia Motion & Gestures interactions in the digital age
  6. 6. MotionGraphicsDesignInteractions Motion Design is a subset of graphic design in that it uses graphic design principles in a filmmaking or video production context (or other temporally evolving visual medium) through the use of animation or filmic techniques. Although this art form has been around for decades, it has taken quantum leaps forward in recent years in terms of technical sophistication. * Wikipedia Motion & Gestures interactions in the digital age
  7. 7. MotionGraphicsDesignInteractions Objects that don’t move don’t interact. An interaction is some sort of communication, and communication is about movement: our vocal cords vibrating as we speak, our hands and arms writing or typing as we send email or instant messages, sound and data moving between two entities. Dan Saffer - The element of Interaction Design Motion & Gestures interactions in the digital age
  8. 8. Without motion, there can be no interaction. You press a key, and an email window closes. There is motion on your screen. Dan Saffer - The element of Interaction Design Motion & Gestures interactions in the digital age
  9. 9. From the first personal computing with Static interface and physical controls Motion & Gestures interactions in the digital age
  10. 10. To an incredible new powerful devices with Dynamic interface and Motion control Motion & Gestures interactions in the digital age
  11. 11. Motion & Gesture Interaction in the Digital Age Introduction Motion Design & Digital Artifacts Animation Design Principles Code (and) Motion Technology Vs Motion Design with code
  12. 12. INTRODUCTION
  13. 13. Motion Design & Digital products I was giving the demo to someone a little while ago, and I finished the demo and I said what do you think? They said, ‘You had me at scrolling.’ STEVE  JOBS,  2007  (on  the  iPhone  iner+al  scroll  feature)
  14. 14. Introduction Motion Design & Digital products The beginning Games used motion for the first time to visualize the effect of a specific interaction in the digital space Motion & Gestures interactions in the digital age
  15. 15. Introduction Motion Design & Digital products Web 1.0: Java & Gif At the beginning of the Web, few technologies allowed motion in web pages must mostly just for eye-candy Applet Java Motion & Gestures interactions in the digital age Animated Gif
  16. 16. Introduction Motion Design & Digital products The Golden Age of Flash From a simple animation tool, Flash changed the way designers experiences with motion & interaction TheVoid, 1998 Animated menu, interactive objects 2Advacend, 2000 Screen transition, Loading screen LeoBurnet, 2006 3d navigation, motion detection http://www.thevoid.co.uk/index.html http://v2.2a-archive.com/flashindex.htm http://v2.2a-archive.com/flashindex.htm Motion & Gestures interactions in the digital age
  17. 17. Introduction Motion Design & Digital products The App World With the explosion of mobile apps, motion started to became a core part of the interaction models Revealing hidden controls Motion & Gestures interactions in the digital age Card 3d parallax Top-down bouncing menu
  18. 18. Introduction Motion Design & Digital products The Web Reloaded With the introduction of the new w3c specifications, html & css added new life to motion & dynamic on the web + Motion & Gestures interactions in the digital age
  19. 19. Introduction Motion Design & Digital products Gesture & Motion Gesture recognition became a common pattern on console and motion interactions was the right answer to show a new kind of affordance. Physical Motion patterns becomes virtual interactions. Motion & Gestures interactions in the digital age
  20. 20. Introduction Motion Design & Digital products The Future New desktop physical control, css4 html6, smartphone gesture recognition, hands & fingers tracking... Motion & Gestures interactions in the digital age
  21. 21. Introduction Motion Design & Digital products The Evolution of Motion Interaction Webkit Technology Applet Java, 1989 Javascript Pong, 1978 Gif, 1980 HTML5 + CSS3 Jquery iOs, 2007 Safari + Webkit Flash, 1993 Leapmotion iOs 7, 2013 Flash 3d, 2005 Xbox Kinect Flash AS.20 1978 1980 1989 1993 Simple animation UI elements Interactive controls 2000 2005 2007 Native animation in app gesture Interactive UI elements Motion Motion & Gestures interactions in the digital age 2008 Full animation engine Web Native animation 3d, video, cam & motion tracking Today Natural UI Gestural interaction Advanced motion patterns
  22. 22. Introduction Motion Design & Digital products ? What are the UX principles that helps technologist & designers in shaping the next generation experience? Motion & Gestures interactions in the digital age
  23. 23. Introduction Animation Design Principles Disney animation principles Disney's Twelve Basic Principles of Animation is a set of rules that defines a realistic impression of a motion with the basic laws of physics. Some of these principles have great relevance for the animations in the user Interface. Motion & Gestures interactions in the digital age * Panop Koonwat - https://vimeo.com/65815545
  24. 24. Introduction Animation Design Principles Motion & Gestures interactions in the digital age
  25. 25. Introduction Animation Design Principles Many of this principles can be applied to 6 macro UX categories to improve functionality and to increase the affordance of the actual patterns Extension Orientation 12 principles Feedforward 6 categories Feedback Highlight Awaking * Johannes Tonollo, Meaningful Transitions - http://www.ui-transitions.com Motion & Gestures interactions in the digital age
  26. 26. Introduction Animation Design Principles Extension Spatial Extension reduces the complexity of the user interface by extending the virtual space. Space extension Good for Mobile Extra space for info 3d as an additional info layer Motion & Gestures interactions in the digital age
  27. 27. Introduction Animation Design Principles Orientation Orientation describes the way in which a logical connection can be created and visualized between objects and object's states. Directions Content position Explaining IA Helps exploration Motion & Gestures interactions in the digital age
  28. 28. Introduction Animation Design Principles Feedforward Feedforward functions as a conveyor of possible interactions. An illustrating animation is used to prepare the user for the outcome of an action. Increase affordance Anticipate hidden interactions Tutorial & help explain new pattern Motion & Gestures interactions in the digital age
  29. 29. Introduction Animation Design Principles Feedback Feedback comprehensively indicates what the result was of the user's interaction. Start/End of a process Object activation Accepted interactions Motion & Gestures interactions in the digital age
  30. 30. Introduction Animation Design Principles Highlight Highlighting is the guidance of attention by using animations. This category draws the user's attention and clarifies changes of states in the user interface, which otherwise might be missed. Focus on action trigger Display active object in the interface React to user activity Motion & Gestures interactions in the digital age
  31. 31. Introduction Animation Design Principles Awaking Awaking Controls allows the user to focus on contextual controls. They appear when needed, and disappear as soon as they are no longer needed. Trigger for invisible interactions Change of status Revealing new information Showing extra controls Motion & Gestures interactions in the digital age
  32. 32. CODE (and) MOTION
  33. 33. Technology Vs Motion Technology makes what was once impossible possible. Design makes it real. MICHAEL  GAGLIANO
  34. 34. Code (and) Motion Technology Vs Motion Technology Vs Motion Why the web? • Large audience both on desktop & mobile • New visual effects with good retro-compatibility • Web technologies enable different things: from one page apps to games Motion & Gestures interactions in the digital age
  35. 35. Code (and) Motion Technology Vs Motion Development Tools How we build this examples: + To create the structure of the layout and define a hierarchy between objects Motion & Gestures interactions in the digital age + To add visual appeal to the elements, and to define, where possible, animations and transitions To manipulate HTML content and to compute CSS properties on-the-fly
  36. 36. Code (and) Motion Technology Vs Motion General principles Always prefer CSS3 over JavaScript animations BUT Without JavaScript it will be impossible to create complex animations and transitions. That said, try to: 1. 2. Use JavaScript only to compute new Use JavaScript to extend the events that the properties of each element, and to browser exposes, to add new functionalities dynamically change CSS and enable the user to interact with your apps in more natural ways Motion & Gestures interactions in the digital age
  37. 37. Code (and) Motion Technology Vs Motion The examples Demo code These examples are not real-life cases! it is almost impossible that you'll have to deal with a pre-defined number of elements in a page, and that these elements have pre-defined positions but can be used as inspiration. http://2m3.it/codemotion Motion & Gestures interactions in the digital age
  38. 38. Code (and) Motion Design with code Animation patterns For every category we selected a relevant example to show the motion characteristic and how to build it in web browser Extension Half Flip, Folding, Area Split Orientation Fan of stack, Page turn, Saving Feedforward Solidarity, Affordance, Hidden features Feedback Availability, Heal, Position accepted Highlight Blur to, Change depth to, Expand to Awaking Mode switch, Swipe to delete, Spring refresh * Johannes Tonollo, Meaningful Transitions - http://www.ui-transitions.com Motion & Gestures interactions in the digital age
  39. 39. Code (and) Motion Design with code Extension 1. Folding A transition to show that only a part of an object is visible. By interacting with it, it reveals to full size. Revealing selectors Folding a list http://capptivate.co/2013/11/19/taasky/ Motion and Gesture interaction in the Digital Age Revealing hidden area http://capptivate.co/?s=clear
  40. 40. Code (and) Motion Design with code Extension 2. Area split A transition to show a direct connection between the object of interest and further information. Folder area split Revealing additional space http://goo.gl/fZABUf Motion and Gesture interaction in the Digital Age Message preview http://media.idownloadblog.com/wp-content/uploads/2013/05/Stopwatch-for-Velox.gif
  41. 41. Code (and) Motion Design with code Extension Example 3. Flip / Half flip A transition to show a direct connection between the object of interest and further information. Revealing extra space CSS Card flip Flip screen http://capptivate.co/2013/11/19/445/ https://daneden.me/animate/ http://capptivate.co/2013/07/15/ifttt/ Motion and Gesture interaction in the Digital Age
  42. 42. Code (and) Motion Design with code Orientation 1. Fan of stack Example A transition to explain the arrangement of objects, by showing how they are placed. Revealing menu Item stack Connected items http://capptivate.co/2013/08/14/your-extra-life/ http://youtu.be/8-3NcnyaehU http://capptivate.co/2013/06/25/lapka/ Motion and Gesture interaction in the Digital Age
  43. 43. Code (and) Motion Design with code Orientation 2. Page turn Example A Transition to explain the information architecture of the list in a narrative way. Page turn to reveal menu Flipping pages http://capptivate.co/?s=circa http://www.macitynet.it/flipboard-web-magazine/ Motion and Gesture interaction in the Digital Age Flipping pages Android
  44. 44. Code (and) Motion Design with code Orientation 3. Saving indicator Example A transition to tell the user where to find the object after saving/bookmarking/downloading. Saving event http://capptivate.co/2013/06/26/lift/ Motion and Gesture interaction in the Digital Age Adding a new item
  45. 45. Code (and) Motion Design with code Feedforward 1. Affordance A transition to present a possible interaction. Card movement External menu navigation Open/close main navigation http://capptivate.co/2013/11/23/potluck/ http://capptivate.co/2013/11/23/airbnb/ http://capptivate.co/2013/11/07/breezi/ Motion and Gesture interaction in the Digital Age
  46. 46. Code (and) Motion Design with code Feedforward 2. Hidden features A transition to explain what is necessary to activate a hidden function. Show additional information Revealing additional function http://capptivate.co/?s=kickstarter http://capptivate.co/?s=clear Motion and Gesture interaction in the Digital Age
  47. 47. Code (and) Motion Design with code Feedforward 3. Explaining directions Example A transition to explain a specific directional interaction Horizontal slide to unlock http://youtu.be/3JlOOO14oSU Motion and Gesture interaction in the Digital Age Slide indicator for final position
  48. 48. Code (and) Motion Design with code Feedback 1. Availability Example A transition to show the progress of a loading behavior of individual objects. Progressive loading Data/Map content loading Content loaded http://capptivate.co/2013/06/25/expereal/ http://capptivate.co/2013/06/25/ribbon// http://capptivate.co/2013/09/30/phq4-3/ Motion and Gesture interaction in the Digital Age
  49. 49. Code (and) Motion Design with code Feedback 2. Heal A transition to show that the objects of a list reacts directly on the user‘s input. The interaction is validated. Content organization & position feedback http://useyourinterface.com/post/55475407955 Motion and Gesture interaction in the Digital Age
  50. 50. Code (and) Motion Design with code Feedback 3. Position accepted A transition to show that a movement into a new position is accepted. Selecting possible tiles Show additional information http://capptivate.co/2013/09/18/grid/ http://www.idownloadblog.com/2013/09/26/ios-7-the-ultimate-safari-guide/ Motion and Gesture interaction in the Digital Age
  51. 51. Code (and) Motion Design with code Highlight 1. Change depth to A transition to direct the user‘s view by an attention grabbing animation of the object. Panel switch Panel focus switch Folder zoom iOs7 http://capptivate.co/2013/08/12/felix-for-app-net/ http://capptivate.co/2013/09/18/memoir/ http://goo.gl/wDvwGJ Motion and Gesture interaction in the Digital Age
  52. 52. Code (and) Motion Design with code Highlight 2. Expand to A transition to show which object is active on interaction by expanding it. Keyboard magnify effect Zoom on a specific area http://capptivate.co/2013/08/20/spendee/ Motion and Gesture interaction in the Digital Age Current selection http://capptivate.co/2013/08/12/dark-sky/
  53. 53. Code (and) Motion Design with code Highlight Example 3. Blur to A transition to direct the user‘s view by an attention grabbing animation of the object. Focus on the active area http://vimeo.com/66395692 Motion and Gesture interaction in the Digital Age
  54. 54. Code (and) Motion Design with code Awaking 1. Swipe to delete A transition to support an intuitive interaction of deleting an object in a list. Swipe to delete items (html version) Swipe left / right to activate http://goo.gl/IMLjsUf http://vimeo.com/59504129 Motion and Gesture interaction in the Digital Age
  55. 55. Code (and) Motion Design with code Awaking 2. Spring to refresh A transition to use the intuitive interaction of a list. By scrolling a list, the function appears underneath the related list. Drag to refresh Load new contents http://azumbrunnen.me/wp-content/uploads/Twitter.gif http://warezos.com/glide-app-for-ios-and-android/arefresh/ Motion and Gesture interaction in the Digital Age
  56. 56. Code (and) Motion Design with code Awaking 3. Mode switch Example A transition to introduce new controls by sliding in. The moving of the items‘ labels underlines the importance of the new controls. Task completed Show additional controls selecting a row http://useyourinterface.com/image/63324362515 http://goo.gl/KFDps2 Motion and Gesture interaction in the Digital Age
  57. 57. Code (and) Motion Design with code Design with code it's a good practice when you have: a Designer a developer Coding and testing in real time a design solution, to highlight technology or UX/Interaction related problems on the go. It is always a good feeling not to be the last step in the production/design process, and this will lead to better products Motion & Gestures interactions in the digital age
  58. 58. The future is already here. It's just not evenly distributed. WILLIAM  GIBSON
  59. 59. FURTHER READING
  60. 60. Motion and Gesture Interaction in the Digital Age Further reading The Illusion of Life: Disney animation Designing Interfaces Fran Thomas, Ollie Johnston 1995 Jenifer Tidwel 2000 Motion and Gesture interaction in the Digital Age
  61. 61. Motion and Gesture Interaction in the Digital Age Further reading CSS Animations Designing gestural interfaces Val Head Dan Saffer 2007 Motion and Gesture interaction in the Digital Age
  62. 62. Motion and Gesture Interaction in the Digital Age Further reading Articles & Insights Design principles Motion resource Motion patterns Design & Code Anima$on:  from  cartoons   to  the  User  Interface Emo$on  and  Mo$on:   Games  as  Inspira$on  for   Shaping  the  Future  of   Interface Capp$vate:  a  mo$on   design  library The  Guide  to  Css  Anima$on   and  principles http://capptivate.co/ http://coding.smashingmagazine.com/ 2011/09/14/the-guide-to-cssanimation-principles-and-examples/ The  Basic  of  Mo$on   Design UI  Anima$ons:  a  tumblr   collec$on  of  UI  paDerns Animate.css https://vimeo.com/7440725 http://ui-animations.tumblr.com/ http://selflanguage.org/_static/ published/animation.pdf http://katherineinterface.com/ isbisterinteractions.pdf Transi$onal  interfaces https://medium.com/design-ux/ 926eb80d64e3 https://daneden.me/animate/ W3C  CSS3  Anima$on http://www.w3schools.com/css/ css3_animations.asp Motion and Gesture interaction in the Digital Age
  63. 63. Thanks! Follow us on twitter @myinteraction • @simonelippolis to continue the discussion!
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×