Why micro-interactions are the key to an attractive application?

Today features and options, just isn't enough. Users want it to be nice, designed with class and makes an interesting UI, and that means you have a responsibility if you want to live up to your users requirements.

Micro-interactions is a part of modern design, and your users expects them from a quality application, and can differentiate you and your competitors, to give that last little edge and spark.

What is micro-interactions?

To me, the best way of describing it is: How to make the most ordinary simple thing, into something more exciting, useful, inspiring, helpful, powerful.

Let me give you some examples:

• Twitters pull-to-refresh
• Facebooks messenger writing indicator
• Apple iPhones mute switch
• Automatic faucets
• Feedback vibrator on a mobile phone
• The vibration in the controller on a Playstation

Where should they be used?

Micro-interactions can be used to show change in state, or an event that is or has happened. Instead of showing a line saying "Item added to basket", showing it by an animation in the basket corner will show the user what has happened, and the user will immediately pick up the flow and narrative of the micro-interaction.

It is important it can be self-fulfilling and self-sustaining as a single part. Small, fast, easy to understand, and simple!

So think of where it is needed, to ensure it gives value! When you have designed a micro-interaction, think about how it would look and flow without it - would it be more simple and easy without it? Because then it doesn't add value. Does it make the use of the application harder (because of delays or a difficult way to use it), or if it isn't intuitive - then remove it.

There are many places a micro-interaction can benefit. It can be in a textbox, an upload button, a validation field, loading new data/updating something, or whatever you can think of. It is all valid, as long as it gives value!

It can be very difficult to find out where to use it, and where not to use it.

Engaging the user

Micro-interactions can be a way to inspire your users, to keep doing something, or using a part of your application as desired. The micro-interaction can make it fun for the user, to do tedious work. But these small micro-interactions, can make your user remember your application, appreciate it more, and use it more (even for checking for updates more often).

Less is more!

When dealing with micro-interactions, it is vital to keep it simple! Making it to complex can make more harm, than having no micro-interaction, so be sure it is precise.

An animation that is too long, or has stops/gaps in the animation that disturbs the flow. It needs to be easily understood what the purpose is, and help the user understand the purpose without further explanation, else the micro-interaction has failed.

Purpose is more important than design, animation or a cool effect. If it is too slow, it can make it tiresome to use the function repeatedly (waiting), and having a long animation run over and over again, can make it annoying for the user, instead of inspiring.

Key notes to remember

• Animations must be short and precise (300-400ms)
• Animations must be in one movement (stops disturbs the eye)
• Function over design/cool effects
• It must have a self-fulfilling purpose, not just be an animation for the sake of animations (Keep it simple)
• Engaging the user, is a powerful tool

The power of micro-interactions can be big, and strong, if used correctly! Start using that power today!

Play, learn, and let your users feel how fun it can be to do tedious work, when you help them achieve more work, with more fun!