Design in Motion The new frontier of Interaction design Antonio De Pasquale Senior Interaction Designer at frog @myinteraction

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

What have this two worlds in common? Interaction Vs Motion

What have this two worlds in common? Interaction Vs Motion Concept Design research Benchmark Wireframe Information architecture User Requirements User testing User experience flow User scenario Prototype ... Design in Motion. The new frontier of interaction design Aestethics Animations Storytelling Motion graphics Character animation Visual design Title design Kynetic typography Transition design ...

What have this two worlds in common? Interaction & Motion 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

Interaction Communication Motion Interaction Communication Motion Objects that dont move dont 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 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 Design in Motion. The new frontier of interaction design

Design in Motion The new frontier of Interaction Design Introduction to Motion Interfaces Motion interaction foundations: theory & methods Motion interaction foundations: tools & practice Motion Design & Digital Artifacts Transitional interfaces Animation principles Motion pattern taxonomy From concept to detail design What is the right tool? Design in Motion. The new frontier of interaction design

INTRODUCTION TO MOTION INTERFACES Design in Motion. The new frontier of interaction design

Motion Design & Digital artifacts I was giving the demo to someone a little while ago, and I nished the demo and I said what do you think? They said, You had me at scrolling. STEVE JOBS, 2007 (on the iPhone iner2al scroll feature) 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

Introduction Motion Design & Digital artifacts Web 1.0: Java & Gif At the beginning of the Web, few technologies allowed motion in web pages but mostly just for eye-candy Animated Gif Design in Motion. The new frontier of interaction design Applet Java

Introduction Motion Design & Digital artifacts The Golden Age of Flash From a simple animation tool, Flash changed the way designers experience 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 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 Design in Motion. The new frontier of interaction design

Introduction Transitional interfaces The App World With the explosion of mobile apps, motion started to became a core part of the interaction models Revealing hidden controls Design in Motion. The new frontier of interaction design Card 3d parallax Top-down bouncing menu

Introduction Transitional interfaces The Web Reloaded With the introduction of the new w3c specifications, html & css added new life to motion & dynamic on the web + Design in Motion. The new frontier of interaction design

Introduction Transitional interfaces 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. Design in Motion. The new frontier of interaction design

Introduction Transitional interfaces The Future New desktop physical control, css4 html6, smartphone gesture recognition, hands & fingers tracking... Design in Motion. The new frontier of interaction design

Introduction Transitional interfaces The Evolution of Motion Interaction Webkit Technology Applet Java, 1989 Jquery Javascript Pong, 1978 Leapmotion iOs, 2007 Safari + Webkit Gif, 1980 HTML5 + CSS3 Flash, 1993 iOs 7, 2013 Flash 3d, 2005 Xbox Kinect Flash AS.20 1978 1980 1989 1993 Simple animation UI elements Interactive controls Motion Design in Motion. The new frontier of interaction design 2000 2005 2007 2008 Native animation in app gesture Interactive UI elements Web Native animation Full animation engine 3d, video, cam & motion tracking Today Natural UI Gestural interaction Advanced motion patterns

MOTION INTERACTION THEORY & METHODS Design in Motion. The new frontier of interaction design

Animation principles 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. WALT DISNEY COMPANY Design in Motion. The new frontier of interaction design

Motion interaction foundations Animation princples 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 Design in Motion. The new frontier of interaction design

Motion interaction foundations Animation princples 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. Design in Motion. The new frontier of interaction design * Panop Koonwat - https://vimeo.com/65815545

Motion interaction foundations Animation princples Design in Motion. The new frontier of interaction design

Motion interaction foundations Animation princples Disney Animation Principles 12 principles Squash and stretch Anticipation Staging Straight ahead / pose-to-pose Follow through / overlapping action Slow in and out Arcs Secondary action Timing Exaggeration Solid Drawing Appeal Design in Motion. The new frontier of interaction design

Motion interaction foundations Animation principles Squash & stretch the purpose of this principle is to give a sense of weight and flexibility to drawn objects. Rigid vs Soft Abstract vs Organic Fade in/out vs Moving blocks Brand experience Design in Motion. The new frontier of interaction design

