Understanding Material Design Part II: Authentic Motion



This post is part of a series I’m working on. The first part, “Material is the metaphor”, can be found here.

credit: Ehsan Rahimi
https://dribbble.com/shots/1640866-Alarm-Material-UI?list=buckets&offset=10

Undoubtedly, the one aspect of Material Design that everyone is talking about are the animations. And for good reason: they’re gorgeous.

However, it’s critically important to understand that these animations and transitions aren’t present just for the glitz. They are governed by a set of guidelines, the goal of which is probably best summarised by one of the Material Design principles:

Motion provides meaning

Animations in Material Design are meant to provide feedback to the user for a change that has just occurred. The behaviour of the material is governed by the rules of physics, as if it existed in the real world. To achieve this, we must assume that the objects have some weight and mass.

This would mean that objects cannot have linear velocity, and must always move in a “slow out and slow in” manner, where they accelerate until peak velocity, then slow down when they reach their destination. The only exception for this is when an object is entering from outside the screen’s boundary, since the assumption is that the object has already reached peak velocity before it enters the screen. It must still slow down gradually.

Another example of real world behavior can be seen in the gif on the left. Notice how the ripple effect on each of the three different cards starts at a different point? The reason is that any change in a material in a physical world would begin at the point of touch. Just imagine pressing the space key on your keyboard, for example.

Did you also notice how the cards rise on being touched? The reason for this is that a material must rise to the Z-index equivalent of the device’s screen to meet the user’s finger. In doing so, it also emphasises the fact that the material in question is now in context, above the materials around it. The new dialer application does this wonderfully in its history page.

All transitions must begin from the point of input, as is shown on the left. This lends continuity to the user experience which feels natural.

There should be no hard cuts in the animation, layouts should never suddenly appear. They could move and/or grow to take more prominence, or slide in from a side. Again, this is about physics.

Continuing with the theme of motion conveying a message, the manner in which they are done also conveys hierarchy. Information hierarchy in general is a topic I’ll cover separately, but for now, I’d like to focus on the two gifs to the side.

The first one is the recommended manner of bringing a grid into picture: it conveys an order to the grid. The second seems to convey that all the items in the grid are equally important. If that is true, the grid as a whole should be animated (such as sliding in from a side or expanding from a point) instead of each item in the grid individually expanding.

Of course, animation is also about delighting the user. Go beyond the generally prescribed rules and guidelines to set your work apart from the rest, do things that would make a user say “that is so cool!”