Microinteractions: A Guide to Mastering the Smallest Parts of Your Design

Because microinteractions are so small, designers often overlook them, but getting these tiny elements of a product right is essential. Our expert explains how to approach them.

Written by Ari Krzyzek
Published on May. 31, 2023
Microinteractions: A Guide to Mastering the Smallest Parts of Your Design
Image: Shutterstock / Image
Brand Studio Logo

How would you feel if Gmail didn't tell you Message sent or if Instagram didnt show you the signature ♥️ when you double-tap on a post? 

Maybe you’d be anxious and unsure. Was that email successfully sent? Did I already like that post? 

Our expert is here to tell you about those often overlooked parts, the unsung heroes of UX design:  microinteractions. They may be the smallest details of your UX design, but if you dont pay enough attention to them, they have the power to disrupt the whole carefully designed user experience and user journey

What Are Microinteractions?

Microinteractions are tiny, subtle actions that users go through to accomplish a task. The term was coined in 2014 by Dan Saffer in his book MicrointeractionsThough they may be small, their impact on a user is big. 

More From Ari KrzyzekWhy Do UX Designers Need to Work With Data?

 

Understanding Microinteractions in UX Design 

Microinteractions are tiny, subtle actions that users go through to accomplish a task. The term was coined in 2014 by Dan Saffer in his book called — you probably guessed it — Microinteractions. Sadly, they’re often overlooked because theyre so ... micro. Though they may be small, their impact is big. 

Microinteractions are widely varied — from notifications to microcopy, from animations to finger gestures. Youve seen some examples above, and here are a few more:

Examples of Microinteractions

  • The small hand that appears on your screen when you tap the Raise Hand button on Zoom and Gmeet. 
  • The small, red message that tells you your username is incorrect or that your password needs to be stronger. 
  • Tinders swipe right gesture and the It's a match! animation. 

Many, many more examples exist in the digital world. Microinteractions are everywhere. You might not always notice them, but getting them right makes your UX a lot less jagged in the same way a fine dining restaurant creates a smooth, delightful culinary experience through its lighting, table setting, service, and etiquette. 

 

4 Parts of Microinteractions 

We can break down microinteractions into four even smaller steps

4 Parts of a Microinteraction

  1. Trigger 
  2. Rules 
  3. Feedback 
  4. Loops or modes 

 

1. Trigger 

A trigger prompts a microinteraction to start. It can come from the user or the system. Check out the examples below. 

User-prompted triggers include clicking a button, filling out a form, pulling down to refresh, or animations like these examples.

A user-prompted trigger microinteraction
Image: Screenshot by the author.

System-prompted triggers include notification badges and chimes, payment gateways, files deleted messages, et cetera.

A system-prompted trigger microinteraction
Image: Screenshot by the author.

 

2. Rules 

The rules define what happens after the trigger is performed. 

Rules can determine what the system does behind the screen. For example, after a user picks their goals on a lifestyle app, the system proceeds to display only relevant resources. 

They also establish what control the user has. For instance, after getting notifications, the user has the control to view it, delete it, or just leave it for later.

A rule microinteraction
Image: Screenshot by the author.

The UX team defines these rules, and they are invisible to the users. 

 

3. Feedback 

Feedback is the visible part of the process that lets the users know their task is complete. Some examples include the following:

  • After clicking, the Subscribe button changes into an Unsubscribe button.
  • Showing and hiding a profile section after clicking a toggle. 
  • Changing dashboard appearance in the settings.
A feedback microinteraction from an app
Image: Screenshot by the author.

 

4. Loops or modes 

These two factors determine what happens to a microinteraction when the circumstances change — e.g., a change in location, behavior, history, web visit duration, and more.  

Loops set the duration of the microinteraction. 

For example, the first time you make a payment, you add a payment method and enter your card information. The next time, the flow changes, and you pick from your list of saved cards and enter your CVV only.

A loop microinteraction from an app
Image: Screenshot by the author.

Modes can modify the standard way things work. For example, the suggested items section of an e-commerce platform might normally show office chairs and desks. After you search for lamp products, the website now suggests lamps, too. Another example may be setting your phone to switch to sleep mode at 9 p.m. based on your settings. 

 

Avoid These Mistakes When Designing Microinteractions 

Because these are so small, designers can easily make unintentional errors when designing microinteractions. Note the following common mistakes and avoid them wherever you can. 

 

Overdoing the animation 

Having a live chat button bounce up and down every time you scroll on the page can quickly exhaust the users. Keep things to a minimum and each animation will be a small, delightful experience. 

 

Creating a drastic, unwanted change 

Remember when Instagram users scrunched up their noses when the app moved its New Post button? When users become accustomed to buttons and features in a certain place or doing a certain gesture to accomplish one thing, completely changing them might not be a wise decision. 

 

Not collecting data and feedback 

As always, data plays a crucial role in finding out what your users both want and need. 

 

Forgetting the emotional side 

Relying on data is great, but never forget that users are human beings with emotions. Try playing around with humor, wordplay, and animation that still follows your brand voice and identity. 

More in Design + UX3 Ways to Be a More Effective Experience Designer

 

Keep It Subtle!

When it comes to microinteractions, keep things subtle yet noticeable. Pay attention to the sequence while designing a microinteraction: trigger, rules, feedback, and loops or modes. Remember, moderation is key! Avoid going overboard with animations, making drastic changes, and disregarding user feedback and data. Strive for a balance that enhances the user experience without overwhelming it.

Hiring Now
SOPHiA GENETICS
Big Data • Healthtech • Software • Biotech
SHARE