CTA düymələri və diqqət zonaları

1) CTA rolu və prinsipləri

1. Ekranda bir əsas addım. Primary-CTA aydın və tək olmalıdır.
2. Kontekst → fəaliyyət. CTA-nın yanında həmişə «bundan sonra nə olacaq» qısa izahı var.
3. təcavüz olmadan görünürlük. Kontrast ≥ AA, kifayət qədər ölçüsü və oxunan mətn - qışqıran effektlər əvəzinə.
4. Ardıcıllıq. Eyni CTA bütün ekranlarda eyni davranır.
5. Təhlükəsizlik. Riskli CTA təsdiq və ya undo ilə müşayiət olunur.

2) CTA iyerarxiyası

Primary - səhifənin əsas hərəkəti («Bahis et», «Əlavə et», «Təsdiq et»). 1 ədəd.
Secondary - alternativ və ya köməkçi addım («Ətraflı», «Metodu dəyişdirin»).
Tertiary - ən az vizual çəkisi olan mətn/xəyal düymələri (ghost).
Destructive - ayrı stil (rəng/xəbərdarlıq nişanı) + təsdiq/undo.

Qayda: Ekranda birdən çox «güclü» CTA varsa, məqsədsiz seçim mümkündür. Axını yenidən dizayn edin.

3) Copyright CTA

Feil + obyekt, 2-4 sözlər: «Bahis edin», «Balansı doldurun», «Limit təyin edin».
Spesifiklik: "2 000" çıxarmaq "göndərmək 'dən daha yaxşıdır.
İkiqat inkarlardan («Ləğv etməyin») və qeyri-müəyyən metaforalardan çəkinin.
Riskli hərəkətlər üçün - 1 sətir altbaşlıq: «Təsdiq olmadan, 5 saniyə ləğv edilə bilər».

4) Ölçülər, forma, kontrast

Minimum klik zonası: ≥ 44 × 44 px (tac), ≥ 32 × 32 px (masaüstü).
düymə hündürlüyü: 40-48 px; radius 10-12 px; daxili. üfüqi 16-20 px.
Mətnin fon kontrastı: WCAG AA; yalnız rəngə güvənməyin - ikonadan/etiketdən istifadə edin.
Cədvəl rəqəmləri/koeff.: 'font-variant-numeric: tabular-nums;'.

5) Vəziyyət və rəy

Hover/Focus/Active - görünən və fərqlənən (focus-ring gizlətmək deyil).
Busy (yükləmə): ani cavab ≤ 100 ms, spinner/skelet əvəzinə «sükut».
Disabled: yalnız «boz» deyil - niyə əlçatmaz olduğunu izah edin (tooltip/inline-hint).
Undo/Confirm: dağıdıcı CTA üçün - ya təsdiq modalı, ya da Undo ilə panel 5-10 san.

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) Diqqət zonaları (masaüstü) və baş barmaq zonaları (mobil)

Görünüş nümunələri: F-pattern/Z-pattern, «qaynar» nöqtələr: yuxarı sol (başlıq), yuxarı sağ (ikincil), ekranın alt hissəsi (tamamlama).

• qısa ekranlar üçün bükülmənin üstündə və ya görünüş xəttində formanın altında,
• mobil (thumb-zone) aşağı «yapışqan» panel.
• Mobil «baş barmaqları»: daha rahat aşağı 1/3 ekran, sağ/sol kənar - dominant əldən asılıdır (default - aşağı mərkəz/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) Yerləşdirmə və girintilər

Primary-CTA-nı ikinci dərəcəli elementlərdən ağ boşluqla (16-24 px) ayırın.
Bir-birinə iki primary qoymayın - biri «saxta» seçim olacaq.
Formalarda: Son sahədən sonra CTA; ikincili - sol/altında CTA («Geri», «Ləğv»).
Kartlarda/plitələrdə: CTA aşağıda sağda; uzun siyahılar üçün - hər kartın inline-CTA.

8) Animasiyalar və motion-patternlər

Giriş/çıxış: 120-180 ms, 'opacity/transform' (layout-silkələnmədən).
Press effekti: 96-98% -ə qədər azalma + kölgə → «klik hiss olunur».
«Uğur» üçün: 400 ms ≤ qısa çek-mikroanimasiya; reduce-motion üçün - statik ikona.
Sonsuz parıldayan effektlərdən çəkinin (məsuliyyətli oyun üçün anti-pattern).

