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. (Related: How to use our custom CSS)
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.
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].
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.
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.
Brand communication
Even though microinteractions should be simple and purposeful, it doesn’t mean that they should be dull. Just like your microcopy, the design of your microinteractions should follow and reflect your brand image. Blending emotions and brand values into your microinteractions adds a human element to your product, which could be the difference between a positive and a generic experience.
An example is how Readme infuses humor into their login process by having their owl cover his eyes while you’re typing your access password. This adds some fun to the administrative-like process of filling in a form, making the overall experience much more pleasing.
Another good example is how Spotify converted the progress bar of a song from any Star Wars soundtrack into a lightsaber during the launch of “Star Wars: The Force Awakens” movie. This is a perfect example of how microinteractions can be utilized to draw attention to specific content or events.
Tips for designing better microinteractions
There are a few things you need to keep in mind when designing microinteractions:
Fast response time
Your microinteraction should provide feedback immediately after the activation of the trigger; both user and system initiated. If your microinteraction takes too long to manifest itself, users might not associate it with the initial action. This would make the microinteraction pointless and possibly confusing.
Just imagine clicking on a button and nothing happening in the next five seconds. Would you continue waiting or just assume that the button isn’t working and leave?
Be purposeful
As designers, we should always look to avoid features or elements that have no purpose or meaning to the product or user experience. The same goes for microinteractions — each of them should add value to the product as opposed to just improving the aesthetics of the product. Don’t add more details or elements than required to communicate the message.
Before designing a microinteraction, ask yourself these questions:
What is the objective of this microinteraction?
Will it add value to the user’s experience?
Are there any unnecessary details or elements?
Be consistent
This is applicable to all aspects of your app, but it’s particularly important for microinteractions. You need to create a consistent style for all interactions across the product. This way, users will only have to learn them once and will then be able to start enjoying your product.
In summary
Microinteractions are a key part of your user experience. Think about how your users will interact and engage with your product, then design the appropriate interactions to guide them along the way. As designers, it’s important that we use well-designed microinteractions to bring our products to the next level by making them more palpable. In other words, such interactions serve as a bridge to make the digital experience more familiar and intuitive.
.jpg)
