Ефекти наведення та інтерактивність

1) Роль наведення в UX

• «Це інтерактивно?» (наведення/курсор/підсвічування),
• «Де я?» (фокус-стиль),
• «Що станеться по кліку?» (стан і affordance),
• «Чи вийшло дію?» (active/pressed і наступний feedback).

Принцип: ефекти підсилюють сенс, а не замінюють його. Ключова інформація і доступ до дії не повинні бути приховані тільки за наведенням.

2) Модель станів і семантика

Базовий набір: 'default'→'hover'→'focus'→'active/pressed'→'disabled'→'loading'( опціонально).
Для посилань додаємо'visited', для перемикачів -'checked'.

• Між станами - візуальна різниця формою/товщиною/іконкою, а не тільки кольором.
• Контраст тексту/іконок до фону: ≥ 4. 5:1 (звичайний текст), ≥ 3:1 (великий/жирний).
• Фокус видно без наведення (клавіатура/скрінрідер).

3) Пристрої та медіа-запити

css
/ There is an exact pointer and hover (mouse/trackpad )/
@ media (hover: hover) and (pointer: fine) {/hover effects/}

/ No hover or rough pointer (touch/remote control )/
@ media (hover: none), (pointer: coarse) {/alternatives to hover/}

/ Any type of pointer (hybrid devices )/
@ media (any-hover: hover) {/minimal improvements/}

• На тач-пристроях ефекти наведення не критичні для виявлення дії - використовуйте явні affordances: колір/іконка/рамка/підказка.
• Не ховайте навігацію/контроль тільки «під hover».

4) Тривалості і криві

• Hover: 120-180 мс
• Focus: 120-180 мс
• Active/Pressed: 80-120 мс
• Ripple/ink (якщо використовується): ≤ 240 мс, 1 цикл

Типова крива: `cubic-bezier(0. 2, 0, 0. 2, 1)`

