Micro interactions and animations in apps - what's the use?

Adding a series as a favourite on Netflix, an error message when entering a password or confirmation that you have unlocked a new level in a game: These are all examples of micro-interactions or animations that we encounter in today's apps every day. They play an important role in ensuring that users understand an app and have a good feeling when using it.

This was also the focus of our recent project with FELFEL. The animations realized in it prompted us to write a blog on the topic of micro-interactions and animations. Nick explains what types of interactions there are and how they are implemented in apps and websites.

How are animations incorporated into an app?

For an animation to work in an app, it must be integrated into the project by a developer. Depending on how complex the animation is, there are different ways to do this:

“Simple” animations

An example of a simple animation would be a button that changes colour when clicked/tapped. Since such animations tend to animate few values such as size, colour or position, it is best to realise them directly in the code. This also offers many possibilities to adjust and fine-tune the animation if necessary.

Complex animations

More complex animations, in which many elements are changed at the same time, can hardly or only very laboriously be realised via code. The developers would have to recreate the template step by step by eye in the form of a video or prototype from the design team. This takes a lot of time and requires a close exchange between the design and development teams so that the end result looks like it was designed.

But even complex animations can be realised without putting developers through hell 😇. The "Lottie" framework was developed precisely for such cases.

Animations with Lottie

For a long time, complex animations that could not be realised by code alone were integrated into apps in the form of videos or gifs. This meant that all videos had to be downloaded when downloading an app, which meant that the app took longer to download or could not be uploaded to the store at all. Furthermore, videos are not as easily customisable as coded animations.

The design team of AirBnB has found a remedy in this area with the Lottie framework. Lottie makes it possible to export an animation created in After Effects with a plugin (Bodymovin) as a .json file and to render it natively for Android, iOS and React Native with the Lottie framework (a kind of player for json files).

In this way, designers only have to send the developers a .json file, which they then integrate. The animation should then be able to be displayed without further intervention.

Advantages of this method

• You don't have to manually translate/explain animation to code because everything is already timed as it is in After Effects.

• It is possible to supply the three platforms iOS, Android and React Native directly with a created animation without having to develop individually for each. This can save a lot of time.

• The file size is also massively reduced, since a Lottie animation rarely requires .json files larger than 10kB. The conversion to graphics and movements happens on the end device.

Disadvantages of the method

• Not all effects created in After Effects can be converted.

• Since Lottie animations are rendered on the device, more complex animations do not always run smoothly on older smartphones.

Conclusion

Today, an app is more than just a few static screens, between which you can navigate back and forth. It tells a story, conveys messages or simplifies complex processes. In order to reproduce these interactions in a comprehensible way, micro-interactions and animations are needed in addition to the screen design, which bring the elements of a design to life. They help massively enhance the look and feel of an app so that it can stand out from the mass of existing apps and websites.

With the constantly developing technical possibilities, it will be possible to realize more and more complex animations over time - see Lottie. It is also to be expected that the effort for simpler animations will continuously decrease as they are made available in a standardised way. This is already the case, as the examples of standard transitions from Google's Material Design or Apple's Human Interface Guidelines show.

One thing is certain: Animations and micro-interactions will become increasingly important and easier to implement. And we're of course happy to bring your app to life!