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.