How microinteractions improve your UX design

Microinteractions play a large role in our digital lives, even if we don’t always notice them. From the time your phone’s alarm wakes you in the morning to liking your friends’ posts on Facebook to the notifications about new emails and Instagram messages—we encounter microinteractions all day.

They’re also something we should be thinking about and planning for as digital product designers. As we design and build new things, are we consciously looking for opportunities to surprise and delight our users? Within most designs, there are places where a little animation and feedback go a long way towards enhancing the user experience.

What is a microinteraction?

Microinteractions are small moments where the user and design interact. When they’re well designed, micro interactions enhance the user’s experience with the design. When they’re poorly designed, they damage the experience.

According to Dan Saffer, designer and author of the book Microinteractions: Designing with Details, microinteractions are “contained product moments that revolve around a single use case.” They’re the types of interactions that we barely notice until they’re not there.

Think of things like Facebook’s Like button, a pull-to-refesh action, or the typing indicator in a chat window. These are the microinteractions we encounter every day, and they’ve changed our interaction patterns.

Microinteractions have four parts:

• Triggers initiate a microinteraction. Triggers can be user-initiated or system initiated.
• In a user-initiated trigger, the user has to initiate an action.
• In a system-initiated trigger, software detects certain qualifications are being met and initiates an action.
• Rules determine what happens once a microinteraction is triggered.
• Feedback lets people know what’s happening. Anything a user sees, hears, or feels while a microinteraction is happening is feedback.
• Loops and Modes determine the meta-rules of the microinteraction. What happens to a microinteraction when conditions change?

Why are microinteractions such important parts of digital product design?

Sometimes during the creation of a product, we forget what our main goal really is: to change human behavior. Now, before you protest, hear me out. We design digital products for people to use, often more than once. We want them to use our product often and repeatedly, like a habit. Habits are key to changing human behavior, and microinteractions help form habits.

Good design is what we champion around here. To find opportunities for microinteractions (and habit-forming experiences) in our designs, we should be focusing on the details of our products. Features bring a user to a product, but it’s the details that make a user want to stay. If microinteractions take a user’s attention away from the product workflow, something has gone wrong.

Microinteractions increase user engagement at a relatively low cost. Humans want to maximize reward while minimizing cost. If you can design an experience that accomplishes a goal while providing a bit of delight in the process, you’re giving the user a little something extra. That’s what keeps people coming back.

What makes microinteractions successful?

Successful microinteractions are only slightly noticeable before they fade away. Just like good animation is invisible, you shouldn’t notice a microinteraction. They should be small and simple. They give feedback, and they always follow the rules, so whether it’s the first time or the 50th, your user know what to expect.

Microinteractions can save users’ time by instantly communicating information in a way that doesn’t bore or distract the user. They should catch the user’s attention briefly and then fade away.

Here’s a great example of a microinteraction in practice:

Sometimes, you need a little time before giving your user the information they want. Instead of a blank screen, why not keep your user informed about what is going on? This progress bar engages the user and prevents the confusion of “Did I click that button?”

Likewise, microinteractions must survive long-term use. What seems fun the first time might become annoying after the 100th use. Stay away from endless loops of visual noise and time-consuming and pointless animated interruptions.

“Microinteractions increase user engagement at a relatively low cost.”

What are some tips for using microinteractions to improve UX?

Follow these general guidelines for designing and implementing microinteractions and you’ll be well on your way to making a huge impact on your UX:

• Don’t let your user get bored. Keep them informed and (at least visually) engaged.
• Keep it simple. They’re called microinteractions for a reason.
• If you’re using animation for page or state changes, transitioning between two visuals should be clear, smooth, and effortless.
• Focus on user emotions. They play a huge role in user interactions and user habits.
• Be predictable. Users are tuned into a set of behavioral patterns. Microinteractions are not the place to try to change long-established patterns (like “green means go, red means stop”).