Підказки та хелпери інтерфейсу

1) Навіщо вони потрібні

• з'являються в контексті, коли вони дійсно потрібні,
• короткі і конкретні, без маркетингу,
• не блокують основний сценарій і поважають доступність.

2) Карта інструментів і коли їх застосовувати

Правило: критичний контент - в полі зору і в тексті інтерфейсу, не тільки в підказці.

3) Патерни розміщення і тригери

До дії: helper text/inline-hint («Пароль ≥ 8 символів»).
У момент дії: tooltip/coachmark при фокусі/hover/long-press.
Після дії: тост/банер з поясненням результату і посиланням «Детальніше».
За наміром: показ по'?','i', «Детальніше»,'Ctrl +/' (command palette).

4) Копірайтинг

Одна думка - одне речення. Починайте з дієслова («Виберіть»..., «Заповніть»...).

Без вини: "Фільтр виключив всі записи. Скинути фільтр?"

Числа і факти замість оцінок: "Комісія 1. 5–2%».
Важливо: не обіцяйте точний час, якщо він не гарантується.

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

Tooltip: 'role = «tooltip»', зв'язок через'aria-describedby'з тригером; доступний за клавіатурою.
Інформ-блоки: 'role = «status»'( polite), помилки -'role = «alert»'.
Coachmark/Tour: фокус по порядку,'Esc'закриває, повернення фокусу до джерела.
Контраст тексту ≥ AA; підказка не єдиний носій сенсу.

html
<button id="kpi" aria-describedby="kpi-tip">RTP</button>
<div id = "kpi-tip" role = "tooltip" hidden> Return to Player - the share of bets returned to players in the long term. </div>
<script>
const b = document. getElementById('kpi'), t = document. getElementById('kpi-tip');
b. addEventListener('focus', ()=>t. hidden=false); b. addEventListener('blur', ()=>t. hidden=true);
b. addEventListener('mouseenter', ()=>t. hidden=false); b. addEventListener('mouseleave', ()=>t. hidden=true);
</script>

6) Управління показами і «гігієна»

Дедуплікація: не показувати одне і те ж повідомлення частіше N раз за сесію.
Контроль частоти: cool-down 24 год для coachmark/tour; у користувача є «Не нагадувати».
Інструменти не конкурують: не відкривати tooltip поверх coachmark і навпаки.
Пам'ять прогресу: завершені кроки туру більше не пропонуються.

7) Хелпер-тексти до форм

Пишіть «як пройти» правило, а не «що ви зробили не так».
Приклад формату поруч: `DD. MM. YYYY`, `user@domain. tld`.
Для складних полів - кнопка «Приклад» (відкриває невеликий сніпет/маску).
Валідація і хелпер не конфліктують: при помилці helper перетворюється на короткий «як виправити».

html
<label for="iban">IBAN</label>
<input id="iban" aria-describedby="iban-help">
<small id = "iban-help "> Format: 22-34 characters, Latin letters and numbers only. </small>

8) Командна палітра і пошук за діями

Тригер: 'Ctrl +/','Ctrl + K'або кнопка «».
На панелі: дії з іконками і гарячими клавішами ("Зробити ставку... — ⏎»).
Стейт-машина: при виборі дії - миттєва навігація/виконання, «Скасування» -'Esc'.

9) AI-хелпер/копілот

Підказки за формою/термінами ("Що таке вейджер? "), draft-заповнення полів зі списком змін перед застосуванням.
Для чутливих сценаріїв (платіж/ставка) - тільки пояснення і перевірочні чек-листи, рішення залишається за користувачем.
Навчайте на власній документації/FAQ; логуйте питання для поліпшення статики.

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

Правила та ліміти: помітні хелпери поруч з кнопками «Зробити ставку», «Кешаут», «Встановити ліміт». Ясна мова і приклади.
KYC/AML: поетапні підказки (документи, терміни перевірки, що буде далі).
Турніри: у картці - «Як нараховуються очки» (tooltip/inline-hint), посилання «Правила».
Платежі: helper про комісії/терміни і «Чому потрібна верифікація».
Відповідальна гра: ненав'язливі, але видимі підказки «Встановіть денний ліміт» (AAA-контраст, без мерехтіння).

