What Are Microinteractions?
Microinteractions are what happens when a user interacts with a well-designed system and gets some sort of feedback from interacting with said system. They are the small things that make you love an experience or product, but are something you rarely notice.
They do things like delight and amaze us, prevent us from making errors, let us know something is activated/turned on, gives us options, and make us focus on a certain thing.
Dan Saffer, the writer of Microinteractions: Designing with Details
, says there are 4 parts that go into making a microinteraction effective.
A trigger is exactly what it sounds like, it’s something which initiates the microinteraction.
When the trigger is initiated, the rules are put in place for how the microinteraction should react.
The correct kind of feedback is then given, depending on how the rules interpreted the activated trigger and the system status.
Loops & modes
Next, depending on the outcome of the feedback, the system determines if the user will need to interact with the microinteraction again and reinitiate it.
How Are They Important to UX?
One of the main things microinteractions do is enhance a design. They help the user by giving them feedback and alerting them to an action happening. Without this kind of feedback, the user would be left not knowing if what they did was correct.
Let's look in the case of a user filling out a form. Here is a form with the fields of First Name, Last Name, Phone Number and Email.
The user starts to complete the form and enters their First Name in the First Name form field.
Then continues onto the Last Name field and then the Phone Number and Email fields. When the user gets to the Phone Number field, they don’t want to enter their phone number, so they skip it.
After filling out the other fields, they click the "Submit" button. But the form does not go through, because the Phone Number field is required. The microinteraction of error feedback is shown in the form of a red border around the Phone Number field, with the addition of a message which says “Enter a valid phone number”.
Without error feedback, the user wouldn't know why their form could not be submitted. This could cause the user to waste time trying to figure out the problem or just not fill out the form and leave the site altogether.
The use of the microinteraction saved that user time, gave them the opportunity to fix their error, and submit the form correctly.
Types of Microinteractions
Microinteractions don’t have to always be serious.
It can show something is uploaded:
Or open up a search bar:
Or select a color:
Even refresh a page:
Sometimes, can even make you smile:
Or even help you build something:
All in all, microinteractions help enhance a user’s experience and get them more engaged with content. When it comes to UX, it's all about how the user feels
, not just about what they see. In order for these to be successful, your UX team needs to be highly engaged in the process. Tell us, what successful microinteractions have you seen?