On motion in product design

Motion in product design is a fundamental element that shapes how users interact with a product. It influences perception, enhances user experience, and can significantly elevate brand identity. Leveraging some of my own insights and some opinions based on Bryan Maniotakis' post, here's some thoughts on how motion can be effectively integrated into product design workflows.

Ease-out curves are essential, offering a reliable starting point in motion design. These curves create dynamic transitions that feel natural and responsive, aligning well with user expectations. By experimenting with custom bezier or spring values, designers can infuse their brand's unique personality into these animations, ensuring consistency across platforms. A great place to grab or tweak easing is easing.dev. However, I often feel that some designers overlook the importance of these curves, treating them as mere technical elements rather than as crucial components of the overall design narrative. This oversight can lead to animations that feel forced or unnatural, detracting from the user's immersion. Elements naturally decelerate in real life so I often find myself reaching for two curves ever; ease-out or spring. Nothing else.

Timing is crucial in motion design. Bryan talks about a default animation speed of around 300ms which definitely works well for most interfaces. Designers should also consider the size of elements when matching timing; I find that larger elements benefit from quicker movements, while smaller elements require more deliberate transitions to avoid abruptness. I've personally found that the sweet spot for me is from 150-300ms depending on the size and distance. Interestingly, 150ms would often seem way too fast, but for larger surface areas (which aren’t moving as far relative to where they’re animated), it prevents perceived sluggishness. Yet, I've observed that many designers rush through timing decisions, often neglecting the subtle nuances that can significantly enhance user experience. This tendency can result in animations that feel rushed, overly busy, or wholly unnatural, failing to balance the two.

The interplay between motion and customer feedback is vital. I've noticed that responsive animations not only enhance usability but also create a sense of engagement. By testing animations with real people, designers can refine timing and transitions to better meet user expectations, ensuring that the product feels intuitive and enjoyable. However, I often see a lack of testing in the design process for motion, where designers might believe their assumptions are correct. This can lead to animations that feel polished but ultimately fall short of people's needs, or end up just being verbose and over the top. A deeper understanding of human behaviour and expectations is essential to creating truly engaging designs. Think about it this way… sometimes an animation looks awesome the first few times you see it, but if it’s a surface someone interacts with regularly, maybe only animate it the first time because it sure gets old fast.

Motion also plays a crucial role in storytelling through design. For instance, a simple hover effect can guide users through a product's navigation, subtly reinforcing brand messages and encouraging exploration. By aligning motion with storytelling, designers can create a more cohesive and memorable user experience. Yet, I've observed that some designers struggle to connect motion with storytelling, treating them as separate elements rather than integrated parts of a broader narrative. This disconnect can result in animations that feel disjointed or irrelevant, failing to enhance the overall user journey. I recently added a subtle blurred background as a hover state on a button, it wasn’t necessary, but it helped to provide an affordance for engagement and provided a branded reinforcement of the button’s design. It made that button unique, and that increased discovery and delight for people.

To sum up, motion design is not just about technical proficiency; it's about understanding and respecting the user's emotional and cognitive journey. Designers and engineers should embrace the power of motion to enhance user experience and elevate brand identity, ensuring that every interaction is as seamless and engaging as possible. But remember, be careful, motion is very, very easy to overdo.

Yours sincerely,
Someone who hates scrolljacking and the default Framer site animation approach.