Active - швидше ('cubic-bezier (0. 4, 0, 1, 1)'), вихід - м'якше ('cubic-bezier (0, 0, 0. 2, 1)`).

5) Токени дизайн-системи (приклад)

json
{
"interactive": {
"duration": { "hover": 160, "focus": 160, "active": 90 },
"easing": { "std": "cubic-bezier(0. 2,0,0. 2,1)", "acc": "cubic-bezier(0. 4,0,1,1)" },
"shadow": { "hover": "var(--elev-2)", "focus": "0 0 0 3px var(--focus-ring)" },
"opacity": { "disabled": 0. 38, "muted": 0. 64 }
}
}

6) Кнопки: еталонний патерн

Default: читається текст ≥ 4. 5:1 до заливки.
Hover: −ΔL фону 0. 02–0. 04, легка тінь, курсор'pointer'.
Active: ще −ΔL 0. 02–0. 04, укорочена тінь/вдавлювання (scale 0. 98), триває. 80-100 мс.
Focus: контрастне кільце 2-3 px без blur.
Disabled: курсор'not-allowed '/' default', opacity ≤ 0. 38, ніяких hover-ефектів.

css
.button {
transition: background-color. 16s var(--ease), transform. 09s var(--ease-acc), box-shadow. 16s var(--ease);
}
@media (hover:hover) and (pointer:fine) {
.button:hover  { background: var(--btn-bg-hover); box-shadow: var(--shadow-hover); }
}
.button:active  { transform: scale(.98); }
.button:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); }
.button[disabled] { opacity:.38; pointer-events: none; }

7) Посилання та текстові дії

Відмінність не тільки кольором: підкреслення за замовчуванням або на hover/focus.
Для наведення: посилення підкреслення (товщина/offset), легка зміна тону.
'Visited'- інший відтінок тієї ж палітри, контраст збережений.

css a { text-decoration: underline; text-underline-offset:.12em; }
@media (hover:hover) and (pointer:fine) {
a:hover { text-underline-offset:.2em; }
}
a:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); }

8) Картки, списки, таблиці

• Hover: м'яка тінь/підсвічування рамки, курсор'pointer'тільки якщо клікабельно вся картка.
• Active: коротке вдавлювання, підсвічування заголовка.
• Focus: видиме кільце навколо картки, не тільки всередині.

• Hover-фон з Δ L 0. 02–0. 04; активний рядок - чітка рамка.
• Кліки по рядку допустимі тільки при явному affordance (іконка «→», підказка).

• Старанно обмежуйте «драбинку» з каскадних затримок - максимум 6-8 елементів (stagger 20-30 мс).

9) Форми і поля введення

Hover біля полів: тонке підсвічування рамки (Δ L ~ 0. 05), без зміни розміру блоку.
Focus: контрастне кільце + зміна кольору рамки; placeholder залишається помітним (≥ 3:1).
Помилка: колір + іконка/текст; коротке «shake» допустимо ≤ 6 px, ≤ 140 мс, один раз.

10) Іконки і маленькі цілі

Збільшуйте зону кліка до 32 × 32 (desktop )/40 × 40 (mobile), навіть якщо сама іконка 20-24 px.
Hover: зміна непрозорості/заливки/товщини, не більше 1-2 властивостей.
Active: короткий «snap» по scale 0. 98.
Focus: кільце по контейнеру зони кліка.

11) Доступність (A11y) і клавіатура

Підтримуйте':focus-visible'( для миші фокус-стилі не показуємо, для клавіатури - показуємо).
Елементи, що створюють hover-підказки, зобов'язані мати еквівалент за фокусом (той же контент з'являється по клавіші Tab/Enter).
Aria-атрибути: у інтерактивів є'role','aria-pressed '/' aria-expanded '/' aria-current'щодо ситуації.
Prefers-reduced-motion: замінюємо масштаб/зсув на мінімум (opacity/fill), відключаємо пульсації.

css
@media (prefers-reduced-motion: reduce) {
{ transition-duration:.01ms! important; animation: none! important; }
}

12) Продуктивність

Анімуйте тільки'opacity'і'transform'; уникайте'width/height/left/top', важких blur/тіней на безлічі елементів.
Помірно використовуйте'will-change'; прибирайте після закінчення переходу.
На списках/таблицях - мінімальні ефекти, без «глобальних» repaint.

13) Hover-intent і «липкість»

• Поріг затримки 80-120 мс перед показом складного tooltip/меню.
• «Липкість» курсору: якщо користувач рухається від пункту до меню під кутом, даємо 200-300 мс «коридору» (трикутник Fitts).
• На тач - замінюємо hover на press або явну кнопку «ще».

14) Tooltip/меню/дропдауни

Відкриття: hover-intent (десктоп )/press (тач), закриття - по догляду/blur/ESC.
Позиція - до джерела, стрілка вирівняна; max-width і переноси включені.
Доступність: 'role = «tooltip»', зв'язуємо'aria-describedby'; для меню -'role = «menu»'+ керування стрілками.

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

Коефіцієнти/лідерборди: hover підсвічує рядок/комірку, але не змінює метрики позиціонування (без «стрибків»).
Картки турнірів/бонусів: hover може «оживляти» рамку/іконку, але текстове CTA і умови залишаються читаними (≥ 4. 5:1).
Відповідальні повідомлення (18 +, ліміти): без ефектів відволікання; при наведенні допускається тільки підкреслення посилань і чіткий фокус.
Кнопки ставок/покупок: active-feedback обов'язковий (візуальне клацання/вдавлювання) і недвозначний disable після відправки.

16) Приклади інтерфейсних рецептів

css
.cta {
background: var(--role-primary);
color: var(--on-primary);
transition: background-color. 16s var(--ease), transform. 09s var(--ease-acc), box-shadow. 16s var(--ease);
}
@media (hover:hover) and (pointer:fine) {
.cta:hover { background: var(--role-primary-hover); box-shadow: var(--elev-2); }
}
.cta:active { transform: scale(.98); }
.cta:focus-visible { box-shadow: 0 0 0 3px var(--focus-ring); }

css
.card { transition: box-shadow. 16s var(--ease), border-color. 16s var(--ease); }
@media (hover:hover) and (pointer:fine) {
.card:hover { box-shadow: var(--elev-2); border-color: var(--border-strong); }
}
.card:focus-visible { box-shadow: 0 0 0 3px var(--focus-ring); }

css
.table tr { transition: background-color. 12s var(--ease); }
@media (hover:hover) and (pointer:fine) {
.table tr:hover { background: var(--row-hover); }
}
.table tr:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }

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

Приховувати критичні дії/меню тільки за hover.
Змінювати розміри/розкладки при наведенні (скачки layout).
Опора тільки на колір для різниці станів.
Мерехтіння, нескінченні пульсації, «кислотні» glow на текстах.
Відсутність focus-стилів або їх невидимість на темній темі.
Наводити курсор'pointer'на неінтерактивні елементи.

18) QA-чек-лист

Доступність

• Всі інтерактиви досяжні по клавіатурі; фокус бачимо.
• Hover-контент доступний по'focus '/' aria'.
• Контраст тексту та іконок відповідає WCAG.

Поведінка

• Hover/active/disabled/visited помітні формою і тоном.
• Немає затримки відгуку> 120 мс.
• На тач є альтернатива hover.

Перформанс

• Анімуються тільки'transform '/' opacity'.
• Немає важких blur/тіней на безлічі елементів.
• На довгих списках ефекти зведені до мінімуму.

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

Таблиця станів для базових компонентів (кнопки, посилання, картки, поля, рядки таблиць).
Токени тривалостей/кривих/тіней і приклад коду для light/dark.
Розділ «Hover vs Touch»: правила альтернатив і приклади.
«Do/Don't» з короткими кліпами і показниками контрасту.

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

Ефекти наведення - це допоміжна, але критична частина мови інтерфейсу. Робіть їх короткими і передбачуваними, підтримуйте клавіатуру і тач, забезпечуйте контраст і видимий фокус, анімуйте тільки дешеві властивості. Тоді інтерактивність підсилює ясність і швидкість дій, а не заважає їм.