CTA tugmalari va diqqat zonalari

1) CTA roli va prinsiplari

1. Ekranga bitta asosiy qadam. Primary-CTA aniq va yagona bo’lishi kerak.
2. Kontekst → amal. CTA yonida har doim «keyingi nima bo’ladi» degan qisqacha tushuntirish mavjud.
3. Tajovuzsiz ko’rinish. Kontrast ≥ AA, yetarli o’lcham va o’qish mumkin bo’lgan matn - qichqiriq effektlari o’rniga.
4. Ketma-ketlik. Bir xil CTA barcha ekranlarda bir xil harakat qiladi.
5. Xavfsizlik. Xavfli CTA tasdiqlash yoki undo bilan birga keladi.

2) CTA ierarxiyasi

Primary - sahifaning asosiy harakati («Tikish», «To’ldirish», «Tasdiqlash»). 1 dona

Secondary - muqobil yoki yordamchi qadam («Batafsil ma’lumot», «Usulni o’zgartirish»).
Tertiary - eng kam vizual og’irlikdagi matn/arvoh tugmalari (ghost).
Destructive - alohida uslub (rang/ogohlantirish belgisi) + tasdiqlash/undo.

Qoida: agar ekranda bittadan ortiq «kuchli» CTA boʻlsa, maqsadsiz tanlov qilish mumkin. Oqimni qayta loyihalashtiring.

3) CTA nusxa ko’chirish

Feʼl + obyekt, 2-4 soʻzlari: «Stavka qilish», «Balansni toʻldirish», «Limit belgilash».
Aniqligi: «2 000, jo’natish» dan ko’ra yaxshiroq.
Ikki marta inkor etishdan («Bekor qilmaslik») va noaniq metaforalardan qoching.
Xatarli xatti-harakatlar uchun - 1-satrning kichik sarlavhasi: «Tasdiqlamasdan, 5 soniyani bekor qilish mumkin».

4) O’lchamlar, shakl, kontrast

Bosishning eng kichik zonasi: ≥ 44 × 44 px (tach), ≥ 32 × 32 px (desktop).
Tugma balandligi: 40-48 px; radiusi 10-12 px; ichki gorizontal chiziqlar 16-20 px.
Matn fonga qarama-qarshiligi: WCAG AA; faqat rangga tayanmang - ikona/yorliqdan foydalaning.
Summalar/koeff uchun jadval raqamlari:’font-variant-numeric: tabular-nums;’.

5) Holatlar va qayta aloqa

Hover/Focus/Active - koʻrinadi va farqlanadi (focus-ring yashirmaydi).
Busy (loading): bir zumda javob berish ≤ 100 ms, «sukunat» o’rniga spinner/skelet.
Disabled: shunchaki «kulrang» emas - nima uchun mavjud emasligini tushuntiring (tooltip/inline-hint).
Undo/Confirm: halokatli CTA uchun - tasdiqlash modalkasi yoki Undo paneli 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) Diqqat zonalari (desktop) va bosh barmoq zonalari (mobayl)

Ko’rinish patterni: F-pattern/Z-pattern, «issiq» nuqtalar: yuqori-chap (sarlavha), yuqori-o’ng (ikkilamchi), ekranning pastki qismi (yakuni).

• qisqa ekranlar uchun bukilishdan yuqori yoki ko’rish chizig’idagi shaklning pastki qismida,
• mobildagi «yopishqoq» panel (thumb-zone).
• Mobil «bosh barmoqlar»: pastki ekranning 1/3 qismi qulayroq, o’ng/chap chetlari - ustun qo’lga bog’liq (andoza bo’yicha - pastki markaz/o’ng).

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) Joylashtirish va chekinishlar

Primary-CTAni ikkinchi darajali elementlardan oq maydon (16-24 px) bilan ajrating.
Ikkita asosiy tanlovni yoniga qo’ymang - bittasi «yolg’on» tanlov bo’ladi.
Oxirgi maydondan keyin CTA shakllarida; ikkilamchi - chap/quyi CTA («Orqaga», «Bekor qilish»).
Kartochkalarda/plitkalarda: pastki o’ngda CTA; uzun ro’yxatlar uchun - har bir kartochkadagi inline-CTA.

8) Animatsiyalar va motion-patternlar

Kirish/chiqish: 120-180 ms,’opacity/transform’(layout-silkinishsiz).
Press-effekt: 96-98% gacha kamaytirish + soya → «bosish seziladi».
«Muvaffaqiyat» uchun: qisqa chek-mikroanimatsiya ≤ 400 ms; reduce-motion uchun - statik ikona.
Cheksiz miltillovchi effektlardan (mas’uliyatli o’yin uchun anti-pattern) qoching.

