How many times have you browsed a website and, suddenly, you’re looking at a page with no idea of how you ended up there? Or, maybe you tap a button and a form pops up seemingly from nowhere.
In real life, this is not how we interact with objects, it’s just not natural. Making the digital world more realistic is a natural progression of web design. Part of our job as web designers and engineers is to make the transition between real life and the digital world smoother. This is where animation comes to rescue!
Animation can help provide context and it helps brains understand how the information flows.D’Silva, Transitional Interfaces
To show you an example of adding an item to a list without animation, it looks like this:
It’s not easy for our brains to connect the action and the result without any transition. With a little bit of animation, we can give users clues to where things are in the interface:
We should account for implementing animation when planning product releases because animation helps users understand our software’s behavior more easily.
You can find more examples in this article about transitional interfaces, and see how big of a difference it makes when animations are implemented right.