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

6. August 2020 - from Nick Gerber

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.

Why is movement needed?

Movement is natural - standing still is not. You can see this well when you observe nature. Everything is always in flux and reacts to each other. For example, the leaves of the trees move when the wind blows or the water splashes down a waterfall. Only when something reacts does it feel alive to us. This is no different with user interfaces.

For a user interface to feel natural, it needs to respond to user input. This can take the form of a Like button that changes colour when clicked, or an error message that appears when an incorrect password is entered.


Look and feel

Operating an app is always an experience. To make this experience as positive as possible, it should be as lively and self-explanatory as possible. It is about transporting a brand with its values and characteristics in a comprehensible way. This is achieved by developing a coherent look & feel that makes these values and characteristics tangible.

Especially the feel, i.e. the feeling when using the app, can be considerably enhanced through animations and movements. Here are some examples of interactions and animations in our apps:


Feedback animations

Launch animation

Transitions

Icon animation

How are user interface animations created?

Idea & sketch

At the beginning, there is the idea: What do I want to achieve with the animation, what do I want to draw attention to, what should have an effect? This idea is recorded in the form of a sketch or a simple graphic and serves as a template for the next steps. It is important not to animate all the elements of the user interface at random, but to focus on the areas you want to draw attention to.

Procedure / Storyboard 

Animations consist either of many individual images put together - as in a flip book - or of individual states that are changed/morphed between, as for example in an on/off switch.

These key moments of the animation (states, individual images) can be recorded and planned in the form of a storyboard. In it, the animation is divided into different intermediate steps. Each key moment is shown and described.

This helps you be clear about the exact sequence of the animation and keep track of which elements are to be animated and when, similar to a script for cinema films.

The animation

With the help of the storyboard as a template, the animation can now be built up. The following tools are suitable for the design:

  • After Effects

    Very extensive in the animation and effect possibilities. Unfortunately, not everything you create in AfterEffects can be transferred 1 to 1 to the mobile world, unless you embed the animation as a video (mp4). With the help of Lottie, however, there are increasing possibilities to integrate animations natively.

  • Flinto

    A tool that is mainly used to create prototypes of apps. It is also very suitable for testing animations for their effect and experimenting a bit. A very practical tool especially for early project phases to simulate a finished app experience and to test assumptions and ideas.

  • ProtoPie

    Used to create prototypes. You have the option of using logic, which makes it particularly very interesting for functional prototypes (e.g. filling out a form, in which the fields are taken over). In this way, user testing can be carried out with almost real conditions.

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!

We just noticed that you surf with Internet Explorer. Unfortunately, our website does not look so nice with it.

You want to know why that is?
We have written about it.

Blog

You need help with the changeover?
Get in touch. We are happy to help

Contact

Install a new browser?
There's lots of choice.

Browser