Microinteractions and feedback

1) What is micro-interaction

Microinteractions are short signal ↔ response cycles that confirm that the system has heard the user and is moving towards the result.

1. Trigger (click, swipe, focus, system event).

2. Rules (what changes and how).

3. Fidbeck (visual/sound/tactile/text).

4. Loop/meta-rules (repeat, expiration, undo/redo).

The goal: to reduce uncertainty and cognitive load without distracting from the task.

2) Design principles

Meaning> effect. The effect explains "what happened" and "what's next."

Instantaneity. The first response ≤ 100 ms (buttons/switches).
Unambiguity. Distinguishable states: hover/focus/pressed/disabled/loading.
Savings. Minimum properties, short durations, no fireworks.
Consistency. The same actions are the same signals.
Accessibility. Fidbek is seen, heard and read by a screen reader; there is an alternative to motion/sound.

3) Timings and curves

Hover/Focus: 120-180ms

Pressed/Toggle: 80–120 мс

Toast/Tooltip: input 180-240ms, output 120-160ms

Inline validation: ≤ 100 ms after loss of field focus

The default curve is' cubic-bezier (0. 2, 0, 0. 2, 1)`; for pressed - accelerated 'cubic-bezier (0. 4, 0, 1, 1)`.

4) Microinteraction catalog

4. 1 Buttons and switches

Immediate response: visual click/indent + busy state when queried by the network.
Optimistic update: change UI immediately, roll back on error (with undo).
Double-click debate: block repetition until/timeout is answered.

4. 2 Inline-validation of forms

Validation on blur fields; messages are brief and constructive ("at least 8 characters").
Status icon + color + text (not one color).
For passwords - an instant indicator of "strength" (does not interfere with input).

4. 3 Toast/banners/snacks

Use for non-blocking confirmations.
Duration 2-5 s, pause at hover/focus, Undo button where appropriate.
Don't shut down important content and CTAs.

4. 4 Progress and skeletons

If the length of the process is known, the progress bar; if not, skeleton instead of spinner.
No layout jumps: fix. block heights.

4. 5 Badges/counters

Digit contrast ≥ 4. 5:1; maximum 99/999 with truncation '99 +'.
Increment animations - short steps of 40-60 ms batches, without the "trembling" layout.

4. 6 Tooltip/Help

Appearance by hover/focus; accessibility via 'aria-describedby'.
Prohibit critical information only in tooltip.

5) Errors, empty states, undo

Error: honest text, explanation of the reason and action ("Repeat," "Change card").
Empty state: what it is and how to start; illustration muted, text contrast AA/AAA.
Undo window: 5-10 s for reversible actions (removal, cancellation of bet before bullet).

6) Multimodal feedback

Sound: quiet, short, one pattern per event type (success/error/attention); turn off in the settings.
Vibro/haptika: easy press response/success; respect'prefers-reduced-motion 'and system limitations.
Visual: only 'transform/opacity', no heavy blur/shadows on arrays.

7) Availability (A11y)

': focus-visible' for keyboard; focus ring without blur.
Screensaver: 'role = "status "/" alert"' for toast; living regions' aria-live = "polite/assertive" '.
Alternative to sound/motion; 'prefers-reduced-motion: reduce'.
Text and icon contrast - WCAG (regular ≥ 4. 5:1).

8) Performance

Respond ≤ 100ms: visual response to the network.
Animate 'transform/opacity'; avoid 'height/left/box-shadow' on multiple elements.
Network effects - with prefetch and optimism; retrai are idempotent.

9) Microinteraction tokens (design system)

json
{
"micro": {
"duration": { "hover": 160, "focus": 160, "press": 90, "toastIn": 220, "toastOut": 140 },
"easing":  { "std": "cubic-bezier(0. 2,0,0. 2,1)", "acc": "cubic-bezier(0. 4,0,1,1)" },
"toast":  { "timeoutMs": 3500, "pauseOnHover": true },
"badge":  { "max": 99, "emphasisStepMs": 50 }
}
}

10) Implementation snippets

html
<div id="toast" role="status" aria-live="polite" hidden></div>
<script>
const toast = (msg, {undo, timeout=3500}={})=>{
const el = document. getElementById('toast');
el. innerHTML = undo? '$ {msg} <button> Undo </button>': msg;
el. hidden = false;
let t = setTimeout(close, timeout);
el. onmouseenter = () => clearTimeout(t);
el. onmouseleave = () => t = setTimeout(close, timeout);
if (undo) el. querySelector('button'). onclick = ()=>{ undo(); close(); };
function close(){ el. hidden = true; el. innerHTML=''; }
};
</script>

js const rules = { password: v => v.length>=8         "Minimum 8 characters"};
document. querySelectorAll('[data-validate]'). forEach(i=>{
i.addEventListener('blur', e=>{
const rule = rules[e. target. name]; if (!rule) return;
const ok = rule(e. target. value);
e. target. dataset. state = ok===true? 'ok': 'err';
e. target. nextElementSibling. textContent = ok===true? '': ok;
});
});

js export const haptic = type => {
if (!('vibrate' in navigator)) return;
if (type==='success') navigator. vibrate(10);
if (type==='error') navigator. vibrate([20,40,20]);
};

css
.button{ transition: transform. 09s cubic-bezier(.4,0,1,1), box-shadow. 16s cubic-bezier(.2,0,.2,1); }
.button:active{ transform: scale(.98); }
.input[data-state="err"]{ outline: 2px solid var(--role-danger); }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
@media (prefers-reduced-motion: reduce){ { animation:none! important; transition-duration:.01ms! important; } }

11) Metrics and quality control

INP p75 <200 ms, Long Tasks share <5%.

First User Feedback klik→vizualnyy ≤ 100ms

The proportion of optimistic actions with a rollback of <3% (otherwise - distrust).
UX surveys: clarity of error messages, visibility of confirmations.

QA checklist

• Each interactive has' pressed/busy/disabled '.
• Errors are accompanied by text and actions (Retry/Undo).
• Toasts are available on SR and do not overlap key content.
• Inline validation does not interfere with input; messages are specific.
• 'prefers-reduced-motion' supported; sound/vibration are switched off.
• No layout and strobe jumps; animations on 'transform/opacity'.

12) The specifics of iGaming

Bet/purchase: instant 'pressed→busy', toast "Accepted" with Undo (if the regulations allow), idempotent keys; at delay> 1 s - "Waiting for confirmation...."

Spin/Reveal: short press feedback, smooth start/stop without endless blinking; win - burst ≤ 500 ms + readable text (AAA).

Live coefficients: updates with batches, visual diff (arrow/thickness) without "jumps."

Payments/conclusions: step-by-step progress (KUS→Proverka→Vyplata), transparent texts of the reasons for refusal.
Responsible play: notifications without distracting effects; higher contrast, explicit "Set Limit" CTAs.

13) Anti-patterns

Wait for a network response before showing a response to a click.
"Color without shape": the state differs only in shade.
Endless pulsations/blinks, sharp sounds without a switch.
Tooltip with critical content not accessible from the keyboard.
Spinner in the void> 1-2 s with no progress/skeleton.
Thin shadows/blur on hundreds of elements (lag on weak devices).

14) Documentation in the design system

"Micro-tokens": 'duration/easing', presets of toasts/badges/validators.
"Patterns": buttons, shapes, toasts, progress, inline errors, undo.
"A11y & Motion": rules for SR/HC/reduced-motion; ARIA examples.
"Do/Don't": short clips with timings, INP/First Feedback numbers.

Brief Summary

Micro-interactions are a language of confidence. Give a response in ≤ 100 ms, capture understandable states, use optimistic with safe rollback, do not rely only on color and animate light properties. Respect availability and performance - then the product feels alive, honest and reliable, especially in real-time scenarios.