Have you ever wondered what makes some users stick onto a page more than others? What makes the application / website so attractive that these users spend a lot of time on that page? What factor is considered there?

Keeping that thought aside, there are a few other questions which arise in our mind. Hypothetical, to be precise. How about when we communicate with a person in “real-life”, and we have an option to see whether they like what we are talking about or not? Maybe a like button would pop up near their head? Would that be possible?

You must be wondering what the hell she is talking about, right? Okay, answer this. What does that like button actually mean? It indicates that the person shows a gesture, that they like what I’m talking about. Disclaimer, I’m talking about “current reality”, which seems so real but only in digital life.

How does a ‘like button’ make so much sense? It’s just a button which cannot talk but can react, so that we understand what it is trying to say. This reaction is called Micro-interactions. In this article, we’ll learn about micro-interactions, how it works and how it helps to improve UX. And also, we shall understand how micro-interactions help users to stay on a page for a longer time.

Before we understand micro-interactions in detail. Let me point out a few examples of it, which we engage with everyday but don’t notice. Every time you change a setting on any device, sync data, log in, or even a simple alarm, you are engaging with a microinteraction. They are everywhere around us. In the device we carry, the appliances in our house, the apps in our electronics, even embedded in the environment we live and work in.

For Example: Pulling the string of the rotating fan, pressing the button for screenshot, sensor faucet for hand wash, etc.

What are Micro-Interactions?

According to Dan Saffer, designer and author of the book Microinteractions: Designing with Details, Microinteractions are “contained product moments that revolve around a single use case”. While this sounds too formal and boring, Microinteractions are small moments where the user and design interact.

They are the small or micro details that help you smile a little bit. But most importantly, they help you to achieve the overall experience of what you are working on. They inform you what’s happening on the app or the website.

When they are well-designed, microinteractions enhance your experience with the design. When they are poorly designed, they spoil the overall experience. They are mainly introduced to provide a warm and human-like atmosphere for you. It can help the user to feel a connection with the brand that will keep them coming back.

The difference between a product you love and a product you tolerate is often the microinteractions you have with it. Even though Microinteractions are in our surroundings, we don’t usually notice them until something goes wrong.

For example: Think of the Like button of Facebook or Instagram, a pull-to-refresh action, or the typing indications in a chat window. It has become a part of our life. But when do we notice it? We notice when they don’t give any reactions or when they don’t work. When the like is not registered, the screen doesn’t refresh or even when the person doesn’t reply (here, it might be your mistake :P). How would you feel? You doubt yourself.

Microinteractions are normally small in size and nearly invisible but incredibly important. They are normally animations, which makes our lives easier, more fun, and just more interesting. The best example is Google Assistant. First, the four dots float and when you start talking, it turns into waveforms according to your pitch. It is useful because you don’t have to doubt whether the phone is listening or not. While you are talking, it lets you know if it is listening.

This little touch is not very noticeable but it’s a nice, extra level of detailing that confirms and shows us what’s exactly happening there. It is important that a well-designed microinteraction should pass information or feedback to us. Feedback includes informing us if the operation is successfully completed or not. Basically, it helps the users to visualize the result of each action.

The most common example I could think of is when you scroll a page down or up, you might have seen the scroll bar dragging along with you, right? It lets you know how many pages you have left to read. That’s the feedback we are looking for.

EXAMPLES OF WELL-DESIGNED MICRO-INTERACTIONS

 

EXAMPLES OF POORLY DESIGNED MICRO-INTERACTIONS

 

4 Parts of micro-interactions

The most significant element of micro-interactions is that they exist for the benefits and enjoyment for the users. When businesses pamper and put customers first, they create an experience so enjoyable that they will keep coming back for more. The same applies to the digital realm. Attention to detail is what transforms an ordinary website or application into a memorable experience. They are playful, fun, and engaging ways to do this.

Most microinteractions go noticed, but when orchestrated well, they can create a very enticing UX. Every time there is an action from you and a reaction from any device or medium, a micro-interaction occurs. This leads to your understanding of the 4 steps of micro-interaction which are Trigger, Rules, Feedback and Loops.

A Trigger initiates a microinteraction. The rules determine what happens, while Feedback lets people know what’s happening. Loops or Modes determine the meta-rules of the microinteraction. Let’s now discuss these in detail.

The Trigger

A trigger is the action taken to initiate the micro-interaction, it could be a button tap on an interface, a switch turned on or off, or a pull-to-refresh on a screen. These are usually initiated by the users. But they can also be system initiated, for example, when you don’t turn off the alarm, the snooze automatically sends you a notification to turn the alarm off. The initiation depends on the purpose of the action and the end goal.

Rules

The rules of a micro-interaction set a parameter including the change that should happen and the duration of the interaction itself. For Example: When you like a picture on Instagram, the rule would change the colour of the heart icon from grey outline to filled-in red heart. Rules also decide for how many seconds the heart should pop on the screen.

Feedback