Motion interaction foundations Animation principles Squash & stretch Page turn to reveal menu http://capptivate.co/?s=circa Design in Motion. The new frontier of interaction design Flipping pages http://www.macitynet.it/flipboard-web-magazine/ External menu navigation http://capptivate.co/2013/11/23/airbnb/

Motion interaction foundations Animation principles Anticipation Anticipation is used to prepare the audience for an action, and to make the action appear more realistic. Increase affordance Anticipate hidden interactions Tutorial & help Explain new pattern Design in Motion. The new frontier of interaction design

Motion interaction foundations Animation principles Anticipation Card movement Horizontal slide to unlock Revealing additional function http://capptivate.co/2013/11/23/potluck/ http://youtu.be/3JlOOO14oSU http://capptivate.co/?s=clear Design in Motion. The new frontier of interaction design

Motion interaction foundations Animation principles Staging The purpose of staging is to direct the audience's attention, and make it clear what is of greatest importance in a scene Focus on action trigger Display active object in the interface React to user activity Design in Motion. The new frontier of interaction design

Motion interaction foundations Animation principles Staging Message preview Focus on the active area http://goo.gl/fZABUf http://vimeo.com/66395692 Design in Motion. The new frontier of interaction design

Motion interaction foundations Animation principles Straight ahead and pose to pose "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. Directions Content position Explaining IA Reinforcing actions Helps exploration Design in Motion. The new frontier of interaction design

Motion interaction foundations Animation principles Straight ahead and pose to pose Step by step navigation Quick multiple fruit cut Section transition http://capptivate.co/2014/01/18/timbre-3/ http://goo.gl/zEOw55 http://capptivate.co/2014/01/18/epiclist/ Design in Motion. The new frontier of interaction design

Motion interaction foundations Animation principles Follow through and overlapping action "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. Explain UI pattern Show active areas / functions Natural transitions Set time to the experience Design in Motion. The new frontier of interaction design

Motion interaction foundations Animation principles Follow through and overlapping action Content loaded Tile transition Revealing menu http://capptivate.co/2013/09/30/phq4-3/ http://www.bobborries.com/Funnies/Windows8zoom.gif http://capptivate.co/2013/08/14/your-extra-life/ Design in Motion. The new frontier of interaction design

Motion interaction foundations Animation principles Slow in Slow out The "easing" principle deals with the spacing required to accurately depict the inherent law of inertia that governs all objects and people. Trigger for invisible interactions Change of status Revealing new information Showing extra controls Start/End of a transition state Design in Motion. The new frontier of interaction design

Motion interaction foundations Animation principles Slow in Slow out Open/close main navigation Panel focus switch List scrolling http://capptivate.co/2013/11/07/breezi/ http://capptivate.co/2013/09/18/memoir/ http://capptivate.co/2013/07/12/making-3/ Design in Motion. The new frontier of interaction design

Motion interaction foundations Animation principles Arcs 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. Showing directions Explain possible interactions Show loading and time Anticipate behaviours Design in Motion. The new frontier of interaction design

Motion interaction foundations Animation principles Arcs Animated infographics Data/Map content loading Radial navigation system http://capptivate.co/2013/06/23/yahoo-weather-3/ http://capptivate.co/2013/06/25/ribbon// http://capptivate.co/2013/07/08/applauze/ Design in Motion. The new frontier of interaction design

Motion interaction foundations Animation principles Secondary actions This important principle about secondary motion behaviours is that they emphasize, rather than take attention away from, the main action. Showing status change Switch content focus Reinforcing transition Keep focus on device status Design in Motion. The new frontier of interaction design

Motion interaction foundations Animation principles Secondary actions iOs7 closing apps Folder position reset Control center bump http://www.youtube.com/watch?v=h8Cc1NqGTUI http://goo.gl/JTtFnt http://goo.gl/vUOKYm Design in Motion. The new frontier of interaction design

Motion interaction foundations Animation principles Timing 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. Start/End of a process Object activation Accepted interactions Interaction speed Design in Motion. The new frontier of interaction design

Motion interaction foundations Animation principles Timing Tapping time Loading results Content loading http://capptivate.co/2013/08/02/listen-3/ http://www.alitalia.com http://capptivate.co/2014/01/09/yahoo-news-digest-3/ Design in Motion. The new frontier of interaction design

