Microinteractions

Imagine you’re using a fitness app. When you set your goals, a brief animation celebrates your dedication. As you start your daily routine, a progress bar at the top of the screen grows, letting you know how much you’ve accomplished. Each time you complete one of the exercises, its image turns gray, clearly indicating you’re ready to move on to the next one. Once you've finished the entire workout, the screen bursts into a confetti animation, giving you a fulfilling sense of accomplishment. 

These small moments within a digital product are known as microinteractions.

Microinteractions are vital in guiding, reassuring, and engaging with your user. They provide feedback that indicates system status and prevents users from committing errors. Although these features may seem like simple additions, incorporating scroll bars, progress indicators, interactive buttons, and loading circles greatly improves user understanding of a system's status and helps them determine if it's responding correctly to their commands.

Microinteractions are based on a user/system-microinteraction-feedback sequence. The user or the system usually initiates an action—also known as a trigger—which activates a purposeful microinteraction. Once the action is completed, the system provides feedback to the user, informing them of the outcome or any further steps needed.

The primary goals of Microinteractions are the following:²

Show system status: Being transparent with the user. Doing so makes them feel empowered and engaged.

• Communicate Progress: The system actively responds to the user's request. Loading bars/circles and the “typing…” indicator on a messaging app are good examples of this.
• Standby: These messages indicate to the user that something is missing from their end to perform an action. Like when you click on the volume icon on a YouTube video it shows the volume slider, indicating you can now adjust it to your preference.

Error Prevention: These messages indicate something is wrong, so there are less frustration and pain points for the user.

• Support Undo: Users are going to make mistakes. Crafting microinteractions that help undo them without going through complex steps enhances user experience. For example, you know you accidentally liked a post on Instagram because a white heart flashes on the photograph.
• Prevent Rework: Reduce user frustration by letting them know they made an error right away instead of at the end. For example, when you fill out a form and misspell your email, the field turns red to indicate that the email is not valid.