Microinteractions in MVPs & The Habit Loop

As soon as the core features work, startups rush their MVPs to the market for feedback. This is why microinteractions in MVPs often end up being under-designed. However, while MVP stands for Minimum Viable Product, minimum does not have to mean ‘unfinished’. 

In fact, 88% of users visiting a new app say that they won’t come back after a bad experience. What is a bad experience that can drive users away? This is usually an accumulation of small interaction breakdowns. A user pressed a button, but felt confused, “Did it do it?” The form was filled out, but could not be sent, and the only thing it says is “invalid field”. But then, when a user redoes it, another field gets highlighted in red. The user feels annoyed and frustrated. Finally, when the form is sent (registration, subscription, purchase forms), there is a blank page, or the user is brought back to the Home Page. So… the user thinks “Was I successful?” and “What is next?”. A bad experience is often a lack of microinteractions that leads to feelings of uncertainty, frustration, or a perception of a ‘bare’ and unfinished app. 

Another quite substantial point in favor of investing in microinteractions in MVPs is the competitive landscape. The number of templating and no-code platforms is huge. New apps are assembled in a drag-and-drop fashion, where everything is prebuilt. So, considering User Experience (UX), basically, each new app is just a copy with a different color scheme and layout. Here, microinteractions come in as a way to uniquely design and differentiate your app. 

With this in mind, we’ll uncover what microinteractions are, typical microinteractions in MVPs, and the value they bring, including those used in forming habit loops for your digital product.

What are Microinteractions in MVPs?

In the words of  Dan Saffer, a Director of Interaction Design at Smart Design, and a writer of several reputable books, including one on Microinteractions:

“Microinteractions are all around us, from the turning on of an appliance to logging in to an online service to getting the weather in a mobile app. They are the single use-case features that do one thing only. The best of them perform with efficiency, humor, style, and an understanding of user needs and goals. The difference between a product we love and a product we just tolerate are often the microinteractions we have with it.”

For instance, if you have a productivity app and a user has completed all their tasks, how will you handle an empty state of to-dos? A rewarding microinteraction might say something like “All done. Time to relax” instead of “No tasks”. A stylish and playful microinteraction might feature an animation: a character stretches and leaves the screen. 

Or, for example, a user has to confirm something with a code, but enters the wrong one. This situation often causes frustration. But instead of saying “Wrong code”, your microinteraction can say “Not quite right. Try again – we believe in you” and feature an uplifting animation. 

Below, you can see an app’s mascot playing out the microinteraction of confirming the input and storing the password.

When it comes to digital apps, a microinteraction is not a full-blown feature, but a uniquely designed moment to support or enhance users’ interaction with an app’s features. Microinteractions in MVPs can provide feedback, inform about states, and deliver system responses. In IoT apps, a microinteraction can represent the entire user-facing functionality of hardware. For instance, visual confirmation of on/off toggles, lock/unlock, changing settings, etc.

Types of Microinteractions in UX Design for Startups

Most startups create digital products aimed at habitual use. The habit loop concept includes 4 key stages:

1. Trigger,
2. Action,
3. Reward,
4. Investment.

Most microinteractions in MVPs help to simplify usage and increase motivation to perform an action (2). However, we’ll also list interactions that can make users come back to the app or continue using it (trigger – 1), as well as feel rewarded afterwards (3). Finally, microinteractions such as progress bars and checklists help users to go through the investment phase (4), where users need to create something, and by doing so, they enhance the perceived value of the app.

Confirming Microinteractions in MVPs: Action with Responsiveness and Reassurance

These confirm the user’s actions, such as submitting an order, adding an item to the cart, adding something to the favorite list, or unfollowing, etc. Whenever a user triggers a certain action, they need to be aware that the system received this instruction and completed it. This type of microinteractions directly enhances the app’s responsiveness and reassures users throughout. Depending on the significance of a user’s action, they can be either simply stating a fact of completion or providing elevated feedback. For instance, below you can see MailChimp’s microinteraction for successfully scheduling an email campaign. 

Microinteractions for Guidance: UX Design for Startups

For some apps, be it consumer or B2B, it is all about the user flow. For instance, once a user uploads a file or completes a design, it might be suitable to prompt the user to share. So, “Design finished? Share now…” tooltip. 

In SaaS apps, a particular app often has its place in the professional’s workflow. So, unobtrusive tooltips guiding the logical next actions would fit well. After all, before MVP development, founders often conduct user interviews. From these, they can learn the flow of tasks throughout the professional’s day, the task that comes before and after. As such, showing such suggestions would signal understanding of a specific user’s needs. It humanizes the interactions, and users perceive such apps not as mere tools but as assistants. 

Most importantly, guiding microinteractions in MVPs like these are best for teaching how to use the product. For instance, while hovering over an element, a microinteraction can be added to zoom it in slightly and deepen a shadow. It will communicate to the user that the element is interactive and clickable. 

Delivering System’s Message: Trigger of the Habit Loop

Microinteractions in MVPs are also implemented to trigger the next action or use. It can be an invitation to press an icon, updates from friends or collaborators, alerts about price change, and whatnot. 

These microinteractions are part of a habit-forming loop for your product. As such, they have to be inviting but done considering that they will appear every time a user uses an app. 

Error-correcting and Error-preventing Microinteractions: Adding Simplicity to UX Design for Startups

This type of microinteractions in MVPs is all about input validation and input inference. When a user fills out a form, it can be very helpful to provide immediate feedback rather than waiting till a user presses the ‘Submit’ button. The feedback can be as simple as an inline green checkmark or a red X sign. If there is a red X, a user would want to know immediately how to fix it. Immediate feedback like that will decrease cognitive load. After all, a user will not have to recover in memory the previous value, analyze the error message, and then fix it. 

