CTA düğmeleri ve dikkat alanları

1) CTA'nın rolü ve ilkeleri

1. Ekran başına büyük bir adım. Birincil-CTA açık ve benzersiz olmalıdır.
2. Bağlam - eylem. CTA için her zaman kısa bir "sonra ne olacak" açıklaması vardır.
3. Saldırganlık olmadan görünürlük. Gösterişli efektler yerine AA, yeterli boyut ve okunabilir metin ≥ kontrast.
4. Tutarlılık. Aynı CTA'lar tüm ekranlarda aynı şekilde davranır.
5. Güvenlik. Riskli CTA'lara onay veya geri alma eşlik eder.

2) CTA hiyerarşisi

Birincil - anahtar sayfa eylemi ("Bir bahis koyun", "Top up", "Onayla"). 1 adet.
İkincil - alternatif veya yardımcı adım ("Ayrıntılar", "Değişim yöntemi").
Üçüncül - en düşük görsel ağırlığa sahip metin/hayalet düğmeleri.
Yıkıcı - ayrı stil (renk/uyarı simgesi) + onay/geri alma.

Kural: Ekranda birden fazla "güçlü" CTA varsa, hedefi olmayan bir seçim olasıdır. Akışı yeniden tasarlayın.

3) Metin Yazarlığı CTA

Fiil + nesne, 2-4 kelime: "Bahis koy", "Dengeyi doldur", "Sınır koy".
Özellikler: "Çıkış 2.000 ₴", "Gönder'den daha iyidir.
Çifte olumsuzlamalardan ("İptal etmeyin") ve belirsiz metaforlardan kaçının.
Riskli eylemler için - 1 satırın alt başlığı: "Onay olmadan 5 saniye iptal edebilirsiniz".

4) Boyutlar, şekil, kontrast

Minimum tıklama alanı: ≥ 44 × 44 px (dokunmatik), ≥ 32 × 32 px (masaüstü).
Düğme yüksekliği: 40-48 px; yarıçap 10-12 px; int. yatay girintiler 16-20 piksel.
Metinden arka plana kontrast: WCAG AA; Sadece renge güvenmeyin - bir simge/etiket kullanın.
Miktarlar/faktörler için tablo rakamları: 'font-variant-numeric: tabular-nums; '.

5) Durumlar ve geri bildirim

Hover/Focus/Active - görünür ve ayırt edilebilir (focus-ring gizlemez).
Meşgul (yükleme): anında yanıt ≤ 100 ms, "sessizlik" yerine spinner/iskelet.
Devre dışı: sadece "gri'değil - neden mevcut olmadığını açıklayın (araç ipucu/satır içi ipucu).
Geri Al/Onayla: yıkıcı CTA'lar için - bir onay modu veya Geri Al 5-10 sn olan bir panel.

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) Dikkat bölgeleri (masaüstü) ve başparmak bölgeleri (mobil)

Bakış desenleri: F-deseni/Z-deseni, sıcak noktalar: sol üst (başlık), sağ üst (ikincil), ekranın alt kısmı (bitiş).

• Kısa ekranlar için virajın üstünde veya görüş hattındaki formun altında,
• Cep telefonunun altındaki "yapışkan" panel (başparmak bölgesi).
• Mobil "başparmak": Ekranın alt 1/3'ü daha uygundur, sağ/sol kenar baskın ele bağlıdır (varsayılan olarak - alt merkez/sağ).

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) Yerleştirme ve girintiler

Birincil-CTA'yı beyaz boşluklu (16-24 px) ikincil öğelerden ayırın.
İki ilkeyi yan yana koymayın - biri "yanlış'bir seçim olacaktır.
Formlarda: Son alandan sonra CTA; İkincil - sol/CTA altında ("Geri", "İptal").
Kartlarda/fayanslarda: CTA sağ alt; Uzun listeler için - her kartta satır içi CTA.

8) Animasyonlar ve hareket desenleri

Giriş/çıkış: 120-180 ms, 'opaklık/dönüştürme' (mizanpaj sarsıntıları olmadan).
Basın efekti: %96-98'e düşürme + gölge - "tıklama hissedilir".
"Başarı" için: 400 ms ≤ kısa kontrol-mikroanimasyon; Küçültme hareketi için - statik bir simge.
Sonsuz titreyen efektlerden kaçının (sorumlu oyun için anti-desen).

9) A11y ve klavye

