Hinweise und Interface-Helfer

1) Warum sie gebraucht werden

• erscheinen in einem Kontext, in dem sie wirklich benötigt werden,
• kurz und spezifisch, ohne Marketing,
• blockieren nicht das Hauptszenario und respektieren die Verfügbarkeit.

2) Werkzeugkarte und wann man sie anwendet

Die Regel: Kritische Inhalte - im Blick und im Schnittstellentext, nicht nur im Hinweis.

3) Platzierungsmuster und Auslöser

Vor der Aktion: helper text/inline-hint („Passwort ≥ 8 Zeichen“).
Im Moment der Aktion: tooltip/coachmark bei Fokus/hover/long-press.
Nach der Aktion: Toast/Banner mit Erklärung des Ergebnisses und dem Link „Mehr“.
Entsprechend der Absicht: Anzeige durch'?','i', 'Weitere Informationen', 'Strg +/' (Befehlspalette).

4) Copywriting

Ein Gedanke ist ein Satz. Beginne mit dem Verb („Wähle“..., „Fülle“...).

Kein Verschulden: "Der Filter hat alle Einträge ausgeschlossen. Möchten Sie den Filter zurücksetzen?"

Zahlen und Fakten statt Schätzungen: "Kommission 1. 5–2%».
Wichtig: Versprechen Sie keine genaue Uhrzeit, wenn diese nicht garantiert ist.

5) Verfügbarkeit (A11y)

Tooltip: 'role =' tooltip', Kommunikation über 'aria-describedby' mit dem Trigger; über Tastatur verfügbar.
Info-Blöcke: 'role =' status'(polite), Fehler - 'role =' alert''.
Coachmark/Tour: Fokus in Ordnung, 'Esc' schließt, Fokus zurück zur Quelle.
Textkontrast ≥ AA; Hinweis ist nicht der einzige Bedeutungsträger.

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) Showmanagement und „Hygiene“

Deduplizierung: Zeigt dieselbe Nachricht nicht öfter als N Mal pro Sitzung an.
Frequenzsteuerung: cool-down 24h für coachmark/Tour; Der Benutzer hat „Nicht erinnern“.
Tools konkurrieren nicht: Tooltip nicht über Coachmark öffnen und umgekehrt.
Fortschrittserinnerung: Abgeschlossene Tourschritte werden nicht mehr angeboten.

7) Helper Texte zu Formen

Schreiben Sie „wie man durchkommt“ die Regel, nicht „was Sie falsch gemacht haben“.
Beispielformat daneben: 'DD. MM. YYYY`, `user@domain. tld`.
Für komplexe Felder - Schaltfläche „Beispiel“ (öffnet ein kleines Snippet/Maske).
Validierung und Helper widersprechen sich nicht: Wenn ein Fehler auftritt, wird der Helper zu einem kurzen „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) Befehlspalette und Aktionssuche

Auslöser: 'Strg +/',' Strg + K 'oder Button' ".
In der Palette: Aktionen mit Symbolen und Hotkeys ("Wetten... — ⏎»).
State Machine: Wenn Sie eine Aktion auswählen - sofortige Navigation/Ausführung, „Abbrechen“ - „Esc“.

9) AI-Helfer/Sparschwein

Hinweise auf Form/Begriffe ("Was ist Wager? "), draft-fill Felder mit Änderungsliste vor der Anwendung.
Bei sensiblen Szenarien (Zahlung/Rate) - nur Erklärungen und Checklisten, die Entscheidung liegt beim Nutzer.
Lernen Sie von Ihrer eigenen Dokumentation/FAQ; Loggen Sie Fragen, um die Statik zu verbessern.

10) Besonderheiten von iGaming

Regeln und Grenzen: Bemerkenswerte Helfer neben den Schaltflächen „Wette platzieren“, „Cashout“, „Limit festlegen“. Klare Sprache und Beispiele.
KYC/AML: Schritt-für-Schritt-Hinweise (Dokumente, Prüftermine, was kommt als nächstes).
Turniere: in der Karte - „Wie werden Punkte vergeben“ (tooltip/inline-hint), Link „Regeln“.
Zahlungen: Hilfe zu Gebühren/Fristen und „Warum Sie eine Verifizierung benötigen“.
Verantwortungsvolles Spielen: unauffällige, aber sichtbare „Set a day limit“ -Hinweise (AAA-Kontrast, kein Flimmern).

11) Performance und Positionierung

Einfache Animationen 'opacity/transform' ≤ 180 ms, out schneller.
Positionierung zur Quelle, Verschiebung 4-8 px, Auto-Flip an den Rändern.
Erstellen Sie keinen DOM-Baum aus Hunderten von Hinweisen - montieren Sie faul durch Fokus/Hover.
Berücksichtigen Sie' prefers-reduced-motion': statische Hinweise statt Schimmer.

12) Metriken und Experimente

CTR-Hinweise (Impressionen → Klicks auf STA/„ Weitere Informationen “).
Reduzierung von Fehlern/Ausfällen in Formularen mit Helfern vs Kontrolle.
Zeit bis zum ersten Erfolg nach empty/Tour.
Ausblenden/Ablehnen von Hinweisen (negatives Signal - Text/Moment der Anzeige umschreiben).
Protokolle beliebter Abfragen in der Befehlspalette/AI-Helfer.

13) Design-System-Token (Beispiel)

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) Implementierung: coachmark und „nicht ähneln“

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-Muster

Hinweise, die den CTA schließen oder den Fokus überlappen.
Kritische Informationen nur in tooltip/hover.
10 + Schritte Tour ohne „Später überspringen“.
Flackernde/springende Hinweise, vor allem im dunklen Modus.
„Witze“ und kulturelle Metaphern in Fehlern und Grenzen.
Aggressive Farben und Sound für verantwortungsvolles Spielen.

16) QS-Checkliste

Fassbarkeit

• Tooltip/coachmark über Tastatur erreichbar, 'Esc' schließt, Fokus kehrt zurück.
• Kontrast ≥ AA, Texte hängen nicht nur von der Farbe ab.

Verhalten

• Hinweise überlappen wichtige Elemente nicht, werden zur Quelle positioniert.
• Es gibt Deduplizierung von Impressionen und „Nicht erinnern“.
• Animationen ≤ 180 ms, out schneller.

Bedeutung

• Der Text ist spezifisch und kurz, das CTA ist angemessen.
• Die Formeln/Einschränkungen sind Beispiele.

Metriken

• CTRs werden entfernt, die Zeit bis zum Erfolg, der Anteil der Verschleierungen.

17) Dokumentation im Konstruktionssystem

Компоненты: `HelperText`, `InlineHint`, `Tooltip`, `Coachmark`, `ProductTour`, `DocsLink`, `CommandPalette`, `AiHelper`.
Größen/Zeiten/Ton-Token, ARIA-hyde und copywriting Beispiele.
Vorlagen für häufige Szenarien (KYC, Limits, Zahlungen, Turniere, Wetten).
Do/Don 't-Galerie mit echten Bildschirmen.

Kurze Zusammenfassung

Helfer sind gut, wenn sie pünktlich, im Kontext und ohne unnötige Dramaturgie sind. Geben Sie kurze, zugängliche und überprüfbare Hinweise, respektieren Sie den Fokus und die Häufigkeit der Impressionen, erfassen Sie Token und Muster im Designsystem. So machen Nutzer seltener Fehler und kommen schneller zum Ergebnis - vor allem in sensiblen iGaming-Szenarien.