Have you been noticing the words ‘motion design’ popping up around the design world? Companies big and small are starting to hire designers specifically with this title. Google recently gave a talk at its I/O conference, outlining the motion language that will be standardized across Google’s product line.
So what is all the fuss about? And why does it matter? Motion tells stories.Everything in an app is a sequence, and motion is your guide. For every button clicked and screen transition, there is a story that follows. For example, lets look at how animation can help when creating and deleting items.
Deleting an item is a dramatic and a destructive action, so make it respond appropriately. Don’t just make the item disappear with a binary action. Throw it off the screen or send it back into the depths of your phone to become digital dust.
Creating a new item should be just as lively, you have after all, just willed it into existence. Make it pop or bounce onto the screen. But don’t go overboard, its the subtle and thoughtful animations that are the most effective.
So is motion design all about making things bounce around on the screen? Far from it. Not only is motion becoming increasingly important to interface design, it’s starting to drive the entire UI. Can you imagine Facebook designers presenting their iOS Paper app as a static layout? It would look pretty lame. It’s not until you see all the components in motion that the interface even makes sense. The animation is the UI.
Reinforcing Spacial Relations
Each screen within an app needs a home, somewhere it can live so a user can call on it at any time. If a screen slides in from the left, then dismisses toward the bottom of your screen, do you get it back from the bottom? Did it delete? Take the example below of Casts, an iOS podcast app. The structure on the left brings the “Now Playing” page up from the bottom, then sends it flying toward you when dismissing, only to pop-up again from the bottom of the screen.
Quite confusing, right? Now compare this to the new motion language that was introduced in their app a couple weeks ago. By keeping the entrance/exit animations consistent, we know exactly where the page lives and can easily find it when needed.