The power of microinteractions in UX design

Profile picture of Jeremiah Lam

{date}

{#hash1}

{#hash2}

Illustrations by {name}

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

8 min read

Microinteraction example in UX design

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. 

Get our latest stories delivered straight to your inbox →

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.