design in motion. the new frontier of interaction design
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/86763511TRANSCRIPT
Design in MotionThe new frontier
of Interaction design
Antonio De PasqualeSenior Interaction Designer at frog
@myinteraction
My name is Antonio De PasqualeI'm a Senior Interaction Designer at frog Milan
A little about meI'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
Interaction Vs MotionWhat have this two worlds in common?
Design in Motion. The new frontier of interaction design
Interaction Vs Motion
Concept
Design research
Benchmark
Wireframe
Information architecture
User Requirements
User testing
User experience flow
User scenario
Prototype
...
Aestethics
Animations
Storytelling
Motion graphics
Character animation
Visual design
Title design
Kynetic typography
Transition design
...
What have this two worlds in common?
Design in Motion. The new frontier of interaction design
Interaction & MotionWhat have this two worlds in common?
Design in Motion. The new frontier of interaction design
A wide picture ofUser Experience DesignCommunicationInteraction & IAMotion
Design in Motion. The new frontier of interaction design
Design in Motion. The new frontier of interaction design
Interaction Communication
Interaction » Communication » MotionObjects that don’t move don’t interact. An interaction is some sort of communication, and communication is
about movement: our vocal cords vibrating as we speak, our hands and arms writing or typing as we send
email or instant messages, sound and data moving between two entities. -
Dan Saffer - The element of Interaction Design
Motion
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 MotionThe new frontier
of Interaction Design
Introduction to Motion Interfaces
Motion Design & Digital ArtifactsTransitional interfaces
Motion interaction foundations: tools & practice
From concept to detail designWhat is the right tool?
Motion interaction foundations: theory & methods
Animation principlesMotion pattern taxonomy
Design in Motion. The new frontier of interaction design
INTRODUCTIONTO MOTION INTERFACES
Design in Motion. The new frontier of interaction design
I was giving the demo to someone a little while ago, and I finished the demo and I said what do you think? They said, ‘You had me at scrolling.’
Motion Design & Digital artifacts
STEVE JOBS, 2007 (on the iPhone iner2al scroll feature)
Design in Motion. The new frontier of interaction design
Introduction Motion Design & Digital artifacts
The beginningGames 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
Design in Motion. The new frontier of interaction design
Web 1.0: Java & GifAt the beginning of the Web, few technologies allowed motion
in web pages but mostly just for eye-candy
Introduction Motion Design & Digital artifacts
Applet Java Animated Gif
Design in Motion. The new frontier of interaction design
The Golden Age of FlashFrom a simple animation tool, Flash changed the way
designers experience with motion & interaction
2Advacend, 2000Screen transition, Loading screenhttp://v2.2a-archive.com/flashindex.htm
TheVoid, 1998Animated menu, interactive objects
http://www.thevoid.co.uk/index.html
LeoBurnet, 20063d navigation, motion detectionhttp://v2.2a-archive.com/flashindex.htm
Introduction Motion Design & Digital artifacts
Design in Motion. The new frontier of interaction design
Introduction Motion Design & Digital artifacts
LeoBurnet, 20063d navigation, motion detectionhttp://v2.2a-archive.com/flashindex.htm
Design in Motion. The new frontier of interaction design
With the explosion of mobile apps, motion started to became
a core part of the interaction models
The App World
Introduction Transitional interfaces
Revealing hidden controls Top-down bouncing menuCard 3d parallax
Design in Motion. The new frontier of interaction design
With the introduction of the new w3c specifications,
html & css added new life to motion & dynamic on the web
+
Introduction Transitional interfaces
The Web Reloaded
Design in Motion. The new frontier of interaction design
Gesture & MotionGesture recognition became a common pattern on console and motion interactions were the right answer
to show a new kind of affordance. Physical Motion patterns became virtual interactions.
Introduction Transitional interfaces
Design in Motion. The new frontier of interaction design
The FutureNew desktop physical control, css4 html6, smartphone gesture
recognition, hands & fingers tracking...
Introduction Transitional interfaces
Design in Motion. The new frontier of interaction design
Native animationin app gesture
1993 2005 2007 Today
Interactive controls
Full animationengine
3d, video, cam & motion tracking
Pong, 1978Gif, 1980
Applet Java, 1989
1978 1980 1989
Flash, 1993 Flash 3d, 2005
Leapmotion
2008
The Evolution of Motion Interaction
iOs, 2007
HTML5 + CSS3
Simple animation UI elements
InteractiveUI elements
Webkit
Technology
Motion
iOs 7, 2013
Web Nativeanimation
JavascriptSafari + Webkit
Jquery
2000
Flash AS.20
Natural UI
Xbox Kinect
Gestural interaction
Advanced motion patterns
Introduction Transitional interfaces
Design in Motion. The new frontier of interaction design
MOTION INTERACTION THEORY & METHODS
Design in Motion. The new frontier of interaction design
Animation can explain whatever the mind of man can conceive. This facility makes it the most versatile and explicit means of
communication yet devised for quick mass appreciation.
Animation principles
WALT DISNEY COMPANY
Design in Motion. The new frontier of interaction design
Motion interaction foundations Animation princples
Design in Motion. The new frontier of interaction design
From cartoon to the User Interface
David Hungar - Bay Wei Chang, 1993Animation: 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
Disney animation principles
Disney's Twelve Basic Principles of Animation is a set of rules that defines a realistic
impression of a motion with the basic laws of physics.
* Panop Koonwat - https://vimeo.com/65815545
Motion interaction foundations Animation princples
Design in Motion. The new frontier of interaction design
Motion interaction foundations Animation princples
Design in Motion. The new frontier of interaction design
Disney Animation Principles
Squash and stretchAnticipation
StagingStraight ahead / pose-to-pose
Follow through / overlapping actionSlow in and out
12 principles
ArcsSecondary action
TimingExaggerationSolid Drawing
Appeal
Motion interaction foundations Animation princples
Design in Motion. The new frontier of interaction design
the purpose of this principle is to give a sense
of weight and flexibility to drawn objects.
Squash & stretch
Motion interaction foundations Animation principles
Rigid vs SoftAbstract vs Organic
Fade in/out vs Moving blocksBrand experience
Design in Motion. The new frontier of interaction design
Squash & stretch
Page turn to reveal menuhttp://capptivate.co/?s=circa
Flipping pageshttp://www.macitynet.it/flipboard-web-magazine/
External menu navigationhttp://capptivate.co/2013/11/23/airbnb/
Motion interaction foundations Animation principles
Design in Motion. The new frontier of interaction design
Increase affordanceAnticipate hidden interactions
Tutorial & helpExplain new pattern
Anticipation is used to prepare the audience for an action,
and to make the action appear more realistic.
Anticipation
Motion interaction foundations Animation principles
Design in Motion. The new frontier of interaction design
Anticipation
Card movementhttp://capptivate.co/2013/11/23/potluck/
Revealing additional functionhttp://capptivate.co/?s=clear
Horizontal slide to unlockhttp://youtu.be/3JlOOO14oSU
Motion interaction foundations Animation principles
Design in Motion. The new frontier of interaction design
The purpose of staging is to direct the audience's attention,
and make it clear what is of greatest importance in a scene
Staging
Motion interaction foundations Animation principles
Focus on action triggerDisplay active object in the interface
React to user activity
Design in Motion. The new frontier of interaction design
Staging
Motion interaction foundations
Message previewhttp://goo.gl/fZABUf
Focus on the active areahttp://vimeo.com/66395692
Animation principles
Design in Motion. The new frontier of interaction design
"Straight ahead action" means drawing out a scene frame by frame from beginning to end, while
"pose to pose" involves starting with drawing a few key frames, and then filling in the intervals later.
Straight ahead and pose to pose
Motion interaction foundations
DirectionsContent position
Explaining IAReinforcing actionsHelps exploration
Animation principles
Design in Motion. The new frontier of interaction design
Straight ahead and pose to pose
Motion interaction foundations
Step by step navigationhttp://capptivate.co/2014/01/18/timbre-3/
Section transitionhttp://capptivate.co/2014/01/18/epiclist/
Quick multiple fruit cuthttp://goo.gl/zEOw55
Animation principles
Design in Motion. The new frontier of interaction design
"Follow through" means that separate parts of a body will continue moving after the character has stopped.
"Overlapping action" is the tendency for parts of the body to move at different rates.
Follow through and overlapping action
Motion interaction foundations Animation principles
Explain UI patternShow active areas / functions
Natural transitionsSet time to the experience
Design in Motion. The new frontier of interaction design
Follow through and overlapping action
Motion interaction foundations
Content loadedhttp://capptivate.co/2013/09/30/phq4-3/
Revealing menuhttp://capptivate.co/2013/08/14/your-extra-life/
Tile transitionhttp://www.bobborries.com/Funnies/Windows8zoom.gif
Animation principles
Design in Motion. The new frontier of interaction design
The "easing" principle deals with the spacing required to accurately depict
the inherent law of inertia that governs all objects and people.
Slow in Slow out
Motion interaction foundations Animation principles
Trigger for invisible interactionsChange of status
Revealing new informationShowing extra controls
Start/End of a transition state
Design in Motion. The new frontier of interaction design
Slow in Slow out
Motion interaction foundations
Open/close main navigationhttp://capptivate.co/2013/11/07/breezi/
Panel focus switchhttp://capptivate.co/2013/09/18/memoir/
List scrollinghttp://capptivate.co/2013/07/12/making-3/
Animation principles
Design in Motion. The new frontier of interaction design
The principle simulates natural action that tends to follow an arched trajectory,
and animation should adhere to this principle by following implied "arcs" for greater realism.
Arcs
Motion interaction foundations Animation principles
Showing directionsExplain possible interactions
Show loading and timeAnticipate behaviours
Design in Motion. The new frontier of interaction design
Arcs
Motion interaction foundations
Animated infographicshttp://capptivate.co/2013/06/23/yahoo-weather-3/
Radial navigation systemhttp://capptivate.co/2013/07/08/applauze/
Data/Map content loadinghttp://capptivate.co/2013/06/25/ribbon//
Animation principles
Design in Motion. The new frontier of interaction design
This important principle about secondary motion behaviours is that they emphasize,
rather than take attention away from, the main action.
Secondary actions
Motion interaction foundations Animation principles
Showing status changeSwitch content focusReinforcing transition
Keep focus on device status
Design in Motion. The new frontier of interaction design
Secondary actions
Motion interaction foundations
iOs7 closing appshttp://www.youtube.com/watch?v=h8Cc1NqGTUI
Control center bumphttp://goo.gl/vUOKYm
Folder position resethttp://goo.gl/JTtFnt
Animation principles
Design in Motion. The new frontier of interaction design
Timing is fundamental to define the physical characteristics of an object, such as weight, size and scale.
It can also make objects appear to abide by the laws of physics.
Timing
Motion interaction foundations Animation principles
Start/End of a processObject activation
Accepted interactionsInteraction speed
Design in Motion. The new frontier of interaction design
Timing
Motion interaction foundations
Tapping timehttp://capptivate.co/2013/08/02/listen-3/
Loading resultshttp://www.alitalia.com
Content loadinghttp://capptivate.co/2014/01/09/yahoo-news-digest-3/
Animation principles
Design in Motion. The new frontier of interaction design
The classical definition of exaggeration, employed by Disney, was to remain true to reality,
just presenting it in a wilder, more extreme form.
Exageration
Motion interaction foundations Animation principles
Reinforcing interactionAction trigger
Signature experience
Design in Motion. The new frontier of interaction design
Exageration
Motion interaction foundations
Keynoteexample
Keynoteexample
Reducing applicationhttp://i.imgur.com/WfWyJA5.gif
Hyper zoomhttp://capptivate.co/2013/06/27/lumosity/
Remove a matchhttp://i.imgur.com/wbIWuKD.gif
Animation principles
Design in Motion. The new frontier of interaction design
The principle of solid drawing means taking into account forms in
three-dimensional space, giving them volume and weight.
Solid drawing
Motion interaction foundations Animation principles
Space extensionGood for Mobile
Extra space for info3d as an additional info layer
Design in Motion. The new frontier of interaction design
Solid drawing
Motion interaction foundations
Revealing selectors CSS Card fliphttps://daneden.me/animate/
Revealing extra spacehttp://capptivate.co/2013/11/19/445/
Animation principles
Design in Motion. The new frontier of interaction design
The appeal of an animated character is similar to the charisma of a live actor.
The important thing is that the viewer feels the character is real and interesting.
Appeal
Motion interaction foundations Animation principles
PersonalityEmotional experienceSignature experience
Design in Motion. The new frontier of interaction design
Appeal
Motion interaction foundations Animation principles
Character animation (pin)http://capptivate.co/2014/01/18/meattext/
Tapping weatherhttp://i.imgur.com/IoWbato.gif
Trash tickethttp://i.imgur.com/nDoQTEI.gif
Design in Motion. The new frontier of interaction design
From a motion behaviours taxonomy
Motion interaction foundations Motion taxonomy
Different ways to organize motion patterns help designers in understanding when and which
patterns are useful for a specific action or to achieve a specific goal.
Extension
Orientation
Feedforward
Feedback
Highlight
Awaking
Johannes Tonollo, Meaningful Transitions - http://www.ui-transitions.com
Nature
Context
Temporal
Metaphor of physical
physical
Symbolic
Abstract
In-context
No-context
Discrete
Continuous
User defined Motion Gestures for Mobile Interaction - J. Ruiez, Y. Li, E. Lank
Action Scope
Design in Motion. The new frontier of interaction design
Motion interaction foundations Motion taxonomy
To a more abstract modelTaxonomy and categories help us in organizing existing patterns but understanding
the wide picture allows us to envision new behaviours in a more organic way.
ActivePassive
Time
Space
Design in Motion. The new frontier of interaction design
Motion interaction foundations Motion taxonomy
Passive interactionThe system is waiting for the user input; it's elaborating an autonomus process or it's triggering
the user for activation / feedback on the system status.
Automatic reactionSystem activation
Navigation modelSpace explanation
ActivePassive
Time
Space
Design in Motion. The new frontier of interaction design
Motion interaction foundations Motion taxonomy
Active interactionsThe system is reacting to the user input (direct & indirect actions); reporting feedback on the human action
or feedforward for the next interaction; revealing extra space and enabling UI manipulation
System feedbackUser feedforward
Augmented UIObject control
Passive Active
Time
Space
Design in Motion. The new frontier of interaction design
Motion interaction foundations Motion taxonomy
How to choose the right pattern?
Context of interaction
Nat
ure
of a
ctio
nsit's impossible to set a general rule, but designers should use motion according to the context
of interaction and consistently with the nature of actions across the overall service
Passive
Time
Space
Active
Automatic reactionSystem activation
Navigation modelSpace explanation
System feedbackUser feedforward
Augmented UIObject control
Design in Motion. The new frontier of interaction design
Motion interaction foundations Motion taxonomy
Context of interaction
Nat
ure
of a
ctio
nsMotion behaviours can increase and extend usability but in many cases a pervasive, but coordinate, use of
them can give a signature brand experience to the service, improving UX and product memorability.
Request user attention
Trigger user action
Confirm user action
User manipulate the interface
Clear
Design a memorable Signature Experience
MOTION INTERACTIONTOOLS & PRACTICE
Design in Motion. The new frontier of interaction design
The right tool
Give me a lever and I can move the world.
ARCHIMEDE DI SIRACUSA
Design in Motion. The new frontier of interaction design
Make it Real & ShiningUser Experience encompasses all aspects of the end-user's interaction. Sketching the UX it's all about emotional storytelling and prototyping
the user interaction in a realistic way
Motion interaction foundations What is the right tool?
Design in Motion. The new frontier of interaction design
Concept & sketch
Motion prototype
Interactive prototype
Explain motion
Our tools
How we can visualize motion behaviours
and choose the right tool?
Motion interaction foundations What is the right tool?
High fidelityDevelopement
Low FIdelityConcept evaluation
There is no such thing as high or low fidelity,
only appropriate fidelity that allows you to achieve the goals you've set
for doing a prototype
The motion designer toolkit
Hand Sketch
A:er EffectsBrief / Paper protoKeynote
Adobe Edge
Css frameworkFrame.js
Motion interaction foundations What is the right tool?
Quarz composer VVVV
Interac2vedocumenta2on
Mo2onto code
ProductStorytelling
Concept & sketch Motion prototype Explain motionInteractive prototype
Design in Motion. The new frontier of interaction design
Design in Motion. The new frontier of interaction design
Concept & sketch
Motion interaction foundations What is the right tool?
Protosketchhttps://protosketch.uistencils.com/
Paper sketch & prototye
Low fidelity / Low interaction
Design in Motion. The new frontier of interaction design
Concept & sketchKeynote
Motion interaction foundations What is the right tool?
Keynote app prototypehttp://www.lukew.com/ff/entry.asp?1171
Keynote
Medium fidelity / Low interaction
Design in Motion. The new frontier of interaction design
Concept & sketch
Motion interaction foundations What is the right tool?
Brief / InVision Apphttp://giveabrief.com/ - http://www.invisionapp.com
Brief / In Vision
Medium fidelity / Medium interaction
Design in Motion. The new frontier of interaction design
Motion interaction foundations What is the right tool?
AE: UI Animation Designhttp://goo.gl/PPEO7s
After Effects
High fidelity / Low interaction
Motion prototype
Design in Motion. The new frontier of interaction design
Motion prototype
Motion interaction foundations What is the right tool?
High fidelity / Medium interaction
Edge Animate / Edge reflow
Design in Motion. The new frontier of interaction design
Motion interaction foundations What is the right tool?
Cyclops / Framer JS
https://github.com/Instrument/cyclops http://www.framerjs.com/index.html
Cyclops & Framer Js
High fidelity / Medium interaction
Motion prototype
Design in Motion. The new frontier of interaction design
Motion interaction foundations What is the right tool?
Quarz composer / VVVV
High fidelity / High interactionOrigami / VVVV
http://vimeo.com/85578380 - https://github.com/PrototypingInterfaces/
Motion prototype
Design in Motion. The new frontier of interaction design
Explain motion
Motion interaction foundations What is the right tool?
Interactive documentation
High fidelity / Low interaction
Scrolling
Design in Motion. The new frontier of interaction design
Motion interaction foundations What is the right tool?
Explain motion
Concept Storytelling
High fidelity / Low interactionBeacon, Frog NY
http://www.frogdesign.com/work/reinventing-the-payphone.html
Design in Motion. The new frontier of interaction design
What is the best tool?Agile methodology needs a different design workflow
Motion interaction foundations What is the right tool?
Research Concept
Wireframe Visual
Develop
User test
PrototypeSketch
Review
Design in Motion. The new frontier of interaction design
The right tool is the one that helps youcommunicate your concept
We need to explain complex problems & big project in a simple way and test
if they're clear and meaningful to people.
There is no perfect tool
Motion interaction foundations What is the right tool?
Functional prototypeConcept experience
Hand Sketch A:er effectBrief / Paper protoKeynote Adobe edge Css frameworkFrame.js
Quarz composer VVVV
Interac2vedocumenta2on
Mo2on to code ProductStorytelling
Design in Motion. The new frontier of interaction design
Motion interaction foundations What is the right tool?
Research Concept
Wireframe Visual
Develop
User test
PrototypeSketch
Review
How can we deliver motion behaviours?From concept design to market ready solution
Coding and testing in real time a
design solution, to highlight
technology or UX/Interaction related
problems on the go.
Understanding from the beginning
the complexity of motion dynamics
It is always a good feeling not to be
the last step in the production/design
process, and this will lead to better
products. As soon as you have a clear
motion vision, you can also
understanding the development effort.
a Designer a developer
What is the right tool?Motion interaction foundations
Design with codeUnderstanding the platform constrains
to evaluate better the real effort to produce motion
Design in Motion. The new frontier of interaction design
The future is already here.It's just not evenly distributed.
WILLIAM GIBSON
Let's do it
FURTHER READING
Design in Motion. The new frontier of interaction design
Design in Motion. The new frontier of interaction design Further reading
The Illusion of Life: Disney animation
Fran Thomas, Ollie Johnston, 1995
Designing Interfaces
Jenifer Tidwel, 2000
Designing gestural interfaces
Dan Saffer, 2007
Design in Motion. The new frontier of interaction design
Design & CodeDesign principles Motion resource Motion patterns
Emo2on and Mo2on: Games as Inspira2on for Shaping the Future of Interface
http://katherineinterface.com/isbisterinteractions.pdf
Articles & Insights
The Basic of Mo2on Design
https://vimeo.com/7440725
Anima2on: from cartoons to the User Interface
http://selflanguage.org/_static/published/animation.pdf
Transi2onal interfaces
https://medium.com/design-ux/926eb80d64e3
Capp2vate: a mo2on design library
http://capptivate.co/
UI Anima2ons: a tumblr collec2on of UI paTerns
http://ui-animations.tumblr.com/
The Guide to Css Anima2on and principles
http://coding.smashingmagazine.com/2011/09/14/the-guide-to-css-animation-principles-and-examples/
Animate.css
https://daneden.me/animate/
W3C CSS3 Anima2on
http://www.w3schools.com/css/css3_animations.asp
Design in Motion. The new frontier of interaction design Further reading
The Mo2on Fron2er
https://medium.com/design-ux/8802af8012eb
UI Anima2on and UX: A not so secret friendship
http://alistapart.com/article/ui-animation-and-ux-a-not-so-secret-friendship
UI Anima2ons: a tumblr collec2on of UI paTerns
http://ui-animations.tumblr.com/
Design in Motion. The new frontier of interaction design
Thanks!@myinteraction
to continue the discussion!
Oblivion GFXhttps://vimeo.com/64377100