We stand with Ukraine and our team members from Ukraine. Here are ways you can help

Home ›› Consumer products ›› How You Can Improve UX with Microinteractions. Part I

How You Can Improve UX with Microinteractions. Part I

by Sergey Gladkiy
6 min read
Share this post on



Microinteractions are the small moments in UX that can be boring and easy to forget, or exciting and engaging.

Working in the design business taught me to pay attention to the organization, the system, the country — the “Big”. At the same time to have an ear for the individual, the person — the “Small”. To work successfully, I have to harmonize what the “Big” wants and what the “Small” wants. I believe, that bringing together the Small helps facilitate and create the Big. And that’s what microinteractions are all about.

Design can solve small, universal and overlooked problems and these really little things have a huge amount of impact. Microinteractions are the small moments in UX that can be boring and easy to forget, or exciting and engaging. They are everywhere: in the gadgets we carry, the appliances in our house, in the apps on our phones and desktops.

What is Microinteraction?


Facebook’s “Like” is an example of the successful microinteraction. If Facebook came out with a product that didn’t have a “Like” button, you would think, “Why did they get rid of the ‘Like’ button?” Microinteractions are what happens when people use small pieces of functionality that exist in a place of larger features.

Microinteractions can be part of a product — or even the product itself. For example, a toaster does nothing but one thing: it toasts. It only has one function: you put sliced bread into the toaster and press the button. That’s easy. A toaster is a device which produces a single microinteraction. In a similar way, small apps can be made up of one microinteraction alone.

Microinteractions are all about interaction and details of a product. And details aren’t just the details; they are the design. The difference between a product with friendly UX and a weird product is often in the microinteractions.

Microinteractions are based on user-centered design approach, where the user is in focus. A lack of attention to a tiny detail can quickly set off a domino effect of discontent among your customers.

А. Definition and Types


B. Effective Microinteraction: Do’s And Don’ts

For example, too much animation will “blur” your hierarchy, and your message will be lost. Sophie Paxton explained this in her article “Your UI isn’t a Disney Movie”:

“You wouldn’t make every sentence of a document into a heading. The same principle applies to animation. Consider every animated element in your UI to be the equivalent of a heading in a written document. It should be used to signal the importance of an element.”

When you create a visual design containing microinteractions, follow these principles:

  • Make UX microinteractions invisible and functional. Make sure micro animations don’t feel awkward or annoying. Common and minor actions demand modest response. Occasional and major actions need a solid response.
  • Keep long-term use in mind . What seems fun the first time might become stressful after repeated use.
  • Follow the KISS principle (keep it simple, stupid!). Over-designing a microinteraction can be a problem, causing a long loading process.
  • Don’t start from zero. You always know something about your target audience and the context. Use this knowledge to make your microinteractions more effective and powerful.
  • Create visual harmony with other UI elements. Pay attention to the details to create a delightful microinteraction.
  • Absorb Complexity. Figure out where the core complexity lies, then decide which parts of that the user would like to have, and when.
  • Coordination. Don’t forget about physical principles. Human eyes have special mechanisms for seeing lines. According to Fitts’s law, we may be better at seeing horizontal and vertical lines than oblique lines or circles.
  • Evolution. Your micro-animation should not behave the same way each time it is used. If you want your design to shine, you need to keep things interesting.
C. The Structure Of Microinteractions



Another kind of trigger is the system trigger. The system triggers set up once a particular condition or set of conditions is met. The most effective system triggers predict what the user wants, based on the users’ activity data.


Every time you get an email and Google thinks the message may be a phishing email, it shows a fishing hook rather than a profile image.


Turning on a light is the simplest microinteraction. Once you use the trigger (a light switch), the light turns on. There’s one rule: the light stays on till the switch is turned off.


Rules determine which action happens, and in which order — when the user pushes that button or when a message arrives. The rules shouldn’t feel like rules. They are invisible and direct users through the ‘interaction’ part of the microinteraction. Users want a feeling of natural flow from the trigger to rules to feedback.



With a little bit of humor or edge, feedback will add personality to your microinteractions. Less is more — the least amount of feedback you can provide, the better. An extra trick with feedback is to use the neglected elements. Designers already have a lot of UI chrome to play with, so why add one more element on screen? Use the ignored — the cursor, the scrollbar, a button state — to convey more of what’s happening.

Loops and Modes

So, triggers initiate the microinteraction, rules determine how it functions, and generate feedback, and the loops and modes specify what happens over time with the microinteraction.


Why Do Microinteractions Work?

Jakob Nielsen developed ten general ideas for interaction design, which are called “heuristics”. Visibility of system status is the first User Interface principle. The device should always keep users informed about what is going on.

Microinteractions are used to provide the right feedback within a reasonable time. Often they take the form of micro-animations within the larger interface hierarchy. Really helpful are micro-animations in a slow mobile interface.

With the assistance of micro-animations, the user will see the elements of the interface. They create a focus of attention and save time, without distracting the user.

UX microinteractions work because of the user’s natural desire for acknowledgement. The users instantly know their action was accepted and get a visible reward. Similarly, microinteractions will guide users on how the device works.

If you care about UX, you should care about microinteractions. Take what is boring and rework it into something users will enjoy. There are three ways of working with microinteractions:

· look for them and focus on each apart;

· reduce a complicated feature to a basic microinteraction;

· treat every feature as a set of linked microinteractions.

Blending Microinteractions into Your UX

In the edge of AI and self-driving cars, we need the microinteractions that can make large systems more humane. In the next part of the article, I will discuss practical UX cases with their implementation. It will show how microinteraction offers a relief while solving some small and discrete problems.

This article was originally posted on the Product Tribe blog.


post authorSergey Gladkiy

Sergey Gladkiy,

A multi-project designer with a natural feel of UX. Loves animation, mountain hiking and sharing his experience with the design community in his articles.


Related Articles

Article by Alipta Ballav
From Design Thinking to AI Thinking
  • The article outlines a paradigm shift from Design Thinking to AI Thinking, emphasizing the integration of LLMs into various sectors to enhance problem-solving through conversational interfaces.
Share:From Design Thinking to AI Thinking
2 min read

My story of how I dived deep into UX when creating soft toys from scratch without even realising that…

Article by Anastasia Damanchuk
The Parallel Journey of Physical Product Design and UX/UI Design
  • The article highlights the author’s realization of the parallels between physical product design, particularly in the creation of soft toys, and UX/UI design, showcasing how principles like research, prototyping, teamwork, and empathy are fundamental to both domains.
Share:The Parallel Journey of Physical Product Design and UX/UI Design
3 min read

Stories from a seasoned job-hopper; amidst layoffs, challenging hiring conditions, and the pursuit of professional purpose.

Article by Melody Koh
How I Know When to Quit My Design Job, Every Single Time
  • The article delves into the intricacies of knowing when to quit a design job, drawing from personal anecdotes and broader observations in the industry.
Share:How I Know When to Quit My Design Job, Every Single Time
15 min read

Did you know UX Magazine hosts the most popular podcast about conversational AI?

Listen to Invisible Machines

This website uses cookies to ensure you get the best experience on our website. Check our privacy policy and