--- title: "Microinteractions" url: "https://insideuxdesign.com/en/glossar/microinteractions" language: "en" description: "What are microinteractions? Dan Saffer’s four building blocks explained in plain language, with an example and tips. Learn how small details build trust." published: "2026-10-14T15:20:25+02:00" updated: "2026-10-14T15:20:25+02:00" --- # Microinteractions Microinteractions are small, self-contained moments in a product that do exactly one thing, like a like button or a toggle, and show you right away what just happened. - **Buchstabe:** M - **Englischer Begriff:** Microinteractions UX glossary · engl. Microinteractions # Microinteractions Microinteractions are small, self-contained moments in a product that do exactly one thing, like a like button or a toggle, and show you right away what just happened. Imagine you tap the heart below a photo in an app. It fills with red, gives a little bounce, and the number next to it goes up by one. The whole thing takes less than a second, but you know right away: that worked. If the heart just stayed gray, you’d probably tap it twice more and wonder whether the app had frozen. Small moments like these are called microinteractions. ## Explained simply Microinteractions are small, self-contained interactions that do exactly one thing: flip a switch, mark a message as read, set an alarm, type a password and see whether it meets the rules. Think of everyday objects: a light switch that clicks softly, or the button at a pedestrian crossing that lights up to confirm your request. They’re tiny details, but without them you’re never quite sure something happened. The term was popularized by interaction designer Dan Saffer in his book “Microinteractions”, published by O’Reilly in 2013. His core idea: a product isn’t made good or bad only by its big features, but also by the many small details in between. ## The four building blocks Saffer breaks every microinteraction down into four parts: - **Trigger:** What starts the interaction? It can be something a person does, like a tap, or something the system does, like a new message arriving. - **Rules:** What happens next, and what’s allowed? For example, a second tap undoes a like. - **Feedback:** How does the system show what’s going on? Through color, motion, sound or vibration. - **Loops and modes:** What happens when it repeats or over a longer period, and are there settings that change its behavior? Think of an alarm that repeats every weekday. For [usability](https://insideuxdesign.com/en/glossar/usability), feedback usually matters most. It answers the question people ask after every action: did that work? You can read more in [What Are Microinteractions and How Can You Use Them?](https://insideuxdesign.com/en/blog/what-are-microinteractions-and-how-to-use-them). ## An example Here’s an example: during sign-up, people type a password, submit the form and only then find out that a special character is missing. Many get annoyed, and some give up. In the redesigned version, the rules appear right below the field. As people type, each rule they meet gets a check mark. The task is the same, but the microinteraction removes the uncertainty before an error happens. ## Common misconceptions Microinteractions aren’t decoration. An animation that only looks nice and delays every action by a second gets annoying by the tenth time at the latest. Good microinteractions are fast, unobtrusive and explain something. And they aren’t always visible: a short vibration or a sound can be a microinteraction too. ## In practice - **Respond to every action.** Check buttons, switches and forms to see whether they react visibly. A loading state beats silence. - **Keep animations short.** Motion should help people find their way, not slow them down. Also respect the system setting for reduced motion. - **Let the words help.** Often the best feedback is one clear sentence. Good [microcopy](https://insideuxdesign.com/en/glossar/microcopy) and the right motion work well together. ## Related terms [Microcopy](https://insideuxdesign.com/en/glossar/microcopy), [Affordance](https://insideuxdesign.com/en/glossar/affordance), [Usability](https://insideuxdesign.com/en/glossar/usability), [Design System](https://insideuxdesign.com/en/glossar/design-system) ## Sources - [Dan Saffer: Microinteractions: Designing with Details. O’Reilly Media, 2013](https://www.oreilly.com/library/view/microinteractions/9781449342760/) - [Alita Kendrick: Microinteractions in User Experience. Nielsen Norman Group, 2018](https://www.nngroup.com/articles/microinteractions/) ## More terms [ ### A/B Testing An A/B test is an experiment that shows two versions of a page or element at the same time to randomly split groups of visitors. It lets you decide with real data which version works better. ](https://insideuxdesign.com/en/glossar/a-b-testing) [ ### ARIA ARIA is a W3C standard that adds roles, states and properties to HTML. It tells screen readers what an element is and how it currently behaves. ](https://insideuxdesign.com/en/glossar/aria) [ ### Accessibility Accessibility means designing websites, apps and digital documents so that everyone can use them, including people with visual, hearing, motor or cognitive disabilities. ](https://insideuxdesign.com/en/glossar/accessibility) [ ### Affordance An affordance describes what action an object makes possible and whether people can recognize it: a button invites you to press it, a handle invites you to pull. ](https://insideuxdesign.com/en/glossar/affordance) [ ### Alt Text Alt text is a short text version of an image, stored in the HTML alt attribute. Screen readers read it aloud so people who can’t see the image get the same information. ](https://insideuxdesign.com/en/glossar/alt-text) [ ### Atomic Design Atomic Design is a method for building user interfaces from small, reusable building blocks, from single elements like buttons all the way up to complete pages. ](https://insideuxdesign.com/en/glossar/atomic-design) [ ### BFSG The BFSG, Germany’s Accessibility Strengthening Act, has required many companies since 28 June 2025 to make certain products and digital services, such as online shops, accessible. ](https://insideuxdesign.com/en/glossar/bfsg) [ ### Card Sorting Card sorting is a research method in which people sort terms written on cards into groups. It shows you how they mentally organize content, so you can plan navigation that makes sense to them. ](https://insideuxdesign.com/en/glossar/card-sorting) [ ### Cognitive Load Cognitive load is the mental effort it takes to understand and use an interface. The less unnecessary thinking a design demands, the easier the actual task becomes. ](https://insideuxdesign.com/en/glossar/cognitive-load) [ ### Color Vision Deficiency A color vision deficiency means someone has a harder time telling certain colors apart than most people. The most common type is red-green deficiency. ](https://insideuxdesign.com/en/glossar/color-vision-deficiency) [ ### Contextual Inquiry Contextual inquiry is a research method where you observe and interview people in their real work environment. It shows you how they actually get tasks done, not just how they describe it. ](https://insideuxdesign.com/en/glossar/contextual-inquiry) [ ### Contrast Ratio The contrast ratio describes how much two colors differ in brightness, such as text and background. WCAG requires at least 4.5:1 for normal text. ](https://insideuxdesign.com/en/glossar/contrast-ratio)