All posts by Nagamani P

PROBESEVEN - A Sketch on Micro-interactions and Animations in UI Design!

It has rather become the need of the hour to create designs in human-centric approach.  This calls for the brilliance in micro-interactions which are created and shows up the simplicity of use and better understanding of the process, even if the logic behind it is complicated the task can be handled in a friendly manner with good UI. Bringing to you a sketch on Micro-interactions and animations in UI design for better user-experience.  Let’s have a feel of it.

To create a successful application, it has to be started in simple and clean layout filled with micro-interactions and animations.

Apart from the clean layouts, Micro-interactions and animations plays a vital role in guiding the user throughout the application to finish his task without any chaos.

So, what are micro-interactions and how they are used in design? “A micro interaction is a small and simple user interaction with an user interface.”

 For example, Here you would observe the changing colour of the LIKE button.


When you press the “like” button social media apps, you see that your like button changed the color or became inactive, the button informes you that you have done the action that is the case of micro-interaction.

These types of  micro interactions present mostly in all user-interfaces. A few are listed below for a quick re-cap.

  1. Like Button in social Media apps
  2. Play and Pause button in music apps
  3. Call to action buttons in websites
  4. Status and progress bars-uploads and downloads
  5. Auto-fill Text boxes
  6. Hover Zoom in E commerce websites etc.,
Why Micro-interactions and Animations?

Micro-interaction captures the user’s attention and guides him through the various steps of the user flow. At the same time, he gets the delight of a pleasant user-experience.


This login animation is a good example of micro-interaction, tend to do, several different things:

  • Help the user manipulate something
  • Communicate a status
  • See the result of an action
  • Preventing user error

Another quick example to show how animation and motion can help maintain continuity. Note how the card expands from the point of origin and enables the user to perform an activity.


Designing Micro-interactions

According to Dan Saffer, the interaction designer who literally wrote book on this subject, all micro interactions should have a the following.

Trigger – All the micro-interactions started by the system user. They are initiated by the trigger.

Rules – This is a sequence or flowchart for micro-interactions to how it works.

Feedback – The feedback from micro-interactions after triggering.

Loops and Modes – Length of micro interaction.

Tips to follow when you designing micro interactions:

Simple, straightforward:  It is recommended and supposed to be small and simple, Do not overthink on it.

Design for repeated use: The user should feel comfortable even on 100th time of use.

Keep it to the point: Do not add more than necessary, if your app has a single color scheme, micro-interactions should use the same hues so that the visual connection to the parent design or app is there for users.

Target time-saving ideas:  It needs to be catchy and that the user easily finds it and works over it which results in time saving.


Micro-interactions are an important part of digital design project. For efficient micro-interactions, designer has to think about the design, psychology, programming, human activity etc. Thorough analysis of the target audience and their human activity, the designer can design micro-interactions which makes the user-interface to be more stylish and usable.