Design in motion. The new frontier of interaction design
Upcoming SlideShare
Loading in...5
×
 

Design in motion. The new frontier of interaction design

on

  • 9,149 views

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

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

Statistics

Views

Total Views
9,149
Views on SlideShare
7,671
Embed Views
1,478

Actions

Likes
64
Downloads
221
Comments
0

21 Embeds 1,478

http://www.wired.com 1209
http://feedly.com 106
https://twitter.com 66
http://www.feedspot.com 23
http://digg.com 13
http://www.linkedin.com 11
http://newsblur.com 9
http://www.newsblur.com 9
https://www.linkedin.com 6
http://designative.info 5
http://l.lj-toys.com 4
http://inoreader.com 3
https://www.commafeed.com 3
http://feeds.wired.com 2
http://www.pearltrees.com 2
http://www.designative.info 2
https://www.chatwork.com 1
http://plus.url.google.com 1
http://www.voidstar.com 1
http://reader.aol.com 1
http://archive.wired.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Design in motion. The new frontier of interaction design Design in motion. The new frontier of interaction design Presentation Transcript

  • 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 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 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 finished 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  Effects 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  effect 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://selflanguage.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