Мікровзаємодії та фідбек

1) Що таке мікровзаємодія

Мікровзаємодії - короткі цикли «сигнал ↔ відповідь», що підтверджують, що система почула користувача і рухається до результату.

1. Тригер (клік, свайп, фокус, системна подія).

2. Правила (що і як змінюється).

3. Фідбек (візуальний/звуковий/тактильний/текстовий).

4. Цикл/мета-правила (повтор, закінчення, undo/redo).

Мета: знизити невизначеність і когнітивне навантаження, не відволікаючи від завдання.

2) Принципи проектування

Сенс> ефект. Ефект пояснює «що сталося» і «що далі».
Миттєвість. Перший відгук ≤ 100 мс (кнопки/перемикачі).
Однозначність. Помітні стани: hover/focus/pressed/disabled/loading.
Економія. Мінімум властивостей, короткі тривалості, без «салютів».
Консистентність. Однакові дії - однакові сигнали.
Доступність. Фідбек бачимо, чуємо і читаємо скрінрідером; є альтернатива руху/звуку.

3) Таймінги і криві

Hover/Focus: 120-180 мс

Pressed/Toggle: 80-120 мс

Toast/Tooltip: вхід 180-240 мс, вихід 120-160 мс

Inline-валідація: ≤ 100 мс після втрати фокусу поля

Типова крива: `cubic-bezier(0. 2, 0, 0. 2, 1)`; для pressed - прискорена'cubic-bezier (0. 4, 0, 1, 1)`.

4) Каталог мікровзаємодій

4. 1 Кнопки та перемикачі

Негайний відгук: візуальний «клацання «/вдавлювання + стан'busy'при мережевому запиті.
Оптимістичне оновлення: міняємо UI відразу, відкочуємо при помилці (з undo).
Дебаунс подвійних кліків: блокуємо повтор до відповіді/timeout.

4. 2 Inline-валідація форм

Валідація на blur поля; повідомлення короткі і конструктивні («мінімум 8 символів»).
Іконка статусу + колір + текст (не кольором одним).
Для паролів - моментальний індикатор «сили» (не заважає введення).

4. 3 Тости/банери/снекбари

Використовуйте для неблокуючих підтверджень.
Тривалість 2-5 с, пауза при hover/focus, кнопка Undo де доречно.
Не закривайте важливий контент і CTA.

4. 4 Прогрес і скелетони

Якщо довжина процесу відома - прогресбар; якщо ні - skeleton замість спінера.
Без стрибків layout: фікс. висоти блоків.

4. 5 Бейджі/лічильники

Контраст цифри ≥ 4. 5:1; максимум 99/999 з усіченням'99 +'.
Анімації інкременту - короткі кроки 40-60 мс батчами, без «тремтіння» макета.

4. 6 Tooltip/Help

Поява по hover/focus; доступність через'aria-describedby'.
Заборона на критичну інформацію тільки в tooltip.

5) Помилки, порожні стани, undo

Помилка: чесний текст, пояснення причини і дії («Повторити», «Змінити карту»).
Порожній стан: що це і як почати; ілюстрація приглушена, контраст тексту AA/AAA.
Undo window: 5-10 с для оборотних дій (видалення, скасування ставки до кулі).

6) Мультимодальний фідбек

Звук: тихий, короткий, один патерн на тип події (успіх/помилка/увага); вимикаємо в налаштуваннях.
Вібро/хаптика: легкий відгук на press/успіх; поважаємо'prefers-reduced-motion'і системні обмеження.
Візуальний: тільки'transform/opacity', без важких blur/тіней на масивах.

7) Доступність (A11y)

`:focus-visible'для клавіатури; фокус-кільце без blur.
Скрінрідер: 'role = «status »/» alert»'для тостів; живі регіони'aria-live = «polite/assertive»'.
Альтернатива звуку/руху;'prefers-reduced-motion: reduce`.
Контраст тексту та іконок - по WCAG (звичайний ≥ 4. 5:1).

8) Перформанс

Реагуйте за ≤ 100 мс: візуальний відгук до мережі.
Анімуйте'transform/opacity'; уникайте'height/left/box-shadow'на безлічі елементів.
Мережеві ефекти - з префетчем і оптимістикою; ретраї ідемпотентні.

9) Токени мікровзаємодій (дизайн-система)

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) Сніпети реалізації

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) Метрики та контроль якості

INP p75 <200 мс, частка Long Tasks <5%.
First User Feedback (klik→vizualnyy відгук) ≤ 100 мс.
Частка оптимістичних дій з відкатом <3% (інакше - недовіра).
UX-опитування: зрозумілість повідомлень про помилки, видимість підтверджень.

QA-чек-лист

• У кожного інтерактиву є'pressed/busy/disabled'.
• Помилки супроводжуються текстом і діями (Retry/Undo).
• Тости доступні по SR і не перекривають ключовий контент.
• Inline-валідація не заважає введення; повідомлення конкретні.
• Підтриманий'prefers-reduced-motion'; звук/вібра вимикаються.
• Немає стрибків layout і строба; анімації на'transform/opacity'.

12) Специфіка iGaming

Ставка/купівля: миттєвий'pressed→busy', тост «Прийнято» з Undo (якщо регламент дозволяє), idempotent-ключі; при затримці> 1 с - «Очікуємо підтвердження»....
Spin/Reveal: короткий прес-фідбек, плавний старт/стоп без нескінченного блимання; виграш - сплеск ≤ 500 мс + читабельний текст (AAA).
Лайв-коефіцієнти: оновлення батчами, візуальний дифф (стрілка/товщина) без «стрибків».
Платежі/висновки: покроковий прогрес (KUS→Proverka→Vyplata), прозорі тексти причин відмови.
Відповідальна гра: повідомлення без відволікаючих ефектів; вищий контраст, явні CTA «Встановити ліміт».

13) Анти-патерни

Чекати мережевої відповіді, перш ніж показати відгук на клік.
«Колір без форми»: стан відрізняється тільки відтінком.
Нескінченні пульсації/миготіння, різкі звуки без вимикача.
Tooltip з критичним контентом, недоступним з клавіатури.
Спінер в порожнечі> 1-2 с без прогресу/скелетону.
Тонкі тіні/blur на сотнях елементів (лаг на слабких пристроях).

14) Документація в дизайн-системі

«Micro-tokens»: 'duration/easing', пресети тостів/бейджів/валідаторів.
«Patterns»: кнопки, форми, тости, прогрес, inline-помилки, undo.
«A11y & Motion»: правила для SR/HC/reduced-motion; приклади ARIA.
«Do/Don’t»: короткі кліпи з таймінгами, цифрами INP/First Feedback.

Коротке резюме

Мікровзаємодії - це мова впевненості. Давайте відгук за ≤ 100 мс, фіксуйте зрозумілі стани, використовуйте оптимістику з безпечним відкатом, не покладайтеся тільки на колір і анімуйте легкі властивості. Поважайте доступність і продуктивність - тоді продукт відчувається живим, чесним і надійним, особливо в сценаріях реального часу.