The journey is more important than the destination.

As creators of web and mobile experiences, it can be easy to focus on ensuring things work — which is still essential so don’t take this the wrong way — but we often lose focus on how the user perceives the app working.

It’s important to include microinteractions within your application because these can act as the pulse of your app and show signs of life. Even though it sounds counterintuitive, apps that load quickly can almost feel broken simply because there is no perceivable reaction to a user’s action.

In this article, we cover what microinteractions are, why they’re important, and examples of when to use them. Continue reading for an in-depth analysis or jump to our infographic for an overview.

What Are Microinteractions?

Microinteractions are the small or subtle changes within an app that signal a change has been made either successfully or unsuccessfully. Some examples:

An animated check mark can signal a successful user action, such as a successful deposit from a Venmo transaction.

A vibration of the input field can notify the user of an invalid entry, resembling the shaking of one’s head in disapproval.

Microinteractions are important components of the overall user experience because they can visually represent the intended message.

Why Microinteractions Are Important for UX

As marketers, we are well aware of the impact a slowly loading page can have on user experience. In fact, 53% of users abandon a web page if it takes longer than three seconds to load.01

But what about pages that load so fast you can’t tell anything happened?

Pages that load too quickly and don’t show any signs of an update may confound users just as much as a page that takes too long to load.

Let’s use a mobile shopping cart checkout page as an example. The user has inputted all of their information and clicks the final buy button — nothing. Well, not nothing. Actually, the transaction went through, but since there was no microinteraction to indicate that the purchase went through, the customer pressed the buy button again and was charged twice.

Microinteractions can be the difference between a user’s journey ending or continuing.

Microinteraction Examples: When To Use Them

Microinteractions are everywhere.

You react to a post on Facebook and experience a microinteraction. You try to log into your phone with an incorrect passcode, another microinteraction.

Below are some of the most common use-cases for microinteractions:

01. Loading Screens

We’ve already disgust (sorry, discussed) how users feel about waiting for a page to load.

But if users are going to wait, it’s important to dangle the metaphorical carrot in front of them to assure them that the app will (shortly) finish loading. This is where skeleton screens (the templated version of a page shown while it loads) and micro interactions can help keep users engaged while they wait patiently.

micro interaction example from southwest animated to show the loading screen

Slack, for example, occasionally uses skeleton screens and a loading wheel. Slack also does something interesting — they include a thoughtful quote, a helpful tip, or a fun sentence to add value during an otherwise useless loading screen experience.

02. Data Validation

Data validation is the ability to restrict what information is entered into a form field. Consider the common signup form that asks users to strengthen their password with requirements like capitalization, character count, use of special characters, etc.

When a user fails to include a specific required symbol, for example, data validation throws an error message. This error must be resolved before the form field will validate the data and successfully save a new password.

A common microinteraction associated with data validation is a shaking form field or the use of a color-coded alert. We’ve mentioned when an input form’s data validation is unsuccessful, the field will shake like a disgruntled gatekeeper.

Microinteractions example from Robinhood with fingerprint biometric data validation failure

When data validation is successful, however, a green outline, shimmer, check-mark, or another variation of micro interaction will signal to users their password is sufficient to proceed.

Let’s say we want you to sign up for a demo. One of the steps of the signup form is the standard re-captcha from Google. If you successfully prove you are indeed a human (and we can’t be sure everyone reading this is human) you will see an animated green checkmark — a classic microinteraction.

03. Calls-to-Action

This can be in the form of subtle animations drawing attention to the call-to-action button. Let’s assume we want our users to click the buy button. Adding a slight pulse can draw attention without making it overt and aggressive.

Microinteractions example of call-to-action buttons from Twitter to see new tweets