9) A11y va klaviatura

’role =’ button’mahalliy’<button>’uchun kerak emas.
Focus-ring koʻrinadi; Tab tartibi mantiqiy. Enter/Space CTAni faollashtiradi.
’aria-busy’ ni yuklashda; maqom uchun’role =’status’live-mintaqasidan foydalaning.
Tugma matni SR uchun mavjud; ikonkalar’aria-hidden =’true’va yagona ma’no tashuvchisi emas.

10) Metrika va eksperimentlar

CTR CTA, Conversion after click, Time-to-Click.
Scroll-depth → click: «burish ustidagi »/» burish ostidagi» tugmalar ulushi.
Heatmap zonasi (desktop/mob); Thumb-reach (mob).
Xavfli CTA uchun Cancel/Undo rate.
A/B: matn, rang/kontrast, o’lcham, joylashuv, «yopishqoq» panel vs statik joylashtirish.

11) Dizayn-tizim tokenlari (misol)

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 uchun patternlar

Qo’yish (Primary): yaqin atrofda summa va koeffitsiyentni ko’rsating; kechiktirilganda> 3 s - «Tasdiqlashni kutmoqdamiz»... + xavfsiz Retry.
Depozit: sticky-CTA pastki mob. ekran («To’ldirish»), ikkilamchi - «Usulni o’zgartirish»; ko’rinadigan komissiyalar/muddatlar yaqin.
Keshaut: CTA o’yin/kupon ekranida qayd etiladi; har doim joriy keshaut summasini ko’rsatadi; bajarishdan oldin tasdiqlash.
Limit belgilansin: CTA tajovuzkor emas; yaqin - «orqali kuchga kiradi».... AAA kontrast, miltillashsiz.
Turnirlar: CTA «Qo’shiling» turnir kartochkasida + ikkilamchi «Qoidalar/Sovrinlar».

13) Antipatternlar

Ikkita primary-CTA («Tikish» va «Bonus sotib olish») - kognitiv raqobat.
«Kulrang» tushuntirishsiz disabled.
Cheksiz diqqat va jiringlash animatsiyalari.
Nishonchani oʻzgartirib, fokusni olib tashlaydigan tugma.
CTA bukilish ostida ketayotgan katta «bezak» dan pastda.
Tanqidiy joylardagi matn o’rniga (yorliqsiz) ikonka.

14) Tahliliy snippetlar

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-chek-varag’i

Maʼnosi va ierarxiyasi

• Ekranda aynan bitta primary-CTA; ikkilamchi og’irlik jihatidan ziddiyatli emas.
• CTA matni aniq, ikki marta inkorsiz; Keyingi nima sodir bo’ladi?

Foydalanish imkoniyati

• Focus-ring ko’ryapmiz; Enter/Space ishga tushirilganda’aria-busy’.
• Matn/fon kontrasti ≥ AA; piktogramma yagona ma’no tashuvchi emas.

Xulq-atvori

• Bir lahzali javob ≤ 100 ms; buzilishlarda busy-holat va Retry.
• Xavflilari uchun - tasdiqlash yoki undo.
• Sticky-CTA mobilga to’g’ri yopishib oladi, kontentni to’sib qo’ymaydi.

Joylashtirish

• Bosh barmoq zonasida yoki ko’rish chizig’ida CTA.
• Qoʻshni elementlardan yetarli chegaralar (16-24 px).

Metrika

• CTR, Conversion after click, Time-to-Click, Undo-rate suratga olinadi.
• Matn/rang/o’lcham/joylashuv bo’yicha tajribalar mavjud.

16) Dizayn-tizimdagi hujjatlar

Компоненты: `ButtonPrimary`, `ButtonSecondary`, `ButtonGhost`, `StickyCTA`, `UndoBar`.
O’lcham/kontrast/animatsiya tokenlari, nusxa ko’chirish namunalari.
Patternlar: «Ekranga bitta primary», «Sticky on mobile», «Confirm/Undo for risk».
Do/Don’t-galereyasi real ekranlar va issiqlik xaritalari bilan.

Qisqacha xulosa

CTA maqsad, joy va ma’noga ega bo’lganda ishlaydi: bitta asosiy qadam, aniq matn, etarli kontrast, diqqat/bosh barmog’ining to’g’ri joylashuvi va halol fikr-mulohazalar. Buni dizayn tizimida o’rnating, xatti-harakatlaringizni o’lchang va bosishlar xato va g’azabsiz ishonchli, ongli harakatlarga aylanadi.