How Can You Improve Your UX with Micro-interactions?

“It’s the little things that make the difference between a good digital product and a great one” - once told by Dan Saffer in his book Microinteractions: Designing with Details, 2013.

It doesn’t matter if you work in the design field or not – the standard truth is that design by itself can solve various kinds of problems, and those little things that come with design have a tremendous amount of impact on user experience. 

Microinteractions are the small and basically unnoticeable moments in UX that can be boring, easy to forget, sometimes even over-complicated or on the other hand – exciting and engaging. Even if you don’t always notice them, micro-interactions are everywhere around you: in the gadgets, you carry with you, in the appliances, you use in your house, in the apps on your phone and desktop, in the city you’re living and even in the interior around you. 

It is a vast topic indeed, although those “little things” of all your forthcoming web and app design projects are the key to making them as user-friendly as possible. So read through this article, and you’ll know what micro-interactions are, why and when you should use them, and, most importantly, how they can make your design or a product better.

What Are Micro-interactions?

In a digital user interface environment (yes, there are others, but that’s for another article), micro-interactions are small, single-use case events that:

  • accompany/illustrate a user’s action;
  • inform on the system’s status.

While this sounds awfully formal and boring, the purpose of the micro-interaction is, more often than not, to introduce the warm and human-like experience to the user.

An excellent example of a simple micro-interaction would be a form Submit button. If you’ve ever interacted with a mediocre one, you remember that after pressing it, nothing really happens. It stayed the same after you hovered on it, pressed it down, and released. 

“Did it work? Did the form actually submit? Is it still submitting? Can I go on my lunch break or?…”

A proper Submit button doesn’t leave you hanging like that. It indicates when you’re interacting with it, and even after you’ve done so. Form submission can take a couple of seconds, so a genuinely great button would also indicate the status of that process with a progress bar or wheel.

What if something went sideways and the form didn’t send? A separate micro-interaction (in this case, an error message) would pop-up to inform the user.

Tab Bar active animation by Aaron Iker | Dribbble

4 Main Structures Of Microinteractions

Microinteractions usually have these four parts:

  • Trigger
  • Rules
  • Feedback
  • Loops and modes

Let’s break them down one by one.

Triggers are precisely what they sound like. They initiate (or start) the micro-interaction. They can do so on the whim of the user OR the system. This depends on the purpose of the action and the end goal.

Rules define what happens when the trigger goes off. Does the button turn blue? Does a notification pop up? Does another trigger initiate?

Feedback is an alert for the user: it lets him or she know what’s happening in the process. Feedback can be visual, audio format, and haptic. The visual is the most predominant because we tend to look at what we’re interacting with. And note, that good feedback can add personality to your micro-interactions.

Loops and modes are like road signs for the interaction. Think if “this then that” or “if/else.” These rules determine what happens if the conditions change.

Book Loader by Aaron Iker | Dribbble

Why are micro-interactions essential for digital product design?

Here are some solid arguments if you’re trying to convince someone of the awesomeness of the micro-interaction:

  • they improve the user experience: from navigation to adding profile information, micro-interactions help improve, smooth out, and make the process as painless as possible;
  • they provide instant feedback on user actions and/or system status;
  • they focus the user’s attention to where it’s most important;
  • they add to the overall human feel of the app or website.

Making an artificial, robotic-like interaction as human as possible is the best you can do for your product’s user.

While not necessarily the primary goal, micro-interactions are in and of themselves an indication of genuine empathy for the user.

Dropdown menu interaction by Aaron Iker | Dribbble

Introducing Microinteractions Into Your UX

Here are some tips to consider when thinking of how to improve your UX:

  • Try putting yourself in the user’s perspective and figure out how they use your product and what they will be seeking for. 
  • Create functional animations. It’s nice to make things pretty, but first and foremost, the function should come before aesthetics in UX design.
  • Have fun and entertain your users – they are people overall! Make fun tutorials, engaging CTAs, create animated buttons, and give less formal feedback. 
  • Don’t get annoying. Sometimes too many micro-interactions can have the opposite outcome.
  • Use human and non-technical language. A funny or ironic copy can deepen that character and improve user experience.
The era of Collaboratory has just begun.

Few news are worth popping-up on your screen for, but this is definitely one of these announcements.

We are excited to share the greatest of news - Mediapark and our partner companies have opened the door to the Collaboratory and we’re joining forces under the name of Civitta. We in digital just gained some powerful allies: advisory, innovation, and funding, while Civitta will benefit (greatly) from our relentless pursuit for digital excellence.

Beep! Our systems and services are already integrated - prepare your business for all encompassing impact!