5 practical animations that improve UX

There are two types of developers in this world – those who love packing animations into their apps, and those who remain sceptical.

Animations can have a bit of a bad rep for making apps look tacky, but there’s way more to it than spinning text or characters bouncing across the screen. The reality is that most people don’t realise just how many functional animations are in an app, from subtle transitions to loading and progress indicators.

They’re more than just aesthetics – they’re an integral part of the user experience.

Learn how to create 3D animations with ThreeJs here.

‍

Skeleton content

‍

People are always far more patient at waiting if they have an idea of what they’re waiting for. Skeleton content does just that for apps.

Think about every time you’ve opened a screen in an app, and before the content loads a couple of light grey boxes appear where the text and images will be. That’s skeleton content, and it’s a small but powerful way of showing users what they’re waiting for. Often it makes the load time feel shorter and creates a smooth transition, so it’s no wonder major sites like Facebook and Twitter use it for loading statuses.

There’s a functional element to this kind of loading animation too. Those grey boxes act as placeholders that preserve the layout as it’s loading. If one component lower down the page loads quicker than the rest, the skeleton makes sure everything is still in the correct place.

Shared element transitions

‍

When your users navigate through your app, you don’t want it to feel like they’re clicking between a series of disconnected screens. Shared element transitions are animations you can work into your navigation to give a continuous, intuitive flow to the user journey.

Images work great in this role. Say you’re building a newsfeed. When a user taps on an article they want to read, the image in the preview component transitions up into the header of the content itself. It's a subtle animation that gives the user context for where they are in the app, and helps them feel more comfortable navigating back and forth between pages because they can remember the journey.

‍

Fluid content carousels

‍

The carousel is a component as old as time. They’ve been around since the early web days and they’re in pretty much every kind of app there is – from featured articles on your daily news app to swiping left and right on Tinder.

They might be everywhere, but that’s hardly a mark against them. For one, carousels are so well-established that they make a new app's user interface feel immediately familiar. But they also fit mobile apps perfectly, because they give users access to a ton of information and options without having a massive footprint on a small screen size.

The key to an effective carousel is fluidity and performance. You want the content to gracefully cycle through, not jerk suddenly from one box to the next. And because carousels have been around for so long, there’s no need to reinvent the wheel, literally, by coding all that yourself – there are plenty of good libraries like React Native Snap Carousel to take advantage of.

‍

Telling a story

‍

Effective animations aren’t limited to presenting and loading content. If you want to make the most of your graphic design assets and flex a little creative muscle, they can also be a powerful tool for creating a memorable experience.

This works wonders at the very beginning of the journey, when you need to onboard users and explain to them how your app works. If you’ve ever used Duolingo you’ll remember how their owl mascot appears to guide you through each of the different lesson types, then sticks around as a familiar face every time you complete a tutorial or hit a new learning streak.

LottieFiles is a great place to get started with finding, creating and editing these kinds of animations – and their 60FPS animations look great on React Native apps.

Spinners and progress bars

‍

Traditionally progress spinners are the go-to type of animation for loading screens. That makes plenty of sense, but as phones and internet speeds have become quicker, loading times aren't long enough for most users to really see a progress spinner – if they do, it’s usually taken as a sign that something’s gone wrong.

But progress indicators don’t just have to be a spinning wheel or a loading bar. Something like React Native Progress can also be used to show the user how much of an article they’ve read or their progress through their daily Spanish lesson. People are impatient, so if you can show a clear journey ahead of them they’re less likely to switch off in the middle of using your app.

The more subtle your animation design, the more it'll do for your user experience. You don’t want to give users a visual overload, you just want to draw their attention to the value they’re getting from your app and manage their expectations as they move through it. When they’re done right, you’ll be surprised at the impact a few simple animations have on how much people enjoy using your app.