UI/UX DEVELOPMENT

The Secret to a Great Application: Microinteractions

Aug 22, 2019

Blogger-Picture
Umesh Kumar
UI/UX DESIGNER
Blog-Banner

Small things in life. Don't they excite us all? That random compliment, the coin on the street, the sudden run-in, all of them are truly the little things that keep us happy.

Design is at its core a highly human-centric endeavor. Every application is trying to retain and gain users at every given point of time. Once a person is on your app how do you keep them? Details. That is what retains a user. Great experience is more than just usability.The little touches of personalization that please the user is what retains them in the end.

Despite being exactly what they are described as i.e. 'Micro' they have the power to make your experience human and effective while still maintaining the natural flow of the product.

What Are They?

Essentially microinteractions are product moments that accomplish a particular task. First coined as a term by Interaction designer & author Dan Saffer in his book Microinteractions, these typically fulfill the function of

  • Communicate feedback or the result of an action.
  • Accomplish an individual task.
  • Enhance the sense of direct manipulation.
  • Help users visualize the results of their actions and prevent errors
heart-icon-pop-effect

UX design is also deeply rooted in the psychology of the users. You are constantly trying to get your user to interact with your application and this creates that little moment of feedback which greatly satisfies your user.

Understanding The Breakdown

Every microinteraction is only as effective as the structure assigned to it. There are 4 essential parts of a microinteraction

heart-icon-pop-effect

Trigger

Research helps design better. It's a fact. You are at the end of the day trying to design a product that people would actually use. The mantra in the UX world has always beensome research is better than none.

This is the initiation step. Further categorized into two types .

  • User Initiated: the user performs an action that sets into motion the microinteraction.
  • System Initiated: The software takes into account certain qualifications and initiates the microinteraction. A floating icon is a good example of a trigger.

heart-icon-pop-effect

Rules

This is what determines the action that the interaction will be fulfilling

Feedback

Rules for most cases are not seen by the user but what they do see is feedback. This is anything that the user can see, hear or feel.

heart-icon-pop-effect

Modes and Loops

This is what defines the meta-rules of the microinteractions. Loops define how long it will run and modes deal with data that needs to be put in for completion of the microinteraction.

heart-icon-pop-effect

Why Are They Important?

To stand out in an ocean of endless applications it is important that you build with consideration. These micro integrations are the difference between finding a permanent home on someone's phone to being uninstalled in a minute

Provides Instant Feedback

Every interaction ensures the user that the action was accepted and gives them confidence in further usability of the application.

Visual Rewards

The effects enhance a user's experience to keep them engaged.

Focus and Manipulation

These interactions attract attention, to a mostly static screen highlighting the CTA and making your application more effective.

Building Brand Identity

Every brand's lifeline is their recall value and even with these interactions a brand story and expectation can be created.

Types Of Microinteractions

The beauty of microinteractions is that they can be placed in a variety of places, performing a variety of actions. Some of the most common ones have been highlighted below.

Swipe

This interaction removes the need for scrolling endlessly through pages and is a much more interactive way to connect with your users. it enables them to switch between tabs easily and effectively. A popular example of this interaction is the popular dating app Tinder where people swipe through profiles.

heart-icon-pop-effect

Data Input

Getting a user to input data is essentially one of the toughest parts for any designer. The suggestion for password strength and make it easy for a user to stay on target and complete the goal of the action.

heart-icon-pop-effect

Animations

These keep the interface interesting and increase the user's engagement with the application while maintaining some level of interest and general curiosity.

heart-icon-pop-effect

Instructions

Interactions can be further used to act as a guide for the application. This simplifies the learning curve for the user operating your application.

heart-icon-pop-effect

Call to Action Interactions

This nudges the user to interact with your application. There is a sense of fulfillment that is associated with the completion of a CTA for a user.

heart-icon-pop-effect

A good microinteraction can help the overall design of your application to be fluid. Like it was mentioned in the opening paragraph it is the small things that keep a human happy, why should the principles of using an app be any different?

Microinteractions might seem like a very small part of the design of an application but with the combination of an overcrowded market and constantly evolving technology, it becomes important that you pay attention to the small aspects too or you might just be another face in the crowd.

Blogger-Picture
Umesh Kumar
UI/UX DESIGNER