7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Web Design
  2. UX

3 Ways to Enhance UX With Motion Design

Scroll to top
Read Time: 4 mins

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!

UI/UX Kits on Envato Elements

Before we dive in let me quickly tell you about Envato Elements; a library of creative assets all ready to use with simple commercial licensing. You’ll get unlimited access to UI kits, web templates, fonts, and other useful stuff for any designer.

Envato Elements is free for 7 days, no commitment. If you don't love it, cancel any time during your free trial and you won’t be charged.
Envato Elements free 7 day trail

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:

second screen of appsecond screen of appsecond screen of app

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.

transition to communicate information hierarchytransition to communicate information hierarchytransition to communicate information hierarchy

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.

waving amazon avatarwaving amazon avatarwaving amazon avatar

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.

The Amazon app has several examples of effective motion design; check out the video to see more of them!

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:

double-click to downloaddouble-click to downloaddouble-click to download

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).

successful face idsuccessful face idsuccessful face id

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.

app downloadingapp downloadingapp downloading

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.

More UX Fundamentals

Stay tuned for more UX fundamentals, and let us know in the Youtube comments what you’d like to learn next!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.