Microinteractions contribute to creating a more captivating user experience by offering feedback and a feeling of fulfillment.

Effective design extends beyond attractive illustrations, organized information architecture, or pertinent microcopy. Often, it's the minor intricacies that enhance the enjoyment, intuitiveness, and humanity of your product experience. These subtle nuances elevate engagement and provide users with feedback and gratification, regardless of their scale.

The Significance of Microinteractions in UX Design

Known as microinteractions, these details are events triggered by user actions, designed to aid in task completion while imbuing engagement. Examples include:

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.

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 UX design

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 activation of a microinteraction relies on the trigger, which can be initiated either by the user or the system. A user-initiated trigger typically involves actions such as clicking, tapping, swiping, holding, or dragging a UI component.

System-initiated triggers are more intricate, as they occur automatically when specific conditions are met. These conditions may be established by either the user or the system, depending on the product's design. For instance, system-initiated triggers like phone notifications are predetermined by the system, whereas features like setting an alarm clock represent system-initiated triggers determined by the user.

Rule

The guidelines determine the outcome once the microinteraction is activated. When the user clicks or taps on an icon, what action follows? Will they be directed to a new page, add an item to their shopping cart, or be logged out of their account? It's crucial for these rules to align logically with user expectations—such as expecting deletion when clicking on a trash bin icon.

Similarly, for system-initiated triggers, what occurs when all predetermined conditions are satisfied? For instance, if the user sets an alarm for 8:00 PM [Condition], it will notify them when the time reaches 8:00 PM [Rule].

Feedback

Feedback serves to convey a message to the user, indicating the success of an action, the occurrence of an error, the need for additional information, or the current system status.

This stage embodies creativity. As designers, we must determine the most effective form of feedback to communicate the intended message to the user. Depending on the device and product characteristics, this feedback can take various forms, including visual, auditory, or tactile indicators.

Loops and modes

The loop defines the frequency of the microinteraction, determining whether it occurs once or repeats over time. For instance, consider the onboarding process, typically displayed to first-time users but not to existing ones, as it doesn't offer value to those already familiar with the product.

Another application of loops involves linking microinteractions to product availability in eCommerce websites. For instance, when a product is out of stock, like in the case of Hush Candle below, the "add to cart" button is automatically disabled, preventing the initial microinteraction from happening.

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 in UX design

Before diving in, consider the objectives of your microinteractions; this will guide the selection of triggers, rules, and feedback. Are you aiming to boost engagement, convey system status, prevent errors, or reinforce your brand identity?

For error prevention, think about implementing a straightforward microinteraction to avert potential mistakes that could lead to a negative user experience. A common approach is to use a confirmation modal. When users select an option with significant consequences, such as deleting a document, a pop-up modal typically appears, requiring confirmation of the action.

Another effective example is demonstrated by Mailchimp in their signup form, where microinteractions help mitigate potential errors by displaying all password requirements. As each requirement is met [Trigger], the system indicates [Rules] this to the user by fading the text and circle [Feedback], repeating the process for each requirement [Loops].

Common uses of microinteractions in UX design

Microinteractions offer a myriad of possibilities as they encompass numerous digital components. It's nearly improbable to encounter a website or application devoid of any form of microinteractions. Below are some typical examples that we encounter in our daily digital interactions.

We then witnessed a broader adoption of microinteractions, particularly in the form of loaders. Due to slow internet speeds, the initial item visible on the screen often became the circular loader, rotating indefinitely. Consequently, a significant portion of visitors left before the page could fully load.

‍

‍

In response to this issue, the conventional loader was initially substituted with progress bars, enabling users to comprehend the system's status. Over time, percentages and estimated time were incorporated to further enhance the user experience. This marked a small but significant stride toward improving the user's experience during waiting periods.

Providing users with an estimated wait time rather than an indefinite loader increases the likelihood of their patience throughout the duration. Each of these new loaders adheres to Jacob Nielsen’s foundational principle of User Interface Design Heuristics: Visibility of System Status.

