Before I became a UX designer, I thought I wanted to be a title sequence designer. I took a course at Carnegie Mellon taught by Dan Boyarski called Time, Motion, and Communication. It was all about kinetic typography, rhythm, color, and movement. Dan used to describe every element on screen as if it were an actor on a stage — a character that we were directing, giving it behavior and personality.

“You are responsible for directing each element’s entrance, performance, and exit.”

We would constantly revisit this sequence, giving reason to why a character was there and what its role was. Introducing time and motion changed everything for me, because what I realized was that it gave you precise control over the emotion you are trying to convey and how an audience will interpret your message. I’d often look to title sequences for inspiration because I was fascinated with how a 30 second or 3 minute sequence had the ability to set the tone for an entire film and foreshadow what was going to happen. When the job hunt began, it was a happy accident how I ended up as a UX designer at R/GA. I knew R/GA had a history in title sequence design — had no idea if they still did that now — but knew it was a place I wanted to work. I intended to apply for a visual design position but was nudged into UX, so started day one thinking, “what are wireframes?!”

Fast forward to a few years later: I’ve created hundreds of wireframes and thousands of annotations that describe how things work and fit together. Things like: When the user taps on the menu icon, the panel will slide down from the top of the page. When the user clicks the thumbnail, the video will enlarge full screen. And then it hit me. We were stuck designing in these extreme states and a huge piece was missing in our work. When our deliverables consist of designing for these static comps like a home page or product page or article page and we only annotate how things flow together, we were completely failing to show what happens in between. Annotating doesn’t provide enough context: we had to start showing it.

The more wireframes I made, the more I started to realize that everything I had once learned about motion design was completely relevant to our roles as UX and visual designers. As I started to pay more attention to everything I engaged with day to day, I realized that the most fluid, delightful, and intuitive experiences were always the ones that put detail into motion design.

Disney & UX

If we’re going to talk about motion and start somewhere, it’s with Disney. Disney developed 12 Principles of Animation which I find to be so important because of the way they depict realistic movement and emotional engagement. Disney had a deep understanding of how things move and behave in real life. They knew that when an audience would watch something on screen, they expected things to move in a way that felt natural. Disney also knew that if they wanted to captivate their audience they needed a layer of emotional engagement. It’s how they became some of the first animators to create full-length feature films that captured an audience’s heart and made characters feel believable and relatable. Realistic movement, emotional engagement, solving extreme states… that’s how this all starts to come together.

UX Choreography is a combination of the how with the when and why — the proper techniques of applying motion and captivating an audience combined with the most integral moments in user experience where you can start engaging your user in a two-way dialogue.

The 5 Principles of UX Choreography

The biggest thing to take away here is that our job as UX and visual designers is not just to make things functional and follow best practices. We’re also trying to make these experiences enjoyable and, most of all, tell a story through experience sequences. The more I paid attention to how motion was applied in digital and the techniques that were being used, the more I started to see a pattern. I arrived at these 5 principles, which I feel address the most important communication points in UX, solve the gaps between extreme states, and overall create a more polished experience. Getting these details right is important because it influences people’s perception and trust in your product, which overall creates a more positive experience and enjoyable experience.

Feedback

Feedback helps demonstrate the result of a user’s interaction, whether or not it was successful, and why. It’s often used to show if something is correct or incorrect, if something is loading, if you’re making progress, or simply when you are making selections. Feedback is important because it builds trust with your users and it’s really satisfying and delightful for users to see! It helps add a tactile element to interactions because it makes you forget you may just be tapping a piece of glass and instead makes you feel like you’re interacting with real elements on the screen. It’s nice to feel like things are reacting to what you’re doing. When you think of designing for Feedback, it’s important to work on making it obvious to users. Feedback is more effective when multiple layers of elements are working together to react to what users do.

So, what can Disney teach us here? Exaggeration. Glen describes exaggeration as something that is felt, not just seen. Often you’ll see characters react a big, unmistakeable way.

Beast getting frustrated and surprised

He illustrated an example of Beast getting frustrated with Belle when she said she wasn’t going to dinner. Beast’s face stretched up and his eyes widened, making him look surprised. Then his face squashed down and his brows looked angry. An audience doesn’t even notice the subtleties of what’s happening because it happens so fast, but it makes the end result feel like a jolt and completely obvious.