MOTION AND

ANIMATION
PARVEZ AHMED

Motion and animation have long been

part of online experiences. From ASCIIbased video on green screens to AOLs
Youve Got Mail icon, animations
have been in the repertoire of digital
designers for years.
However, it was only in 2011 that
the latest wave of browsers officially
recognized CSS unlocking sophisticated web animations without the
restriction of a plug-in. But now, with
improved browser-based animation
support, shrinking screens, and more
processing power, motion design is
poised to become a cornerstone of the
modern user experience in a way that it
was not in the past.
Whether used on digital displays in
venue, on desktop computers, or on
smartphone apps, motion and animation are changing the user experience.

Motion provides meaning.

Motion respects and reinforces the
user as the prime mover. Primary
user actions are inflection points
that initiate motion, transforming
the whole design. Motion is
meaningful and appropriate,
serving to focus attention and
maintain continuity. Feedback is
subtle yet clear. Transitions are
efcient yet coherent.
- Google Android Design Guidelines1

Google. Material Design. http://www.google.com/design/spec/material-design/introduction.html.

TRENDS AT THE INTERSECTION OF TECHNOLOGY & STORY

Why use animation?

When done well, motion imbues an experience with functionality, as well
as personality and style. Such meaningful, animated interactivity gives the
user interface, regardless of platform, a competitive edge.
Motion design delivers this edge in three areas:

EMOTION
MEANING
Motion adds meaning. It allows
users to acquaint themselves
better with the interface and find
their way around. Motion can help
direct focus, as well.

Motion can invoke and provoke

deep emotional engagement with
users. Subtle movements can
tell sophisticated stories.

CONTEXT

USER
EXPERIENCE

By combining these characteristics,

marketers can create dynamic and
compelling animations that allow for
much-improved storytelling.

TRENDS AT THE INTERSECTION OF TECHNOLOGY & STORY

Motion can set context. By mimicking

real-world physics like gravity and inertia,
designers can help users anticipate what will
happen. Motion can help create a naturalfeeling interface, full of digital interactions
that feel spontaneous and genuine.

So how will motion and animation

play out over the next few years?
Experiences will be designed to use
animation and motion from the start
Whether designing for laptops, smartphones, or smartwatches, designers
(especially traditional web or e-commerce
designers) will make much more frequent use of animation. However, this
will not always be easy.
Animation requires a new mindset.
Designers moving from a traditional,
flat website design will learn that
animated experiences require designing in multiple, additional dimensions.
One animator compared it to working
with clay: the designer builds a 3-D
space, and then polishes and paints it.
It is a craft an art form that requires
working with time and space.
To aid the creative process, storyboard
animation and prototyping animation
skills will become critical.
Storyboard animations will be used to
capture not just the wireframe showing
the before and after state, but, critically,
the transition between states. Storyboarding the between states enables the
design of animation, while also unlocking its emotional and persuasive power.

Together, these new techniques unlock the emotion and persuasive power
of animation.

The best stories will use animation

and motion but you wont notice it
The more motion and animation
becomes widespread, the less youll
notice it. Instead, skilled designers will
use these new capabilities wisely and
in very intentional ways. By combining
technological capabilities with natural
movements (see Figure 1), animation
allows for seamless interaction between users and platforms.
Exemplary transitions will stem from
e-commerce websites, whose flat
experiences will slowly be replaced by
more dynamic experiences infused with
the meaning and context provided by
motion (see Figure 2).

FIGURE01

Natural movements
Together, storyboard animation and
prototyping animation techniques
allow designers to mock-up and then
actually create animations with emotional and persuasive impact.

FIGURE02

Anticipation: Motion prepares the audience for the action about to occur
On this hypothetical retail example, when the user taps on a tile, the tile flips
around to reveal more information. The successive progression of the tile from
point A to point B directs the users attention and hints at what is about to happen.
Point A

And increasingly, prototyping animation will now be a design process as

much as a technical one. Designers are
collaborating with developers during
the creation of low-fidelity proofs of
concept in HTML, CSS, and Javascript.
These New tools allow designers,
marketers, and developers to iterate
and generate new ideas together.

TRENDS AT THE INTERSECTION OF TECHNOLOGY & STORY

Point B

Furthermore, more tools will follow the

animated likes of Yahoos News Digest
app, which uses subtle animation effects
[such as squash and stretch (see Figure
3)] to reduce user fatigue and encourage
more engagement.
And as motion and animation increasingly affect meaning, emotion, and
context, narratives will become the foci.
Analogous to film, a medium built upon
motion and animation, Story Systems
a key part of our Storyscaping approach
will be experienced through a blend
of these technologies and narratives.

Motion and animation will make

huge data sets understandable
and accessible
Brands continue to use motion and
animation to create experiences, as
they have for a long time. But today, the
ability to interpret and render massive
datasets in real time is a major restriction. So far, big data has been difficult
to animate in real-time, often requiring
experiences to be carefully scripted or
simplified. The result is less flexibility in
these experiences, as well as greater
difficulty in data interpretation.

Conclusion
Motion design is becoming a valuable digital asset for both experience
creators and users. As designers
and developers incorporate animation into user interfaces, they unlock
its immense potential to push the
boundaries of digital storytelling and
interactive experiences. And, while they
are redefining what is possible in user
experiences, motion and animation are
reshaping the digital expectations for
better marketing.

FIGURE03

Squash and Stretch

The Squash and Stretch function can be used in mobile tools to unmask new
content with the combined effect of transition and alpha opacity.
For example, when users finish reading the initial set of content, they slide up
from the bottom of the feed to find more stories. A short message can be used to
suggest more content.
This method simplifies the release to refresh style and is unique in comparison
to the navigation in other apps (such as Flipboard, Pinterest, or Instagram) where
feeds scroll forever and exhaust users.

But technology, with faster processors

and cleaner streams of data from the
Internet of Things, will increasingly
enable the intake of data. It will then
enable real-time conversion of that data
into visuals, which will in turn be better
understood using motion and animation
built upon the latest capabilities.

TRENDS AT THE INTERSECTION OF TECHNOLOGY & STORY

Parvez Ahmed
Experience Technologist,
SapientNitro Detroit
pahmed@sapient.com
Parvezs passion for mobile and web apps have allowed
him the opportunity to collaborate with designers and
developers in order to push coding as a creative medium
into exciting new areas where creative technology and
motion design meet.

INSIGHTS WHERE TECHNOLOGY & STORY MEET

The Insights publication features the marketing intelligence, trend forecasts,
and innovative recommendations of boundary-breaking thought leaders. The
SapientNitro Insights app brings that provocative collection now in its digital
form to your on-the-go fingertips.
Download the full report at sapientnitro.com/insights and, for additional
interactive and related content, download the SapientNitro Insights app.

SapientNitro, part of Publicis.Sapient, is a new breed of agency redefining storytelling for an always-on world. Were changing the way our clients engage todays
connected consumers by uniquely creating integrated, immersive stories across brand communications, digital engagement, and omnichannel commerce. We call
it our Storyscaping approach, where art and imagination meet the power and scale of systems thinking. SapientNitros unique combination of creative, brand, and
technology expertise results in one global team collaborating across disciplines, perspectives, and continents to create game-changing success for our Global
1000 clients, such as Chrysler, Citi, The Coca-Cola Company, Lufthansa, Target, and Vodafone, in thirty-one cities across The Americas, Europe, and Asia-Pacific.
For more information, visit www.sapientnitro.com.
SapientNitro and Storyscaping are registered service marks of Sapient Corporation.

COPYRIGHT 2015 SAPIENT CORPORATION. ALL RIGHTS RESERVED.