Komunikaty interfejsu i pomocnicy

1) Dlaczego są potrzebne

• pojawiają się w kontekście, gdy są naprawdę potrzebne,
• krótkie i specyficzne, bez wprowadzania do obrotu,
• nie blokują głównego scenariusza i nie szanują dostępności.

2) Mapa narzędzi i kiedy je używać

Zasada: zawartość krytyczna - w polu widzenia i w tekście interfejsu, nie tylko w podpowiedzi.

3) Układanie wzorów i wyzwalaczy

Przed akcją: tekst pomocnika/podpowiedź („Hasło ≥ 8 znaków”).
W momencie akcji: końcówka narzędzi/coachmark z ostrością/hover/long-press.
Po akcji: toast/banner z wyjaśnieniem wyniku i link „Więcej”.
Intencją: pokazanie przez '?','i ',' Detale ',' Ctrl +/' (paleta poleceń).

4) Kopiowanie

Jedna myśl, jedno zdanie. Zacznij od czasownika ("Wybierz"..., "Napełnij'...).
Brak błędu: "Filtr wykluczył wszystkie wpisy. Chcesz zresetować filtr?
Liczby i fakty zamiast szacunków: "Komisja 1. 5–2%».
Ważne: Nie obiecuj dokładnego czasu, chyba że jest to gwarantowane.

5) Dostępność (A11y)

Wskazówka narzędziowa: 'role =' tooltip ', komunikacja przez' aria-description by 'ze spustem; dostępne przez klawiaturę.
Informuj klocki: 'role =' status '(grzeczny), błędy -' role = 'alert' '.
Coachmark/Tour: Focus in order, 'Esc' zamyka, skupić się z powrotem do źródła.
Kontrast tekstu ≥ AA; podpowiedź nie jest jedynym nośnikiem znaczenia.

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) Pokaż zarządzanie i „higiena”

Deduplikacja - Nie wyświetlaj tej samej wiadomości więcej niż N razy na sesję.
Kontrola częstotliwości: cool-down 24 h na coachmark/tour; użytkownik ma nie przypominać.
Narzędzia nie rywalizują: nie otwierać końcówki narzędzi nad coachmark i odwrotnie.
Pamięć o postępie: Zakończone kroki wycieczki nie są już oferowane.

7) Teksty pomocnicze do formularzy

Napisz „jak przejść” regułę, a nie „co zrobiłeś źle”.
Przykład formatu obok: 'DD. MM. RRRR ',' user @ domain. tld '.
Dla pól złożonych - przycisk „Przykład” (otwiera mały snajper/maskę).
Walidacja i pomocnik nie kolidują: z błędem, pomocnik zamienia się w krótki „jak naprawić”.

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) Paleta dowodzenia i wyszukiwanie według działań

Wyzwalacz: 'Ctrl +/',' Ctrl + K 'lub przycisk'

W palecie: akcje z ikonami i hotkeys ("Bet... — ⏎»).
Maszyna stanu: przy wyborze akcji - nawigacja/wykonanie natychmiastowe, „Anuluj” - 'Esc'.

9) Pomocnik AI/copilot

Forma/określenie wskazówki ("Co to jest pochwa? "), pól wypełniania projektu z listą zmian przed zastosowaniem.
W przypadku scenariuszy wrażliwych (płatność/stawka) - tylko wyjaśnienia i listy kontrolne, decyzja pozostaje z użytkownikiem.
Nauczaj na własnej dokumentacji/FAQ; logowanie pytań w celu poprawy statyki.

10) Specyfika iGaming

Zasady i limity: zauważalne pomocnicy obok przycisków "Postaw zakład", "Cashout", "Ustaw limit. "Jasny język i przykłady.
KYC/AML: wskazówki krok po kroku (dokumenty, daty sprawdzenia, co będzie dalej).
Turnieje: w karcie - „Jak punkty są przyznawane” (wskazówka tooltip/inline), link „Zasady”.
Płatności: pomocnik o opłatach/terminach i „Dlaczego weryfikacja jest potrzebna”.
Odpowiedzialna gra: dyskretne, ale widoczne „Ustaw limit dzienny” (kontrast AAA, brak migotania).

11) Wydajność i pozycjonowanie

Animacje świetlne „nieprzezroczystość/przekształcenie” ≤ 180ms, na zewnątrz szybciej.
Pozycjonowanie do źródła, przesunięcie 4-8 px, auto-flip na krawędziach.
Nie tworzyć drzewa DOM z setek prompts - leniwy montaż przez focus/hover.
Rozważmy „woli zredukowany ruch”: prompty statyczne zamiast migotania.

12) Metryki i eksperymenty

Wskazówki CTR (wrażenia → kliknięcia na STA/” Więcej„).
Zmniejszenie błędów/awarii w formach z pomocą vs kontrola.
Czas na pierwszy sukces po pustym/zwiedzaniu.
Wiersze ukrywania/odmowy (sygnał ujemny - nadpisać tekst/moment wyświetlania).
Dzienniki popularnych zapytań w palecie poleceń/pomocniku AI.

13) Żetony systemu projektowania (przykład)

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) Realizacja: znak i „nie przypominaj”

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) Anty-wzory

Wskazówki, że zamknąć CTA lub nakładać się ostrość.
Informacje krytyczne tylko w tooltip/hover.
10 + wycieczka krokowa bez Skip Later.
Błyszczące/skaczące wskazówki, zwłaszcza w trybie ciemności.
„Żarty” i metafory kulturowe w błędach i ograniczeniach.
Agresywne kolory i dźwięk dla odpowiedzialnej gry.

16) Lista kontrolna QA

Dostępność

• Końcówka narzędzi/coachmark dostępne na klawiaturze, "Esc' zamyka, zwraca ostrość.
• Kontrast ≥ AA, teksty są niezależne tylko od kolorów.

Zachowanie

• Wskazówki nie pokrywają się ważnych elementów, są ustawione na źródło.
• Istnieje deduplication wrażenie i nie przypominać.
• Animacje ≤ 180ms, szybciej.

Znaczenie

• Tekst jest konkretny i krótki, CTA jest odpowiedni.
• Przykłady podano w formułach/ograniczeniach.

Metryka

• CTR, czas na sukces, część skór są usuwane.

17) Dokumentacja w systemie projektowym

Кобонента: „HelperText”, „Inz Hint”, „Tooltip”, „Coachmark”, „ProductTour”, „DocsLink”, „CommandPalette”, „AiHelper”.
Rozmiar/czas/tony, przewodnik ARIA i przykłady kopiowania.
Szablony dla częstych scenariuszy (KYC, limity, płatności, turnieje, zakłady).
Do/Nie galeria z prawdziwymi ekranami.

Krótkie podsumowanie

Pomocnicy są dobrzy, gdy na czas, w kontekście i bez zbędnego dramatu. Daj krótkie, dostępne i weryfikowalne wskazówki, szanuj ostrość i częstotliwość wrażeń, naprawiaj żetony i wzory w systemie projektowania. Więc użytkownicy są mniej prawdopodobne, aby popełnić błędy i dostać się do wyniku szybciej - zwłaszcza w wrażliwych scenariuszach iGaming.