11) Перформанс і позиціонування

Легкі анімації'opacity/transform'≤ 180 мс, out швидше.
Позиціонування до джерела, зсув 4-8 px, авто-flip біля країв.
Не створюйте DOM-дерево з сотень підказок - ліниво монтуйте по фокусу/hover.
Враховуйте'prefers-reduced-motion': статичні підказки замість shimmer.

12) Метрики та експерименти

CTR підказок (покази → кліки на СТА/« Детальніше »).
Зниження помилок/відмов у формах з хелперами vs контроль.
Час до першого успіху після empty/туру.
Приховування/відмова від підказок (негативний сигнал - переписуємо текст/момент показу).
Логи популярних запитів в командній палітрі/AI-хелпері.

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

json
{
"help": {
"maxWidth": 320,
"gap": 8,
"radius": 10,
"elev": 8,
"iconSize": 16,
"enterMs": 180,
"exitMs": 120,
"cooldownHours": 24
},
"tour": { "maxSteps": 5, "backdropOpacity": 0. 5, "escCloses": true },
"palette": { "hotkey": "Ctrl+K", "rowHeight": 40 },
"a11y": { "contrastAA": true, "useAriaLive": true }
}

css
.helper { display:flex; gap:8px; align-items:flex-start; max-width:320px; }
.helper__icon { width:16px; height:16px; opacity:.8; }
.tooltip { position:absolute; padding:8px 10px; border-radius:10px; box-shadow:var(--elev-2); }
.tooltip[data-show="true"] { animation: fadeIn. 18s cubic-bezier(.2,0,.2,1); }
@keyframes fadeIn { from { opacity:0; transform: translateY(4px) } to { opacity:1; transform:none } }

14) Реалізація: coachmark і «не нагадувати»

html
<div id="cm1" class="coachmark" role="dialog" aria-labelledby="cm1-title" hidden>
<h3 id = "cm1-title "> New Fast Cashout </h3>
<p> Check out with one button directly from the coupon. </p>
<div class="row">
<button id = "cm1-ok "> Clear </button>
<button id = "cm1-skip"> Don't remind me </button>
</div>
</div>
<script>
const seen = localStorage. getItem('cm1-skip')==='1';
if(!seen) document. getElementById('cm1'). hidden=false;
document. getElementById('cm1-skip'). onclick=()=>{ localStorage. setItem('cm1-skip','1'); cm1. hidden=true; };
document. getElementById('cm1-ok'). onclick=()=> cm1. hidden=true;
</script>

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

Підказки, що закривають CTA або перекривають фокус.
Критична інформація тільки в tooltip/hover.
Тур на 10 + кроків без «Пропустити пізніше».
Мерехтливі/стрибаючі підказки, особливо в dark mode.
«Жарти» і культурні метафори в помилках і лімітах.
Агресивні кольори і звук для відповідальної гри.

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

Доступність

• Tooltip/coachmark доступні по клавіатурі,'Esc'закриває, фокус повертається.
• Контраст ≥ AA, тексти не залежать тільки від кольору.

Поведінка

• Підказки не перекривають важливі елементи, позиціонуються до джерела.
• Є дедуплікація показів і «Не нагадувати».
• Анімації ≤ 180 мс, out швидше.

Сенс

• Текст конкретний і короткий, CTA доречний.
• У формулах/обмеженнях дані приклади.

Метрики

• Знімаються CTR, час до успіху, частка приховувань.

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

Компоненти: `HelperText`, `InlineHint`, `Tooltip`, `Coachmark`, `ProductTour`, `DocsLink`, `CommandPalette`, `AiHelper`.
Токени розмірів/часів/тонів, ARIA-гайд і приклади копірайтингу.
Шаблони для частих сценаріїв (KYC, ліміти, платежі, турніри, ставки).
Do/Don't-галерея з реальними екранами.

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

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