Micro-interactions And Their Role in UX Design

Daniël Verbaan
Apr 7, 2020 · 6 min read

While micro-interactions often go unnoticed by the user, it is really important to keep them in mind as a designer. While users encounter micro-interactions multiple times a day, they tend to go unnoticed. And don’t get me wrong, a good micro-interaction is supposed to go unnoticed. Within most designs, there are places where a little animation and feedback go a long way towards enhancing the user experience.

What are Micro Interactions

Microinteractions are defined as small moments where the user and the design interact. They have a single purpose; to enhance the experience the user has with the design. When they’re properly designed they create a moment that is engaging, welcoming and almost human. But when they’re badly designed, they will damage the user experience.

As stated by Dan Saffer, author and designer of the book Microinteractions: Designing With Details, micro-interactions are “contained product moments that revolve around a single use case.” They’re the types of interactions that you barely notice until they aren’t there anymore.

Micro-interactions can be broken down into four parts:

Trigger
A trigger initiates the micro-interaction. These can be initiated by the user or can be initiated by the system. In the last case, the software detects if certain qualifications are met and starts an action.

Rules
The trigger engages the rules. These determine what happens during the micro-interaction.

Feedback
The feedback lets the user know exactly what’s happening. Anything a user sees, hears or feels during the span of a micro-interaction is considered feedback.

Loops & Modes
This part determines the meta-rules of the micro-interaction. It determines the length of the micro-interaction, if the user needs to change it over time and what will happen to the micro-interaction when the conditions change.

The Importance Of Micro-Interactions

Why should we care about micro-interactions if they are small, often unnoticed, design elements? Well, sometimes during the process of creating a product, designers tend to forget what their main goal really is: to change the way humans behave in a positive way. Digital products are designed to be used by people, preferably more than once. You want your user to use your product often and repeatedly, kind of like a habit. Habits are what change the behavior of humans, and micro-interactions help humans to form habits.

When you find opportunities for micro-interactions in your design, you find a potential reason for your user to keep returning to your product. Features bring a user to your product, but the details make the user want to stay.

Well designed micro-interactions meet the user’s natural desire to be acknowledged. They increase user engagement at a relatively low cost. If you are able to design an experience that accomplishes a goal or a task while providing a bit of delight and acknowledgment in the process, you’re giving the user their cherry on the cake. That’s what makes a returning user or visitor.

How and When To Incorporate Micro-Interactions In Your Design

While designing micro-interactions is exciting, it is really important to make sure they don’t break your user experience flow. Here are three things to keep in mind when designing micro-interactions:

Keep them consistent
Because we are all interacting with micro-interactions on a daily basis, those interactions should stay unnoticed as much as possible. This may seem like a hard task at first, but if you take time to plan out your product and create micro-interactions that you can use multiple times, your users will love how intuitive they are. Surprises can hurt the user experience and consistency will prevent this.

Keep it simple
As I explained above, micro-interactions need to go unnoticed as much as possible. While consistency helps you achieve this, simplicity is really the make or break for good micro-interactions. If the micro-interactions are too complex it can frustrate the user, instead of giving them a feeling of acknowledgment. You need to focus on adding meaning and value instead of gimmicks and trickery.

Make It Purposeful
You have to think about why you are choosing a micro-interactions each time you prototype one. Keep the message you want to convey to the user in mind and don’t forget the true purpose of a micro-interaction. As a designer, you can often fall in a rabbit hole of creativity, where you do things just because to look pretty. Abundant elements will break the flow of your product.

When you keep these three ‘rules’ in mind during the design process, you are ready to start creating micro-interactions. In the UX/UI world, they are seen as the go-to technique for communication with the user. Below are 5 examples micro-interaction briefly explained:

Swipe
The swipe action is probably the best-known micro-interaction. It eliminates a lot of taps and is more interactive and smooth. It helps the user quickly change taps. Additionally, swiping is a common gesture and guides the user without making them think.

Three different swiping micro-interactions illustrated with an animation
Three different swiping micro-interactions illustrated with an animation
Work by Gleb Kuznetsov

Data Input And Feedback
Who doesn’t know the frustration of setting up a password or making an account? This often required action can easily stop users from continuing to use your product. While suggestions on password strength or username availability can smoothen out this process. Furthermore, some visual feedback at the moment of data input can also keep the user engaged with the process and help accomplish the goal they’re trying to achieve.

Data Input And Feedback illustrated with an animation showing the feedback when inputting a correct an incorrect email adress
Data Input And Feedback illustrated with an animation showing the feedback when inputting a correct an incorrect email adress
Work by Hoang Nguyen

Current System Status
It is a necessity to keep the user informed about the current status of a site or app. If the user has no clue what’s happening or why a system isn’t responding, he will close the app. Micro-interactions are a perfect tool to keep the user informed on what’s going on, how long will it takes the process to complete, what is wrong, etc. Even failure messages can be brought in such a way that they retain the trust of the user in your product.

An animation to illustrate a micro-interaction that represents the current system status
An animation to illustrate a micro-interaction that represents the current system status
Work by Yup Nguyen

Call To Action
Micro-interactions are a powerful way to persuade your user to interact with your app or website. A well-designed call to action gives your user a feeling of achievement and empathy. This is the best way to make your users interact with CTA’s.

An animation to illustrate a Call To Action micro-interaction.
An animation to illustrate a Call To Action micro-interaction.
Work by Julien Deriaz

Animated Buttons
Animated buttons are often overlooked, but can add great value to the UX of an app or website. They have the role of information manager by guiding the user through your app or design. When making animated buttons, you need to pay attention to shape, color, special effects, and placement to make the user experience seamless.

An animation to illustrate a Animated Buttons micro-interaction.
An animation to illustrate a Animated Buttons micro-interaction.
Work by Pierre Leeflang

5 Tips For Using Micro-Interactions To Improve User Experience.

To prepare you for the creative world of micro-interactions, I have compiled four concrete tips to make sure you are ready to improve your UX design:

1. Keep the user informed and, at least, visually engaged. The last thing you want is your user getting bored.

2. Focus on the emotions of a user. They play a huge role in user interactions and user habits.

3. If you’re using animation as a micro-interaction for page- or state changes, make sure the transition between two visuals is smooth, effortless, and smooth.

4. Make sure your micro-interactions are predictable. Your user is tuned into a set of behavioral patterns. Micro-interactions are not meant to change long-established patterns, they are meant to make them easier and more intuitive.

With these fundamentals you are ready to explore the world of micro-interactions.

Thank you so much for reading my first article. I hope you liked it. If you want to read more of my articles, be sure to subscribe to my newsletter!

Digital Creatives Club

We believe in the power of Digital Creatives. Articles about digital creativity and freelancing

Daniël Verbaan

Written by

UX/UI Designer. I write about design, freelancing and investing. Learning as I go and sharing as I learn

Digital Creatives Club

Digital Creatives Club is a publication for everyone who practices or pursues digital creativity. Whether it is as a business or as a hobby. Curated articles about freelancing in the landscape of desing

Daniël Verbaan

Written by

UX/UI Designer. I write about design, freelancing and investing. Learning as I go and sharing as I learn

Digital Creatives Club

Digital Creatives Club is a publication for everyone who practices or pursues digital creativity. Whether it is as a business or as a hobby. Curated articles about freelancing in the landscape of desing

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store