'role = "button"' yerel '<button>'ile gerekli değildir.
Focus-ring görünür; Sekme sırası mantıklı. CTA'yı Enter/Space etkinleştirir.
'aria-busy'at boot; Durum için live-region 'role = "status"' kullanın.
Düğme metni kullanılabilir SR; Simgeler - 'aria-hidden = "true'ile ve tek anlam taşıyıcısı değil.

10) Metrikler ve deneyler

TO CTA, Tıkladıktan sonra dönüştürme, Görünümden tıklamaya kadar tıklama süresi.
Kaydırma derinliği - tıklama: "virajın üstünde "/" virajın altında "meydana gelen tıklamaların oranı.
Isı haritası bölgeleri (masaüstü/mafya); Thumb-reach (mafya).
Riskli CTA'lar için İptal/Geri Alma oranı.
A/B: metin, renk/kontrast, boyut, konum, yapışkan panel vs statik yerleştirme.

11) Tasarım sistemi belirteçleri (örnek)

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) iGaming için Desenler

Bir bahis yapın (Birincil): Miktarı ve katsayıyı yan yana gösterin; Gecikmede> 3 s - "Onay bekleniyor"... + güvenli Yeniden Deneme.
Depozito: Yapışkan-CTA alt mobil ekran ("Replenish"), ikincil - "Değişim yöntemi"; yakındaki görünür komisyonlar/son tarihler.
Cashout: CTA maç/kupon ekranında yakalanır; her zaman mevcut nakit miktarını gösterir; İnfazdan önce onay.
Set sınırı: CTA agresif değil; Yakınlarda - "Yürürlüğe girecek".... AAA kontrastı, yanıp sönme yok.
Turnuvalar: Turnuva kartında CTA "Katıl" + ikincil "Kurallar/Ödüller".

13) Antipatterns

Yakındaki iki birincil CTA (Bet ve Buy Bonus) bilişsel rekabettir.
"Gri" açıklama olmadan devre dışı bırakıldı.
Sonsuz dikkat animasyonlar ve göz kırpma.
İşaretlemeyi değiştiren ve odağı uzaklaştıran bir düğme.
CTA, virajın altına giren büyük "dekor'dan daha düşüktür.
Kritik yerlerde metin yerine simge (etiketsiz).

14) Analitik snippet'leri

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) KG kontrol listesi

Anlam ve hiyerarşi

• Ekranda tam olarak bir birincil-CTA var; İkincil olanlar ağırlıkta çelişmez.
• CTA metni açıktır, çift olumsuzlamalar olmadan; yakında - sonra ne olacak.

Kullanılabilirlik

• Odak-halka görmek; Enter/Uzay çalışması; Önyükleme 'aria-meşgul'.
• Metin/arka plan kontrastı ≥ AA; Simge, anlamın tek taşıyıcısı değildir.

Davranış

• Anında yanıt ≤ 100 ms; Meşgul durum ve başarısızlıklarda yeniden deneme.
• Riskli olanlar için, onaylama veya geri alma.
• Sticky-CTA mobil cihazda doğru şekilde yapışır, içeriği örtüşmez.

Konaklama

• Başparmak alanında (mafya) veya görüş hattında (masaüstü) CTA.
• Bitişik elemanlardan yeterli girinti (16-24 px).

Metrikler

• TO, Tıkladıktan sonra Dönüştürme, Tıklama Süresi, Geri alma oranı kaldırılır.
• Metin/renk/boyut/konum deneyleri vardır.

16) Tasarım sistemindeki belgeler

Компоненты: 'ButtonPrimary', 'ButtonSecondary', 'ButtonGhost', 'StickyCTA', 'UndoBar'.
Boyut/kontrast/animasyon belirteçleri, metin yazarlığı örnekleri.
Desenler: "Ekran başına bir birincil", "Mobil cihazda yapışkan", "Risk için onayla/geri al".
Gerçek ekranlar ve ısı haritaları ile galeri yapmayın/yapmayın.

Kısa Özet

CTA, amacı, yeri ve anlamı olduğunda çalışır: büyük bir adım, net metin, yeterli kontrast, dikkat/başparmak bölgesinde doğru konum ve dürüst geri bildirim. Bunu tasarım sisteminde yakalayın, davranışı ölçün - ve tıklamalar hata ve tahriş olmadan kendinden emin, kasıtlı eylemlere dönüşür.