9) A11y və klaviatura

'role =' button 'yerli' <button> 'üçün lazım deyil.
Focus-ring görünür; Tab qaydası məntiqlidir. Enter/Space CTA-nı aktivləşdirir.
'aria-busy' yükləyərkən; status üçün live-region 'role =' status 'istifadə edin.
SR düyməsinin mətni mövcuddur; nişanlar - 'aria-hidden = "true' və mənanın yeganə daşıyıcısı deyil.

10) Metriklər və təcrübələr

CTR CTA, Conversion after click, Time-to-click görünüşdən düyməyə qədər.
Scroll-depth → click: «bükmə üzərində »/» bükmə altında» baş verən kliklərin payı.
Heatmap zonaları (desktop/mob); Thumb-reach (mob).
Riskli CTA üçün Cancel/Undo rate.
A/B: mətn, rəng/kontrast, ölçüsü, yeri, «yapışqan» panel vs statik yerləşdirmə.

11) Dizayn sistemi tokenləri (nümunə)

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 üçün nümunələr

Bahis etmək (Primary): yaxınlıqda məbləğ və əmsal göstərin; gecikmə> 3 s - «Təsdiq gözləyirik»... + təhlükəsiz Retry.
Depozit: sticky-CTA alt mob. ekran («Doldurmaq»), ikincili - «Metod dəyişdirmək»; yaxınlıqda görünür komissiyalar/şərtlər.
Cashout: CTA matç/kupon ekranında qeyd olunur; həmişə cari cashaut məbləğini göstərir; yerinə yetirilməzdən əvvəl təsdiq.
Limiti təyin edin: CTA aqressiv deyil; yaxınlıqda - «vasitəsilə qüvvəyə minəcək».... AAA-kontrast, yanıb-sönmədən.
Turnirlər: CTA «Qoşulmaq» turnir kartında + ikincil «Qaydalar/Mükafatlar».

13) Antipattern

Yaxınlıqda iki primary-CTA («Bahis» və «Bonus almaq») - idrak rəqabəti.
«Boz» heç bir izahat olmadan disabled.
Sonsuz diqqət animasiyaları və göz qırpma.
Nişanı dəyişdirən və fokusu götürən düymə.
CTA böyük «dekor» altında qatlanma altında gedir.
Kritik yerlərdə mətn əvəzinə simvol (etiketsiz).

14) Snippet analitikası

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) QA-çek siyahısı

Məna və iyerarxiya

• Ekranda düz bir primary-CTA var; ikincili çəkisi ilə ziddiyyət deyil.
• CTA mətni aydın, ikiqat inkar olmadan; yaxınlıqda - bundan sonra nə olacaq.

Mövcudluq

• Focus-ring görürük; Enter/Space yüklənərkən 'aria-busy' işləyir.
• Mətn/fon kontrastı ≥ AA; Simge yeganə məna daşıyıcısı deyil.

Davranış

• Ani cavab ≤ 100 ms; busy-state və Retry uğursuzluqlar.
• Risk üçün - təsdiq və ya undo.
• Sticky-CTA mobil telefona düzgün yapışır, məzmunu bağlamır.

Yerləşdirmə

• Baş barmaq zonasında (mob) və ya görünüş xəttində (masaüstü) CTA.
• Qonşu elementlərdən kifayət qədər boşluqlar (16-24 px).

Metriklər

• CTR, Conversion after click, Time-to-click, Undo-rate.
• Mətn/rəng/ölçü/yerləşmə təcrübələri var.

16) Dizayn sistemində sənədləşmə

Компоненты: `ButtonPrimary`, `ButtonSecondary`, `ButtonGhost`, `StickyCTA`, `UndoBar`.
Ölçü/kontrast/animasiya tokenləri, kopyalama nümunələri.
Nümunələr: «Ekranda bir primary», «Mobil Sticky», «Confirm/Undo risk üçün».
Do/Don 't-real ekranlar və istilik kartları ilə qalereya.

Qısa xülasə

CTA məqsədi, yeri və mənası olduqda işləyir: bir əsas addım, aydın mətn, kifayət qədər kontrast, diqqət/baş barmaq və dürüst rəy. Bunu dizayn sistemində düzəldin, davranışı ölçün - və kliklər səhvlər və qıcıqlanmadan inamlı, şüurlu hərəkətlərə çevrilir.