Micro-interactions

What are micro-interactions?
Micro-interactions are events which have one main task — a single purpose — and they’re found all over your device and within apps. Their purpose is to delight the user; to create a moment that is engaging, welcoming and, dare we say it — human.

For Example take a look at the below interaction

This animation is a good example of micro-interaction, because it fulfills three important functions:
Communicating status and providing feedback
Enhancing the sense of direct manipulation
Helping people to see the results of their actions

Breaking it down
Micro interactions have four parts:
Triggers initiate a microinteraction. Triggers can be user-initiated or system initiated.
In a user-initiated trigger, the user has to initiate an action.
In a system-initiated trigger, software detects certain qualifications are being met and initiates an action.
Rules determine what happens once a microinteraction is triggered.
Feedback lets people know what’s happening. Anything a user sees, hears, or feels while a microinteraction is happening is feedback.
Loops and Modes determine the meta-rules of the microinteraction. What happens to a microinteraction when conditions change?

Why do they matter ? Motion for Emotion 🙂
If microinteractions are only tiny design elements, why to care about them at all?
Sadly, but many web developers and designers still ask such a question, not getting that ignoring microinteractions may cost their clients a lot. Attention to details is what basically differs an an exceptional website from ordinary one. Here is why microinteractions rock:

They improve a website navigation
They make it easier for users to interact with your website
They provide instant and relevant feedback about a completed action to a user
They give tips to your users
They communicate information about certain elements, like whether or not it’s interactive
They make the user experience much more rewarding
They encourage sharing, liking, and commenting on your content
They direct users’ attention
And, finally, they just make your site more emotional
Well-designed microinteractions are a clear sign of a care of a user. That’s why they value so much. A user gets what to do and whether or not their action was correct and approved by the system — an app or website provide an immediate visual feedback and teach a user to work with the system.

When microinteractions are done right, they can give positive feelings about your brand and influence users’ actions, often without people even realizing why. If you like or dislike one aspect of a product, you have a positive or negative predisposition toward the product in general. This so-called Hallo Effect can play both for and against you. In wise hands, this knowledge can help to improve a user’s feedback from your website — by paying proper attention to details, it is possible to leave your users satisfied.

When to use them ?
Few examples
In the UX/UI world, although tiny, microinteractions are touted as the powerhouse when it comes with communicating with the user. Below are top seven microinteractions and their impact on user experience:

Swipe The Swipe action eliminates tapping and is much more interactive and smooth. It helps the user quickly switch between the tabs and acquire more information about the product. Furthermore swiping is a very common gesture and guides the users subconsciously without making them think; just like we have been reading ‘Don’t make your users think’. What more? It’s insanely fun and addictive.

Data Input All of us know the frustrations of setting up password or creating an account. This action can easily raise hackles. While proactive suggestions on password strength and usage makes it easy for user to proceed ahead, some interactive interactions at the time of data input also keep users engaged with the process and help accomplish the goal.

Animations Animation simply enables and improves micro-interactions. They personify good design; their presence might not be noticed but absence takes a toll on everyone. They act like a glue that helps designers make the simplest of processes interesting and addictive. But be very careful as they are meant to engage the users and not distract or frustrate them; delayed processing or introducing new style in website might cause confusion.

Current System Status It is essential to keep the user informed about the current status happening on a site or app. If the users are not informed chances are that they will get annoyed and close the site or app. Micro interactions lets the user know exactly what is going on, how long it will take the process to complete etc. Even failure messages can be humorous yet effective to retain trust of user.

Make Tutorials Interesting Everybody is constantly seeking information, all of us. Tutorials with the help of microinteraction, guides the users about working of an application by simplifying and highlighting the basic features and important controls for easy understanding.

Call to Action Microinteractions essentially nudges the user to interact with an application or website. Call to action instills a feeling of achievement and also empathy factor in user behavior and the best way to make your user interact with CTA is to make it engaging to entice interest of user.

Animated Buttons They play the role of information manager by letting the user know their way through your app or site. We need to pay attention to color, shape, special effects, animations, placement and texture to make the user experience seamless.

We humans are hardwired to seek instant gratification. And it is a common tendency to overlook microinteractions in the greater scheme of things, but these are very important to get your users hooked.Devil is in the detail- as everyone say. Small experiences and design features, like toggling between screens or highlighting a feature or popping of a new notification can make a huge difference in enhancing users experience.

How to design micro-interactions?
Making micro-interactions is exciting for designers, because it is possible to experiment new design solutions and look for new ways to surprise the users. But for doing it you must keep in mind a few things :

Put yourself in the users shoes and use all that you have to figure out how they use your app.
Create functional animations. Animations which have not only an aesthetic but which are able to enhance the user experience.
Have fun and entertain your users. What the user feels when he uses the app is the reason behind the fact that he keeps using it. If the user enjoys the experience and finds it pleasant, he returns.
Do not be annoying. Too many animations have the opposite effect on users. Annoying users make them stay away from your app.
Use a human language and non-technical. A funny and ironic copy can make you forget for a moment how frustrating it might be a blank page within the app.
Tools to design Micro Interactions
So, what kinds of prototyping tools should designers familiarize themselves with? There are many tools out there but not everyone knows what works best for specific micro-interaction tasks. Here are my recommendations based on my personal experience designing these elements.

If you’re familiar with coding:
Mobile: Xcode, Android studio
Mobile or Web: Framer
Web: CSS animation

If you want to design an interaction between a screen-like push and a module:
Invision and Marvel

If you want to create more detailed interactions:
Principle, Adobe CC, origami Studio and Protopie

If you want to create detailed interactions + animation:
After Effects