Microinteractions are subtle moments centered around accomplishing a single task. Almost all applications around us are filled in with microinteractions. Here are just a few examples:

Confirming an item is added to cart
Use pull-to-refresh to update content
Interface animation that confirms an action (e.g. toggle button)

Every one of these tiny moments forms a microinteraction. We often don’t focus on them, but we can feel there presence. These tiny moments add up to design to enhance your user experience by making the user interface less machine and more human.

In this article, I’ll desribe 5 useful techniques for microinteractions and provide some helpful examples.

1. Create a Habit Loop

Microinteractions have the power to encourage users to actually interact. They are a strong instrument that helps to form habit loops. Habits are formed when people perform the same actions repeatedly and consists of three elements:

Cue — Trigger that initiates action
Routine — In response to the cue, you perform an action
Reward — A benefit you get from completing the routine, reason for completing action

Image credit: wikia

Facebook’s notification about incoming message is a good example of habit loop: red badge and whitened icon (*cue*) indicate there’s a new message, which makes the user click the icon (*routine*) to chat with their friend (*reward*). After a while, users automatically click on icon when they see the red badge. ![](/content/images/2016/12/1-KmTQoQ3swQfd4-y1AuVQyw.jpeg)

Microinteractions are the secret ingredient when it comes to creating an addictive app.

**Tip:** *Rewards fuel our motivation.* The stronger the reward, the more stronger the habit becomes.

2. String Together with a Theme

Mictointeractions should be natural part of your design — you should create a unifying theme where all interactions (micro- and macro-) are tied together. Follow two simple principle:

Continuity. Animate the transition between different states of the object so that transition looks smooth, not discontinuous.

Image credit: Cam Runcie

Predictability. Well suitable microinteractions make it possible to set expectation and help make sense of information for your users.

Image credit: Leo Zakour

![](/content/images/2016/12/1-rhRgTV0UnxguZqwXo_BeDA.gif)

Image credits: Matt D. Smith

#3. Use Animated Feedback Animation can contribute heavily to the user experience if used correctly. Both *functional* and *delightful* animations can be used to deliver a feedback:

Functional animation reduces cognitive load, prevents change blindness and establish a better recall in spatial relationships.

Image credit: Tamino Martinius

Delightful animations make microinteractions more fun, and the motion attracts attention and brings user interface to life.

Image credit: Chris Bannister

**Tip:** *Keep longevity in mind.* Will the animation get annoying on the 100th use, or is it universally clear and unobtrusive?

4. Use Humor

Humor in interaction, no matter what the scale, is a sure way to bring emotional reactions into user experience. For example, MailChimp, a web service for creating and sending emails, rewards users for creating and scheduling their first e-mails by adding unexpected humor and positivity throughout the process. By adding small and delightful surprises throughout the user journey, MailChimp makes sending e-mails a lot more fun.

MailChimp’s confirmation view for email campaign uses light humor to ease a tense situation

The design should communicate emotion in all its forms.

Tip: Use a human voice. A quick way to make your UI warmer and less mechanical is a human tone in the copy.

5. Avoid Unwanted Interactions

Make sure the visual cues and animations are appropriate .It’s a common mistake to overload UIs with microinteractions or to create too complex interactions. The later can be seen in example below — it’s a beautiful but impractical interaction.

Having the blob fly across the screen, everytime user scroll through the chats, can become a little annoying after a while. Image credit: Jakub Antalík

Remember, less is more with regard to microinteractions. Anything that if removed would make a cleaner UI is almost certainly a good idea. So when designing our microinteractions we should focus only on practical things the microinteraction does for the user.

Tip: Use KISS principle for your design. Microinteraction is supposed to be small and simple. Don’t turn your microinteraction into a macrointeraction.

Conclusion

In UX, what matters is how you deal with users and how they feel when using the product. Even minor details deserve close attention, because attention to each and every detail is key to your success making human-computer interaction easy to use.
Thank you!