Microinteractions

Imagine you’re using a fitness app. When you set your goals, a brief animation celebrates your dedication. As you start your daily routine, a progress bar at the top of the screen grows, letting you know how much you’ve accomplished. Each time you complete one of the exercises, its image turns gray, clearly indicating you’re ready to move on to the next one. Once you've finished the entire workout, the screen bursts into a confetti animation, giving you a fulfilling sense of accomplishment. 

These small moments within a digital product are known as microinteractions.

Microinteractions are vital in guiding, reassuring, and engaging with your user. They provide feedback that indicates system status and prevents users from committing errors. Although these features may seem like simple additions, incorporating scroll bars, progress indicators, interactive buttons, and loading circles greatly improves user understanding of a system's status and helps them determine if it's responding correctly to their commands.

Microinteractions are based on a user/system-microinteraction-feedback sequence. The user or the system usually initiates an action—also known as a trigger—which activates a purposeful microinteraction. Once the action is completed, the system provides feedback to the user, informing them of the outcome or any further steps needed.

The primary goals of Microinteractions are the following:²

Show system status: Being transparent with the user. Doing so makes them feel empowered and engaged.

• Communicate Progress: The system actively responds to the user's request. Loading bars/circles and the “typing…” indicator on a messaging app are good examples of this.
• Standby: These messages indicate to the user that something is missing from their end to perform an action. Like when you click on the volume icon on a YouTube video it shows the volume slider, indicating you can now adjust it to your preference.

Error Prevention: These messages indicate something is wrong, so there are less frustration and pain points for the user.

• Support Undo: Users are going to make mistakes. Crafting microinteractions that help undo them without going through complex steps enhances user experience. For example, you know you accidentally liked a post on Instagram because a white heart flashes on the photograph.
• Prevent Rework: Reduce user frustration by letting them know they made an error right away instead of at the end. For example, when you fill out a form and misspell your email, the field turns red to indicate that the email is not valid.

• User Experience (UX): UX describes the overall experience a user has when interacting with a product, system, or service. The goal of UX design is to create simple, effective, relevant, and overall enjoyable experiences for the user. UX design considers the why, what, and how of a product from the user's perspective.³
• UX Design: The process of designing products, systems, or services with the user's experience in mind. It involves a comprehensive understanding of users, what they need, what they value, their skills, and also their limitations. It also considers the business goals and objectives.³
• Interaction Design: Design focused on creating engaging & intuitive interfaces which consider the interaction between users and products or systems.
• Trigger: The component that initiates a microinteraction, such as a button, a gesture (e.g.: swiping, pinching, holding), or user request.
• Feedback: Visual, haptic, or auditory cues that inform users about what is happening and what has just happened.
• Loops and Modes: Determine the length of the interaction and its behavior under different conditions.

The term "microinteractions" was popularized by Dan Saffer's book "Microinteractions: Designing with Details," published in 2013. However, the concept started in the 1980s with graphical user interfaces that let users interact with computers through icons instead of text commands, making them easier to use. One of the pioneering companies was Apple, they used microinteractions as visual cues to enhance user experience and create an intuitive product: the 1984 Macintosh.⁴

An important distinction made in Saffer’s book is the difference between a feature and a microinteraction. Features are usually complex and time-consuming; microinteractions are simple and effortless. Saffer uses the example of a music player as a feature, and adjusting the volume as a microinteraction within a feature.⁵

Microinteractions are usually one of the final steps in product or system design, often leading to them needing to be noticed or remembered. Nonetheless, microinteractions have become critical in differentiating products in a crowded marketplace, especially as technology and UX design remain increasingly important.

Dan Saffer: Product design leader and author of: Designing for Interaction (2006, 2009), Designing Gestural Interfaces (2008), Designing Devices (2011), and Microinteractions (2013). He is currently the Director of Product Design and Flipboard, a social magazine. He has designed apps, websites, wearable, appliances, automotive interiors, services, and robots since 1995. Saffer has influenced many UX/UI designers to focus on the nuances of user interactions.⁶

Bill Buxton: Advocate and pioneer in human-computer interaction, innovation and design. He focuses on human values and capacities when integrating new products and technologies. From 2005-2022, Buxton was a Partner Researcher at Microsoft Research. He has described microinteractions as “the glue that holds the design together and makes it feel complete”.^7,8

A product or service’s user experience is greatly influenced by microinteractions. These design tools facilitate a product’s cohesiveness and flow, which makes it simpler for people to understand and navigate. Adding colors that provide feedback can make tasks more interesting and intuitive. These small thoughtful design elements can cause users to feel like the product has exceeded their expectations. In general, positive emotional responses are crucial in the digital world, especially when building brand loyalty and user retention. Your users will likely revisit your product if you provide them with simple elements such as microinteractions.

