Micro-interactions

Animations not only take your application from good to exceptional, they’re often expected by users.

But animations don’t just make your application look and feel nicer, they can be a useful tool for improving perceived performance, giving users updates on the status of a task, and guiding a user through your application.

Micro-interactions are small animations whose purpose is to delight the user by providing feedback in regards to a task or inform the user about the status of a process or task.

By incorporating micro-interactions we will take our applications from ordinary to exceptional. We can think of the structure of your application—the HTML—as the body, the CSS as the physical appearance, and animations as the body language.

Here are a few reasons why you should use micro-interactions throughout your application.

Enhancing Perceived Performance

“There are two kinds of time: clock time and brain time. The former is the objective measure of time; the latter is how a person perceives time.”

Adding micro-interactions, such as a custom progress bar or an animated setup dialog which guides the user through a process, can change the way users perceive the time it takes to complete a task.

We can alter our user’s sense of time with animations and this can work in our favor if our performance budget needs some refactoring.

Examples

• Form entry.

Inform Users About The Status Of A Task

As a user’s request is processing or as their data is loading, we can use a micro-interaction to inform them of its status.

Custom progress bars are a great way to keep your users from getting frustrated and will stretch the amount of time they’re willing to wait for a process to finish.

Examples

• Avocado loader
• Book loader
• Progress bar

Illustrate A State Change

If a user is filling out a form and incorrectly enters their password, we can use micro-interactions to illustrate that this form needs to be fixed prior to submission.

Examples

• Form error
• Incorrect password

Draw A User's Attention To Something

Using micro-interactions to capture a user’s attention and indicate that there is something of importance is a useful tool for on-boarding or to indicate someone is typing. Examples

• Chat

To Create Habits

Social media applications are really good at getting their uses to form habits, and they do so with micro-interactions.

Facebook’s like button is a prime example of this, as is Instagram’s heart animation.These small interactions delight users and keep them coming back for more.

Examples

• Reactions

To Delight Our Users

Micro-interactions can bring joy to our users by enhancing their experience. They can take even the most tedious of forms and bring them to life.