Microinteractions with measure — when hover effects help and when they distract
Table of contents 11 sections
- 01What a microinteraction actually is
- 02Sensible feedback versus decorative play
- 03Where hover really helps — and where it contributes nothing
- 04Hover does not exist on a touch device
- 05Four microinteractions every SME site deserves
- 06Four effects you should avoid
- 07Performance — when animations stutter
- 08Accessibility — reduced-motion and visible focus states
- 09The line between lively and playful
- 10How to check whether your microinteractions carry
- 11What you can check today
What a microinteraction actually is
A microinteraction is the small response a website gives to a concrete action. You move the mouse over a button, the button changes colour slightly — that is a microinteraction. You click "Send", nothing happens for three seconds, then a confirmation appears — that is also a microinteraction, just a worse one, because the feedback comes too late.
Microinteractions have two tasks. They give feedback ("your action was registered") and orientation ("this is clickable"). Both together create what visitors perceive as "runs smoothly", without their explicitly noticing it. Precisely this inconspicuousness is the quality marker: good microinteractions do not stand out, their absence does.
Andrea, owner of a 38-room hotel in the Carinthian mountains, had her site fully reworked last year. The old site had elaborately animated image galleries, parallax scrolling, and three different hover animations per card — impressive, technically ambitious, in practice a mobile brake block and a trust loser. The new site has exactly five microinteractions across the whole presence, all subtle, all with a functional reason. The direct-booking rate has risen noticeably, the perceived quality of the site in guest surveys equally.
Sensible feedback versus decorative play
The question you should ask of every animation or hover effect: why is this happening, and what does the visitor gain from it. If the answer is "because it looks nice", the animation is in most cases wrong.
Sensible microinteractions answer concrete questions.
"Is this clickable?" — a hover effect on a button signals clickability, an underline on links signals linkability.
"Did I hit the element?" — a slight colour change or shadow on mouseover confirms the position before you click.
"Is something loading right now?" — a loading indicator calms during the wait without your wondering whether the site has frozen.
"Has my action been processed?" — a brief flash or a tick animation after sending shows the action arrived.
Decorative animations without function, by contrast, are effects that communicate nothing — a logo that spins while loading, a hero image that slowly slides from left to right, particles that drift across the background without occasion. These effects generate attention but communicate nothing concrete. Anyone wanting to build a professional site leaves them out.
Where hover really helps — and where it contributes nothing
Hover effects are a subset of microinteractions, restricted to mouse use. They help in three cases.
On buttons and links. A subtle colour change or shadow signals clickability and position. No one thinks about it, everyone senses the difference between a site with and one without button hover.
On image cards with detail content. A card that lifts slightly on hover or shows additional information can be useful — if the card is already recognisable as clickable and the hover effect is not the only way to see the information.
On controls with unclear behaviour. If an element does not explain its function itself, a hover tooltip can help. That is, however, usually a hint that the element should be better designed.
What hover does not contribute: dramatic animation of backgrounds, slideshow effects, large visual changes on every mouseover. These effects are triggered on every accidental mouse movement, without the visitor wanting it — and produce what UX researchers call "visual noise".
Hover does not exist on a touch device
The most common thinking error in SME websites: a hover effect works wonderfully on the desktop and is simply passed through to the touchscreen. On the phone one of two things then happens. Either the effect does not trigger at all because there is no hover state. Or it triggers on the first tap and only the second tap triggers the actual action — a double tap that feels like a bug and produces abandonment.
More than six out of ten SME site visits come from mobile devices. Anyone using hover effects without actively solving their mobile behaviour is building effects for the minority of their visitors.
Three strategies help.
First, treat hover effects as a bonus, not a prerequisite. The site must function fully without hover; hover is only an additional confirmation on the desktop.
Second, on touch show the static variant. If on the desktop a card reveals additional information on hover, that additional information must be permanently visible on mobile or reachable via a clear tap mechanism.
Third, handle touch events explicitly. In CSS you can use @media (hover: hover), so hover effects only become active where a mouse pointer exists. Effort: ten lines of code. Effect: no more double taps on the phone.
Four microinteractions every SME site deserves
Reduced to the essential — these are the four that make sense on almost every site.
First, button feedback. A short colour change, a slight shadow, or a brightness change on hover and click. Effort: minimal. Effect: noticeable difference in the perception of the site.
Second, link underline with a soft animation. An underline that softly appears on hover or widens, instead of switching abruptly. 150 to 300 milliseconds duration — faster feels abrupt, slower feels sluggish.
Third, loading indicator after form submission. As soon as the visitor has clicked "Send", the button should either grey out or show a loading spinner. That prevents double clicks and communicates that something is happening.
Fourth, confirmation feedback after a successful action. A brief, subtle success notice — "Message sent" with a slight fade-in effect. No confetti animations, no multi-second show. Information, arrival, over.
These four together require at most half an hour of effort at the first site setup and turn a technically functioning site into one perceived as professional.
Four effects you should avoid
From around 60 web-design audits, four animation patterns emerge that harm in almost all cases.
Parallax hero sections. A background image that wanders more slowly while scrolling than the foreground. Looks impressive on first visit, annoys the second time. On the phone the effect breaks anyway in most cases. Performance costs are high, the benefit for the visitor is zero.
Cards or images that fade in on scrolling. If every element only appears on scroll, the page loses its predictability. Visitors scroll uncertainly because they do not know what is still to come — and older visitors often perceive the effect as irritating.
Permanent micro-animations without occasion. An arrow that constantly wobbles up and down, an icon that pulsates, a wordmark that rhythmically changes. These elements draw attention that would be needed for other areas of the page.
Elaborate hover animations with large visualisation effect. A card that grows 30 percent larger on hover, an image that reveals itself and shows new content. Such effects surprise, but they do not work on a phone and they often block fast navigation on the desktop.
Anyone avoiding these four patterns has avoided the largest part of "playful" web-design mistakes.
Performance — when animations stutter
An animation that stutters is always worse than no animation. It communicates "this site is slow" instead of "this site reacts to you".
The technical standard for fluid animation is 60 frames per second — that corresponds to 16.7 milliseconds per frame. If the animation takes longer, the eye sees the stutter. That happens on SME sites in three cases.
First, when the animation changes properties the browser must calculate expensively — width, height, top, left. Efficient are only transform and opacity. Anyone who cannot adjust this in their theme's CSS editor asks their designer — that is basic knowledge.
Second, when too many animations run at once. Three cards fading in on scroll, plus a hover effect on a fourth, plus a loading spinner — that overloads even modern smartphones.
Third, when the site as a whole already loads slowly. Animations are only a symptom; the actual problem is usually overall site performance. Anyone who solves the mobile loading-time topic cleanly also has a better foundation for working microinteractions — more on this in the article on the three-second mark on mobile.
Accessibility — reduced-motion and visible focus states
A share of visitors has the system setting "Reduce motion" activated — for medical reasons, personal preference, or because the device is in energy-saving mode. A seriously built site respects this setting.
Technically a CSS media query suffices: @media (prefers-reduced-motion: reduce) wraps all animation definitions and sets them to zero or very short. Effort: a small block at the end of the stylesheet. Effect: no one who experiences motion as unpleasant is overwhelmed by your site.
Second accessibility discipline with microinteractions: visible focus states. When someone navigates your site with the keyboard (tab key), it must be clearly recognisable which element is currently active. Many themes hide the default browser focus and do not replace it — that makes the site practically unusable for keyboard-affine visitors.
Anyone solving these two points cleanly meets an important part of the EAA requirements that have applied to many SME sites since mid-2025 — without the design concept suffering.
The line between lively and playful
This line is subjective but can be identified by concrete symptoms.
A site feels lively when it reacts to your actions and is otherwise still. You move over a button, the button reacts. You click on a link, you get feedback. If you do nothing, the page is calm.
A site feels playful when it constantly does something without your having done anything. Animations that run while loading. Images that move rhythmically. Wordmarks that pulsate at irregular intervals. That is not "lively", that is "restless".
Thomas, the managing director of a special-purpose machinery firm in Carinthia, put it this way: "My customers must be able to imagine that we work precisely and reliably. A site that hops and blinks is the wrong message." The same logic applies to most B2B industries, to consultancies, to serious service providers. In the B2C area, somewhat more motion is legitimate — but there too: every animation must have a function, not just an effect[1].
How to check whether your microinteractions carry
Three tests you do in a quarter of an hour.
Test one: the attention test. Open your home page on the desktop, leave it open for 30 seconds without interacting. Note where your eye stops. If your eye stops on something that is not actually important — an animated icon, a sliding background — you have an attention trap. The important loses to the moving.
Test two: the touch test. Open the same page on the phone. Tap all hover elements that show an effect on the desktop. If something requires tapping twice without it being recognisable, you have a hover-on-touch problem.
Test three: the reduced-motion test. Activate "Reduce motion" in your device settings (Apple) or "Reduce animation" (Android, Windows). Open your site. If the site now looks completely broken or content is missing because it was only fading in via animation, you have an accessibility problem. If it stands calm and complete, the microinteractions are cleanly conceived.
If you pass all three tests, you have a site whose microinteractions carry instead of distracting.
Frequently Asked Questions
How long should a hover animation last?
Between 100 and 300 milliseconds. Shorter feels abrupt, longer feels sluggish and delays the perceived response time. For very small effects (colour change on button) 100 to 150 milliseconds suffice, for larger effects (card hover) 200 to 300 milliseconds are appropriate.
Do hover effects work on a phone?
No. Touchscreens have no hover state because there is no mouse moving over an element without clicking. Some browsers simulate hover on the first tap, which leads to double taps and confusion. Anyone using hover must either show the static variant on the phone or solve the touch behaviour explicitly via CSS media queries.
Which microinteractions should every SME site have at minimum?
Button feedback on hover and click, link underline with a soft transition, loading indicator after form submission, brief success message on a processed action. These four together require little effort and make the difference between a site perceived as "runs smoothly" and one perceived as "technically okay but lifeless".
Do parallax effects and animated backgrounds make sense?
In the vast majority of cases, no. They look impressive on first visit, cost measurable performance, often break on mobile, and bring no functional benefit to visitors searching for your content. On specific marketing sites with an emotional storytelling character, a subtle parallax effect can work — on SME sites it usually harms more than it helps.
How do I respect visitors with the reduced-motion setting?
Via a CSS media query @media (prefers-reduced-motion: reduce) you can switch off all animations for these visitors, or reduce them to nearly zero. The effort is a one-off CSS block, the effect is binding: visitors who experience motion as unpleasant — for example because of vertigo or certain medical conditions — can use your site without obstacle.
When is an elaborate animation worthwhile at all?
When the animation has a concrete function that transports information: a loading animation for long processes, a step-by-step visualisation in a configurator, an explanatory micro-animation in a help section. If the animation is only meant to be "nice", it is usually superfluous and costs more effort than it brings in.
What you can check today
Open your own site, let it rest for 30 seconds, and watch what moves on its own. Every element in motion without your action belongs on the test bench — with the question of what exactly it communicates. Anyone removing all non-functional animations almost always gains in perceived quality and mobile performance. A calm, reactive site feels more expensive than one constantly in motion — without your having changed anything in the design.
