Everything you need to know about micro-interactions

Sabitha Shree
Bootcamp
Published in
3 min readFeb 28, 2021

--

Micro-Interactions are everywhere, right from the web to the app. It has become one of the most important factors to provide a pleasing experience for users.

What are Micro-Interactions

Micro-Interactions are the functional, Interactive details of the products. These are trigger-feedback pairs. There are four parts of micro-interactions namely,

Image Source
  1. Trigger: Starts/Initiates the action
  2. Rules: What happens one action is triggered
  3. Feedback: How you know what’s happening
  4. Loops and Moods: What happens next

There are two different types of triggers for micro-interactions, they are

  1. Human Triggers: These are triggers by users. Ex. pressing a button.
  2. System Triggers: The system creates the trigger when it is meeting a set of predetermined conditions and it gives feedback to the user.

Benefits of Micro-Interactions:

  1. Immediate feedback for the user actions
  2. Intuitively guiding and engaging the user for the process.
  3. Help users visualise the results
  4. Preventing errors

The Process of Making a Great Micro-Interaction:

As mentioned by Ondřej Dostál in his article, these are the few best practices of micro-interaction design.

1. Identify and Understand the User’s Problem:

Identifying the user problem is very useful in defining and ideating the micro-interaction necessary for a particular place. For example, if the user needs to know the error the micro-interaction has to inform the user about the error, then the ideation can be done along the same line.

2. Keep Micro-Interactions Natural:

Micro-interaction should be simple and lead the user to the next step intuitively. The user should not be confused with out of the box, complex animations. Ideating from real-life examples and showing the successive step in the process with micro-interaction will be more relevant and understandable to the user.

3. Test and Iterate Findings from User Testing

After finalising an idea, the design should be prototyped and tested with users just like in every UX design process. The interactions can be improved based on the observations.

When to use micro-interaction

As mentioned by Nick Babich in his article, the micro-interactions can be used in the following cases.

1. Show System Status

2. Highlight Changes

3. Keep Context

4. Visualize Input

5. Call to Action

Conclusion:

Micro-Interactions can provide a delightful experience to the users but using the mismatch interaction may harden the experience game for the user. So it is important to use the right interaction at the right place.

References:

--

--