Discover the expanded Material Design motion guidelines – Google I/O 2016


[VIDEO PLAYBACK] -Material design is alive,
and it lives in a world a lot like ours, a world that’s
responsive, natural, aware, and intentional. Material design uses responsive
animation to create energy. When you take an action,
feedback is immediate, and it never keeps you waiting. Motion adapts to the distance
an element needs to travel, focusing on how fast
something needs to move, rather than how long it
should take to get there. Motion should feel
natural, moving the way things do in the real world. Nothing should
instantly start or stop. Elements and motion have
momentum and take time to speed up and slow down. They respond to
forces like gravity, moving in curved paths,
instead of in straight lines. Material is also aware
of the world around it. The way something
enters the screen can affect the movement
of everything else. Elements can push other
elements out of the way, or attract them. Above all, material
isn’t random. There’s a purpose
behind every animation. Motion guides you. It keeps you focused
on what’s important and makes sure you
don’t get lost. It also hints at how
something might react, even before it’s triggered. Whether your brand
is fun and playful, or serious and straightforward,
using the motion principles for material design can help
you produce a quick, clear, and cohesive experience. Get to know how things
move at design.google.com. [END VIDEO PLAYBACK] [APPLAUSE] Thank you. Hi. I’m John Schlemmer. I’m the motion lead on
the Material Design team here at Google. I authored the
new motion section that can be found in the
material design guidelines at design.google.com. And before that, I also led
the motion efforts for apps like Inbox and Calendar. So I’m here to talk to
you about motion design. Motion is becoming more and
more prominent in apps today. And it’s really one of
the key giveaways of what makes a high quality app. And it’s also one of the
main components of what makes material, material. So we touched on some motion
in our design guidelines when we introduced material
at I/O about two years ago. Now, there are over a
million material design apps in the Play Store. And it’s really exciting to
see how designers and engineers have been using the system. These new motion guidelines
that were released last week go really in-depth
and, hopefully, provide solutions to
many of the challenges that you’ve been
facing around motion. Advanced animation in
UI is still, generally, a pretty new thing. And we really wanted to try
to capture what works and what doesn’t. It’s really hard to
describe or pinpoint what exactly doesn’t feel right
when a transition isn’t working the way you thought it would. What’s worse, motion can be
abused, just like Photoshop filters. It’s really easy to go
overboard or spend time implementing the wrong thing. And that’s what these
new material motion guidelines will help you with. We wanted to find a way to
think about how material moves, while, at the
same time just thinking about general good UX practices,
when it comes to motion. These guidelines can really
help you get your branded motion to feel right– suggested
durations, easing curves for different
kinds of movement, how to choreograph shared
elements between views, and how material interacts
with other material, and so on. A common misconception
about motion is that it’s just about polish. And it’s not really
fair to group all motion into just the polish category. There are certain
levels of motion that are key components
to making a great app, and it does so much more
than just polish it. It can guide users
to the next view. It can convey hierarchy
and spatial relationships between both objects
on and off screen. It can help foreshadow what
a particular gesture might trigger before you
actually trigger it. It can help distract
you, in a good way, from things like
loading or fetching content, things you don’t
really want to have noticed. And of course, it can
add delight and polish. But by doing that,
all of these things together just make a feeling
of a really high quality app. And if this is
done right, you’ll be left with a really
solid animation experience throughout your app
or family of apps. So let’s take a look at the
Google Calendar animation for opening and
closing an event. Those of you that
probably use Calendar will be pretty
familiar with this. A lot of you
probably don’t really think about this anymore. It’s just opening
and closing an event. Happens all the time. But there are a lot of really
subtle things happening here to help you understand
hierarchy and order, to make sure you don’t
get lost and using it. What if this didn’t have
an animation at all? Without an animation
here, it’s really hard to tell what was triggered,
where you ended up, and where the view
that you just left lives in relation to this
new view that’s there. Loading also stands
out a lot more, because there’s nothing
really there to mask it. All right, so this is a
pretty extreme comparison. So let’s find an
in-between solution. Let’s look at what this would be
using just a default transition and not really taking into
account the new principles we have. Sure, it feels a little
better, but it’s still not really communicating anything. The view just kind of
slides in from the bottom. There’s still no relationship
between the object that was tapped and the
new view coming in. There are a lot of subtleties
in animation techniques used to get this calendar transition
to feel just smooth and right. And today, I’d like to go
over these motion principles. I’ll loop back to this Calendar
transition towards the end, just to show exactly where
these principles come into play, and just how they were
used as building blocks to create the
transition we landed on. So let’s dive into
the new guidelines. When writing these
guidelines, we really wanted to dig deep and find
out how material moves. And as you saw in the
video at the beginning, material in motion
is responsive, its natural, it’s aware,
and it’s intentional. And all of these are
definitely loaded words. There’s a lot of meaning
behind each one of them, but they’re all equally
important principles that make up material. And I’d like to briefly
go over each one. First, material is responsive. And responsive can also mean
a lot of things, especially in the world of responsive
design and different screen sizes. It’s a pretty overloaded term. But when it comes to motion,
it means it immediately and quickly responds
to your touch. In material, this response is
in the form of an ink ripple and a change in elevation,
like when you tap a button. The ink ripple forms
in the exact location that you interacted with it. And the element’s shadow
signifies that it’s actually rising to your touch. It’s like a form of response. It also means new
surfaces can quickly be created from that
precise touch location too, like menus when
you tap an icon. And it never keeps you waiting. People use our apps
to get things done. The example on the
right is actually something you want to avoid. If it takes too long, it’ll
look really old, really fast. To give you an idea,
typical transitions we’ve used on mobile devices
have about a 300 to 350 millisecond duration. That’s pretty quick. That’s a third of a second. But it’s also not
a duration that should be used for everything. It totally depends on how
far something needs to travel or how much change is. Tablet screens, for
example may need to have a slightly
longer duration, like 400 to 450
milliseconds, to make up for that overall
greater distance that it actually
needs to travel. Smaller screens,
like on a watch, obviously need to move
really short distances. It’s a pretty small screen. These are often in the range
of 150 to 200 milliseconds. On web, durations
and animations, in general, are treated
a little differently. There’s a general
perception on web for things to just be lightning fast. And it’s because, when
you navigate websites, there’s usually no
transition that takes you from one page to the next page. Most websites aren’t cohesive
app-like experiences. So when you do have one of
those cohesive experiences, you still want your
transitions to feel like they belong on the
web, like they’re still lightning fast. Inboxes on web, for example,
uses 150 millisecond duration in its main opening and
closing email transition. Well, on mobile, it actually
uses 300 millisecond. That means the web durations
are twice as fast, even though the screen’s bigger. Sometimes, animations need
to be modified a bit too, to account for these
faster transitions. Implying an object
needs to make a big move or expands into a
bigger card is actually different than
physically drawing each frame of that animation. There’s a bit of
magic that motion can imply that kind of
lets your imagination fill in the in-between frames. Another thing to keep in mind
is staggering content in a view. Staggering a list of grid
items as they travel on screen is a pretty common practice. And it can look
really good, too. But each item should have
a very, very short delay between entrances. You definitely do not
want to wait for each item to finish entering, before
getting the next one in there. Otherwise, especially
for longer list items, you’re going to be waiting a
long time for that last one to populate. We found it’s best to begin
each staggered transition no more than 20 to 25
milliseconds apart. It’s short, but it makes sense. And I’ll get more
into staggering orders and choreography later on. So let’s look at
the next principle. Material is natural. The movement of
material is inspired by forces in our real world, so
things like gravity, friction, momentum, and so on. Momentum is a pretty big one. Nothing in our
world can actually instantly start or stop. It depends on weight
and surface friction. So it only makes sense
for on-screen material to follow these same rules. This is where our fine-tuned
easing curves really come into play. Easing is used to add
acceleration and deceleration to any type of movement. What’s more, our easing curves
are actually asymmetrical. This means that each end
of the curve is different. Let’s see how this affects
some of the curves we cover in the guidelines. The material standard
curve is used for objects moving from one
on-screen location to another on-screen location,
and also transforming from one size to another size. Easing is at both
ends of the curve, but it accelerates a little
bit faster than it slows down. This gives the feeling
that it’s really energetic. It’s really excited to
get to the next spot. It leaps into
motion, but it still needs to take some
time to slow down. The deceleration curve is used
for objects entering the screen from an offscreen location. The acceleration is instant. Since this is the part that
actually happens offscreen, you don’t see it. The gradual deceleration matches
that of the standard curve. This gives the illusion that
it’s zooming in at full speed from somewhere off the screen. And we don’t really
care where it came from, we just care where it ends up. The acceleration curve is used
for objects exiting the screen. The acceleration is gradual,
just like the standard curve. But the deceleration is instant,
since this is now the part that you don’t see. This gives the illusion
that it’s zooming out of the screen at full
speed, and we don’t really care where it stops. Another concept
we’re introducing is what we call arc motion. Forces like gravity can affect
how an object moves up or down. This results in objects moving
in slightly curved paths, instead of in straight lines. Doing this makes
diagonal movements feel a little less robotic
and a little more natural. This concept is also represented
in transforming surfaces. So by slightly offsetting
the width and height transformation, you get the same
kind of curved expansion path. And when objects inside of
the surface use the same path, it results in a really nicely
choreographed transition. And I’ll get to that in a bit. Next, material is aware. It’s aware of objects around
it, behind it, in front of it, and even within it. This allows for a really
nice choreographed motion that involve a lot of different
UI elements at the same time. As elements
transition into view, they take into account
the relationships with other objects
around them, and they move in a way that
demonstrates this hierarchy. This kind of connected movement
gives a really nice story about where these objects
live and, hopefully, a better understanding of how
the app is actually structured. Surfaces can also push other
surfaces out of the way. So if you’re familiar with
material’s elevation story, it describes how each object
is at a different elevation. So it only makes sense
that, if two cards are on the same elevation, and
one happens to expand or move, it would actually need to
push that other card out of the way to make room for it. Either that, or it would need
to rise above that other card, so it doesn’t need to
push it out of the way. The important thing
to note here is material can’t pass
through other material. It knows it needs to do
something to make room for it to move. Another concept of awareness
is a form of magnetism. This can be a really
powerful mechanism in interaction design. And it can really help
define relationships and signify whether
or not objects are able to interact
with each other. In this example, that circle is
able to interact with the other smaller circles around it. And as it approaches each
one, they’re able to attach. Once they move
away, they detach. It kind of makes you
feel like the UI is doing its best to understand
what you want to do. So last, let’s get
into intention. Everything material
does is intentional. Every movement has a purpose. And its purpose is
to guide you, it’s to make sure you don’t get
lost when you’re using the app. The best way to do
this, we’ve found, is to have common shared
elements between views. If you’re animating from
a transition from point A to point B, there’s
more often than not a common shared element
that’s present in both views. In this case, we have the
avatar in the collapsed card and also in the expanded card. All the other content
changes, but the avatar is what stays consistent here. So when we make
this transition, we keep this visible at all times. The avatar acts as
the focal point, and it guides you
to the next view, right where your
attention should end up. So when we pair this with the
asymmetrical width and height transformation of
the card’s surface and add that curved
path to the avatar, we get this really nice,
natural expansion and collapse. So as a warning,
though, it’s really easy to go overboard here. What if you have a lot of
elements in both views? If you have too
many, your focus is pulled in 100
different directions, and it’s really hard to
pinpoint what exactly it was you needed to follow. It’s OK not to keep
every element consistent. And the example on the left
is a good way to handle this. So we touched on staggering
the entrance of elements a little earlier. We talked about how to quickly
stagger multiple elements. But the order in which
they appear on screen is just as important. The idea is to
guide your attention in one fluid direction. A single column with stagger
is pretty straightforward. Top to bottom usually
makes the most sense here. There’s usually not a reason
you should veer from this. Changing this up feels
pretty unnatural, and you’re scattered
in different directions throughout the stagger. It also doesn’t really
help your hierarchy story. Having everything appear
on screen at the same time isn’t exactly that
much better either. Staggering grid views is
a little more complicated. It might not actually be
what you’d expect at first. If you have a grid view with
multiple columns and rows, you want to look
at the treatment of the grid as a
whole and present it in a nice diagonal motion,
instead of introducing row by row. If you stagger an entire row
before starting the next one, you get this kind of zigzag
of attention guidance. Plus, it actually takes longer,
if you have a pretty big grid, to get to that
bottom right corner. If you stagger from the top
left to the bottom right of the whole grid, you get this
really nice constant direction from start to finish. Another material
intention is to let you know what’s going to
happen before it happens. This comes in handy
with gestures a lot. For example, if you’re using an
app where your key interaction is to swipe things
away, what happens when you run into an item
that you can’t actually swipe? You want to add
resistance to that item to signify that
it’s not available. Resistance has to do
with how much that object moves in relation
to how far you drag it. That way, the user
immediately knows what they’re trying to do
isn’t available here, even before they complete the swipe. The items that can be
swiped have no resistance and are much easier
to move around. It’s kind of like it’s inviting
you to interact with it. So those are the four
principles of material motion: responsive, natural,
aware, and intentional. By following these
guidelines, you’re left with transitions that
have a few key characteristics. And this is actually
a really great way to judge whether
or not you ended up doing the right thing
for your motion design. The transitions are quick. Things happen fast, so the
user doesn’t have to wait. The animation on the left users
our suggested durations, which is about 350 milliseconds. The one on the right, doesn’t. It’s about 600 milliseconds. It still looks nice,
but it’s pretty slow. It’s only a third
of a second longer, but you can see how
big of a difference it makes, especially if you’re
doing this over and over again. Next, the transitions are clear. This plays on the guided
focus and natural behavior of material a little bit. In the animation on the left,
you can really easily follow the path of the expanding card. The one on the right isn’t
really that easy to follow. It’s fast, so it follows
that, but your focus is shifted in like
every direction. Providing a clear focus
really goes a long way here. Lastly, the transitions
are cohesive. So here are three apps that
do very different things, but all of them follow
these motion guidelines. Motion can really
unify experiences throughout a family of apps
and make them feel related. So let’s go back to
that calendar transition from the beginning. Now that we know what we’re
looking for, we can identify this transition and why it
feels right, and compare it to a simple slide-in,
or no transition at all. First, it’s responsive. We have that ink splash,
signifying that we tapped it. And we have that nice shadow
coming from behind the chip to signify elevation. Next, it’s natural. So we have these nice easing
curves and arc motion going throughout that transition. Third, it’s aware. It knows that it needs to
lift above the other chips to make room for it. But it also knows what is at
that new elevation it just moved to, like that
app bar at the top. It collides with the app
bar to push it off screen, and it pulls it back down
when it collapses again. Last, it’s intentional. We use a shared element, the
event image in this case, to guide you to the
top of the next view, exactly where you
should end up looking. It completes the
story of hierarchy. And the other
objects around it are choreographed in a way that kind
of follows this motion with it. So that’s how these principles
built our view transition in Calendar. But let’s not forget the polish
details I talked about earlier. These are still important. Add in some animation where
the user might enjoy it, or might not expect it,
like changing the icon of a button when you tap it. Reaching Inbox 0 is a
pretty big achievement, so let’s make a big
deal about it, right? Maybe it’ll encourage
you to keep it up, which is, coincidentally, how
we want you to use the app. Or maybe you want to call
out a new feature in an app, like adding pit stops to Maps. And you really want to show off
all of the different things you can do with it, without having
a bunch of paragraphs of text to explain it. Error states are another
really fun place to do this. So an error is never really
something you want to see. But honestly, this kind of
makes you feel better about it. [LAUGHTER] So with all that said, I’m
going to wrap up a little early. I encourage you to check
out the motion guidelines at design.google.com. They’re found in the
material design resources when you go there. It covers everything I talked
about today and a lot more. And I’m really excited to see
what everybody comes up with. If you’d like to have
a chat about motion, or anything else
design-related for that matter, there’s a material design
sandbox south of here, in that direction. I’m going to head
over there right now. But it’s the end
of the day, so I don’t think we’re going to
do anymore reviews today. But I am going to be there,
along with my other co-workers, Thursday and Friday. And since we’re there
for the whole show, giving design reviews, I
figured it’s a great place to have a conversation, instead
of having a formal Q&A here. So I definitely
encourage you to come by, if there any questions you want
to have answered about motion. And also, congratulations
on surviving your first day at I/O. Right? [APPLAUSE] Thanks, so much. [MUSIC PLAYING]

