Design in Motion
The new frontier
of Interaction design
Antonio	
  De	
  Pasquale
Senior Interaction Designer at frog
@myi...
My name is Antonio De Pasquale
I'm a Senior Interaction Designer at frog Milan

A little about me
I'm specialized in digit...
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 archit...
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 inte...
Interaction

Communication

Motion

Interaction » Communication » Motion
Objects that don’t move don’t interact. An intera...
Without motion,
there can be no interaction.
You press a key, and an email window closes.
There is motion on your screen.
...
Design in Motion
The new frontier
of Interaction Design

Introduction
to Motion Interfaces

Motion interaction foundations...
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 ...
Introduction

Motion Design & Digital artifacts

The beginning
Games used motion for the first time to visualize the effec...
Introduction

Motion Design & Digital artifacts

Web 1.0: Java & Gif
At the beginning of the Web, few technologies allowed...
Introduction

Motion Design & Digital artifacts

The Golden Age of Flash
From a simple animation tool, Flash changed the w...
Introduction

Motion Design & Digital artifacts

LeoBurnet, 2006
3d navigation, motion detection
http://v2.2a-archive.com/...
Introduction

Transitional interfaces

The App World
With the explosion of mobile apps, motion started to became
a core pa...
Introduction

Transitional interfaces

The Web Reloaded
With the introduction of the new w3c specifications,
html & css ad...
Introduction

Transitional interfaces

Gesture & Motion
Gesture recognition became a common pattern on console and motion ...
Introduction

Transitional interfaces

The Future
New desktop physical control, css4 html6, smartphone gesture
recognition...
Introduction

Transitional interfaces

The Evolution of Motion Interaction
Webkit
Technology

Applet Java, 1989

Jquery

J...
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 versati...
Motion interaction foundations

Animation princples

From cartoon to the User Interface

David Hungar - Bay Wei Chang, 199...
Motion interaction foundations

Animation princples

Disney animation principles

Disney's Twelve Basic Principles of Anim...
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
Anticipa...
Motion interaction foundations

Animation principles

Squash & stretch
the purpose of this principle is to give a sense
of...
Motion interaction foundations

Animation principles

Squash & stretch

Page turn to reveal menu
http://capptivate.co/?s=c...
Motion interaction foundations

Animation principles

Anticipation
Anticipation is used to prepare the audience for an act...
Motion interaction foundations

Animation principles

Anticipation

Card movement

Horizontal slide to unlock

Revealing a...
Motion interaction foundations

Animation principles

Staging
The purpose of staging is to direct the audience's attention...
Motion interaction foundations

Animation principles

Staging

Message preview

Focus on the active area

http://goo.gl/fZ...
Motion interaction foundations

Animation principles

Straight ahead and pose to pose
"Straight ahead action" means drawin...
Motion interaction foundations

Animation principles

Straight ahead and pose to pose

Step by step navigation

Quick mult...
Motion interaction foundations

Animation principles

Follow through and overlapping action
"Follow through" means that se...
Motion interaction foundations

Animation principles

Follow through and overlapping action

Content loaded

Tile transiti...
Motion interaction foundations

Animation principles

Slow in Slow out
The "easing" principle deals with the spacing requi...
Motion interaction foundations

Animation principles

Slow in Slow out

Open/close main navigation

Panel focus switch

Li...
Motion interaction foundations

Animation principles

Arcs
The principle simulates natural action that tends to follow an ...
Motion interaction foundations

Animation principles

Arcs

Animated infographics

Data/Map content loading

Radial naviga...
Motion interaction foundations

Animation principles

Secondary actions
This important principle about secondary motion be...
Motion interaction foundations

Animation principles

Secondary actions

iOs7 closing apps

Folder position reset

Control...
Motion interaction foundations

Animation principles

Timing
Timing is fundamental to define the physical characteristics ...
Motion interaction foundations

Animation principles

Timing

Tapping time

Loading results

Content loading

http://cappt...
Motion interaction foundations

Animation principles

Exageration
The classical definition of exaggeration, employed by Di...
Motion interaction foundations

Animation principles

Exageration

Keynote
example

Keynote
example

Reducing application
...
Motion interaction foundations

Animation principles

Solid drawing
The principle of solid drawing means taking into accou...
Motion interaction foundations

Animation principles

Solid drawing

Revealing selectors

CSS Card flip
https://daneden.me...
Motion interaction foundations

Animation principles

Appeal
The appeal of an animated character is similar to the charism...
Motion interaction foundations

Animation principles

Appeal

Tapping weather

Character animation (pin)

http://i.imgur.c...
Motion taxonomy

Motion interaction foundations

From a motion behaviours taxonomy
Different ways to organize motion patte...
Motion interaction foundations

Motion taxonomy

To a more abstract model
Taxonomy and categories help us in organizing ex...
Motion interaction foundations

Motion taxonomy

Passive interaction
The system is waiting for the user input; it's elabor...
Motion interaction foundations

Motion taxonomy

Active interactions
The system is reacting to the user input (direct & in...
Motion interaction foundations

Motion taxonomy

How to choose the right pattern?
it's impossible to set a general rule, b...
Motion interaction foundations

Motion taxonomy

Design a memorable Signature Experience
Motion behaviours can increase an...
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 ...
Motion interaction foundations

What is the right tool?

Make it Real & Shining
User Experience encompasses all aspects of...
Motion interaction foundations

What is the right tool?

Our tools
Concept & sketch
Motion prototype
Interactive prototype...
Motion interaction foundations

What is the right tool?

Interac2ve
documenta2on

A:er	
  Effects
Keynote

Adobe	
  Edge

M...
Motion interaction foundations

What is the right tool?

Concept & sketch

Paper sketch & prototye
Protosketch

Low fideli...
Motion interaction foundations

What is the right tool?

Concept & sketch
Keynote

Keynote
Keynote app prototype

Medium f...
Motion interaction foundations

What is the right tool?

Concept & sketch

Brief / In Vision
Brief / InVision App

Medium ...
Motion interaction foundations

What is the right tool?

Motion prototype

After Effects
AE: UI Animation Design

High fid...
Motion interaction foundations

What is the right tool?

Motion prototype

Edge Animate / Edge reflow
High fidelity / Medi...
Motion interaction foundations

What is the right tool?

Motion prototype

Cyclops & Framer Js
Cyclops / Framer JS

High f...
Motion interaction foundations

What is the right tool?

Motion prototype

Quarz composer / VVVV
Origami / VVVV

High fide...
Motion interaction foundations

What is the right tool?

Explain motion
Scrolling

Interactive documentation
High fidelity...
Motion interaction foundations

What is the right tool?

Explain motion

Concept Storytelling
High fidelity / Low interact...
Motion interaction foundations

What is the right tool?

What is the best tool?
Agile methodology needs a different design...
Motion interaction foundations

What is the right tool?

There is no perfect tool
The right tool is the one that helps you...
Motion interaction foundations

What is the right tool?

How can we deliver motion behaviours?
From concept design to mark...
Motion interaction foundations

What is the right tool?

Design with code
Understanding the platform constrains
to evaluat...
Let's do it

The future is already here.
It's just not evenly distributed.
WILLIAM	
  GIBSON

Design in Motion. The new fr...
FURTHER READING
Design in Motion. The new frontier of interaction design

Further reading

The Illusion of Life: Disney animation

Designi...
Design in Motion. The new frontier of interaction design

Further reading

Articles & Insights

Design principles

Motion ...
Thanks!
@myinteraction
to continue the discussion!

Oblivion GFX
https://vimeo.com/64377100

Design in Motion. The new fro...
Upcoming SlideShare
Loading in...5
×

Design in motion. The new frontier of interaction design

18,893

Published on

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

Published in: Design
0 Comments
115 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
18,893
On Slideshare
0
From Embeds
0
Number of Embeds
31
Actions
Shares
0
Downloads
761
Comments
0
Likes
115
Embeds 0
No embeds

No notes for slide

Design in motion. The new frontier of interaction design

  1. 1. Design in Motion The new frontier of Interaction design Antonio  De  Pasquale Senior Interaction Designer at frog @myinteraction
  2. 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. 3. What have this two worlds in common? Interaction Vs Motion
  4. 4. 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 ...
  5. 5. What have this two worlds in common? Interaction & Motion Design in Motion. The new frontier of interaction design
  6. 6. A wide picture of User Experience Design Communication Interaction & IA Motion Design in Motion. The new frontier of interaction design
  7. 7. 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
  8. 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 Design in Motion. The new frontier of interaction design
  9. 9. 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
  10. 10. INTRODUCTION TO MOTION INTERFACES Design in Motion. The new frontier of interaction design
  11. 11. 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
  12. 12. 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. 13. 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
  14. 14. 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
  15. 15. 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
  16. 16. 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
  17. 17. 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
  18. 18. 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
  19. 19. 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
  20. 20. 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
  21. 21. MOTION INTERACTION THEORY & METHODS Design in Motion. The new frontier of interaction design
  22. 22. 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
  23. 23. 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
  24. 24. 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
  25. 25. Motion interaction foundations Animation princples Design in Motion. The new frontier of interaction design
  26. 26. 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
  27. 27. 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
  28. 28. 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/
  29. 29. 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
  30. 30. 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
  31. 31. 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
  32. 32. 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
  33. 33. 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
  34. 34. 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
  35. 35. 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
  36. 36. 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
  37. 37. 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
  38. 38. 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
  39. 39. 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
  40. 40. 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
  41. 41. 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
  42. 42. 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
  43. 43. 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
  44. 44. 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
  45. 45. 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
  46. 46. 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
  47. 47. 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
  48. 48. 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/
  49. 49. 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
  50. 50. 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
  51. 51. 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
  52. 52. 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
  53. 53. 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
  54. 54. 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
  55. 55. 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
  56. 56. 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
  57. 57. MOTION INTERACTION TOOLS & PRACTICE
  58. 58. 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
  59. 59. 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
  60. 60. 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
  61. 61. 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
  62. 62. 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/
  63. 63. 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
  64. 64. 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
  65. 65. 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
  66. 66. 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
  67. 67. 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
  68. 68. 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/
  69. 69. 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
  70. 70. 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
  71. 71. 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
  72. 72. 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
  73. 73. 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
  74. 74. 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.
  75. 75. 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
  76. 76. FURTHER READING
  77. 77. 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
  78. 78. 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/
  79. 79. Thanks! @myinteraction to continue the discussion! Oblivion GFX https://vimeo.com/64377100 Design in Motion. The new frontier of interaction design
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×