The feedback is the action-time of the whole micro-interaction. Anything you see, hear, or even feel (vibration) during and caused by the interaction is the manifestation of the feedback. It is an alert for the users. It lets you know what’s happening in the process. Good feedback can add personality to the micro-interactions.

Loops and Modes

Loops and Modes determine any change that should happen to a micro-interaction if the conditions change. A good example of this is when you finish a load of laundry, your washing machine will play a sound and if you don’t open the door, it will repeat again to remind you. That makes you reminded that you have clothes to hang. It is equally important to understand that not every microinteractions needs to be repeated.
Now that we have a good idea of what micro-interaction is, let’s now discuss some interesting examples and check whether they are micro-interactions or not. Try to compare and contrast.

Digital element	Is it a microinteraction?	Reason
Scrollbar	Yes	User triggered; visual feedback to user changing location within a page
Digital alarm	Yes	System triggered; auditory (and visual) feedback to time condition being met
Button	It depends	If there is no feedback when a user clicks the button, there is no microinteraction
Pull-to-refresh animation	Yes	User triggered; visual feedback to a user action
GIFs	Yes	Not triggered by the system or a user
Swipe animation	Yes	User triggered; visual feedback that a user has swiped an element
Email notification	Yes	System triggered; provides user with feedback that a new message has arrived
Video player	Yes	Feature, not a microinteraction; volume control within the video player would be a microinteraction

Why are Micro-interactions important?

An enjoyable experience means more than just usability. It needs to be engaging, and that’s where these “micro”-interactions play a ‘macro’ role, by positively contributing to the look-and-feel of a product or service.

They facilitate easier interactions with the users. They are important as they enhance user satisfaction by providing accurate, immediate feedback about any action. They also help the users with helpful tips and on-screen suggestions.

Microinteractions help to optimize the navigation on the app/website to a great extent. Thanks to micro-interactions, users can share,comment and like content and engage more effectively.

1. To Display System Status

Due to the immediate feedback created by micro-interactions, users begin to slowly learn how to work with them. For example, take the example of Google Assistant again. When we alert the device by saying ‘Hey Google’, the microinteraction is triggered with the user’s command of ‘Hey Google’. The feedback is the visual audio waveform, which tells the user that the system is listening and waiting for further information.

2. To Provide Error Prevention

Due to great navigation, they smooth the user’s path through design, making each step easier and reducing the errors. For example, when we are completing a form to reset our password. In the field of new password, we type “newpassword123”. And in the next field, we retype the new password, “newpassword132”. Now the second field turns red, showcasing the typed content is wrong. This is a micro-interactions triggered by the system and provides feedback to the user to fix the problem before clicking the submit button.

How does Micro-interactions improve ux?

When designing a product, there are many ways to improve the user experience, including defining personas, well-structured information architecture or thoughtfully written content. They are triggered- feedback pairs.

They can be triggered in 2 ways. Firstly, they can be triggered by a user interacting with a button, or performing a gesture or voice command. Secondly, Micro-interactions can be triggered by a system, when the system meets a certain set of conditions. Once the micro-interactions have been triggered, they then provide some kind of feedback to the users. Example: Phone vibrations or dings when new messages come which are often initiated by the system not while the user interacts with it.

How does micro-interactions help UX? Some say it improves from a simple navigation path to adding profile info, it seems so effortless and smooth. It provides quick feedback helping users to know what they are dealing with. Most importantly, they help to add overall human feel to the app or website.

Let’s understand how micro-interactions can improve a product’s user experience in detail now:

1. Boosts User Retention

Micro-interactions help to improve the overall atmosphere of the user. When they are done right, they help to release the happy hormones in the user’s brain, and make those moments beautiful. These moments will reflect in the user’s experience, by increasing the likelihood towards their products, which in turn boost your retention rates.

2. Enhances Branding

Colours, designs and fonts are always fun and attractive. This can be done effectively through the use of micro-interactions. Most people remember a brand through these colours and fonts. These small-moments will give us an opportunity to establish your brand personality, making a better impression on the users.

3. Boosts Usability

When micro-interactions are done right, it can tremendously boost usability. This is because they provide the user with constant feedback. They let them know what the system is currently doing, and acknowledge when their actions have been successfully registered by the website or the app. Thereby, the whole UX becomes more interactive and memorable.

4. Encourages Engagement

Micro-interactions always create an emotional bond with the users. If you design an experience that brings delight to the users, it’s like giving them something extra. This will keep them coming back. Ultimately, micro interactions increase user engagement at a relatively low cost.

5. Saves Time

Micro-interactions are fast, small and simple. They give feedback and they always follow the rules, so the users know what to expect. Micro-interactions can save user’s time by instantly communicating information in a way that doesn’t bore or distract the users. They catch the user’s attention briefly and then fade away.

If you’re interested in discussing your design needs with a design agency in this fast-changing world of creativity, please email hello@marvelloux.com to reach us.

What blew your mind while reading today? Comment below!