UX Design and Motion: Your Strategic Play
By: Workday Design
Tags: Prototyping, Design, UX, Motion Design, UX Design

Designing without motion is kind of like playing football without a play. You might get to your destination, but you might lose some finesse and efficiency in the process. UX design and motion go hand in hand the same way football and plays do.

While motion is often seen as the cherry-on-top, or a nuanced (and insignificant) detail, it provides more than just a flashy animation. It has the potential to express your brand, signal towards areas of importance, and retain customer trust — all while putting a smile on the user’s face. Check out Material’s motion design guidelines for subtle and clever motion patterns that do that. A design solution that lacks motion leaves room for uncertainty. How does this screen transition to the next? Does this modal enter the screen the same way it’s dismissed? Without a visual connection between screens, some bits can be lost in translation, which can lead to errors in implementation.

The more I’ve grown as a designer, the more I’ve seen the value of extreme communicating: think extreme sports, minus the yelling. Utilizing motion to address potential areas of confusion can be a powerful option to avoid ambiguity and save time. And while it can serve as a worthwhile communication tool, it holds even larger implications for the entire product. It has the potential to bring clarity, consistency, and energy to a product. For that reason alone, it’s well worth developing motion design guidelines for your product or design system.

I’ll be honest — as we were building out and launching the Workday Canvas Design System, there wasn’t much consideration for motion. We had the assets and components, but couldn’t point you to any documentation that told you how they behaved. As all of these components were being distributed to developer kits, there were no specs around how dropdowns, loading spinners, or even hover states animated. Everything was essentially unique — and none of it looked the same. Looking back, there are a few things I would have done differently.

Strategic motion. (Cred: I Am Carlito)

Designing with Motion, Constantly

If you’re at football practice, but not practicing any of the plays, I’d imagine it’d be a lot harder to execute a play on game day. Constantly rehearsing a play, however, should equip you to follow through when the pressure is on. If motion isn’t considered during each step of the design process, why would we expect it to show up in the product? The polish that motion brings to a product requires continuous practice — a constant focus that aims to enhance the experience with every opportunity. Practice doesn’t make perfect, but it’ll get you pretty close.

Designing with motion is everyone’s job, and it needs to be done constantly. It shouldn’t be left to a team that “specializes” in motion, or left to be considered at the very end. We think in vignettes and scenarios, not static images. So why document our thoughts in a static way?

It helps me a lot to write out how each element on the page behaves. I personally enjoy using Swipies, a portable whiteboard of sorts. I generally start any project on a Swipie, describing how an element might behave before visualizing it in a drawing. It helps to stay focused on the interaction. I’ll then draw out what I’m thinking of, still making sure that all elements that could potentially move have accompanying scribbles describing their behavior. Next, I’ll create a rendition of said drawing on a screen, cluttered with arrows and neater text. After a dance with a couple PMs and developers, I might tinker with a few ideas using Framer or Principle. Repeat.

Above all, I make sure that every person that comes in contact with the project has a clear understanding of the goals and how motion is contributing to those goals while remaining consistent with similar paradigms. At every step in this process, motion takes a front seat. While your process might be different, I’m sure there is a way to leverage motion at every step.

Swipie-ing away. Exposing iPhone’s Portrait mode and my bad photography.

Designing with Motion, Intentionally

If a football team continues to call running plays on their opponent which has the best defense in the league, I can’t imagine that possession being very successful. Plays are chosen strategically after analyzing the situation, not used in order on a checklist. There is careful planning throughout the entire game; not just at the end.

Nothing on our screens is static. Newton’s third law states that for every action, there is an equal and opposite reaction. Similarly, every user action should produce a reaction in the product; a reaction that is smooth and flows seamlessly within context. Content should be engaging with the user the same way the user is engaging (or attempting to engage) with the content. What purpose will this animation serve? Why is it using this easing function versus another? Carefully crafting the intention piece will set you up with a solid foundation for any motion work.

I’m beating a dead horse here, but UX design and motion need to be integrated with each other throughout the entire flow. The moment you are handed a new project, a world of opportunity for motion comes into play. Welcome it! No matter how simple or complex your project is, motion should be considered, the same way accessibility, internationalization, business goals, technical feasibility, and visual hierarchy are all considered.

Be intentional with kindness. And motion. (Cred: Lucy Regan)

Designing with Motion, Responsibly

Depending on the football play, executing it can be more strenuous for some players versus others. It might be more strategic for a player to conserve their energy instead of spending it all on one play. In the same vein, motion should be used responsibly (sparingly, even). Since our brains are `wired to perceive motion, we tend to focus on moving objects. The same way we protect our users from poor experiences, we should be protecting our user’s attention as well. Their attention is a currency we should be frugal when spending since we’re responsible for optimizing our product for their concentration.

If motion doesn’t provide meaningful context or isn’t solving a problem, it probably shouldn’t be used. If it disturbs the user’s spatial awareness and detracts from the overall purpose of the page, don’t use it. Identifying problems worth solving and establishing the purpose of a page are practices you are all already doing as designers, so integrating this motion mindset should be rather smooth. As you go about exploring uses of motion, iterate on it! Use whatever tools you can get your hands on and share your ideas with your teams (or whoever, really).

Animate responsibly. (Cred: Panic Studio)

Designing for a digital world that mirrors real-world physics requires attention to detail. This sort of attention needs to occur constantly, intentionally, and responsibly. I’m hoping this triune approach can provide some value to your teams.

Implementing motion design across enterprise applications is a worthy challenge that we are passionately pursuing. If you’re a genius wizard with a master plan for motion, check out Careers at Workday, and come join our team. Or at least hang out with us. We have some exciting developments in the works and are excited to share them with you all! Hint: Think about a seamless motion process with development, or never re-prototyping something ever again. Motion, prototyping, coding, sketching — all communication tools worth investing in. We aim to be an organization that cares about and invests in each detail of the user experience. Motion helps.

Credits

Shoutout to these folks for championing responsible animation: Sarah, Val, and everyone else who has provided stellar content surrounding the topics of UX design and motion. Cheers to workshops and the internet. Share any fun ideas and resources in the comments below!