UI design review: Speculating why Material Design rejects card-flipping animation

Material Design, Google’s UI design system, rejects the animation of flipping a card in response to the user clicking/tapping of it. Material Design’s official documentation clearly states this:

A screen shot of Material Design documentation by Google

I wonder why. The documentation is quiet about it.

Maybe most people think it’s just a stylistic preference of Google’s designers. However, the more I learn about the nitty-gritty details of Material Design, the more convinced I am that Google’s designers, led by Matias Duarte, have built Material Design in a very logical manner. Which makes me think that there must be a solid reason for the rejection of card-flipping animation.

While I was coding the animation of flipping cards, I got the “Aha!” moment. It’s because flipping a card destroys the illusion of depth that the rest of Material Design UI creates. And the illusion of depth is the core of Material Design for the discoverability of which UI elements to be interactive with the user.

For a card to flip, it requires the depth of space to be at least half its width (if flipping sideways) or half its height (if flipping vertically). This means that a card needs to be floated quite high above the surface beneath it.

Allowing a card to flip will therefore screw up the system of elevation that Material Design builds up in so much detail:

A cross-section diagram of the elevation of various UI elements in Material Design. Image source: Google

In the above diagram, various UI elements in Material Design—all of which are assumed to have one unit of depth—are seen from the side. Those raised high up (the ones towards the right in the diagram) attract attention from the user so that the next expected user action will be indicated to be the tapping of these UI elements.

A card in Material Design is raised up only by one unit of depth, just enough to indicate that the user can tap it to see, for example, the detail of information. Tapping the card is not as urgent as responding to the dialog (raised by 24 units of depth) or the modal navigation drawer (raised by 16 units of depth). So its elevation is very shallow.

These different levels of depth across UI elements are primarily indicated with shadows in Material Design.

A screenshot of Google Fonts. The card showing the font specimen for Roboto is raised by 1 unit of depth with a drop shadow around it. Notice the difference from the rest of cards, which are perceived as not elevated from the background at all due to the lack of shadows. Image source: Google

The flipping of a card, however, will screw up the fiction of elevation constructed with different levels of elevation across UI elements in Material Design. For a card to flip over the background surface that’s only 1 unit of depth below, it needs to have a hole in the background surface. Otherwise, it doesn’t obey the laws of physics, which Material Design heavily relies on to make its UI intuitive to the user.

Do you agree with my guess? Let me know by posting a comment!