30 comments

  • Jaden Harville

    first

    Reply
  • Ragu

    Material motion spec is wonderful. It makes a lot of sense. I am hoping that the platform team is working hard on helping us to implement all of Material Design easily! :–)

    Reply
  • Ionut Lala

    You are still using the Nexus 5 for a phone profile but it hasn't received any Android N love yet. 🙁

    Reply
  • you1ubeify

    Great video! Makes me want to learn how to develop Android apps. 🙂 Thank you!

    Reply
  • Jun Hamamura

    this makes me realize how much motions matter. nice video.

    Reply
  • Thomas Uchiha

    everything is awesome. Make google web calendar materialistic

    Reply
  • dimo

    bmr

    Reply
  • 陈韵

    NICE

    Reply
  • Victor Valle

    By giving preference to some elements to animate first than others in a grid (min 17) you are providing with more chances to the first elements to be tapped than to the rest. This is the usual wrong behaviour implemented in Pie menus. Don't you think it is wrong here as well?

    Reply
  • Csaba Kiss

    This video is a must-watch for every web designer. Brilliant stuff

    Reply
  • Wolfgang Grillitsch

    Really nice video. Like most of the videos I watched from the IO feels very natural and makes you excited about the topic. Thank you Google for the great jobs/things you are doing !!

    Reply
  • Tirthak Modi

    https://m.facebook.com/WEatindusa/

    Reply
  • Pedro de Albuquerque

    The material design is amazing. I like it!

    Reply
  • Prabu Gopalakrishnan

    Google has stolen trillions of American tax dollars. They are criminals.

    Reply
  • Herles Incalla

    I would like to see PESTO (19:17) motions source code, somebody knows how it works?

    Reply
  • mayank maurya

    Its same as the animation principles. Watch alen beckar animation principles to learn more

    Reply
  • mayank maurya

    is there is software that help us in material design

    Reply
  • mayank maurya

    375 milliseconds thing to remember

    Reply
  • mayank maurya

    450 ms in tablet
    375 ms in phones
    150-200ms watch

    bigger the screen longer the time

    Reply
  • mayank maurya

    20 to 25 ms in stagring

    Reply
  • Eric Schirtzinger

    What is the best way to learn how to implement these concepts, I've had a hard time finding any tutorials on how to create these animations in app

    Reply
  • Yu Wong

    Material Design is dead. Even the Google apps updated recently is going out of Material Design

    Reply
  • Kgotso K

    this makes a lot of sense

    Reply
  • Boris1990ua

    Any code examples?

    Reply
  • Sunshine Vocals

    Too bad Google themselves didn't use this design like it shows in videos.

    3rd party developers do a much better job when their design is focus on actually using this design language.

    Reply
  • Edgar Kay

    Why not just send us the copy of whatever your trying to read on your tiny screen. Learn how to present or die trying

    Reply
  • Shane D.

    Hey Google, just an idea! Gather a group of a specialized developers that truly understand what Material Design is and start an “app beautify program.” Developers will send you their apps and the specialists will “materialize” them to meet this guideline. Just a thought, G. Material is very attractive

    Reply
  • Prithvi B

    This was great. Unfortunately it seems that Google themselves is moving away from this just to copy Apple.

    Reply
  • Leonel Fonseca

    so you are suggesting using motion cues to replace lack of proper design.. "what was triggered, where you ended up and where the parent view is" can be addressed by hiercharchy scheme component indicating that relationship once you are in the child view vs utilizing animating and transitions but I get your point. e.g. what happens if you forget, or need to be reminded or someone else just comes into the child view, do you exit the view and demonstrate the transition to show the right context? it also presumes assumptions about device/platform performance.

    Reply
  • 刘胜

    Very good video to display the idea of md.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *