CTA-Buttons und Aufmerksamkeitsbereiche

1) Die Rolle des CTA und die Grundsätze

1. Ein großer Schritt pro Bildschirm. Primary-CTA sollte offensichtlich und einzigartig sein.
2. Kontext → Handlung. Neben dem CTA gibt es immer eine kurze Erklärung, „was als nächstes passieren wird“.
3. Sichtbarkeit ohne Aggression. Kontrast ≥ AA, ausreichende Größe und lesbarer Text - statt auffälliger Effekte.
4. Konsistenz. Die gleichen CTAs verhalten sich auf allen Bildschirmen gleich.
5. Sicherheit. Riskante CTAs werden von einer Bestätigung oder einem Undo begleitet.

2) CTA-Hierarchie

Primary - Schlüsselaktion der Seite („Setzen“, „Auffüllen“, „Bestätigen“). 1 Stücke

Sekundär - ein alternativer oder Hilfsschritt („Weitere Informationen“, „Methode ändern“).
Tertiär - Text-/Geisterschaltflächen (Geist) mit dem geringsten visuellen Gewicht.
Destruktiv - separater Stil (Farbe/Warnsymbol) + Bestätigung/undo.

Regel: Wenn es mehr als einen „starken“ CTA auf dem Bildschirm gibt, ist eine Wahl ohne Ziel wahrscheinlich. Gestalten Sie den Stream neu.

3) Copywriting CTA

Verb + Objekt, 2-4 Wörter: „Wette platzieren“, „Guthaben auffüllen“, „Limit setzen“.
„2.000 ₴ abheben“ ist besser als „Senden“.
Vermeiden Sie doppelte Negationen („Nicht rückgängig machen“) und vage Metaphern.
Für riskante Handlungen - Untertitel 1 mit der Zeile: „Ohne Bestätigung können Sie 5 Sekunden abbrechen“.

4) Größen, Form, Kontrast

Minimale Klickzone: ≥ 44 × 44 px (Touch), ≥ 32 × 32 px (Desktop).
Knopfhöhe: 40-48 px; Radius 10-12 px; intern. Horizontale Einrückungen 16-20 px.
Text-zu-Hintergrund-Kontrast: WCAG AA; Verlassen Sie sich nicht nur auf die Farbe - verwenden Sie ein Symbol/Label.
Die tabellarischen Zahlen für die Summen/koeff.: ' font-variant-numeric: tabular-nums; '.

5) Zustände und Feedback

Hover/Focus/Active - sichtbar und unterscheidbar (Fokus-Ring nicht verstecken).
Busy (loading): sofortige Reaktion ≤ 100 ms, Spinner/Skelett statt „Stille“.
Deaktiviert: nicht nur „grau“ - erklären Sie, warum es nicht verfügbar ist (tooltip/inline-hint).
Undo/Confirm: für destruktive CTAs - entweder ein Bestätigungsmodal oder ein Panel mit Undo 5-10 Sek.

html
<button class =" btn btn--primary" aria-busy = "false" id = "cta "> Bid </button>
<script>
const cta = document. getElementById('cta');
cta. addEventListener('click', async () => {
cta. setAttribute('aria-busy','true'); cta. disabled = true ;//instant try {
const r = await fetch('/api/bet', {method:'POST', headers:{'Idempotency-Key':crypto. randomUUID()}});
if(!r.ok) throw new Error();
//success toast/navigation
} catch {
//show reason and suggest Retry
} finally {
cta. disabled = false; cta. setAttribute('aria-busy','false');
}
});
</script>

6) Aufmerksamkeitszonen (Desktop) und Daumenzonen (Mobile)

Blickmuster: F-Muster/Z-Muster, „Hot Spots“: Oben-Links (Überschrift), Oben-Rechts (Sekundär), Unten auf dem Bildschirm (Fertigstellung).

• über der Falte für kurze Bildschirme oder am unteren Rand des Formulars auf der Blicklinie,
• „klebrigen“ Panel unten auf dem Handy (thumb-Zone).
• Mobile „Daumen“: bequemer unteren 1/3 des Bildschirms, rechts/links Rand - hängt von der dominanten Hand (Standard - untere Mitte/rechts).

html
<footer class = "sticky-cta" role = "region" aria-label = "Action">
<div class = "sum"> Bid: 200 ₴</div>
<button class =" btn btn--primary "> Confirm </button>
</footer>

<style>
.sticky-cta{position:sticky; bottom:0; display:flex; gap:12px; align-items:center;
padding:12px 16px; background:var(--bg-elevated); box-shadow:0 -8px 24px rgba(0,0,0,.12)}
.sticky-cta. btn{flex:1}
</style>

7) Platzierung und Einzüge

Trennen Sie primary-CTA von sekundären Elementen durch einen weißen Raum (16-24 px).
Stellen Sie nicht zwei Primary nebeneinander - einer wird zu einer „falschen“ Wahl.
In Formularen: CTA nach dem letzten Feld; sekundär - links/unter CTA („Zurück“, „Abbrechen“).
Auf Karten/Kacheln: CTA unten rechts; für lange Listen - inline-CTA auf jeder Karte.

8) Animationen und Bewegungsmuster

Ein-/Ausgang: 120-180 ms, 'opacity/transform' (ohne Layout-Shakes).
Press-Effekt: Reduzierung auf 96-98% + Schatten → „Klick-Feeling“.
Für den „Erfolg“: eine kurze Scheck-Mikro-Animation ≤ 400 ms; für reduce-motion - statisches Symbol.
Vermeiden Sie endlose flackernde Effekte (Anti-Muster für verantwortungsvolles Spielen).

9) A11y und Tastatur

