What are microinteractions and why are they important in design?

TL;DR

• Microinteractions are subtle animations and visual feedback elements that guide users through an interface. 
• Microinteractions function as trigger-feedback pairs where the trigger could be a user action or a system state change, and the feedback is a tailored response, usually visual. 
• These interactions enhance user experience by providing instant feedback, such as confirming a button press and communicating system status with cues like animated loading indicators. 
• They also delight users with enjoyable animations, such as confetti bursts for achievements, and focus attention by drawing the eye to key information. 
• Microinteractions help ease transitions between states, like smoothly fading content, and effectively communicate standby statuses or error prevention, keeping users informed and satisfied.

Detailed answer

Microinteractions are the small, subtle animations and visual feedback elements that guide users through an interface. In their essence, they are trigger-feedback pairs where the trigger may be a user action (a command in a graphical user interface (GUI), a gesture, or a voice command) or a change in the system’s state, and the feedback is a specific response tailored to that trigger. Triggers are typically conveyed through these visual elements.

Source

When thoughtfully designed, they can significantly enhance UX by:

1. Providing instant feedback: Microinteractions confirm user actions, like a button shifting slightly when clicked or a checkbox filling with color when selected. This reassures users their input was received.
2. Communicating system status: Animated loading indicators show an operation is in progress. A pulsing "Sending..." message by an email confirms it's being delivered. These keep users informed and manage expectations.
3. Delighting users: Pleasing animations, like a confetti burst when a goal is achieved or a whimsical character reacting to input, create moments of joy and personality that make interfaces memorable.
4. Focusing attention: Motion draws the eye. An important confirmation message sliding in or a tooltip fading up guides users to key information when it's most relevant.
5. Easing state transitions: Smooth animations when views change, like a sidebar sliding out or content fading between pages, help users maintain context and understand spatial relationships in the UI.
6. Standby interaction: Microinteractions also effectively communicate when a system is on standby, awaiting further user input. For instance, pressing and holding an app icon on an iOS device triggers all icons to shake slightly, signaling the system's readiness for further action – either to delete an app or to rearrange it. This subtle cue encourages continuous engagement with the product.
7. Error prevention: Microinteractions alert users about potential mistakes before they complete an action. For instance, when users engage with a UI component that has specific interaction rules, microinteractions can signal whether their inputs are valid or not. A common example would be during data entry, where microinteractions can highlight incorrect fields in real time, guiding users to correct them before proceeding, thereby preventing errors from occurring. 
8. Support undo: This feature allows users to easily reverse their actions, adding a safety net to user interactions. For example, on websites like Gap.com, when a user favorites an item by clicking a heart icon, the icon animates to indicate the action has been taken. If the user changes their mind, clicking the heart again will undo the action. This immediate visual feedback ensures that users feel comfortable knowing they can easily revert their actions without penalty or hassle.
9. Prevent rework: Microinteractions prevent rework during processes like account creation.  For instance, during the account creation on eBay, as users enter their password, the system dynamically displays a checklist of password requirements. Each requirement is visually checked off as it is met. This immediate feedback helps prevent errors by ensuring users know exactly what is expected before they proceed, thus preventing the frustration of having to redo the process due to unmet criteria.

Effective microinteractions can also significantly improve user engagement, satisfaction, task completion rates, and time spent on the website or in the app. 

Related reading: What challenges can come up with microinteractions and how can I solve them?

Rationale behind microinteractions 

The power of microinteractions lies in their ability to shape user perception and behavior in subtle but significant ways. As humans, we are wired to seek out and respond to feedback in our interactions. Microinteractions tap into this fundamental psychological need, providing a sense of control, progress, and engagement.

The psychology of feedback

Cognitive psychology emphasizes the importance of immediate, clear feedback in learning and behavior change. B.F. Skinner's operant conditioning principles demonstrate how positive reinforcement shapes behavior. In the context of UX, microinteractions serve as positive reinforcers, encouraging desired user actions.

For example, the satisfying animation when checking off a task in a to-do app provides a small dopamine hit, motivating the user to complete more tasks. The delightful sound effect when hitting an achievement in a fitness app reinforces the behavior of exercising regularly.

Reducing cognitive load

Microinteractions also play a key role in managing cognitive load. In his influential book "Don't Make Me Think", Steve Krug stresses the importance of reducing question marks for users. Well-designed microinteractions proactively answer common user questions like "Did that action work?", "Is the system processing my request?", or "Where should I go next?".

By providing timely, contextual feedback, microinteractions minimize the mental effort required to navigate an interface. This is especially important in complex business applications where users are often multitasking and facing information overload.