In general, microinteractions create a more personalized experience. Not only do they improve navigation and usability but also foster long-term relationships between the user and the brand, cultivating loyalty.

Microinteractions are generally seen as positive enhancements to UX design, but unfortunately, There are a couple of drawbacks and controversies, for example:

1. Overuse and Annoyance: Although the section above mentions how microinteractions usually cause positive feelings and associations, this isn’t always the case. When overused or poorly designed, microinteractions can become annoying and frustrating. Excessive animations, sounds, and colors can distract users from performing their tasks, therefore decreasing the quality of the experience.
2. Performance Issues: Microinteractions are supposed to be simple. Nevertheless, they might slow down performance when users have older hardware or bad connections. Overusing microinteractions could make this effect pop out more.
3. Accessibility: Microinteractions usually expect the user to use their five senses and be able-bodied. For example, visual cues without textual or auditory feedback can be inaccessible to users with disabilities. Similarly, interactions that require certain motor control actions can be difficult for people with limited dexterity. Microinteractions have to be well designed to not discriminate or prevent certain people from experiencing its benefits. They become a bit more challenging because they are supposed to be simple designs, but they have to consider different contexts.
4. Increased Development Time and Costs: Adding microinteractions to your product can add costs to your business. You not only require money to design and develop the microinteractions but also for maintenance over time, especially when it uses multiple devices and platforms.
5. Inconsistency Across Devices: Considering the point above, sometimes microinteractions don’t work on all types of devices which can lead to inconsistent user experiences. One has to make sure they translate correctly to implement them.

Despite these potential issues, when designed thoughtfully and used in tandem with other UX design tools and research, microinteraction can improve user navigation and experience. Each product should consider all types of implications behind microinteraction to evaluate if this is a tool that will provide better experiences to both the business and the user.

In 2020 Spotify revolutionized its interface with the introduction of new microinteractions, enhancing the overall user experience for its global audience of music fans. During one of Spotify’s “hack days,” they decided to change the “like” button. 

Previously, when users liked a song, the heart icon would simply go from empty to filled. However, they wanted the heart to not only change in appearance but to pulse and glow so it would capture the excitement of discovering a new favorite song. The design team integrated this idea and also added a tactile element using the vibration features on phones, so users could “feel” the beat when they tapped the heart. 

The update, though simple in concept, was a hit. Users loved the new interactive heart which led them to have tailored music recommendations as hitting the like button more times enhanced their personal algorithm. This case showed the whole logic behind microinteractions: a small change can make a big impact.

Today, Spotify continues to innovate, the heart “like” button has evolved into a plus sign that transforms into a checkmark with a fun animation and tactile feedback. Although almost 4 years have passed since this case, the principles behind microinteractions and its impact on user experience are still present and influential in interfaces such as Spotify

Cognitive Walkthrough

This article explores the cognitive walkthrough, a method that evaluates user interface learnability through systematic analysis. This process assesses how intuitive an interface is, based on users' expectations and experiences with similar systems.

1. Goodreads. (n.d.). Microinteractions Quotes. Retrieved April 15, 2025 from https://www.goodreads.com/work/quotes/23766133-microinteractions-designing-with-details
2. Joyce, A. (2018). Microinteractions in User Experience. Nielsen Norman Group. Retrieved April 15, 2025 from https://www.nngroup.com/articles/microinteractions/
3. Interaction Design Foundation. (n.d.). UX Design. Retrieved March 12, 2024, from https://www.interaction-design.org/literature/topics/ux-design
4. Hsiao, E. (2023) Micro-Interactions: The Next Frontier of Usability Revolutionizing UX in 2023. Retrieved March 12, 2024, from https://bootcamp.uxdesign.cc/micro-interactions-the-next-frontier-of-usability-revolutionizing-ux-in-2023-b82e6e695500
5. Saffer, D. (2013). Microinteractions: Designing with details. O'Reilly Media.
6. O Danny Boy. (n.d.). About Dan Saffer. Retrieved April 15, 2025 from  https://www.odannyboy.com/
7. William Buxton. (2024). Biography. Retrieved April 15, 2025 from  https://www.billbuxton.com/
8. Cree, T. (2023). Microinteractions for Successful UX/UI Design. Retrieved April 15, 2025 from https://tacree-ux.medium.com/microinteractions-for-successful-ux-ui-design-327c29eb8bc6