Design in motion. The new frontier of interaction design

  • View
    7.935

  • Download
    1

Embed Size (px)

DESCRIPTION

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

Text of Design in motion. The new frontier of interaction design

  • 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 founda