Microinteractions in UX UI Design

Microinteractions have become an integral part of UX UI Design. It is a product-moment that is built around a single action, a small piece of functionality that performs only one thing. Additionally, they smoothly blend in with the design and add value to the user experience by providing a more dynamic and human connection. They can also drive an entire product or mostly integrated alongside a larger product.

More than that, it provides those small moments of joy and surprises which create memories of happiness if designed in a proper way, or else they end up being dull, forgettable, or sometimes completely irritating. 

One of the most famous examples would be Facebook’s like button, this microinteraction changed the way people perceived the platform and improved the entire user experience. It was not part of the original design but today it has expanded to a whole set of reactions because it has enabled us to associate emotions with it. It’s not just functionality but rather a huge part of how we communicate with others on the platform.

A similar microinteraction that we worked upon was for a logistics project- Transworld Avana. 

Why Microinteractions work?

Microinteractions add appeal and build a connection between the application and the user. They do so by using an instant action-reaction loop. In everyday life, we are all used to this loop.

• It gives us instant gratification.
• Keeps us informed.
• It creates a sense of assurance.

This acts like a human-to-human interaction because relationships are formed by small meaningful moments that acknowledge one another. We expect all of our actions to be accepted, validated, and reassured. As a designer, recognizing these factors & designing micro-interactions is just as important. We have the ability to create something that feels human at the same time accomplishes a task. For example, the typing indicator in chat windows, hamburger menu, on/off toggle switches, pull-to-refresh, volume control, scrollbars, or autocomplete. Microinteractions make a product or application more human.

“The best products do two things well: features and details. Features are what draw people to your product; details are what keep them there. Microinteractions are those details. Details are a delivery system for emotions. They are the ‘feel’ part of ‘look and feel.” – Dan Saffer, author of Microinteractions: Designing with Details. The best products do two things well: features and details. Features are what draw people to your product; details are what keep them there. Microinteractions are those details. Details are a delivery system for emotions. They are the ‘feel’ part of ‘look and feel. – Dan Saffer, author of Microinteractions: Designing with Details.

Microinteractions are different from features both in size & scope. Features are much more complex and have multiple use cases; whereas, microinteractions are short, simple, and effortless. Instagram feed is a feature, double-tap “heart” is a microinteraction inside that feature. Microinteractions are good for:

• Accomplishing a single task
• Connecting devices together
• Interacting with a single piece of data, such as music volume in a player
• Controlling any ongoing process, such as stop/snooze an alarm
• Adjusting a setting
• Viewing or creating a small piece of content, e.g. hover to view additional information.
• Switch a feature or function on or off

Four Key fundamentals of Microinteractions

Targeting the user’s natural instincts by creating a sense of acknowledgment and encouraging them to keep interacting with the application is a key role played by these microinteractions. This leads to building up a habit loop that keeps getting the user back to the application to perform the same task again and again. This enables the user to understand the working of the application and sets up a mental model that decreases the learning curve. Following are the fundamentals that enable building up of any habit:

Triggers

Microinteractions can be triggered by a number of factors, user action based or system initiated. This helps a user to understand the actions he can perform and their outcome. Moreover, the main points to consider for triggers is to keep the reactions consistent. One action shouldn’t lead to different outcomes every time a user performs it, this might hamper their learning process and lead to drop off. That’s why consistency is the key.

Feedback

Once a user triggers any action and appropriate feedback enables a sense of acknowledgment and keeps the user informed. Feedback can be of various types: visual, sound, vibration, moment, etc. Feedbacks are really important as they enable to build a trust factor between the application and the user. Users might panic if they don’t see any feedback for their performed actions.

Rules

Rules are essential to help trigger micro-interactions at set points in a user’s journey which can help them make smarter & quicker decisions. Additionally, they help interactions to perform properly and enable a higher engagement rate. The best example is a smart way of informing users when they input passwords. Here, upfront feedback helps a user to see if he is performing a correct action.

Loops and Modes

A loop determines the duration and repetition of an interaction based on the trigger. For example, when you finish heating up food in the microwave, it plays a sound. If you don’t open the door, it will repeat after some time to remind you. Similarly, modes help to switch configuration of different functions & interactions adding more flexibility.

The trigger initiates the feedback, the rules define which type of feedback to present, and the loops and modes setup guidelines for edge cases and where and how the interactions will appear.

However, designing microinteractions towards the end of the product design may lead to overlooking the small transitions. If the microinteractions are poorly executed without any consideration, doesn’t matter how brilliantly done, it will always be surrounded by frustration and pain. So, the user experience will suffer. Additionally, The design of our product/application is as good as the smallest part of it. As technologies develop and we see thousands of applications enter the market every day, it’s important for us to take control of these powerful capabilities of micro-interactions. As they add more value to user experience, create better user engagement, and generate more revenue from the application, microinteractions should never take a back seat.