#micro-interaction

[islacraig03-blog]

Micro Interactions - Definition, Examples and Best UX Practices

One of the best ways to kick off learning about a subject, in particular, is to scavenge the internet for relevant information over the internet. The web is get

[designsappy]

What is micro interaction?

Recently micro interaction is creating lot of buzz in the industry. Now a days even in job interview we can expect questions related to it. I did a little bit of research and started realizing why it has the sudden attention.

In a nutshell, Micro interaction defines all the interactions on the screen, in animation format. It is a better way of pressing to the team instead just sharing the style guidelines. This would help the the team to fastening the development step and building reusable pattern library.

Why micro interactions are required?

Conventionally developers are provided with styles guidelines along with mockup. Style guidelines consist of the key colors used in the design, typography, Icons, UI design and it various sates. Generally they are short document won’t have much information about "how the UI would behave". Today the style guidelines are no longer required designer can share their files with tools like zeplin, where the developer can directly inspect  the design and get the details. Similar prototype can also be made with realistic behavior, with minute details. Tools like UXPin supports booleans where different scenarios can be conditioned.

Benefits for the designers

Presenting the interaction in animation format would explain the flow in a much better manner to the team, and the developers are able to come up with much realistic timelines. This also reduce the time required for coordination with the developers. Now the designer are able to present even complex interaction easily and hence can visual even complex interactions.

Tools used for Micro interaction

Almost all the design tools (including sketch) are having the prototyping functionality. But they are all very static can’t define most of the in page interaction. Tools like principle and Flinto are specially made for this. After effects can be used if the design is made with photoshop. InVision studio and Adobe XD are trying their best but event today they are not up to the mark.With compare to all the interactions design tools, principle ranks the most and manage to create even complex interactions with ease.

Here are some of the tutorial which you can follow and you can view some of the examples made with principle.Thanks for reading.

Your comments are welcome.