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


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
...


Interaction & Motion


A wide picture of
User Experience Design
Communication
Interaction & IA
Motion


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


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

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?


INTRODUCTION
TO MOTION INTERFACES


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)


Introduction


The beginning
Games used motion for the first time to visualize the effect of
a specific interaction in the digital space


Introduction


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


Applet Java

Introduction


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



Introduction


LeoBurnet, 2006
3d navigation, motion detection


Introduction


The App World
With the explosion of mobile apps, motion started to became
a core part of the interaction models

Revealing hidden controls

Card 3d parallax

Top-down bouncing menu

Introduction


The Web Reloaded
With the introduction of the new w3c specifications,
html & css added new life to motion & dynamic on the web

+


Introduction


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.


Introduction


The Future
New desktop physical control, css4 html6, smartphone gesture
recognition, hands & fingers tracking...


Introduction


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


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



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


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



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.


* Panop Koonwat - https://vimeo.com/65815545


Animation princples



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



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




Squash & stretch

Page turn to reveal menu
http://capptivate.co/?s=circa


Flipping pages
http://www.macitynet.it/flipboard-web-magazine/

External menu navigation
http://capptivate.co/2013/11/23/airbnb/



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




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




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




Staging

Message preview

Focus on the active area

http://goo.gl/fZABUf

http://vimeo.com/66395692




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




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/




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




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/




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




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/




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




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/




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




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




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




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/




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




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




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




Solid drawing

Revealing selectors

CSS Card flip
https://daneden.me/animate/


Revealing extra space
http://capptivate.co/2013/11/19/445/



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




Appeal

Tapping weather

Character animation (pin)

http://i.imgur.com/IoWbato.gif

http://capptivate.co/2014/01/18/meattext/


Trash ticket
http://i.imgur.com/nDoQTEI.gif

Motion taxonomy


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


User defined Motion Gestures for Mobile Interaction - J. Ruiez, Y. Li, E. Lank

Scope


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



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



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



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


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

MOTION INTERACTION
TOOLS & PRACTICE

The right tool

Give me a lever and
I can move the world.
ARCHIMEDE
DI
SIRACUSA




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



Our tools
Concept & sketch
Motion prototype
Interactive prototype
Explain motion

How we can visualize motion behaviours
and choose the right tool?




Interac2ve
documenta2on

A:er
Eﬀects
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


Explain motion



Concept & sketch

Paper sketch & prototye
Protosketch

Low fidelity / Low interaction

https://protosketch.uistencils.com/



Concept & sketch
Keynote

Keynote
Keynote app prototype

Medium fidelity / Low interaction

http://www.lukew.com/ff/entry.asp?1171



Concept & sketch

Brief / In Vision
Brief / InVision App

Medium fidelity / Medium interaction

http://giveabrief.com/ - http://www.invisionapp.com



Motion prototype

After Effects
AE: UI Animation Design

High fidelity / Low interaction

http://goo.gl/PPEO7s



Motion prototype

Edge Animate / Edge reflow
High fidelity / Medium interaction



Motion prototype

Cyclops & Framer Js
Cyclops / Framer JS

High fidelity / Medium interaction

https://github.com/Instrument/cyclops http://www.framerjs.com/index.html



Motion prototype

Quarz composer / VVVV
Origami / VVVV

High fidelity / High interaction

http://vimeo.com/85578380 - https://github.com/PrototypingInterfaces/



Explain motion
Scrolling

Interactive documentation



Explain motion

Concept Storytelling

Beacon, Frog NY
http://www.frogdesign.com/work/reinventing-the-payphone.html



What is the best tool?
Agile methodology needs a different design workflow

Review

Research

Concept

Sketch

Prototype

Wireframe


User test

Visual

Develop



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
eﬀect

Concept experience


Adobe
edge

Mo2on
to
code

Css
framework
Frame.js

Quarz
composer
Interac2ve
VVVV
documenta2on

Product
Storytelling

Functional prototype



How can we deliver motion behaviours?
From concept design to market ready solution

Review

Research

Concept

Sketch

Prototype

Wireframe


User test

Visual

Develop



Design with code
Understanding the platform constrains
to evaluate better the real effort to produce motion

a Designer
Coding and testing in real time a
design solution, to highlight
technology or UX/Interaction related
problems on the go.
Understanding from the beginning
the complexity of motion dynamics

a developer
It is always a good feeling not to be
the last step in the production/design
process, and this will lead to better
products. As soon as you have a clear
motion vision, you can also
understanding the development effort.

Let's do it

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



Further reading

The Illusion of Life: Disney animation

Designing Interfaces

Designing gestural interfaces

Fran Thomas, Ollie Johnston, 1995

Jenifer Tidwel, 2000

Dan Saffer, 2007



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://selﬂanguage.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


The
Mo2on
Fron2er
https://medium.com/design-ux/8802af8012eb

UI
Anima2ons:
a
tumblr
collec2on

of
UI
paTerns

W3C
CSS3
Anima2on
http://www.w3schools.com/css/css3_animations.asp

http://ui-animations.tumblr.com/

Thanks!
@myinteraction
to continue the discussion!

Oblivion GFX
https://vimeo.com/64377100


Design in motion. The new frontier of interaction design

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to Design in motion. The new frontier of interaction design

Similar to Design in motion. The new frontier of interaction design (20)

Recently uploaded

Recently uploaded (20)

Design in motion. The new frontier of interaction design