The mobile world is no longer flat. It now includes time and depth.
Besides knowing about color combinations and layout, you need to know about transitions and animation.
Today’s users are more interested on applications that actually provide useful feedback. Users want to feel that an application reacts based on their decisions rather than randomly. Transitions and animations serve to give the user the kind of feedback they crave.
Time as Feedback
For example, in this screen we can see the signup flow. Simple transitions have been used to move between screens.
As another example of a login flow, the connection with users is much greater because the animation intensifies their actions.
When the user taps the login button there is an animation that reflects the user authentication validation. The button turns into a circular progress bar.
When the user is correctly authenticated, the button expands and send the user to the next screen.
Depth as Feedback
We need to stop thinking of the screens as a solid thing and start thinking of it as made up of its independent elements.
The animation below shows the different elements that makes up a screen in a more powerful and direct way than if we were to describe it in words.
Putting It All Together
After considering individual elements, we can now extend our paradigm and look for a way to relate all elements together. This brings the application to life.
You can create transitions and animations within the same screen and from one screen to another.
When designing an application you should not only think about the information it will contain and its layout. It’s of utmost importance that you also consider how the app will interact with users.
To achieve this, all the modern platforms (e.g., Android, iOS) provide you with tools to create this kind of transitions and animations. It’s important for us, as developers to get acquainted with them and use them. As well as being informed on the most recent trends in app development.
Or even create new ones!
The images shown here belong to their authors (source: Dribbble).