Your SlideShare is downloading. ×
Motion & Gesture Interactions in the digital age
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Motion & Gesture Interactions in the digital age

24,926

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 …

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
0 Comments
38 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
24,926
On Slideshare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
504
Comments
0
Likes
38
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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. 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. 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. Motion, what? Motion & Gestures interactions in the digital age
  • 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. 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. 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. 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. From the first personal computing with Static interface and physical controls Motion & Gestures interactions in the digital age
  • 10. To an incredible new powerful devices with Dynamic interface and Motion control Motion & Gestures interactions in the digital age
  • 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. INTRODUCTION
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Introduction Animation Design Principles Motion & Gestures interactions in the digital age
  • 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. 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. 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. 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. 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. 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. 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. CODE (and) MOTION
  • 33. Technology Vs Motion Technology makes what was once impossible possible. Design makes it real. MICHAEL  GAGLIANO
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. The future is already here. It's just not evenly distributed. WILLIAM  GIBSON
  • 59. FURTHER READING
  • 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. 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. 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. Thanks! Follow us on twitter @myinteraction • @simonelippolis to continue the discussion!

×