Microinteractions: Tiny moments to delight users

Don’t we like to appreciate small and little things in life?

A good gesture, passing greetings, a smile while we pass by, a tiny gift/postcard, or a simple way of showing gratitude for others. 

Call your cat or dog, and they too respond to you in their style.

Ever wondered if the same interactions were shown by the apps that we use? Yes, we are already experiencing and enjoying these gestures created by our apps. 

Say hi, to Alexa or Siri they greet you with a beautiful message with a soft tone, same as humans do. Here is a more commonly used example Emojis.

 

Emojis have changed the world. We quickly pick one according to our moods and likes. The like and dislike buttons on YouTube; the bouncing green button when you get a call on your mobile; a progress bar turning circular to indicate image upload. All these tiny moments are interactions planted by the UX designers to delight users.  

Most of the products we interact with use microinteractions. Some examples are,

1. Visual representation of a new item added to the cart.
2. A plant growing into a tree represents financial savings.
3. Simple toggle buttons or animations that guide the user on what needs to be done. 
4. A beep when you receive a message on the phone.
5. Coffee is ready to be served.

These tiny moments are planted to delight users. Although the user may not focus on tiny images and animations, they feel its presence. A well-designed microinteractions can enhance the user experience and make the interaction feel more human.

When to use Microinteractions?

The use of single tasks based engagement is for many reasons:

1. Task accomplishment: 

As the user completes a task successfully, a display of micro-interaction can make a delighting moment. For example, no one would like to debit their amount, but as the thumps-up image bounces indicating your payment is successful, the user is satisfied with the transaction.

2. Modifying settings: 

Microinteractions used while you modify the settings like volume or audio settings are standard. The bars give a better idea of how much volume is increased or decreased. Similarly, as you change the brightness or the contrast, the movement of the simple bar indicates the level. 

3. Giving feedback:

The first heuristic of UI design, Jakob Nielsen’s states“ The system should always keep users informed about what is going on, through appropriate feedback in a reasonable time”. 

 

The app should not allow users to guess but be transparent about the status of the system. Use microinteractions along with the feedback statement, so the user knows the system status. Example: microinteractions for the incorrect password, successful login, or deleting an item, contain the interactions with a small statement about action. 

4. Controlling a process:

Microinteractions are used to control the process or user flow. For a continued logical process, each step in the process can be made conformable with animations while the user transits between the states and pages. 

In case the kids or elders are the users of your app, microinteractions make more sense as they guide your users on what step they need to perform next. Slowly you make them learn interactively.

5. Turning signal on/off:

Beep sounds or singles while turning the machines on and off are helpful to the user. The user hears and understands the process has started. For example, greetings offered by robots when turned on to perform their tasks or the sound as your windows system starts up.

6. Supporting error- prevention:

Microinteractions provide support for multilingual apps, you don’t need to convert your error messages into different languages, though you can write down a few words. The picture and interactions send the right message to the users about the error or to take a particular action.

 

7. User guide:

In recent times heavy usage of microinteractions in the apps created for elders and kids is observed. These microinteractions are to guide the user to take the correct path.

Let’s take an example of a kid’s app. As the child places an incorrect alphabet in the given box, the red signal, beep, or gesture of “No” makes the kid understand the alphabet is placed in the wrong position. Selecting the right alphabet projects the green signal, allowing the kid to choose a gift, a clapping gesture by the toon gives a feeling of accomplishment and happiness to the kid. 

Microinteractions: Thoughtful interactions

Users start thinking when they see or feel the carefully crafted micro interactions. A sense of accomplishment for the child or the financial growth represented by a plant turning into a tree induces multiple thoughts to the users.

1. A user knows what is happening while the micro interaction is displayed. 
2. Users can imagine the consequences of their actions.
3. Sometimes he might be aware of other alternatives or options. 
4. Microinteraction can make him wait without displaying any number of sentences.
5. As the screen changes, the user understands the user flow. 
6. Serious tasks can be made humorous by introducing a funny clever joke.
7. The next step is clear to the user. 

Ways to create micro-interactions:

As microinteractions are awesome, beginner UX designers get overwhelmed and the incorrect addition of microinteractions can lead to a disaster. Here are the quick tips to follow while you add them to your design. 

1. Considering the 4 parts defined by Dan Saffer while creating micro interactions. As they have an impact on user engagement, they encourage the users to interact more. 
2. Avoid distracting the users from their tasks as this will confuse them. 
3. Use when necessary and in a meaningful way, like to provide feedback or during the transition.
4. Make the tone of sound with the interaction used as this creates the effect.

Nutshell:

Microinteractions are used for humor, to guide and inform the user while they act on one particular task. Using the right way can support branding, and sometimes it becomes the signature moment like Google’s “Feeling lucky” or the Like button of Facebook.