Interface prompts and helpers

1) Why they are needed

• appear in context when they are really needed,
• short and specific, without marketing,
• do not block the main scenario and respect availability.

2) Tool map and when to use them

Rule: critical content - in the field of view and in the text of the interface, not only in the hint.

3) Placement patterns and triggers

Before the action: helper text/inline-hint ("Password ≥ 8 characters").
At the moment of action: tooltip/coachmark with focus/hover/long-press.

After the action: toast/banner with an explanation of the result and the link "More."

By intention: showing by '?', 'i', "Details," 'Ctrl +/' (command palette).

4) Copywriting

One thought, one sentence. Start with a verb ("Choose...," "Fill...").
No fault: "The filter excluded all entries. Do you want to reset the filter?
Numbers and facts instead of estimates: "Commission 1. 5–2%».
Important: Don't promise an exact time unless it's guaranteed.

5) Availability (A11y)

Tooltip: 'role = "tooltip"', communication via 'aria-describby' with trigger; available via keyboard.
Inform blocks: 'role = "status"' (polite), errors - 'role = "alert"'.
Coachmark/Tour: Focus in order, 'Esc' closes, focus back to source.
Text contrast ≥ AA; hint is not the only carrier of meaning.

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) Show management and "hygiene"

Deduplication - Don't show the same message more than N times per session.
Frequency control: cool-down 24 h for coachmark/tour; the user has a Do Not Remind.
Tools do not compete: do not open tooltip over coachmark and vice versa.
Memory of progress: The completed steps of the tour are no longer on offer.

7) Helper texts to forms

Write "how to pass" the rule, not "what you did wrong."

Example of format next to: 'DD. MM. YYYY`, `user@domain. tld`.
For complex fields - the "Example" button (opens a small snippet/mask).

Validation and helper do not conflict: with an error, helper turns into a short "how to fix."

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) Command palette and search by actions

Trigger: 'Ctrl +/',' Ctrl + K 'or button. ""

In the palette: actions with icons and hotkeys ("Bet... — ⏎»).
State machine: when selecting an action - instant navigation/execution, "Cancel" - 'Esc'.

9) AI helper/copilot

Form/term hints ("What is a vager? "), draft-fill fields with a list of changes before applying.
For sensitive scenarios (payment/rate) - only explanations and check lists, the decision remains with the user.
Teach on your own documentation/FAQ; log questions to improve statics.

10) The specifics of iGaming

Rules and limits: noticeable helpers next to the buttons "Place a bet," "Cashout," "Set a limit." Clear language and examples.
KYC/AML: step-by-step tips (documents, check dates, what will happen next).

Tournaments: in the card - "How points are awarded" (tooltip/inline-hint), link "Rules."

Payments: helper about fees/deadlines and "Why verification is needed."

Responsible play: unobtrusive but visible "Set daily limit" prompts (AAA contrast, no flicker).

11) Performance and positioning

Light animations' opacity/transform '≤ 180ms, out faster.
Positioning to the source, shift 4-8 px, auto-flip at the edges.
Do not create a DOM tree from hundreds of prompts - lazily mount by focus/hover.
Consider 'prefers-reduced-motion': static prompts instead of shimmer.

12) Metrics and experiments

CTR tips (impressions → clicks on STA/" More ").
Reduction of errors/failures in forms with helper vs control.
Time to first success after empty/tour.
Hiding/refusing prompts (negative signal - overwrite the text/moment of display).
Logs of popular queries in the command palette/AI helper.

13) Design system tokens (example)

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) Realization: coachmark and "don't remind"

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) Anti-patterns

Hints that close CTA or overlap focus.
Critical information only in tooltip/hover.
10 + step tour without Skip Later.
Shimmering/jumping clues, especially in dark mode.
"Jokes" and cultural metaphors in mistakes and limits.
Aggressive colors and sound for responsible play.

16) QA checklist

Availability

• Tooltip/coachmark available on keyboard, 'Esc' closes, focus returns.
• Contrast ≥ AA, texts are independent of color only.

Behavior

• Hints do not overlap important elements, are positioned to the source.
• There is impression deduplication and Don't Remind.
• Animations ≤ 180ms, out faster.

Meaning

• The text is specific and short, CTA is appropriate.
• Examples are given in the formulas/restrictions.

Metrics

• CTRs, time to success, proportion of hides are removed.

17) Documentation in the design system

Компоненты: `HelperText`, `InlineHint`, `Tooltip`, `Coachmark`, `ProductTour`, `DocsLink`, `CommandPalette`, `AiHelper`.
Size/time/tone tokens, ARIA guide and examples of copywriting.
Templates for frequent scenarios (KYC, limits, payments, tournaments, bets).
Do/Don't gallery with real screens.

Brief Summary

Helpers are good when on time, in context and without unnecessary drama. Give short, accessible and verifiable hints, respect the focus and frequency of impressions, fix tokens and patterns in the design system. So users are less likely to make mistakes and get to the result faster - especially in sensitive iGaming scenarios.