'role =' button 'wird bei nativem' <button> 'nicht benötigt.
Focus-Ring sichtbar; Die Tab-Reihenfolge ist logisch. Enter/Space aktiviert CTA.
„aria-busy“ beim Laden; Verwenden Sie für den Status die Live-Region 'role =' status'.
Schaltflächentext verfügbar SR; Icons - mit 'aria-hidden =' true' und nicht der einzige Bedeutungsträger.

10) Metriken und Experimente

CTR CTA, Konvertierung nach Klick, Time-to-Click vom Auftritt bis zum Klick.
Scroll-Tiefe → Klick: Der Anteil der Klicks, die „über der Biegung “/“ unter der Biegung“ aufgetreten sind.
Heatmap Zonen (Desktop/mob); Thumb-reach (mob).
Cancel/Undo Rate für riskante CTAs.
A/B: Text, Farbe/Kontrast, Größe, Anordnung, „klebrige“ Platte vs statische Platzierung.

11) Design-System-Token (Beispiel)

json
{
"cta": {
"height": { "sm": 40, "md": 44, "lg": 48 },
"radius": 12,
"px": { "sm": 14, "md": 16, "lg": 20 },
"gap": 8,
"icon": 18,
"focusRing": { "width": 2, "offset": 2 },
"motion": { "pressMs": 90, "hoverMs": 160, "inMs": 160, "outMs": 120 }
},
"sticky": { "enabled": true, "shadow": "0 -8px 24px rgba(0,0,0,.12)" },
"a11y": { "contrastAA": true, "tabularNums": true }
}

css
.btn{height:44px; padding:0 16px; border-radius:12px; display:inline-flex; gap:8px; align-items:center; justify-content:center}
.btn--primary{background:var(--accent); color:var(--on-accent); font-weight:600}
.btn--ghost{background:transparent; border:1px solid var(--border); color:var(--fg)}
.btn[aria-busy="true"]{pointer-events:none; opacity:.85}
.btn:focus-visible{outline:2px solid var(--focus-ring); outline-offset:2px}

12) Muster für iGaming

Setzen (Primary): Zeigen Sie den Betrag und den Koeffizienten nebeneinander an. bei> 3 s Verzögerung - „Wir warten auf Bestätigung“... + sichere Retry.
Kaution: Sticky-CTA unten mob. Bildschirm („Nachfüllen“), sekundär - „Methode ändern“; sichtbare Gebühren/Fristen in der Nähe.
Cashout: Der CTA wird auf dem Match-/Coupon-Bildschirm aufgezeichnet; zeigt immer den aktuellen Cashout-Betrag an; Bestätigung vor der Ausführung.
Limit setzen: CTA ist nicht aggressiv; in der Nähe - „Tritt in Kraft durch“.... AAA-Kontrast, kein Blinken.
Turniere: CTA „Join“ auf der Turnierkarte + sekundäre „Regeln/Preise“.

13) Antipatterns

Zwei primary-CTAs nebeneinander („Wetten“ und „Bonus kaufen“) sind kognitiver Wettbewerb.
„Grau“ disabled ohne Erklärung.
Endlose Aufmerksamkeits-Animationen und Re-Pigging.
Eine Schaltfläche, die die Markierungen ändert und den Fokus wegführt.
CTA unter dem großen „Dekor“, das unter der Biegung weggeht.
Icon statt Text (ohne Label) an kritischen Stellen.

14) Snippets der Analytik

js function trackCTA(name, meta={}) {
window. dataLayer?.push({ event:'cta_click', name,...meta });
}
//example document. querySelector('#deposit'). addEventListener('click', ()=>{
trackCTA('deposit_click', { placement:'sticky_footer', amount:getAmount() });
});

15) QS-Checkliste

Sinn und Hierarchie

• Es gibt genau einen primary-CTA auf dem Bildschirm; Sekundär nicht in Konflikt mit dem Gewicht.
• Der Text des CTA ist klar, ohne doppelte Negationen; in der Nähe - was als nächstes passieren wird.

Verfügbarkeit

• Focus-Ring sehen; Enter/Space arbeiten; 'aria-busy' beim Booten.
• Text/Hintergrund-Kontrast ≥ AA; icon ist nicht der einzige Bedeutungsträger.

Verhalten

• Sofortige Reaktion ≤ 100 ms; busy-state und Retry bei Störungen.
• Für riskante - Bestätigung oder undo.
• Sticky-CTA klebt korrekt auf dem Handy, überlappt den Inhalt nicht.

Platzierung

• CTA im Daumenbereich (Mob) oder auf der Blicklinie (Desktop).
• Ausreichende Einzüge (16-24 px) von benachbarten Elementen.

Metriken

• CTR, Konvertierung nach Klick, Time-to-Click, Undo-Rate werden entfernt.
• Es gibt Experimente zu Text/Farbe/Größe/Anordnung.

16) Dokumentation im Konstruktionssystem

Компоненты: `ButtonPrimary`, `ButtonSecondary`, `ButtonGhost`, `StickyCTA`, `UndoBar`.
Größen/Kontrast/Animations-Token, Beispiele für Copywriting.
Muster: „Ein Primary pro Bildschirm“, „Sticky on mobile“, „Confirm/Undo for risk“.
Do/Don 't-Galerie mit echten Bildschirmen und Heatmaps.

Kurze Zusammenfassung

Ein CTA funktioniert, wenn er ein Ziel, einen Ort und eine Bedeutung hat: einen Hauptschritt, einen klaren Text, ausreichend Kontrast, die richtige Position im Aufmerksamkeits-/Daumenbereich und ehrliches Feedback. Das im Designsystem festhalten, das Verhalten messen - und aus Klicks wird selbstbewusstes, bewusstes Handeln ohne Fehler und Irritationen.