Motion interaction foundations Animation principles Exageration The classical definition of exaggeration, employed by Disney, was to remain true to reality, just presenting it in a wilder, more extreme form. Reinforcing interaction Action trigger Signature experience Design in Motion. The new frontier of interaction design

Motion interaction foundations Animation principles Exageration Keynote example Keynote example Reducing application Hyper zoom Remove a match http://i.imgur.com/WfWyJA5.gif http://capptivate.co/2013/06/27/lumosity/ http://i.imgur.com/wbIWuKD.gif Design in Motion. The new frontier of interaction design

Motion interaction foundations Animation principles Solid drawing The principle of solid drawing means taking into account forms in three-dimensional space, giving them volume and weight. Space extension Good for Mobile Extra space for info 3d as an additional info layer Design in Motion. The new frontier of interaction design

Motion interaction foundations Animation principles Solid drawing Revealing selectors CSS Card flip https://daneden.me/animate/ Design in Motion. The new frontier of interaction design Revealing extra space http://capptivate.co/2013/11/19/445/

Motion interaction foundations Animation principles Appeal 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. Personality Emotional experience Signature experience Design in Motion. The new frontier of interaction design

Motion interaction foundations Animation principles Appeal Tapping weather Character animation (pin) http://i.imgur.com/IoWbato.gif http://capptivate.co/2014/01/18/meattext/ Design in Motion. The new frontier of interaction design Trash ticket http://i.imgur.com/nDoQTEI.gif

Motion taxonomy Motion interaction foundations From a motion behaviours 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. Nature Extension physical Orientation Action Symbolic Feedforward Feedback Abstract Context In-context No-context Highlight Awaking Metaphor of physical Temporal Discrete Continuous Johannes Tonollo, Meaningful Transitions - http://www.ui-transitions.com Design in Motion. The new frontier of interaction design User defined Motion Gestures for Mobile Interaction - J. Ruiez, Y. Li, E. Lank Scope

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. Time Passive Active Space 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. Time Automatic reaction System activation Passive Active Navigation model Space explanation Space 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 Time System feedback User feedforward Passive Active Augmented UI Object control Space Design in Motion. The new frontier of interaction design

Motion interaction foundations Motion taxonomy How to choose the right pattern? 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 Nature of actions Time System feedback User feedforward Automatic reaction System activation Passive Active Navigation model Space explanation Augmented UI Object control Space Context of interaction Design in Motion. The new frontier of interaction design

Motion interaction foundations Motion taxonomy Design a memorable Signature Experience 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. Confirm user action Nature of actions Request user attention Flipboard Clear Trigger user action User manipulate the interface Context of interaction Design in Motion. The new frontier of interaction design

MOTION INTERACTION TOOLS & PRACTICE

The right tool Give me a lever and I can move the world. ARCHIMEDE DI SIRACUSA Design in Motion. The new frontier of interaction design

Motion interaction foundations What is the right tool? 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 Design in Motion. The new frontier of interaction design

Motion interaction foundations What is the right tool? Our tools Concept & sketch Motion prototype Interactive prototype Explain motion How we can visualize motion behaviours and choose the right tool? Design in Motion. The new frontier of interaction design

Motion interaction foundations What is the right tool? Interac2ve documenta2on A:er Eects Keynote Adobe Edge Mo2on to code Css framework Frame.js Product Storytelling Quarz composer VVVV Brief / Paper proto Hand Sketch Concept & sketch Motion prototype Interactive prototype High fidelity Developement Low FIdelity Concept evaluation The motion designer toolkit 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 Design in Motion. The new frontier of interaction design Explain motion

Motion interaction foundations What is the right tool? Concept & sketch Paper sketch & prototye Protosketch Low fidelity / Low interaction Design in Motion. The new frontier of interaction design https://protosketch.uistencils.com/

Motion interaction foundations What is the right tool? Concept & sketch Keynote Keynote Keynote app prototype Medium fidelity / Low interaction Design in Motion. The new frontier of interaction design http://www.lukew.com/ff/entry.asp?1171