The power of delight

In the book "Microinteractions: Designing with Details", Dan Saffer highlights the emotional impact of microinteractions. He argues that these small moments have an outsized influence on how users feel about a product. A few delightful microinteractions can make a cumbersome enterprise application feel more approachable and engaging.

Mailchimp, for example, is renowned for its playful microinteractions like the "high five" animation when scheduling an email campaign. These small touches create a sense of warmth and personality in an otherwise utilitarian tool.

Source 

Related reading: How do microinteractions impact design accessibility?

❓Questions designers should ask themselves

By asking the right questions, designers can question their decisions, find areas to improve, make sure nothing is overlooked, and reduce mistakes, leading to better, more thoughtful designs.

• What is the user's goal at this moment? Every microinteraction should serve a clear purpose in the user journey. Is it providing necessary feedback, guiding the user to the next step, or offering a moment of delight? Aligning microinteractions with user goals ensures they enhance rather than distract from the core experience.

• Is this microinteraction consistent with the overall design system? Microinteractions should feel like a natural extension of the product's visual language and brand identity. Consistent use of animation styles, timing, and sound effects creates a cohesive experience across the application.

• How does this microinteraction impact usability and accessibility? While delightful, microinteractions should never sacrifice usability. Animations should be smooth and fast, not disorienting. Sound effects should be used sparingly and offer the option to disable them for accessibility. Microinteractions should guide users, not leave them guessing.

• Is this microinteraction truly necessary? Just because you can add a microinteraction doesn't mean you should. Every microinteraction adds cognitive load, so designers must be selective. Focus on high-impact moments in the user journey where a microinteraction can significantly improve the experience.
• How will this microinteraction scale across devices and platforms? Microinteractions need to translate seamlessly across screens and input methods. A delightful animation on a desktop may be cumbersome on mobile. Consider the technical constraints and adapt microinteractions accordingly.

⚠️ Common mistakes to avoid

Learning from your mistakes is important, but many problems can indeed be predicted and avoided. Based on Cieden's collective expertise, we're sharing the most common ones.

• Over-animation or excessive or prolonged animations can quickly become annoying, especially for repetitive actions. A good rule of thumb is that users should barely notice a microinteraction unless they're looking for it.
• Lack of user control. Users should always feel in control of their experience. Avoid microinteractions that feel disruptive or unpredictable. Give users the ability to dismiss or disable animations and sound effects if desired.
• Inconsistent use of microinteractions across an application can feel jarring and unpolished. Establish clear guidelines for when and how to use microinteractions to maintain a cohesive experience.
• Skeuomorphism. While it may be tempting to mimic real-world interactions, overly literal skeuomorphic animations often feel dated and clunky in a digital interface. Aim for interactions that feel native to the medium.
• Forgetting the context. A playful animation may delight in an eCommerce app but feel inappropriate in a healthcare or financial application. Always consider the user's emotional state and the nature of the task at hand when designing microinteractions.

🧩 Methodologies 

These methodologies will make your job easier and more effective. 

• 12 Principles of animation – Originally developed by Disney animators, these principles (such as anticipation, follow through, and staging) provide a foundation for creating engaging, lifelike animations in any medium, including user interfaces.
• The "State-Action-Feedback" model – As described in Val Head's book "Designing Interface Animation", this model breaks down microinteractions into three key components: the state (of the system or UI), the action (taken by the user or system), and the feedback (provided in response to the action). Using this framework ensures that each microinteraction has a clear purpose and provides necessary feedback.
• Progressive disclosure -- This design principle involves sequencing information and actions across several screens, revealing them progressively as needed. Microinteractions can facilitate this by guiding users through complex workflows with contextual feedback and prompts.

🛠️ Useful tools 

These tools will make your job easier and more effective.

• Principle – A powerful tool for designing and animating microinteractions. Its timeline-based interface allows for fine-grained control over animation timing and easing.
• Haiku Animator – A web-based tool that enables designers to create and share animated UI components. It's particularly well-suited for collaborating with developers.
• Kite Compositor – A visual tool for creating complex animations and microinteractions. Its node-based interface allows for advanced animation techniques like parenting and masking.
• LottieFiles – A platform for creating, sharing, and displaying lightweight, scalable animations. Lottie animations can be easily integrated into both web and mobile applications.

🤝 Credits

Our content combines the knowledge of Cieden’s designers with insights from industry influencers. Big thanks to all the influencers for sharing awesome content!

Microinteractions in User Experience by Alita Joyce