The Small Details That Make an Interface Feel Right
A Checkmark Before the Click
A user types a new password into a signup form. At the eighth character, a small gray circle beside the words “at least 8 characters” turns into a green checkmark. Nothing has been submitted. The form has simply said, instantly, that one rule has been met.
That checkmark is a microinteraction: a small, self-contained moment of feedback that answers a single question. The Nielsen Norman Group (NN/g) is a research and consulting firm whose usability studies are widely used across the design industry as a reference point for how people actually behave on screens. NN/g defines microinteractions as trigger-feedback pairs, where the trigger can be a user action or a change in the system’s state and the feedback is a narrowly targeted response communicated through small, highly contextual changes in the interface 1.
Once named, they are everywhere. A button that visibly depresses when tapped. A toggle that slides rather than jumping. A screen transition that slides the new view in from the direction the user traveled, so the eye follows instead of being reset. None of these appear on a product page, and all of them shape whether software feels responsive or vaguely broken. Small feedback is how a product earns trust, one confirmation at a time.
The Anatomy of a Small Moment
The pattern is called the Saffer model, and it has four parts: the trigger, the rules, the feedback, and the loops and modes. The trigger starts the interaction, the rules define what happens, the feedback communicates those rules to the user, and loops and modes govern the special cases 2.
Pull-to-refresh makes the structure visible. The trigger is the downward drag on a list. The rules are the invisible logic underneath: how far the finger must travel before the system commits, and what separates a deliberate pull from an accidental overscroll. The feedback is the indicator that appears, tightens and spins. According to Google’s Material Design guidelines, which document the pattern for Android developers, that animated indicator gives continuous feedback about system state, using brief motion to confirm the action and show the change 3. The loops and modes are the awkward edges: a second pull while a refresh is already running, or a failed network that must report an error rather than a success.
A like button runs the same circuit in a fraction of a second. The tap is the trigger, a rule decides whether to add or remove the like, and the color fill plus small bounce is the feedback. Every part answers the question the checkmark answered: did the system understand what I just did?
Motion Has a Job to Do
Motion is the medium most microinteractions use, and the one most easily abused. NN/g is blunt about restraint: animation in user experience (UX) must be unobtrusive, brief and subtle, and its legitimate uses are feedback, state-change and navigation metaphors, and strengthening signifiers 4. NN/g writes that “Motion is most often appropriate as a form of subtle feedback for microinteractions, rather than to induce delight or entertain users”, and notes that humans are prone to being distracted by any motion, meaningful or not 4.
“Fast” can be given a number. NN/g’s timing research recommends that most animations fall between 100 and 500 milliseconds depending on complexity and distance traveled, with simple feedback such as a checkbox or toggle at roughly 100 milliseconds and larger changes such as a modal appearing at 200 to 300 milliseconds 5.
The test for whether an animation belongs is whether it confirms an action, shows a change, or guides attention. Motion that does none of those is decoration, and decoration on a screen someone uses forty times a day stops being charming around the fourth time.
When Motion Makes People Sick
For some users, unnecessary motion is not merely irritating. Google’s web.dev accessibility course reports that “By age 40, over 35 percent of adults will have experienced some form of vestibular dysfunction” and warns that “We cannot predict what level of movement will cause issues for people with seizure, vestibular, and other visual disorders” 6.
Accessibility standards address this directly. Web Content Accessibility Guidelines (WCAG) 2.2 Success Criterion 2.3.3, Animation from Interactions, states that motion animation triggered by interaction can be disabled, unless the animation is essential to the functionality or the information being conveyed 7. The World Wide Web Consortium’s (W3C) accompanying explanation is direct about why: some users experience distraction or nausea from animated content, and vestibular disorder reactions include dizziness, nausea and headaches 8.
The accommodation already exists and costs nothing to honor. Every major operating system offers a reduce motion setting, exposed to websites and apps as prefers-reduced-motion. As Mozilla Developer Network (MDN) describes it, the feature detects whether a user has enabled a device setting to minimize non-essential motion, and “The setting is used to convey to the browser on the device that the user prefers an interface that removes, reduces, or replaces motion-based animations” 9. One switch tells every well-built product at once to calm down. The remaining work is for designers and developers to listen.
A Test for Motion That Earns Its Place
Subtle, fast, purposeful and respectful of a stated preference are one discipline applied consistently. A separate, ongoing trend in design tooling points toward more tactile, intentional motion built with dedicated animation formats, though that trend is an observation from industry commentary rather than a settled finding, and is not the basis for any guidance in this piece. The password checkmark passes because it confirms something at the moment confirmation is needed, and because a checkmark that appears without animation loses nothing. Pull-to-refresh passes because the indicator reports genuine system state, and a static spinner tells a reduced-motion user the same thing.
Three questions settle most cases. Does the motion confirm an action, show a change, or guide attention? Is it fast enough to feel like a response rather than a performance, somewhere in the low hundreds of milliseconds? Would the product stay clear and usable with the motion switched off? The best microinteractions are the ones nobody consciously notices, because noticing usually means something went wrong.
At Spruce, these are the questions we bring to every project. The guidelines above are not abstract principles we keep on a shelf. They are the actual criteria we use when deciding whether a transition belongs, whether a timing feels like a response or a performance, and whether an animation holds up when a user has asked for less motion. That discipline is what separates interfaces that feel considered from ones that feel assembled. If you are building something and want the details to work as hard as the big decisions do, that is exactly the kind of problem we are here for.
Spruce DX is the digital experience division of Spruce Technology, helping organizations design and build accessible, human-centered digital products.