Case Study: TaskRabbit

This kind of microinteractions extends to inferring or pre-filling some values. For instance, TaskRabbit’s early design for a task form was a barrier. Users had to fill out the task form, and it was quite text-heavy. The company had to rethink it, and what they did was add a series of microinteractions. Users are offered to pick large icons, which trigger filling out certain form elements and customizing the next steps. Also, some fields will have suggested values. For instance, the average price for such a task on the platform. 

Microinteractions like these significantly improve usability: the flow becomes smooth, frictionless, and users need to spend much less time and mental effort. And overall, when companies seek to boost usage, there are two main options: increase the ability to use the app or the motivation to use it. Boosting users’ motivation always comes with a hefty price tag. So, increasing the ability always provides the highest Return on Investment (ROI). The easier it is to use the app, the better the experience, and the higher the adoption. With the microinteractions like TaskRabbit implemented, you can achieve greater simplicity. Just consider all the typing that has been replaced with a tap of a finger or a click of a mouse. Moreover, if you need users to provide input on a mobile phone, UX design becomes a critical issue. 

Microinteractions in MVPs for Simplicity

From the Hooked Model, other potential ways to increase the ability to use include: 

• making the app cheaper to use, 
• making it more socially acceptable, and 
• making it intuitive to offline flows or previously used apps. 

Decreasing the price often should be the last lever to try in the attempt to increase adoption. 

Social Acceptance shows up when users consider the opinions of their peers about the action they are about to commit. This is often why some e-commerce shops run microinteractions in MVPs: “Jane from Kentucky is checking out this item” or “ Dave and 15 others have already purchased this course”. This corresponds to the classical issue: What will others think if I do this? When a user feels that purchasing something is what others do too, the decision becomes easier. 

Also, when the actions in the app feel too new, the issue of usage is more about design in itself. So, when you create an MVP, you want the digital product to replicate the offline processes as closely as possible. For example, scheduling a meeting might come with an animation of making a note in a diary. Or, purchasing an item followed by an animation of a mini-version of the item flying into the cart. Animating to-do completion with collapsing and leaving the screen can reinforce the sense of closure as if a user throws away a note with this task off their table. This creates an intuitive and familiar interaction, echoing behaviors users already understand. 

Microinteractions for Empty States: Rewards for the Habit Loop

What do you want your user to do when they enter the platform for the first time? The app might want to invite the user to “Create your first task”. Or, if it is an empty cart: “No items yet, let’s go shopping”. And what happens if the user completes all the to-dos or has no more events for today? As in the screenshot below, there can be a character congratulating the user and offering a CTA with the next action to take. 

This adds to a sense of achievement. And for habit loops, the essential element is reward.

Microinteractions in MVPs for Rewards

There are three reward types that you can create or reinforce with microinteractions:

• Social rewards – with different social counters and highlights;
• Rewards of the hunt – for marketplaces and freelance platforms, highlighting earnings;
• Rewards of the self – for mastery-enhancing apps, even if it is simply having read all of the emails.

Any app aiming for habitual use should incorporate one of these reward types. 

• Social rewards are often the counter of likes on social media, the number of online invitations, or how many people commented on a post. So, the microinteraction can signify either some milestones of gaining social clout or congratulating on another high-value social achievement. 
• Rewards of the hunt will be the earnings or some material gain, which is quite central to marketplaces and freelance platforms like TaskRabbit. 
• Finally, animation about completing all meetings is the reward of the self. Just think how good people feel about clearing the inbox. They report a sense of accomplishment, satisfaction, reduced stress, and increased focus. 

Overall, if you aim for daily use of your app, strategic placement of such microinteractions is a must. 

Handling Loading States with Microinteractions: Improving LTV to CAC ratio

Loading is one of the trickiest parts of interaction with technology. High loading times lead to high dropout rates and undermine conversions. 53% of users leave the app if it takes more than 3 seconds to load. This is why Figma’s loading skeleton and animation are a great example of tackling the issue. After all, Figma’s loading times can be from a few seconds to over a minute. Loading the skeleton screen helps not only to mitigate user frustration but also to reduce cognitive load. How? It is much easier to perceive a gradually unfolding page than when everything jumps out at the user at once. Since Figma’s loading times can be really long, even over a minute, a loading progress bar and an entertaining mini-animation also help to reduce user frustration and create a perception of time passing by quickly while waiting.

These microinteractions directly increase your startup’s bottom line. The more users stick, the higher your retention is and the better is LTV:CAC ratio.

Microinteractions of Progression: Progress Bars and Checklists

Nowadays, the onboarding process is ubiquitous, especially among SaaS apps. Digital solutions often require a certain learning curve to get to the value. Onboarding helps to teach users how to use the product in a step-by-step manner. Onboarding that is thought out well and supported by helpful microinteractions can help reduce user churn by 25%. This is a quarter with more users who increase your startup’s LTV.  Two helpful microinteractions to assist with it are progress bars and a checklist. Sometimes, they can be used together. A checklist gives a sense of accomplishment, while a progress bar manages users’ expectations in terms of how much more effort is needed.  

Final Words

Microinteractions can be considered a key to success. They can help form user habits around your digital product, improve your bottom line by increasing retention, and consequently the LTV to CAC ratio, as well as improve the usability of your product. Microinteractions often help show users that the app is done with understanding and anticipation of their needs. By decreasing the cognitive load, microinteractions can help boost user engagement. And while user engagement can be increased through simplifying the use or increasing motivation, the simplification results in a higher ROI as a rule. To reiterate the words of Dan Saffer:

“The difference between a product we love and a product we just tolerate are often the microinteractions we have with it.“

FAQ: Microinteractions in MVPs & The Habit Loop