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

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 подсказок (показы → клики на CTA/«Подробнее»).
Снижение ошибок/отказов в формах с хелперами 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.