From a motion design perspective, Facebook.com is phenomenally static. It’s purposefully dumbed down for the broadest levels of compatibility and user comfort. Facebook’s iOS apps, on the other hand, are fluid. They prioritize the design of motion; they feel like living, breathing apps.
This article serves to demonstrate that this dichotomy does not need to exist; websites can benefit from the same level of interactive and performant motion design found on mobile apps.
Before diving into examples, let’s first address why motion design is so beneficial:
- Improved feedback loops
As a UI and UX designer, you should use patterns as much as possible since users will be subconsciously looking for them. Responsive motion patterns, in particular, are the key to pleasurable interactions: When a button has been clicked, do you feel that it has reacted to the pressure of your mouse? When a file has been saved, do you get the strong sense that your data has truly been transferred and stored? - Seamless content transitions
Motion design allows you to avoid contextual breaks; modals fading in and out (as opposed to switching pages entirely) are a popular example of this. - Filled dead spots
When users are performing an unengaging task on your page, you can raise their level of arousal through sound, colors, and movement. Diverting a user’s attention is a great way to make a pot boil faster. - Aesthetic flourishes
For the same aesthetic reasons that UI designers spend hours perfecting their pages’ color and font combinations, motion designers perfect their animations’ transition and easing combinations: Refined products simply feel superior.
