Profile picture of Jeremiah Lam

8 min read

The power of microinteractions in UX design

Microinteractions can help craft a more engaging experience, while providing users with feedback and a sense of satisfaction.

Microinteraction example in UX design

Illustrations by {name}

Stay informed on all things design.

Thanks for submitting!

Shaping Design is created on Editor X, the advanced web design platform for professionals. Create your next project on Editor X. 

A good design isn’t all about nice illustrations, well-structured information architecture, or relevant microcopy. Sometimes, it’s the small details that can make your product experience more fun, intuitive, and human. These little touches allow your product to be more engaging and give users an element of feedback or satisfaction when completing a task; however tiny.


These details, known as microinteractions, are trigger-feedback based events designed to help users complete a single task while making it engaging at the same time. Some examples are:

  • Pull to refresh: Loading animation appears when the user pulls down the app page

  • Swipe animation: Swiping up on an iPhone to unlock it

  • Tap animation: Tapping an Instagram post to like it

  • Button states: Hovering or clicking on a button changes its style

  • Scrollbar: Appears when the user is scrolling through a page


Even though they are subconsciously overlooked by most users, they serve an important purpose: to communicate feedback based on the results of an action. Without microinteractions, the user would have no idea if their actions did anything or made a difference, resulting in confusion and frustration.



Microinteraction example on Instagram


For example, would you still be able to tell if you had indeed liked a post on Instagram if the white heart didn’t pop up and the heart below didn’t turn red? Most probably not, as we all require some form of visual, audio, or physical feedback in order to process the results of our actions. It is a human tendency to expect something to happen when you initiate an action.



Breaking down microinteractions


In 2013, Dan Saffer published the book, Microinteractions, which outlines a model for designing microinteractions. In the book, he mentions four main components of microinteractions:



Trigger


The trigger is what activates the microinteraction and can either be user or system initiated. A user-initiated trigger is usually done by clicking, tapping, swiping, holding, or dragging a UI component.


System-initiated triggers are a little more complicated as they are automatic and triggered when certain conditions are met. These conditions can be set by either the user or system depending on the nature of the product. For example, your phone notifications are system-initiated triggers that are set by the system, while the alarm clock feature is a system-initiated trigger that is set by the user.



Rule


The rules dictate what happens once the microinteraction is triggered. When the user clicks or tap on this icon, what happens next? Will they be redirected to a new page? Will it add the item to their shopping cart? Or will they be logged out of their account? The important thing about the rules is that they must be logical to the user — if the user clicked on a trash bin icon, they expect something to be deleted.


The same goes for system-initiated triggers; what will happen when all the preset conditions are met? If the user sets the alarm at 8.00 pm [Condition], it will inform the user once the time is 8.00 pm [Rule].



Feedback


The feedback is used to communicate a message to the user; for example whether the action was successful or whether an error occurred, if more information is required, or just to inform them of the status of the system.


This is the creative part of the process. As designers, we have to decide what form of feedback would be the most effective to help communicate the message to the user. It can be in the form of visual, audio, or physical indicators depending on the device and nature of the product.



Loops and modes


The loop determines the frequency of the microinteraction. Is it a one-time interaction or does it repeat over time? A good example of this would be the on-boarding process. Most products will only show it to first-time users and not existing users. This is because the on-boarding process brings no real value to existing users who already know how to use the product.


Another common way of using loops is linking the microinteraction to product availability in eCommerce websites, like in the example below by Hush Candle. Once a certain product is out of stock, the “add to cart” button will automatically be disabled — stopping the initial microinteraction from occurring.



Loops and modes microinteraction example on Hush eCommerce website


Modes are used to control the form of feedback sent. For example, the default feedback for new incoming notifications on your iPhone is a “bell” sound, but when you set your phone to silent mode, the feedback changes to use vibrations instead.



The purpose of microinteractions


Before you get started, you’ll need to think about what you want your microinteractions to accomplish; this will help determine the trigger, rules, and feedback. Do you want to increase engagement, display system status, provide error prevention, or communicate your brand?


Think about error prevention. A simple microinteraction could help prevent the user from making a mistake that might lead to a negative experience. The most common manifestation of this is via a confirmation modal. When the user selects an option that has the potential to cause a huge impact such as deleting their document, it’s common to have a pop up modal that requires the user to confirm their action.


Another good example would be how Mailchimp uses microinteraction in their sign up form to mitigate potential errors by listing out all their password requirements. When a requirement is met [Trigger], it will indicate to the user [Rules] by fading the text and circle [Feedback], and this repeats for each requirement [Loops].



Mailchimp sign up screen with microinteraction


Common uses of microinteractions


There are many ways to use microinteractions as they encompass a substantial number of digital elements. It would be almost impossible to find a website or application that doesn’t contain any form of microinteractions. Here are some common ones that we use in our everyday lives.



Loading


Loading is a necessary evil for any product, but microinteractions can make the process a lot more engaging. They let the user know that the product is still working to respond to their actions. In any scenario, the user wants to know the status of a process in real-time. If they suspect or assume that something has gone wrong or if the system is not working properly, their immediate response would be to close or refresh, thus losing everything they have done so far. This would result in a negative experience.


If you have a feature on your product that requires a little more loading time, consider implementing a microinteraction to entertain the user while keeping them informed of the loading status. This can be done by implementing a simple website animation that uses color transition; from red to green to signify completion.





Standby


Sometimes a product requires multiple steps to complete a single action. After the initial trigger, a microinteraction will be used to inform the user that the product is currently on standby and waiting for additional inputs. This prompts the user to continue interacting with the product in order to complete the intended action.


A good example would be when you want to move an application on your iPhone. You would first need to tap and hold an app icon [Trigger], allowing the phone to go into edit mode [Rules], which is shown by the jiggling motion of all the app icons [Feedback]. This feedback informs the user that they are now able to move the icon by dragging it to a different position on the screen.


Another great example would be Grammarly’s spelling suggestion plugin which helps inform the user of any spelling mistakes on a document. When the plugin detects a mistake [System-initiated Trigger], it will highlight it to the user [Rules] by underlining the text in red [Feedback]. This unlocks the second microinteraction and prompts the user to hover over the text to correct their spelling mistake.



Microinteraction example on Grammarly


Data input


Data input is a necessary component for most products; be it for login, sign up, shipping details, contact form and so on. It is a common source of frustration for many users. Let’s take the account creation process as an example; different products have different password requirements. Often, the user only gets an error message stating that they didn’t meet the password requirements after they hit the submit button.


Inline validation would help prevent this negative experience and save the user from having to re-enter a new password. In the above example, we see how Mailchimp implements microinteractions in their sign up form to decrease the chances of errors occurring.



Support undo


Everyone makes mistakes. As designers, we should make it easy for the user to undo any action that they didn’t mean to do in the first place or that they changed their mind about. Microinteractions allow you to communicate the state of the UI element and give the user an opportunity to reverse any prior actions done. Some examples of elements that make use of microinteraction are toggles, tabs, radio buttons, checkboxes, etc.


A simple example would be how most eCommerce websites allow the user to add an item to their wishlist or favorites by clicking on a heart icon. This microinteraction uses a change of icon style to communicate that you have favorited this item. It indicates that this can be easily undone by clicking on the icon again, reversing the action and reverting the icon to its original state.



Microinteraction example on eCommerce website