Micro-Interactions

Today, there are more and more products on the market, and the competition is tighter. This is why we could say that the best ally to stand out in the digital ecosystem is to have a good design and offer an excellent user experience. The user experience is where the so-called micro-interactions start to play a paramount role, helping our products to provide a higher quality experience and making them more attractive to the user. But what are they?

What are the micro-interactions?

Micro-interactions are subtle events that have the single purpose of providing feedback through animations or transitions when the user interacts with a product in a digital environment.

It is common for micro-interactions to work by following these steps:

  1. Are initiated by a trigger.
  2. Starts working once a certain condition is met.
  3. User feedback is provided.
  4. The question “what happens once the condition of the micro-interaction changes” must be responded to. 

What is described above summarizes the process that a micro-interaction should have. Now let’s see in detail each part of this process.

1 – Trigger:  

Triggers are the first part of a micro-interaction, and they are in charge of starting it. They can be started by the user or by the system itself. 

For a user to pull a trigger, it must perform an action with the product. In the case of a trigger initiated by the system, first, it gets in touch with certain pre-established guidelines, and then it executes an action, which initiates the process of micro-interaction.

In this phase, the question to be asked is: what is the required action?

2 – Rules

Once an action is started, certain rules must be followed so that the next phase of the process can take place. Here, the action itself is presented. 

In this phase, we should be able to answer: what should happen once an action is performed?

3 – Feedback

After that, the action is revealed to the user. Whatever the system sees or listens to while a micro-interaction is taking place is part of the feedback, which can take different forms, depending on the feedback we want to provide.

For example: when we want to show a micro-interaction triggered by silencing the mobile, the feedback can be visual and generate a vibration, but it should not emit sound, as it would confuse the user.

Here we should answer the question: what should I see, hear, or feel when the action is performed?

4 –  Loop or Modes

Finally, it is evaluated what should happen when the conditions of the micro-interactions change, since the action can be finished or it may be asked to happen again, repeating the whole process.

Here is when we answer the question: what happens when the conditions of the micro-interaction change?

By going through this process, we can create quality micro-interactions that provide value to the user when interacting with a digital product.

The importance of using micro-interactions

Often we find developers or designers who question the relevance of micro-interactions and how to use them wisely. Here is a list of reasons why we should include them in our digital products.

  • It makes it easy for users to interact with the product.
  • Provides instant and relevant feedback on an action completed by the user.
  • Helps the user to better understand the operation of a product.
  • They make the user experience much more rewarding.
  • They help to gain the user’s attention.
  • The user knows what is happening all the time, giving them better control of the experience.

How do micro-interactions help to provide a better mobile experience? 

When we interact with a mobile device, we are simply engaging with a touch screen. Hence,  we will not be able to get physical feedback since, obviously, the screen cannot sink when we press on it, or it does not move when we slide our finger over it. For this reason, micro-interactions help to have interactions that the user can recognize as obtained from the physical world.

Keypress

For example, when pressing a real button, we get small physical feedback on what we are doing because something physically happens to that button. The same thing happens with mobile devices but in a digital environment. To know that a user is pressing a button in an app, the user expects to get a result from that micro-interaction that shows it what is happening. In this case, the button should simulate that it sinks or should change color.

Pressing Button in App

Let’s put a more complex example:

Let’s imagine the user downloads a mobile app that will enable it to turn the lights on and off in its home. And as the developers of that app, we want to improve the user experience by adding micro-interactions. In order to achieve a better user experience, we will have to analyze what the user does when he or she interacts with a physical switch:

  1. We press the switch, 
  2. this changes its status, 
  3. and the light comes on.

Accordingly, we must simulate that physical experience and feedback digitally. To proceed with the definition of micro-interactions, let’s answer the following questions:


Mobile Patterns - Write for Us

  • What is the action to be taken?

The user must press the button to turn on the light.

  • What should happen once this action is executed? 

If the button is OFF, it should change to ON, and vice-versa.

  • What should the user see or hear when performing the action? 

When the OFF button is being clicked on, this one should sink and change color as the text changes to ON.  And the same thing should happen the other way around if we want to turn the lights off.

  • What happens when micro-interactions have changed?

In this case, once the action is performed, the state of the object changes ending the micro-interaction when the transition between the OFF state and the ON state is finished.

Micro-Interactions Example

Conclusion

As we’ve been saying, micro-interactions help us to make our products generate a better user experience, whether the experience we are offering simulates reality or simply motivates the user to perform certain actions. 

Users are accustomed to having physical micro-interactions daily,  so when users interact with digital devices, they expect a similar result. Therefore, the importance of determining and including the best micro-interactions for your product should not be overlooked, as small details make great products.

Nicolas Suarez

Nicolas Suarez

Hello! I am Nicolás, a Product Designer at Moove It, and have over 10 years of experience in the software industry. I am passionate about mobile interfaces and product creation, always looking to find creative solutions to the different challenges in order to generate value in the products I work on.

Twitter:  @ImNicoSuarez
Instagram: @ImNicoSuarez

Previous Article

Leave a Reply

Your email address will not be published. Required fields are marked *