x
Videos

Video: UI animation trends for 2019

4 min read
Austin Saylor  •  Jan 16, 2019
Link copied to clipboard

Animation is not just a “nice to have” in product design. Whether it’s UI animations to guide the user along their journey or videos for marketing, animation brings your product to life and gives a tangible experience to your users.

So, what animation trends should we be trying out more this year? Watch the video below to find out, or scroll down for a quick summary.

UI animation trend #1: Delightful onboarding

Delight your users before they even accomplish a single thing. First impressions are important, and this is a fantastic way to lead them into getting the most out of your product—and build a lot of character for your brand.

Headspace does this so well. Their animations start right when you open the app, and it’s really delightful, super cute, and relevant to their brand. I haven’t done a single meditation with Headspace yet, but I can’t wait to sign up and get started. And that’s just because of their animations at the beginning.

UI animation trend #2: Parallax scrolling

No, parallax scrolling isn’t the newest thing on the block, but there are many more ways to do this than just on a homepage.

Lyft does a nice job of subtle horizontal parallax scrolling between their ride options. Why is this important? Two reasons: When people touch that new tab, or scroll to the side and see how this… effects that… there is a sense of control. And who doesn’t like to feel like you’ve got a bit of control? It also helps with the discoverability within the app—when you’re swiping left and right and see the tabs moving changing, maybe you realize you can touch the tab instead of swiping. It lets someone know there are two different ways to perform the same task.

“Animation is not just a ‘nice to have’ in product design.”

Austin Saylor, Motion Designer
Twitter Logo

UI animation trend #3: Feedback

There’s nothing more frustrating than not knowing what’s going on. Animation is a great way to clue the user in to things like incorrect passwords where the form field shakes, numbers animating up as your balance increases, or a creative loader spinner with helpful or even humorous—but most importantly on-brand—messaging.

UI animation trend #4: Feature discovery

Drawing attention to new features in a product is a great use of animation. Sure, you can bury new features and update text or try to reach people with email, but why not put it in your product itself?

This could be as simple as a pop-up speech bubble near the feature, or it could be as involved as what Relax Melodies did with their brand-new sound breathing feature. This was such a delightful way to learn what their new feature does, and it’s really got me considering purchasing the full version of their product.

Remember that animation, just like design, isn’t something you just tack on at the end. It’s not just a “for fun”—this is something that can help your users understand your product, help them get from A to B much faster and easier, and it’s a way to delight them and build brand presence.

So keep this in your design cycle—animation is awesome.

Read more about motion design

  • How I learned—and mastered—the fundamentals of motion design
  • Meet the illustrator behind Duolingo’s crying owl
  • 10 microinteractions that will inspire your next project