The anatomy of a small moment
Saffer (2013) splits microinteractions into a trigger, rules, feedback, and loops and modes. Tapping a heart that fills with colour while the count ticks up contains all four. Kendrick (2018) shows these small interactions communicate status, prevent errors and carry brand impression. On mobile, adding haptic feedback lets people feel results without looking.
Feedback that shortens waits
Myers (1985) found percent-done indicators made waits more tolerable and satisfying, and Harrison et al. (2010) showed that changing only the direction and speed of ripples in a progress bar made the same duration feel shorter. Press states, spinners and completion ticks all say the system heard you. Pair them with skeleton screens when content is coming, and a small celebration at completion improves the remembered experience, as the peak-end rule suggests.
Principles of motion and accessibility
Chang and Ungar (1993) applied cartoon principles such as easing and continuity to interfaces, and Heer and Robertson (2007) showed animated transitions help track change. Motion must be short and purposeful; long decorative animation adds waiting. WCAG 2.2 criterion 2.3.3 advises letting users disable interaction-triggered motion, and CSS prefers-reduced-motion respects device settings, a web accessibility courtesy for people with vestibular disorders.
FAQ
- Are microinteractions just animations?
- No; animation is one way to show feedback, while a microinteraction is the whole small task from trigger through rules and feedback.
- How long should UI animations be?
- Most feedback should be short and immediate; use only purposeful motion so waits do not grow.
Sources reviewed: 2026-10-27
References
- Saffer, D. (2013). Microinteractions: Designing with details. O'Reilly Media. The source of the trigger-rules-feedback-loops model.
- Kendrick, A. (2018, October 21). Microinteractions in user experience. Nielsen Norman Group. Real-app examples of what microinteractions do.
- Harrison, C., Yeo, Z., & Hudson, S. E. (2010). Faster progress bars: Manipulating perceived duration with visual augmentations. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (pp. 1545–1548). ACM. Shows progress-bar animation alone can shorten perceived wait.
- Myers, B. A. (1985). The importance of percent-done progress indicators for computer-human interfaces. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (pp. 11–17). ACM. Classic study showing percent-done indicators raise satisfaction.
- Chang, B.-W., & Ungar, D. (1993). Animation: From cartoons to the user interface. In Proceedings of the 6th Annual ACM Symposium on User Interface Software and Technology (pp. 45–55). ACM. Applies cartoon animation principles to interfaces.
- Heer, J., & Robertson, G. (2007). Animated transitions in statistical data graphics. IEEE Transactions on Visualization and Computer Graphics, 13(6), 1240–1247. Shows animated transitions help people track change.
- World Wide Web Consortium. (2023). Understanding Success Criterion 2.3.3: Animation from interactions. In Understanding WCAG 2.2. Criterion to let users disable interaction-triggered motion.