How Micro-Interactions can make or break your User Experience

Micro-interactions are contained moments that revolve around a single use case. Micro-interactions focus on detail — they do one thing but they do it well!

“The difference between a product you love and one that you tolerate are often micro-interaction you have with it”

— Dan Saffer

Micro-interactions typically get very little attention and are designed to be invisible. They allow users to focus on some parts of the UI and provide feedback to the user.

One important aspect of good UX design is paying attention to the smaller details. This is because sometimes the smaller details might be overlooked but they can cause many pesky problems.

“If micro-interactions are poor, the main features, no matter how nicely done, are surrounded by pain and frustration”

— Dan Saffer

Micro-interactions should always have a purpose and embody the brand voice.

Micro-interactions have the potential to improve your product’s user experience, by:

• Encouraging engagement
• Displaying system status
• Providing error prevention
• Communicating brand

If micro-interactions are poor, the main features, no matter how nicely done, are surrounded by pain and frustration. — Dan Saffer

It’s important to keep track of both the details and the bigger picture of your product. If you neglect one, you could miss some problems that could have been easily avoided in the beginning.

Signature moments

Signature moments are memorable and individualised micro-interactions that bring delight and value to your customers in a subtle yet very recognisable way. They occur at a specific point in the customer journey. These moments turn otherwise bland experiences into memorable ones.

By providing customers with an easy way to identify your brand, they can help increase customer loyalty and adoption.

You can for sure remember the Airbnb search on a map experience that later every competitor copied. The ability to search by moving the map allows users to easily understand the precise location of a house. At the same time, it makes it quite easy for users to see if there are any points of interest nearby as well.

Clap button

Medium clap button comes from a speaking/talk event scenario where the audience can applaud the speaker when he/she makes a great point during the speech.
Also, by clicking on the total number of claps on the story, the user can see other people who applauded and can follow them as well.
This helps in building a solid network of people interested in similar topics. The clap feature also helps Medium understand its users’ interests and improve story recommendations for them.

Like button

Sometimes it can be tough to know what to say. Other times maybe you don’t have much to say and you just want to let someone know you heard
them. That’s what the Like button does so well. It is simple and frictionless.

To create a signature moment, a micro-interaction needs:

• to be along with product strategy and brand;
• to be different, to innovate;
• to be memorable;
• to last in time.

Micro-interactions shouldn’t be fluffy and should always serve a purpose — but that doesn’t mean they shouldn’t embody a brand. They can introduce innovation as well.

What makes an effective micro-interaction?

It’s all about the right combination of anticipation and surprise. Here, we go over a few key success factors to consider when designing them.
Dan Shaffer’s defined a model for creating a micro-interaction.

Trigger

A trigger is the moment when a micro-interaction begin. It may be initiated by users, when a user clicks a button or, starts to fill out a form.

Triggers can be also initiated by the system, like the example bellow, where as we write an email using gmail, the systems starts suggesting expressions to help us completing the sentences.
The most effective system triggers predict what the user wants, based on the users’ activity data.

Rules

The rules of the micro-interaction are outlined by us, designers.
This is one of the most crucial steps when creating a micro-interaction.
Rules determine which action happens, and in which order.
The goal is to make it look natural to the user.

Turning on a light is a simple interaction. Once you flick the switch, the light turns on.
There’s one rule: the light stays on till the switch is turned off.

Feedback

Feedback is knowing how to understand the rules. There are three major types of feedback: visual, audio, and haptic.
The visual is the most dominant because we have a tendency to look at what we’re interacting with.
The users instantly know their action was accepted and get a visible reward. Similarly, micro-interactions will guide users on how the device works. Microcopy also plays an important role when giving feedback to users. It can be used to add a fun, directive, or calm tone. Ideally, you should use your brand voice to speak humanely.

Modes & loops

Modes and loops determine how long the micro-interaction lasts.
Bring an interface to life. It is actually smart, so it should know how to show it!

All we want is for our customers to get the best experience possible when using our service. That means making sure that every detail of their experience is tailored to them.

Ideally, this feature would be based on an established product with a solid foundation. That way, we can take it to the next level and make it even better.

Managing risks can mitigate their impact or avoid them altogether.

A micro-interaction might feel good at first, but after a while, it might become overwhelming or boring.

The design of an interface is always about emotions, so if users have negative feelings about your product it means it’s time to redesign some parts. While something might seem enjoyable the first time, that feeling can easily be turned into tension and stress with repeated use.

Put yourself in the user’s shoes and ask the following questions each time you evaluate a micro-moment:

• What happens when the user sees this animated effect/hears this sound thousands of times?
• Will they still enjoy it as much as they did the first time?

“The details are not the details. They make the product.”

— Charles Eames

There is no need to re-invent the wheel when creating a micro-interaction:

• Don’t start from zero. Use the information you have about your target audience to create the most effective experiences for them.
  
• Follow the KISS principle (keep it simple, stupid!). Avoid over-designing a micro-interaction. Always try to make it as simple as possible.

Dizparada is a senior product designer looking forward to better understanding humans. She loves sports and getting lost in nature.

Originally published in Medium