Design in Motion. The new frontier of Interaction Design

Animation can explain behaviours better than thousand of words that’s why interaction designer should learn from motion designer.

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 with software in the past. Motion is one of the key element of this change but how can we imagine & sketch the way something feels & reacts? Starting from the basic of motion design, we’ll discover a set of “standard” motion patterns and how we can sketch & use them in a design project to increase affordance, to simplify complex interactions and to give a new dynamic brand identity to our products.

Presented @Interaction 14, Amsterdam
http://interaction14.ixda.org/program/saturday/241-design-in-motion-the-new

Talk here:
https://vimeo.com/86763511

Transcript

1. Design in Motion The new frontier of Interaction design Antonio  De  Pasquale Senior Interaction Designer at frog @myinteraction
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. Interaction Vs Motion What have this two worlds in common?
4. Design in Motion. The new frontier of interaction design Interaction Vs Motion Concept Design research Benchmark Wireframe Information architecture User Requirements User testing User experience flow User scenario Prototype ... Aestethics Animations Storytelling Motion graphics Character animation Visual design Title design Kynetic typography Transition design ... What have this two worlds in common?
5. Design in Motion. The new frontier of interaction design Interaction & Motion What have this two worlds in common?
6. Design in Motion. The new frontier of interaction design A wide picture of User Experience Design Communication Interaction & IA Motion Design in Motion. The new frontier of interaction design
7. Design in Motion. The new frontier of interaction design Interaction Communication Interaction » Communication » Motion 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
8. Design in Motion. The new frontier of interaction design 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
9. Design in Motion. The new frontier of interaction design Design in Motion The new frontier of Interaction Design Introduction to Motion Interfaces Motion Design & Digital Artifacts Transitional interfaces Motion interaction foundations: tools & practice From concept to detail design What is the right tool? Motion interaction foundations: theory & methods Animation principles Motion pattern taxonomy
10. Design in Motion. The new frontier of interaction design INTRODUCTION TO MOTION INTERFACES
11. Design in Motion. The new frontier of interaction design 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.’ Motion Design & Digital artifacts STEVE  JOBS,  2007  (on  the  iPhone  iner2al  scroll  feature)
12. Design in Motion. The new frontier of interaction design Introduction Motion Design & Digital artifacts The beginning Games used motion for the first time to visualize the effect of a specific interaction in the digital space Design in Motion. The new frontier of interaction design
13. Design in Motion. The new frontier of interaction design Web 1.0: Java & Gif At the beginning of the Web, few technologies allowed motion in web pages but mostly just for eye-candy Introduction Motion Design & Digital artifacts Applet Java Animated Gif
14. Design in Motion. The new frontier of interaction design The Golden Age of Flash From a simple animation tool, Flash changed the way designers experience with motion & interaction 2Advacend, 2000 Screen transition, Loading screen http://v2.2a-archive.com/flashindex.htm TheVoid, 1998 Animated menu, interactive objects http://www.thevoid.co.uk/index.html LeoBurnet, 2006 3d navigation, motion detection http://v2.2a-archive.com/flashindex.htm Introduction Motion Design & Digital artifacts
15. Design in Motion. The new frontier of interaction design Introduction Motion Design & Digital artifacts LeoBurnet, 2006 3d navigation, motion detection http://v2.2a-archive.com/flashindex.htm
16. Design in Motion. The new frontier of interaction design With the explosion of mobile apps, motion started to became a core part of the interaction models The App World Introduction Transitional interfaces Revealing hidden controls Top-down bouncing menu Card 3d parallax
17. Design in Motion. The new frontier of interaction design With the introduction of the new w3c specifications, html & css added new life to motion & dynamic on the web + Introduction Transitional interfaces The Web Reloaded
18. Design in Motion. The new frontier of interaction design Gesture & Motion Gesture recognition became a common pattern on console and motion interactions were the right answer to show a new kind of affordance. Physical Motion patterns became virtual interactions. Introduction Transitional interfaces
19. Design in Motion. The new frontier of interaction design The Future New desktop physical control, css4 html6, smartphone gesture recognition, hands & fingers tracking... Introduction Transitional interfaces
20. Design in Motion. The new frontier of interaction design Native animation in app gesture 1993 2005 2007 Today Interactive controls Full animation engine 3d, video, cam & motion tracking Pong, 1978 Gif, 1980 Applet Java, 1989 1978 1980 1989 Flash, 1993 Flash 3d, 2005 Leapmotion 2008 The Evolution of Motion Interaction iOs, 2007 HTML5 + CSS3 Simple animation UI elements Interactive UI elements Webkit Technology Motion iOs 7, 2013 Web Native animation Javascript Safari + Webkit Jquery 2000 Flash AS.20 Natural UI Xbox Kinect Gestural interaction Advanced motion patterns Introduction Transitional interfaces
21. Design in Motion. The new frontier of interaction design MOTION INTERACTION THEORY & METHODS
22. Design in Motion. The new frontier of interaction design Animation can explain whatever the mind of man can conceive. This facility makes it the most versatile and explicit means of communication yet devised for quick mass appreciation. Animation principles WALT  DISNEY  COMPANY
23. Design in Motion. The new frontier of interaction design Motion interaction foundations Animation princples Design in Motion. The new frontier of interaction design From cartoon to the User Interface David Hungar - Bay Wei Chang, 1993 Animation: from cartoon to the user interface (Paper) http://hci.stanford.edu/courses/cs448b/papers/Chang_AnimationInUI_UIST93.pdf
24. Design in Motion. The new frontier of interaction design 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. * Panop Koonwat - https://vimeo.com/65815545 Motion interaction foundations Animation princples
25. Design in Motion. The new frontier of interaction design Motion interaction foundations Animation princples
26. Design in Motion. The new frontier of interaction design Disney Animation Principles Squash and stretch Anticipation Staging Straight ahead / pose-to-pose Follow through / overlapping action Slow in and out 12 principles Arcs Secondary action Timing Exaggeration Solid Drawing Appeal Motion interaction foundations Animation princples
27. Design in Motion. The new frontier of interaction design the purpose of this principle is to give a sense of weight and flexibility to drawn objects. Squash & stretch Motion interaction foundations Animation principles Rigid vs Soft Abstract vs Organic Fade in/out vs Moving blocks Brand experience
28. Design in Motion. The new frontier of interaction design Squash & stretch Page turn to reveal menu http://capptivate.co/?s=circa Flipping pages http://www.macitynet.it/flipboard-web-magazine/ External menu navigation http://capptivate.co/2013/11/23/airbnb/ Motion interaction foundations Animation principles
29. Design in Motion. The new frontier of interaction design Increase affordance Anticipate hidden interactions Tutorial & help Explain new pattern Anticipation is used to prepare the audience for an action, and to make the action appear more realistic. Anticipation Motion interaction foundations Animation principles
30. Design in Motion. The new frontier of interaction design Anticipation Card movement http://capptivate.co/2013/11/23/potluck/ Revealing additional function http://capptivate.co/?s=clear Horizontal slide to unlock http://youtu.be/3JlOOO14oSU Motion interaction foundations Animation principles
31. Design in Motion. The new frontier of interaction design The purpose of staging is to direct the audience's attention, and make it clear what is of greatest importance in a scene Staging Motion interaction foundations Animation principles Focus on action trigger Display active object in the interface React to user activity
32. Design in Motion. The new frontier of interaction design Staging Motion interaction foundations Message preview http://goo.gl/fZABUf Focus on the active area http://vimeo.com/66395692 Animation principles
33. Design in Motion. The new frontier of interaction design "Straight ahead action" means drawing out a scene frame by frame from beginning to end, while "pose to pose" involves starting with drawing a few key frames, and then filling in the intervals later. Straight ahead and pose to pose Motion interaction foundations Directions Content position Explaining IA Reinforcing actions Helps exploration Animation principles
34. Design in Motion. The new frontier of interaction design Straight ahead and pose to pose Motion interaction foundations Step by step navigation http://capptivate.co/2014/01/18/timbre-3/ Section transition http://capptivate.co/2014/01/18/epiclist/ Quick multiple fruit cut http://goo.gl/zEOw55 Animation principles
35. Design in Motion. The new frontier of interaction design "Follow through" means that separate parts of a body will continue moving after the character has stopped. "Overlapping action" is the tendency for parts of the body to move at different rates. Follow through and overlapping action Motion interaction foundations Animation principles Explain UI pattern Show active areas / functions Natural transitions Set time to the experience
36. Design in Motion. The new frontier of interaction design Follow through and overlapping action Motion interaction foundations Content loaded http://capptivate.co/2013/09/30/phq4-3/ Revealing menu http://capptivate.co/2013/08/14/your-extra-life/ Tile transition http://www.bobborries.com/Funnies/Windows8zoom.gif Animation principles
37. Design in Motion. The new frontier of interaction design The "easing" principle deals with the spacing required to accurately depict the inherent law of inertia that governs all objects and people. Slow in Slow out Motion interaction foundations Animation principles Trigger for invisible interactions Change of status Revealing new information Showing extra controls Start/End of a transition state
38. Design in Motion. The new frontier of interaction design Slow in Slow out Motion interaction foundations Open/close main navigation http://capptivate.co/2013/11/07/breezi/ Panel focus switch http://capptivate.co/2013/09/18/memoir/ List scrolling http://capptivate.co/2013/07/12/making-3/ Animation principles
39. Design in Motion. The new frontier of interaction design The principle simulates natural action that tends to follow an arched trajectory, and animation should adhere to this principle by following implied "arcs" for greater realism. Arcs Motion interaction foundations Animation principles Showing directions Explain possible interactions Show loading and time Anticipate behaviours
40. Design in Motion. The new frontier of interaction design Arcs Motion interaction foundations Animated infographics http://capptivate.co/2013/06/23/yahoo-weather-3/ Radial navigation system http://capptivate.co/2013/07/08/applauze/ Data/Map content loading http://capptivate.co/2013/06/25/ribbon// Animation principles
41. Design in Motion. The new frontier of interaction design This important principle about secondary motion behaviours is that they emphasize, rather than take attention away from, the main action. Secondary actions Motion interaction foundations Animation principles Showing status change Switch content focus Reinforcing transition Keep focus on device status
42. Design in Motion. The new frontier of interaction design Secondary actions Motion interaction foundations iOs7 closing apps http://www.youtube.com/watch?v=h8Cc1NqGTUI Control center bump http://goo.gl/vUOKYm Folder position reset http://goo.gl/JTtFnt Animation principles
43. Design in Motion. The new frontier of interaction design Timing is fundamental to define the physical characteristics of an object, such as weight, size and scale. It can also make objects appear to abide by the laws of physics. Timing Motion interaction foundations Animation principles Start/End of a process Object activation Accepted interactions Interaction speed
44. Design in Motion. The new frontier of interaction design Timing Motion interaction foundations Tapping time http://capptivate.co/2013/08/02/listen-3/ Loading results http://www.alitalia.com Content loading http://capptivate.co/2014/01/09/yahoo-news-digest-3/ Animation principles
45. Design in Motion. The new frontier of interaction design The classical definition of exaggeration, employed by Disney, was to remain true to reality, just presenting it in a wilder, more extreme form. Exageration Motion interaction foundations Animation principles Reinforcing interaction Action trigger Signature experience
46. Design in Motion. The new frontier of interaction design Exageration Motion interaction foundations Keynote example Keynote example Reducing application http://i.imgur.com/WfWyJA5.gif Hyper zoom http://capptivate.co/2013/06/27/lumosity/ Remove a match http://i.imgur.com/wbIWuKD.gif Animation principles
47. Design in Motion. The new frontier of interaction design The principle of solid drawing means taking into account forms in three-dimensional space, giving them volume and weight. Solid drawing Motion interaction foundations Animation principles Space extension Good for Mobile Extra space for info 3d as an additional info layer
48. Design in Motion. The new frontier of interaction design Solid drawing Motion interaction foundations Revealing selectors CSS Card flip https://daneden.me/animate/ Revealing extra space http://capptivate.co/2013/11/19/445/ Animation principles
49. Design in Motion. The new frontier of interaction design The appeal of an animated character is similar to the charisma of a live actor. The important thing is that the viewer feels the character is real and interesting. Appeal Motion interaction foundations Animation principles Personality Emotional experience Signature experience
50. Design in Motion. The new frontier of interaction design Appeal Motion interaction foundations Animation principles Character animation (pin) http://capptivate.co/2014/01/18/meattext/ Tapping weather http://i.imgur.com/IoWbato.gif Trash ticket http://i.imgur.com/nDoQTEI.gif
51. Design in Motion. The new frontier of interaction design From a motion behaviours taxonomy Motion interaction foundations Motion taxonomy Different ways to organize motion patterns help designers in understanding when and which patterns are useful for a specific action or to achieve a specific goal. Extension Orientation Feedforward Feedback Highlight Awaking Johannes Tonollo, Meaningful Transitions - http://www.ui-transitions.com Nature Context Temporal Metaphor of physical physical Symbolic Abstract In-context No-context Discrete Continuous User defined Motion Gestures for Mobile Interaction - J. Ruiez, Y. Li, E. Lank Action Scope
52. Design in Motion. The new frontier of interaction design Motion interaction foundations Motion taxonomy To a more abstract model Taxonomy and categories help us in organizing existing patterns but understanding the wide picture allows us to envision new behaviours in a more organic way. Active Passive Time Space
53. Design in Motion. The new frontier of interaction design Motion interaction foundations Motion taxonomy Passive interaction The system is waiting for the user input; it's elaborating an autonomus process or it's triggering the user for activation / feedback on the system status. Automatic reaction System activation Navigation model Space explanation Active Passive Time Space
54. Design in Motion. The new frontier of interaction design Motion interaction foundations Motion taxonomy Active interactions The system is reacting to the user input (direct & indirect actions); reporting feedback on the human action or feedforward for the next interaction; revealing extra space and enabling UI manipulation System feedback User feedforward Augmented UI Object control Passive Active Time Space
55. Design in Motion. The new frontier of interaction design Motion interaction foundations Motion taxonomy How to choose the right pattern? Context of interaction Nature of actions it's impossible to set a general rule, but designers should use motion according to the context of interaction and consistently with the nature of actions across the overall service Passive Time Space Active Automatic reaction System activation Navigation model Space explanation System feedback User feedforward Augmented UI Object control
56. Design in Motion. The new frontier of interaction design Motion interaction foundations Motion taxonomy Context of interaction Nature of actions Motion behaviours can increase and extend usability but in many cases a pervasive, but coordinate, use of them can give a signature brand experience to the service, improving UX and product memorability. Request user attention Trigger user action Confirm user action User manipulate the interface Flipboard Clear Design a memorable Signature Experience
57. MOTION INTERACTION TOOLS & PRACTICE
58. Design in Motion. The new frontier of interaction design The right tool Give me a lever and I can move the world. ARCHIMEDE  DI  SIRACUSA
59. Design in Motion. The new frontier of interaction design Make it Real & Shining User Experience encompasses all aspects of the end-user's interaction. Sketching the UX it's all about emotional storytelling and prototyping the user interaction in a realistic way Motion interaction foundations What is the right tool?
60. Design in Motion. The new frontier of interaction design Concept & sketch Motion prototype Interactive prototype Explain motion Our tools How we can visualize motion behaviours and choose the right tool? Motion interaction foundations What is the right tool?
61. High fidelity Developement Low FIdelity Concept evaluation There is no such thing as high or low fidelity, only appropriate fidelity that allows you to achieve the goals you've set for doing a prototype The motion designer toolkit  Hand  Sketch A:er  Effects Brief  /  Paper  proto Keynote Adobe  Edge Css  framework Frame.js Motion interaction foundations What is the right tool? Quarz  composer   VVVV Interac2ve documenta2on Mo2on to  code Product Storytelling Concept & sketch Motion prototype Explain motion Interactive prototype Design in Motion. The new frontier of interaction design
62. Design in Motion. The new frontier of interaction design Concept & sketch Motion interaction foundations What is the right tool? Protosketch https://protosketch.uistencils.com/ Paper sketch & prototye Low fidelity / Low interaction
63. Design in Motion. The new frontier of interaction design Concept & sketch Keynote Motion interaction foundations What is the right tool? Keynote app prototype http://www.lukew.com/ff/entry.asp?1171 Keynote Medium fidelity / Low interaction
64. Design in Motion. The new frontier of interaction design Concept & sketch Motion interaction foundations What is the right tool? Brief / InVision App http://giveabrief.com/ - http://www.invisionapp.com Brief / In Vision Medium fidelity / Medium interaction
65. Design in Motion. The new frontier of interaction design Motion interaction foundations What is the right tool? AE: UI Animation Design http://goo.gl/PPEO7s After Effects High fidelity / Low interaction Motion prototype
66. Design in Motion. The new frontier of interaction design Motion prototype Motion interaction foundations What is the right tool? High fidelity / Medium interaction Edge Animate / Edge reflow
67. Design in Motion. The new frontier of interaction design Motion interaction foundations What is the right tool? Cyclops / Framer JS https://github.com/Instrument/cyclops http://www.framerjs.com/index.html Cyclops & Framer Js High fidelity / Medium interaction Motion prototype
68. Design in Motion. The new frontier of interaction design Motion interaction foundations What is the right tool? Quarz composer / VVVV High fidelity / High interaction Origami / VVVV http://vimeo.com/85578380 - https://github.com/PrototypingInterfaces/ Motion prototype
69. Design in Motion. The new frontier of interaction design Explain motion Motion interaction foundations What is the right tool? Interactive documentation High fidelity / Low interaction Scrolling
70. Design in Motion. The new frontier of interaction design Motion interaction foundations What is the right tool? Explain motion Concept Storytelling High fidelity / Low interaction Beacon, Frog NY http://www.frogdesign.com/work/reinventing-the-payphone.html
71. Design in Motion. The new frontier of interaction design What is the best tool? Agile methodology needs a different design workflow Motion interaction foundations What is the right tool? Research Concept Wireframe Visual Develop User test Prototype Sketch Review
72. Design in Motion. The new frontier of interaction design The right tool is the one that helps you communicate your concept We need to explain complex problems & big project in a simple way and test if they're clear and meaningful to people. There is no perfect tool Motion interaction foundations What is the right tool? Functional prototype Concept experience  Hand  Sketch A:er  effect Brief  /  Paper  proto Keynote Adobe  edge Css  framework Frame.js Quarz  composer   VVVV Interac2ve documenta2on Mo2on  to  code Product Storytelling
73. Design in Motion. The new frontier of interaction design Motion interaction foundations What is the right tool? Research Concept Wireframe Visual Develop User test Prototype Sketch Review How can we deliver motion behaviours? From concept design to market ready solution
74. Coding and testing in real time a design solution, to highlight technology or UX/Interaction related problems on the go. Understanding from the beginning the complexity of motion dynamics It is always a good feeling not to be the last step in the production/design process, and this will lead to better products. As soon as you have a clear motion vision, you can also understanding the development effort. a Designer a developer What is the right tool? Motion interaction foundations Design with code Understanding the platform constrains to evaluate better the real effort to produce motion
75. Design in Motion. The new frontier of interaction design The future is already here. It's just not evenly distributed. WILLIAM  GIBSON Let's do it
76. FURTHER READING
77. Design in Motion. The new frontier of interaction design Design in Motion. The new frontier of interaction design Further reading The Illusion of Life: Disney animation Fran Thomas, Ollie Johnston, 1995 Designing Interfaces Jenifer Tidwel, 2000 Designing gestural interfaces Dan Saffer, 2007
78. Design in Motion. The new frontier of interaction design Design & Code Design principles Motion resource Motion patterns Emo2on  and  Mo2on:  Games  as   Inspira2on  for  Shaping  the  Future   of  Interface http://katherineinterface.com/ isbisterinteractions.pdf Articles & Insights The  Basic  of  Mo2on  Design https://vimeo.com/7440725 Anima2on:  from  cartoons  to  the  User   Interface http://selflanguage.org/_static/published/ animation.pdf Transi2onal  interfaces https://medium.com/design-ux/926eb80d64e3 Capp2vate:  a  mo2on  design  library http://capptivate.co/ UI  Anima2ons:  a  tumblr  collec2on   of  UI  paTerns http://ui-animations.tumblr.com/ The  Guide  to  Css  Anima2on  and   principles http://coding.smashingmagazine.com/2011/09/14/the- guide-to-css-animation-principles-and-examples/ Animate.css https://daneden.me/animate/ W3C  CSS3  Anima2on http://www.w3schools.com/css/css3_animations.asp Design in Motion. The new frontier of interaction design Further reading The  Mo2on  Fron2er https://medium.com/design-ux/8802af8012eb UI  Anima2on  and  UX:  A  not  so   secret  friendship http://alistapart.com/article/ui-animation-and-ux- a-not-so-secret-friendship UI  Anima2ons:  a  tumblr  collec2on   of  UI  paTerns http://ui-animations.tumblr.com/
79. Design in Motion. The new frontier of interaction design Thanks! @myinteraction to continue the discussion! Oblivion GFX https://vimeo.com/64377100