The importance of microinteractions.

‍

What are microinteractions exactly? They’re small, single-use case interactions designed to relay information. They typically go unnoticed when they’re designed well, but indicate to a user that everything is running smoothly. The result is a heightened overall experience.

A few examples of microinteractions:

• The loading spinner (technically called a “throbber”) that pops up when you refresh your Instagram, Facebook or Twitter apps
• The vibration you feel when you put an iPhone on vibrate
• Your cursor turning from a black arrow to a finger when it hovers over a button
• The error message you get when you enter the wrong password on a login page

How microinteractions are structured

Typically, microinteractions have four main components, as defined by Dan Saffer in his book Microinteractions:

1. The trigger - This is what sets off a specific action. An example would be double-tapping a photo on Instagram. This trigger (the double-tap) would result in you “liking” the photo.
2. The rules - These specify what happens when certain conditions are met. Keeping with our previous example, in order to like a photo, you either have to meet the condition of double-tapping on the photo, or single-tapping on the heart icon below the photo. If you single-tap on the photo itself, nothing will happen because the “rules” for liking a photo have not been met.
3. The feedback - This is the part that communicates the outcome of the action and can typically either be visual or auditory. When you like a photo on Instagram by double-tapping, you know you were successful if a heart briefly hovers over the photo and the heart icon below the photo turns red. If you happened to miss the heart animation, you still know your action was successful because of the icon below the image that changed from a white colour state to red.  
4. The loops and modes - Loops indicate information about what should happen next. In some cases, once an action is complete, such as liking a photo, the loop is complete. An example of a loop if when you hit the snooze button after your alarm rings. Once you hit snooze, a loop is initiated and the alarm goes off when the snooze time is up. Modes are microinteractions that apply in less frequent situations, for example setting your phone to “Airplane Mode.”

Benefits of successfully designed microinteractions

It’s not evident how important microinteractions are until they’re absent. How frustrating is it when you click on a link and there’s absolutely no indication that your click was successful? A well-designed microinteraction in an instance like this would provide a user with feedback that their command was received, and that the next page is loading. This feedback would be even more pleasing if it indicated the loading status as well.

“47% of users expect a webpage or an app to load in two seconds or less. After four seconds, the average user starts getting frustrated and after eight seconds, they leave. In fact, a one-second delay in your site speed can result in a 7% reduction in customer conversions.” What mitigates this frustration? Information. When users know what’s happening, they’re less frustrated. Why would a user keep coming back to your product if it causes them frustration? The short answer is that they wouldn’t.

‍

Increased communication and trust

One of the greatest benefits of microinteractions is their ability to humanise a digital experience. They do so by bridging the communication gap between a product and its user. Specifically, microinteractions provide users with information regarding their actions. Microinteractions may also increase a user’s trust in your product, according to a study conducted at the Norwegian University of Science and Technology that explored the effects of microinteractions in the context of banking applications. Communication is extremely important, whether the information being communicated is on a conscious level or not. If communication is heavily one-sided, it’s incredibly frustrating for users. If communication is seamless and consistent, it can increase a user’s trust.

But...less is more

Microinteractions are a small but mighty tool for great UX. They have great benefits but that doesn’t mean you should go overboard with them. At a subconscious level, a balanced number of well-designed microinteractions make web and digital product experiences pleasant. Dan Saffer, in his book Microinteractions, said “Microinteractions are an exercise in restraint, in doing as much as possible with as little as possible. Embrace the constraints and focus your attention on doing one thing well. Mies van der Rohe’s mantra of “less is more” should be the microinteraction designer’s mantra as well.” As you can see, it is necessary to understand balance in order to design a great experience. Essentially, microinteractions should be designed well, but too many microinteractions can leave a user feeling overwhelmed and increase their cognitive load.

When microinteractions are necessary

How do you identify the need for microinteractions in your interface design? This is where usability testing plays a huge role. When a digital product is tested, it’s important to pay close attention to instances where the user seems confused or frustrated. What were they trying to achieve at that moment and is there anything you could add that would make their next steps more clear? Is there information missing? Keep in mind, removing something could be the answer.