Micro-interactions

What Are Micro-interactions

Micro-interactions are small animations intended to assist a user with visual indications. They are generally short, seemingly insignificant animations that have a big impact on the experience a user has.

They require two things:

1. A trigger - this is usually some form of event triggered by the user such as clicking or hovering over a certain part of a page.
2. Some Feedback - this is a small targeted response to the given event.

Let’s take a look at a simple form as an example to see what this means.

The form

The example form will involve two elements - a checkbox and a button. The checkbox will be required for the form to be valid. This is common in consent forms to confirm a final statement such as:

1. The user is over a certain age
2. The user consents to data being sent to third parties
3. The user has read the terms and conditions

These forms are all over the web and are most often seen in registration forms when creating a new account on a website.

With the form and conditions designed, let’s have a look at it.

Simple right? But something is missing that would make this form special.

Let’s add the micro-interactions to make this form feel good.

Micro Interaction 1 - Disabling the Button

It might seem like nothing special but just disabling the button is the first micro‑interaction. In this case, the interaction could be defined as:

1. Trigger - the user checks or unchecks the box.
2. Response - the button is enabled or disabled.

Let’s see how the form feels now.

That is a better experience, but I feel we need to keep going for this to become something special.

Micro Interaction 2 - Updating the text

There is nothing more frustrating than a disabled button but not knowing why or how to enable it, so to prevent this frustration it is always a good idea to provide more detail about a disabled button so the user can understand why it is disabled.

The simplest way to give this description of the button itself, but it’s also fine to provide it near the button.

With that, our experience is better, but I want to highlight the button state change a little more when the interaction that causes it occurs. This is because disabled buttons are usually faded and not easy to spot.

Micro Interaction 3 - Wiggle the button

This is where we move away from normal HTML interactions into something that gives some feeling to the form. What I would call the extra step that takes something from functional to special.

All that we will do here is add a little wobble animation to the button when it becomes disabled to draw the eye and let the user know that they have caused the button’s state to change.

Have a go!

See how this feels different?

Such a small change has made a big impact on how the user experiences the form. This is what micro-interactions are about. In every page you make you should look at what interactions may improve the user experience without too much effort and build them in to make something special!

PS - Going too far?

While writing this I wanted to give a nice interaction when successfully clicking the submit button but I think it went a bit far - you be the judge.

What to read more? Check out more posts below!