Imagine you liked a medium post, you want to appreciate the work. What will you do?

You will click or tap on the clap icon.

Now, if you are reading this post on a desktop, then gently hover your mouse on the clap icon on the left side of your screen.

What happens? The circle bursts a little.

Now click on the clap icon. There is another little explosion and you get a number on the top of the icon.

The little burts. The tiny explosions. The movement of icons. The popping of numbers. All of these are microinteractions.

Microinteractions have become an essential part of our digital life. From the time you wake up to your mobile alarm, to checking emails, liking your friends post on Facebook to playing songs on your iPhone- we live with microinteractions all day.

“Good design is actually a lot harder to notice than poor design, in part because good designs fit our needs so well that the design is invisible, serving us without drawing attention to itself.” — Don Norman

Why microinteractions matter?

We are living in the age of user experience. Be it on mobile or desktop, your user wants to accomplish their goals with fun and an humanized experience. But microinteractions do more than that like-

• Help your user navigate the website
• Give feedback on completed actions
• Help users in their next action
• Motivate users to take action
• Boost engagement with software

Dan Saffer in his book ‘Microinteractions- Designing with details’ identifies four parts of a microinteraction.

• Triggers initiate a microinteraction. Triggers can be user-initiated and system initiated. In a user-initiated trigger the user has to initiate an action, say in the medium’s clap icon. In system initiated trigger, the software detects certain rules are being met and initiates an action, say the locking of phone when it is idle for sometime.
• Rules determine what happens once a microinteraction is triggered. In the medium’s clap icon it initiates a little burst or explosion.
• Feedback lets people know what’s happening. Anything a user sees, hears, or feels while microinteraction is happening is feedback. It means that your action has been acknowledged. Remember the vibration on your phone when it is silenced or when it is switched on/off.
• Loops and Modes determine the meta-rules of the microinteraction. What happens to microinteraction when conditions change or when they expire? Will the feedback be repeated?

Now that we know microinteractions play a big role in boosting your user experience and helps in making him engage with your website/app, let’s discuss how we can maximize their impact.

Here’s few tips to boost UX of microinteractions

Identify right opportunities: Microinteractions are tiny elements that can be used anywhere. However, it is important to tie the microinteraction with some value. The value can be to-

• Attract your user’s attention
• Communicate with the user
• Provide feedback to the user
• Help him complete an action
• Motivate him take an action

Keep it simple: One thing users hate is cognitive load. And this comes from complexity. Your users want to accomplish their tasks fast. Super fast. Don’t make your microinteractions a stumbling block in their path. Keep it simple and easy to understand.

Keep it short: Micro in ‘micro interactions’ is an operative word. Keep your microinteractions tiny and short. Keep it fast. It shouldn’t take more than a second to happen. More and you are not helping the user.

Be predictable: Your users are tuned into a set of behavioral patterns. Like the color ‘green’ means go ahead while ‘red’ means stop. An ‘upside thum’ means like and ‘downside thumb’ means it’s not good. Changing them will take time. And microinteraction is not the place. So it’s important that you follow standard conventions while designing your microinteraction.

Make it fun: The idea behind creating microinteractions is to humanize the experience. And humans love having fun. Use animations and icons to good effect.

Make it a part of your overall design: Align the design of your microinteractions with your overall theme design. Use complimentary colors, typography and styles to create a visual harmony with your overall design.

Test to perfect it: As with any design element, you must try out different microinteractions and test it. While testing it’s important that you also consider user fatigue with the microinteraction. Many a times, an interaction looks fun first time but gets boring thereafter. So make sure that your microinteraction is able to keep the user interest after repeated use.

Final Thoughts

User experience is important for the success of the software you are designing for. And microinteractions have the potential to take the user experience to next level. So think about the end-to-end experience, identify gaps and then use microinteractions to delight your users.