Improve Your User Experience With Micro-Interactions

As a designer, recognizing the effects of micro-interactions is just as important as designing them.

Jeremiah Lam
Feb 11 · 5 min read
Image for post
Image for post
Illustration by Thierry Fousse from Icons8

UX design deals with the overall user experience when interacting with the product. Its goal is to optimize the design of the product to allow users to achieve their objectives quickly. One way of doing that is to use micro-interactions that focus on minor details to inform the user of the product’s current state.

This helps to create a feeling of well-being once the user discovers them. As a designer, recognizing the effects of micro-interactions is just as important as designing them. It would help if you created something that feels human and serves a purpose, not only for the sake of having it.

What are micro-interactions?

Micro-interactions are events that trigger based on the user’s action and are typically used to:

  • Communicate feedback or the result of the action (e.g. scrolling, loading a new page, etc.)
  • Encourage user engagement (e.g notifications, buttons, etc)
  • Prevent errors (e.g. inline validation, tooltips, etc.)
  • Promote the brand (GIFs, loading animation, etc.)

Despite being minor and easily overlooked, micro-interactions can be found in most products. For example, your phone vibrating when switched to silent mode or a heart icon appears whenever you like a post on Instagram.

The 4 components of micro-interactions

Dan Saffer identified these components in his book, Microinteractions.

Image for post
Image for post

The trigger

The trigger is an action that activates the micro-interaction. It could be categorized into two groups: user-initiated or system-initiated.

User-initiated triggers are the most common and can be found everywhere in the form of buttons, text links, dropdowns, etc. A simple example would be a user clicking on a button (the trigger), which brings them to another page.

System-initiated triggers are a little more complicated as they are automatic and trigger when certain conditions are met. One example would be notifications — when someone liked your photo on Instagram, it triggers a notification to be sent to you.

The rules

So after having a trigger, you need a follow-up on what happens next. When users click on this button, what happens?

  • Are they directed to a new page?
  • Will it add a product to their shopping cart?
  • Will it delete their account?

The same goes for system-initiated triggers — what happens when all the conditions are met? If the user is inactive for 30 minutes (the condition), they will be logged out of their account (the rule).

The feedback

This is the creative part of the process. It is used to inform the user that an action (the trigger) has occurred or a change has occurred (the condition). It can be in the form of a loading screen, hover effect, animation, gif, vibration, etc. There are many examples of how micro-interactions can be designed.

Image for post
Image for post

Loops and modes

The loop determines the length of the micro-interaction, whether it repeats or changes over time. Think about the last time you used a product. Is the experience different when you used it the first time compared to the tenth time? Most products only show the on-boarding process and visuals to first-time users, hence the micro-interaction changes over time.

Modes can be used to change the way feedback is received. For example, when you receive a text message on your phone, what is the feedback when your phone is on silent mode compared to default mode?

Are micro-interactions important?

“If micro-interactions are only minor design details, do we still need to care about them?” The answer is yes. Attention to detail is what differs an exceptional website from an ordinary one. Here are some reasons why you should use micro-interactions.

1. They provide instant and relevant feedback about a completed action.

This is something most users take for granted, yet it is necessary to reassure them that the intended action has been done. Imagine clicking on a submit button, and nothing happens. How would you know if your form has indeed been submitted?

Image for post
Image for post
This interaction shows that the user’s action is a success | Colin

2. They communicate information about certain elements, like whether or not it’s interactive.

Although most users would be used to how most buttons and icons would look and their expected behavior, micro-interaction reinforces the notion that a specific component is interactable.

Image for post
Image for post
A hover interaction is synonymous with being clickable | Harsh Vijay

3. They prevent the user from making unnecessary errors.

Prevention is better than cure. Although error states are necessary, micro-interactions can help guide the user on the right path, saving them time and effort from correcting their mistake.

Image for post
Image for post
An innovative way to help users create strong passwords | Duylam

4. And finally, they make your site more emotional.

Micro-interactions are an excellent place to inject some personality into your product. Instead of a dull loading circle, you can jazz things up by designing an exclusive loading animation for your brand. This will allow you to create small moments of delight in the user journey, strengthening the user’s connection to your product.

Image for post
Image for post
Zendesk 404 page | Sara Farnsworth

Last thoughts

Micro-interactions might seem minor, but it can be challenging to design them effectively. As designers, we need to consider the user journey and their reactions when interacting with the product — only then can we design the appropriate micro-interaction to engage them along the way. We must use micro-interactions effectively as they can take our products to the next level. With micro-interaction, it’s possible to experiment with new design solutions and look for new ways to surprise your users.

The Startup

Medium's largest active publication, followed by +773K people. Follow to join our community.

Jeremiah Lam

Written by

Jeremiah Lam is a UI/UX designer, writer, and tech enthusiast living on the sunny island of Singapore

The Startup

Medium's largest active publication, followed by +773K people. Follow to join our community.

Jeremiah Lam

Written by

Jeremiah Lam is a UI/UX designer, writer, and tech enthusiast living on the sunny island of Singapore

The Startup

Medium's largest active publication, followed by +773K people. Follow to join our community.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store