Udemy Course: Complete Web & Mobile Designer in 2023: UI/UX, Figma, + more by Andrei Neagoie & Daniel Schifano.

Episode 18: Micro-interactions

Introduction

We talked about motion. Now, micro-interactions are next. Micro-interactions are so important and they involve a lot of motion. Micro-interactions are usually very subtle, but very fun to use.

What is a Micro interaction?

Despite being small, micro-interactions have the power to make that experience much more effective in humans.

Let's take a look at the definition of Micro-interactions.

Microinteractions are contained product moments that are meant for a single use case. And those little moments are a large part of all our interactions daily.

Let's think about the different things that we interact with. For Example:

• Setting an Alarm

Every time you set your alarm, the sliding back and forth that is happening over here is a micro-interaction.

• Checking your Notifications

That little pop-up, when you have a notification on whatever app you're using is a micro-interaction.

• Adding to your Cart

If you were buying a product online, the feedback you get in the process of adding the product to your cart is also micro-interaction.

Microinteractions do a great job of communicating the tone of your brand.

This can go on to be a part of your brand's signature moments. An example of a brand that uses micro-interactions to interact with its tone is Facebook. They use micro-interactions so well with their reaction buttons. To be honest, I really can't think of Facebook with this anymore.

The Structures of a Microinteraction.

Referencing Dan Strouffer's book "Micro Interactions Designing with Details".

To create an effective micro-interaction, there are four essential parts.

𝟏. Trigger

A trigger is what starts the micro-interaction. Triggers can be user-initiated or product-initiated.

For example; sliding through a range field, clicking a button and thereafter, there is a checkmark✔ after or if a user pulls down to refresh. These are all user-triggered.

Microinteraction can also be initiated by a product, which could be like a user/follower gain notification or new post notification etc.

𝟐. Rules

Rules determine how micro-interactions respond to a trigger. While also defining what happens during the interaction.

Looking at the example we have here. The rules are not seen or obvious to the users. They are things happening in the background.

For example in this illustration, when a button is clicked it becomes filled and has its text replaced with a ball underneath its icon. The patterns laid out for this interaction are the rules, but the actual interaction happening isn't the rule.

𝟑. Feedback

Feedback tells the user what is happening during a micro-interaction. So think about inputting something invalid in an input field or having a successful input field.

𝟒. Loops and Modes

These are like the meta-rules of micro-interaction and how it changes when it is used.

A good example is if you enter a password and Google Chrome has saved your password, that's like a micro-interaction for saving passwords instead of inputting your password over and over again.

This microinteraction changes over time based on like, the sites you visit and the data it collects.

Another example of Loops and Modes is the predictions we get based on our previous conversations with a user.

In summary, understanding the structure of micro-interaction allows you to design a micro-interaction that makes a difference.

Note: Not every element is a micro-interaction.

There is a lot of element that can be a micro-interaction.

For example; Scrollbar is a microinteraction. Scrollbars use triggers, and visual feedback to point out the user kind of changing the location of the page.

Note: Generally, elements that are not micro-interactions are static. Elements that are always static are not part of a micro-interaction.

Why are Micro-interactions so Important?

Micro-interactions don't usually get a lot of attention during the design process. They seem like these small details of a broader or much larger experience.

Those details have a big impact on the type of product that you're building as it gives your users a good impression.

In most cases, the difference between products that we like and products we don't like comes down to the polish and quality of their micro-interactions.

It is essential that we put a lot of focus on designing those small moments because they make the app much easier to use and more delightful.

I know that it sounds weird but think about if Facebook don't have those little animated reactions.

I have highlighted below what Micro-interactions offer:

• They Provide Feedback.

Microinteractions provide feedback to the users. Your product should be intuitive no matter what. Microinteraction is one of the biggest things to consider in the user's journey when we are designing and providing user feedback.

Now imagine, if a user is in the middle of a payment process and doesn't get any feedback after completing the transaction, that would be so bad because the customer would be bothered about if the payment has been processed successfully or not. That's why we need to look for places where the users might need that feedback and reassurance.

• They Help Prevent Errors.

Helping users deal with Error States is a common practice, but it is much better when we kind of prevent that kind of error from happening in the first place.

• They can Create Seamless Experiences.

Microinteractions can make seamless interactions and experiences. We don't want users to put too much effort into doing the tasks that we want them to do, microinteractions can help here.

In this scenario, we can think of SWIPE interactions, we want them to just effortlessly slide throughout and make the app easy to use.

• They Encourage Engagement.

Animated Feedback works so well here. Think about when someone completes a task in your product, the idea of celebrating their accomplishment with micro-interactions encourages more engagement from them.

The journey gets better💪...

#Figma #ProductDesign #UIUXDesign #UIUX #UIUXCourse #Branding #BrandStrategy #UIElement #Design #Motion #MobileApp #VisualStyle #Udemy #UdemyCourses #ZTM #ZeroToMastery #DocumentingMyTechJourney #BuildingMySkillset #TechSkill #SkillSets #ProductDesigner #EngrShege #ES