This progress was further enhanced as more websites began implementing Delightful Loaders. Although initially introduced to mitigate poor performance, they significantly decreased user frustration. Users were no longer irritated during page loading; instead, the more imaginative the animation, the more engaged they became.

However, a drawback emerged as users gradually lost interest in the repetitive animation, leading to a resurgence of frustration.

‍

Micro interactions are most commonly used for the following purposes

1. Delight
2. User Engagement/Attention capture
3. System status and Feedback
4. Minimalization

1. Delight

The most prominent interactions throughout a user's journey are incorporated to delight them. Sometimes, these microinteractions evolve into animations, designed to introduce a special touch on the screen—something clients often refer to as the "Wow Factor."

A prime illustration of microinteractions employed for delight is evident in the recent redesign of Facebook likes. Despite the initial adjustment period required for the long tap to access reactions, the animated emojis that pop up are so delightful that the new update quickly gained popularity.

‍

Delightful micro interactions make the experience for the user feel very personal.

A simple on-boarding screen can create a very good first impression if the content is coupled with the appropriate animation as shown below.

‍

2. User Engagement/Attention Capture

As users, we're often deeply engrossed in the task at hand, dedicating our attention solely to it. Consequently, when something on the screen changes, we may overlook it, a phenomenon known as change blindness. There are situations where we aim to capture the user's attention without causing distraction from the current task. This is where microinteractions prove valuable.

Subtle movements, like the notification icon shifting, are sufficient to prompt users to look without disrupting their focus. Microinteractions serve as a means to guide the user's attention toward what requires their momentary focus.

‍

A classic example of this is seen in the carousels featured on many e-commerce websites and applications. Upon arriving on the home page, users are presented with a selection of discounts or offers currently available from the business. Due to the limited space available to showcase multiple offers, the carousel automatically cycles through them, effectively drawing the user's attention.

3. System status and Feedback

Microinteractions serve to subtly convey system status and provide feedback to users. For instance, Instagram employs a discreet indicator to display the duration of a video: the time briefly appears for one second at the video's outset and promptly disappears. Despite contradicting Jakob Nielsen's principle advocating for constant visibility of system status, this microinteraction effectively informs users of the video's length.

YouTube and Facebook have departed from traditional loaders in favor of Skeleton Screens to illustrate page load status. These screens reveal the page layout before content fully loads. Observing the skeleton screen while awaiting text and images creates the impression of a shorter wait time, thereby alleviating frustration.

‍

4. Minimalization

A common micro interaction most iPhone users come across is while entering the password on the lock screen. If an incorrect password is entered, the screen vibrates while clearing the password. Throughout this process, there is no text that comes up on the screen to instruct the user as to what went wrong.

Interactions that are similar to human gestures as so intuitive that they don’t need supporting text.

‍

Tips for designing better microinteractions

There are a few things you need to keep in mind when designing microinteractions:

Prompt Response Time

Ensure your microinteraction delivers feedback immediately following the trigger's activation, whether initiated by the user or the system. If there's a delay in the manifestation of the microinteraction, users may not connect it with the initial action, rendering it ineffective and potentially confusing.

Imagine clicking a button and experiencing no response for the next five seconds. Would you wait or assume the button is malfunctioning and leave?

Purposeful Design

As designers, we should strive to avoid incorporating features or elements lacking purpose or relevance to the product or user experience. The same principle applies to microinteractions—each one should contribute value to the product rather than merely enhancing aesthetics. Avoid adding unnecessary details or elements.‍

Before crafting a microinteraction, ask yourself:

• ‍What is the objective of this microinteraction?
• Will it enhance the user experience?
• Are there any extraneous details or elements?
• Consistency is Key

Consistency is vital across all aspects of your app, particularly concerning microinteractions. Establish a uniform style for all interactions throughout the product. This enables users to learn them once and subsequently enjoy a seamless experience with your product.

Take away

Microinteractions play a pivotal role in shaping your user experience. Consider your users' interactions and engagement with your product, then craft suitable interactions to facilitate their journey. As designers, employing well-crafted microinteractions is essential for elevating our products, rendering them more tangible. In essence, these interactions act as a conduit, bridging the gap to make the digital experience more relatable and instinctive.