The importance of microinteractions.

  • By
    Brooke Cowling
    September 16, 2018
    July 28, 2021

When was the last time you downloaded a song? Did you excitedly watch the status of your download while you waited? That progress indicator you were watching was a microinteraction, my friend! As you may already know, with great user experience and user interface design “the devil is in the details.” You can’t have an amazing digital experience if the details aren’t thought through and executed well. If microinteractions are designed successfully, they make a mediocre experience great, memorable and leave users wanting to return.

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:

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.



Tags

Other articles you may like.

Good UI doesn’t necessarily equal good UX!

  • By
    Sudipt Shah
    August 30, 2018
    July 28, 2021

A major shift in the digital landscape is happening and an increasing number of companies are focusing on their users’ digital experiences.

UX / UI design
E-commerce
all

Creating a memorable user experience - 10 UX principles.

  • By
    Brooke Cowling
    September 17, 2018
    July 28, 2021

People often ask "what does good UX look like?". More often than not, people argue it’s how it looks, especially in the Gulf region which is not as digitally mature. Other people say it’s how it works, which is partly true, but again, not the right answer. Yes, design and functionality are important, but we're here to let you in on a little secret: good UX is about how it makes you FEEL.

UX / UI design
E-commerce
Mobile app
all

UX Principle #1 - Make it user-centric by matching the real world.

  • By
    Brooke Cowling
    September 18, 2018
    July 28, 2021

In case you missed it, yesterday we touched on the importance of giving your customers a memorable experience by reducing cognitive load and making the experience user-centric. Today we’ll show you how to make it user-centric by matching the real world - one of the key UX principles.

UX / UI design
all