Motion interaction foundations What is the right tool? Concept & sketch Brief / In Vision Brief / InVision App Medium fidelity / Medium interaction Design in Motion. The new frontier of interaction design http://giveabrief.com/ - http://www.invisionapp.com

Motion interaction foundations What is the right tool? Motion prototype After Effects AE: UI Animation Design High fidelity / Low interaction Design in Motion. The new frontier of interaction design http://goo.gl/PPEO7s

Motion interaction foundations What is the right tool? Motion prototype Edge Animate / Edge reflow High fidelity / Medium interaction Design in Motion. The new frontier of interaction design

Motion interaction foundations What is the right tool? Motion prototype Cyclops & Framer Js Cyclops / Framer JS High fidelity / Medium interaction Design in Motion. The new frontier of interaction design https://github.com/Instrument/cyclops http://www.framerjs.com/index.html

Motion interaction foundations What is the right tool? Motion prototype Quarz composer / VVVV Origami / VVVV High fidelity / High interaction Design in Motion. The new frontier of interaction design http://vimeo.com/85578380 - https://github.com/PrototypingInterfaces/

Motion interaction foundations What is the right tool? Explain motion Scrolling Interactive documentation High fidelity / Low interaction 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 Design in Motion. The new frontier of interaction design Beacon, Frog NY http://www.frogdesign.com/work/reinventing-the-payphone.html

Motion interaction foundations What is the right tool? What is the best tool? Agile methodology needs a different design workflow Review Research Concept Sketch Prototype Wireframe Design in Motion. The new frontier of interaction design User test Visual Develop

Motion interaction foundations What is the right tool? There is no perfect tool 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. Hand Sketch Keynote Brief / Paper proto A:er eect Concept experience Design in Motion. The new frontier of interaction design Adobe edge Mo2on to code Css framework Frame.js Quarz composer Interac2ve VVVV documenta2on Product Storytelling Functional prototype

Motion interaction foundations What is the right tool? How can we deliver motion behaviours? From concept design to market ready solution Review Research Concept Sketch Prototype Wireframe Design in Motion. The new frontier of interaction design User test Visual Develop

Motion interaction foundations What is the right tool? Design with code Understanding the platform constrains to evaluate better the real effort to produce motion a Designer 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 a developer 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.

Let's do it The future is already here. It's just not evenly distributed. WILLIAM GIBSON Design in Motion. The new frontier of interaction design

FURTHER READING

Design in Motion. The new frontier of interaction design Further reading The Illusion of Life: Disney animation Designing Interfaces Designing gestural interfaces Fran Thomas, Ollie Johnston, 1995 Jenifer Tidwel, 2000 Dan Saffer, 2007 Design in Motion. The new frontier of interaction design

Design in Motion. The new frontier of interaction design Further reading Articles & Insights Design principles Motion resource Motion patterns Design & Code Anima2on: from cartoons to the User Interface Emo2on and Mo2on: Games as Inspira2on for Shaping the Future of Interface Capp2vate: a mo2on design library The Guide to Css Anima2on and principles http://selanguage.org/_static/published/ animation.pdf Transi2onal interfaces https://medium.com/design-ux/926eb80d64e3 http://capptivate.co/ http://coding.smashingmagazine.com/2011/09/14/theguide-to-css-animation-principles-and-examples/ http://katherineinterface.com/ isbisterinteractions.pdf The Basic of Mo2on Design https://vimeo.com/7440725 UI Anima2ons: a tumblr collec2on of UI paTerns Animate.css https://daneden.me/animate/ http://ui-animations.tumblr.com/ UI Anima2on and UX: A not so secret friendship http://alistapart.com/article/ui-animation-and-uxa-not-so-secret-friendship Design in Motion. The new frontier of interaction design The Mo2on Fron2er https://medium.com/design-ux/8802af8012eb UI Anima2ons: a tumblr collec2on of UI paTerns W3C CSS3 Anima2on http://www.w3schools.com/css/css3_animations.asp http://ui-animations.tumblr.com/

Thanks! @myinteraction to continue the discussion! Oblivion GFX https://vimeo.com/64377100 Design in Motion. The new frontier of interaction design