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
call girls in Dakshinpuri (DELHI) 🔝 >༒9953056974 🔝 genuine Escort Service 🔝✔️✔️
Design in motion. The new frontier of interaction design
1. Design in Motion
The new frontier
of Interaction design
Antonio
De
Pasquale
Senior Interaction Designer at frog
@myinteraction
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. What have this two worlds in common?
Interaction Vs Motion
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. What have this two worlds in common?
Interaction & Motion
Design in Motion. The new frontier of interaction design
6. A wide picture of
User Experience Design
Communication
Interaction & IA
Motion
Design in Motion. The new frontier of interaction design
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. 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. 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
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. 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. 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. 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. 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. 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. 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. 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. 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. 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
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. 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. 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
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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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
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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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
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. 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/