When Motion Delights and Annoys: Purposeful Animation, Reduced-Motion Respect, and Performance Budgets

What is Motion Design on the Web?

Motion design on the web refers to the use of animation, transitions, and other motion elements to enhance the user experience. It can include hero videos, animations, and micro-interactions, all of which can be used to engage users, tell stories, and improve usability.

The goals of motion design are to create a seamless and engaging user experience, to communicate information effectively, and to guide the user through the website.

When Does Motion Annoy?

Motion can annoy users when it is overused, poorly timed, or not accessible. Common pitfalls include using too many animations, having animations that are too long or too short, and not providing an option for users with sensitivities.

Reduced-motion respect is essential for providing an option for users with sensitivities, and it can be achieved by providing a toggle or preference for reducing motion.

Purposeful Animation: Balancing Delight and Annoyance

Purposeful animation is about using motion to enhance the user experience, rather than just for decoration. It involves understanding user needs and behaviors, and using motion to guide the user through the website.

A well-designed motion design strategy balances delight and annoyance, prioritizing user needs and goals. It involves creating a clear and consistent visual language, and using motion to communicate information effectively.

Performance Budgets and Motion Design

Performance budgets are essential for ensuring that motion design does not compromise the performance of the website. It involves understanding the importance of speed and efficiency, and using techniques such as optimization and caching to improve performance.

Measuring performance is also crucial, and it can be done using tools such as Google PageSpeed Insights and WebPageTest.

Hero Videos Done Well

Hero videos can be an effective way to engage users and communicate information, but they must be done well. Best practices include using high-quality video, keeping the video short and concise, and providing a clear call-to-action.

Designing for mobile is also essential, as hero videos can be particularly effective on smaller screens.

What to Do Next

To create a motion design strategy that balances delight and annoyance, prioritize user needs and goals. Assess your website's motion design, identify areas for improvement, and create a clear and consistent visual language.

Borg Sites can help you create a motion design strategy that prioritizes user needs and goals, and provides a seamless and engaging user experience. Our designers can help you set up, style, and launch your website, and our hosting and care plans include features such as automatic SSL, DDoS shielding, backups, and monitoring.