3 Ways to Enhance UX With Motion Design

Communication, feedback, and wayfinding are just a few impactful ways motion design can be used to improve UX. Let’s look at some examples using some familiar apps in the wild, beginning with communication.

Video Explainer: Motion Design and UX

Check out this 5 minute video where I explain some of the ways motion design can really lift your website or app users’ experience. Don’t forget to like, share, and subscribe to Tuts+ on Youtube for more!

1. Communication

For this example I’ll use a Figma prototype for a football team picking app. We begin with a typical sign up/sign in splash screen that you’ll see with most apps and services. When we click sign in we’re immediately faced with lots of information:

The hierarchy is pretty good; we have a clear label showing which team we’re in, which week we’re in, and our position with the points we’ve accumulated. Below that there’s a bunch of ranking information for other players in this “pick ’em” league.

The cognitive processing needed by the user, from when they first click on sign in, to when they’ve seen all the details, can be a little overwhelming. Motion design can help us here and communicate more effectively the information needed by the user.

One way to achieve this would be with transitions. We could have all these pieces of information appear in sequence, in an orchestrated fashion, so the user processes each one in turn. This would guide the user through the hierarchy, so they’d instinctively learn what is the most important information, all the way to the least important.

Check out the video for the full effect, but the still here above shows how gradually revealing information can communicate hierarchy and information importance.

The last thing to appear and therefore require the users’ focus is a “Make your picks” CTA, prompting that next step in the process.

2. Feedback

Let’s move onto feedback. In this example I’m going to use the Amazon app (familiar to most of you, I’m sure). This is what happens when you log into your account; the login link is switched out for a waving avatar next to your username.

This addition of this welcoming motion design is fantastic. It’s subtle, it’s delightful (which helps keep users engaged with an app or website), and most importantly it acts as a form of feedback. The user did something, and receives confirmation that their actions did something.

3. Wayfinding

To demonstrate how motion design can help with wayfinding I’m going to use the Apple AppStore. What happens when we choose an app to download? When we hit the GET button, a lot of things happen. It’s actually quite a complex set of steps, and it’s only thanks to clever motion design that we’re able to seamlessly understand the process.

Firstly, to authorize the download of an app on modern iPhones, you use the Face ID feature. You trigger that by double-clicking the side button, and you’re prompted to do that by an animation drawing your attention to the side button and instructing your next step:

Your eyes are then drawn to the panel at the bottom of the screen thanks to a Face ID animation, then once your face has been scanned, the introduction of an animated check icon (feedback, showing successful completion).

WIth that done, the panel transitions away off the bottom of the screen, and the only motion left is the downloading app progress indicator. This shows that the process has gone well and your app is on its way.

Conclusion

Communication, feedback loops, wayfinding; these are three powerful ways that motion can impact your UX design. Whether it’s an app, or a website, motion will help you deliver the best experiences for your customers and users.