User Experience 101: Microinteractions and the Small Gesture Revolution

Vero Gascó · March 14, 2019

So begins many a detective story: somebody new arrives at a party and the other guests seem to be uncomfortable around them.

There’s something unpleasant about them that nobody can figure out. Then, enter the trusty detective: our protagonist has a much sharper and well-trained eye than the common mortal and knows how to determine what arouses such suspicion.

That tiny, simple detail. The guest had wanted to dazzle everyone with an orchid on their lapel which, sadly, let off a subtle, nauseating smell.

In online design, a lot of the time we run into this type of guest who tires us out or makes us nervous. We navigate with agility and we don’t have time to stop and be a detective. But there was a detail in the design that caused our experience to fail; and so we hop off to some other place.

This is where the silent detectives who know everything come into action: the microinteractions that make the user experience an unforgettable, natural event with no nasty surprises.

Table of contents

1. They are everywhere you look: What are microinteractions?
2. How are microinteractions changing the face of UX?
3. Principles of microinteractions: The best practices are in the details

They are everywhere you look: What are microinteractions?

Put simply, microinteractions are small animations in which design and the user interact, whether it be on a web page, mobile app, software interface or device. It is used to inform the user about an action used to improve their experience, such as read receipts in a chat conversation, the ‘Like’ button on social media, the loading progress bar of a video, a product’s star rating…

Microinteraction example: Upload button. Author: Anton Lapko

Microinteractions are not just great instruments to start an action, but they also keep the user informed of the progress of a request. The old panic of a white (or black) screen and not knowing if an action has succeeded or failed is resolved through microinteractions which constantly indicate what is happening with each click.

The usefulness of these small animations is based in reducing information to a minimalist format, which makes the user’s waiting time more bearable, especially when response rates for each action are requested more and more quickly.

But microinteractions saturate the entire interface design and are able to mirror more actions and offer a uniform experience in every tiny detail, as we will see next.

• Complete tasks more quickly
• Interact with individual elements
• Change application options (basic on/off)
• Create and receive brief information
• Manage in progress processes
• Suggest related recommendations
• Improve navigation or inquiry
• Connect multiple devices

Example of microinteraction for notifications. Author: Paarth Desai

How are microinteractions changing the face of UX?

At this point, recognizing that good design means more than beautiful design should be obvious to developers. But it seems not all websites and mobile applications have digested this truth and, a lot of the time, continue to offer confused or incomplete user experiences hidden behind colours and attractive images.

The best microinteractions are those that go unseen, which indicates two things. One, that the design is so good that the user is able to recognize its functionality and usefulness straight away without an instruction manual or much more than a brief explanation. And more important still, the assimilation period of these microinteractions is infinite, in the way that they immediately are of use to the user experience and they improve satisfaction and therefore loyalty and trust in the app, website, software or device.

Microinteraction of menu that reveals secret buttons. Author: Oleg Frolov

The weight of the word ‘revolution’ may distract from what it really is. What is revolutionary about microinteractions is, above all, the heightened level of effectiveness by means of simplicity.

It is not about a complex design, or a striking animation that begins to get old after using it three times, or trying to be absurdly different to the competition.

The “I’m feeling lucky” option in Google’s search bar and the “Thumbs up” pioneered by Facebook are some of the most famous (and simplest) microinteractions.

Dan Safter, Product Design Leader and author of the book Microinteractions: Designing with Details, describes four phases when it comes to defining a microinteraction.

1. Trigger: The motive behind the microinteraction.
2. Rules: They determine what happens once a microinteraction is initiated.
3. Feedback: The response sent by the microinteraction to the user.
4. Loops and Modes: The loop determines the microinteraction length, and the mode determines if that repeats or changes over time.

Principles of microinteractions: The devil is in the details

When it comes to designing a microinteraction, it is a good idea to bear in mind a few key things or principles which guarantee the most natural integration into global design:

• Use natural and human language: Robotic texts repel a lot of users, and even a couple of badly used words can cause a lot of confusion. Use vocabulary familiar to your users and easy to understand language.
• Design with the user in mind: Deciding where and how to include a microinteraction must always be based on data about the user, contact or platform. This information is fundamental in creating microinteractions and adapting the product to them instead of imitating microinteractions that are not responding to the specific needs of that experience.
• Extract useful data: Show the user information without them needing to access the application or website and save effort online. For example, a company’s email or telephone number from a business directory or search engine or the temperature of a city in a weather app.
• Use long loops: Think how your product adapts over time. What will it be like when it is run the next day? And the tenth time? And the thousandth? Any microinteraction must be able to be repeated again and again without becoming old or cliché.
• A microinteraction is only one action: Each microinteraction should respond to one single request or question. Do not link different animations and actions in the same loop because the user must have the freedom to complete tasks one by one in the order they indicate and prefer.

Microinteraction example: Like button. Author: Anton Lapko

Final thoughts

Microinteractions are part of a good website or app design because they combine the two big goals of any online experience: functionality and entertainment. Offering useful information at the same time as streamlining navigation is the reward any user hopes to receive in exchange for putting time into downloading or opening an app either for fun or out of necessity.

Microinteractions are little gestures which make life online easier and care about the user’s feelings. Because the secret to happiness and loyalty, even on the internet, is too in the details.