CTA düwmeleri we üns ýerleri

1) CTA-nyň roly we ýörelgeleri

1. Ekrana bir esasy ädim. Primary-CTA aýdyň we ýeke-täk bolmaly.
2. Kontekst → Hereket. CTA-nyň gapdalynda hemişe "indiki näme bolar" diýen gysgaça düşündiriş bar.
3. Agressiýa bolmazdan görünmek. AA ≥ kontrast, ýeterlik ululyk we okalýan tekst - gygyrýan täsirleriň ýerine.
4. Yzygiderlilik. Şol bir CTA-lar ähli ekranlarda birmeňzeş hereket edýärler.
5. Howpsuzlyk. Töwekgelçilikli CTA tassyklama ýa-da undo bilen bilelikde bolýar.

2) CTA iýerarhiýasy

Başlangyç - sahypanyň esasy hereketi ("Jedel et", "Doldurmak", "Tassyklamak"). 1 sany.
Secondary - alternatiw ýa-da kömekçi ädim ("Has giňişleýin maglumat", "Usuly üýtget").
Tertiary - iň az wizual agramly tekst/arwah düwmeleri.
Destructive - aýratyn stil (duýduryş reňki/nyşany) + tassyklama/undo.

Düzgün: ekranda birden köp "güýçli" CTA bar bolsa, maksatsyz saýlamak ähtimallygy bar. Akymy täzeden düzüň.

3) Göçürmek CTA

Fiil + obýekt, 2-4 sözleri: "Jedel etmek", "Balansyny doldurmak", "Çäk bellemek".
Aýratynlygy: "Çykarmak" 2 000 "Ibermekden" gowudyr.
Iki gezek inkär etmekden we düşnüksiz metaforalardan gaça duruň.
Töwekgelçilikli hereketler üçin - 1-nji setirdäki sözbaşy: "Tassyklanmazdan, 5 sek ýatyrylyp bilner".

4) Ölçegler, görnüş, kontrast

Iň az basma zolagy: ≥ 44 × 44 px (taç), ≥ 32 × 32 px (desktop).
Düwmäniň beýikligi: 40-48 px; radiusy 10-12 px; içki. 16-20 px.
Tekstiň fon garşylygy: WCAG AA; Diňe reňke bil baglamaň - nyşany/belligi ulanyň.
Jemler üçin tablo sanlary/koeff.: 'font-variant-numeric: tabular-nums;'.

5) Ýagdaýlar we seslenme

Hover/Focus/Active - görünýär we tapawutlanýar (focus-ring gizlenmez).
Busy (ýüklemek): derrew jogap ≤ 100 ms, "dymmagyň" ýerine spinner/skelet.
Disabled: diňe "çal" däl - näme üçin elýeterli däldigini düşündiriň (tooltip/inline-hint).
Undo/Confirm: weýran ediji CTA üçin - ýa tassyklama modaly ýa-da Undo 5-10 sekunt paneli.

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) Üns zolaklary (desktop) we baş barmak zolaklary (mobaýl)

Görnüş patternleri: F-pattern/Z-pattern, "gyzgyn" nokatlar: ýokarky çep (sözbaşy), ýokarky sag (ikinji), ekranyň aşaky bölegi (tamamlanmagy).

• gysga ekranlar üçin bukulmagyň üstünde ýa-da görnüş çyzygynyň aşagynda,
• "ýapyşýan" panel aşakdaky jübi telefonynda (thumb-zone).
• Jübi "baş barmaklar": ekranyň aşaky 1/3 bölegi has amatly, sag/çep gyrasy - agdyklyk edýän eliňize baglydyr (standart - aşaky merkez/sag).

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) Ýerleşdirmek we girewler

Primary-CTA-ny ikinji derejeli elementlerden ak giňişlik (16-24 px) bilen aýyryň.
Iki sany esasy birini goýmaň - biri "ýalan" saýlama bolar.
Formalarda: Soňky meýdandan soň CTA; ikinji - çep/aşaky CTA ("Yza", "Ýatyryş").
Kartoçkalarda/plitkalarda: Sag aşagyndaky CTA; uzyn sanawlar üçin - her kartoçkada inline-CTA.

8) Animasiýa we motion-patternler

Giriş/çykyş: 120-180 ms, 'opacity/transform' (layout-titremesiz).
Press effekti: 96-98% -e çenli azaltmak → "basmak duýulýar".
"Üstünlik" üçin: gysga çek-mikroanimasiýa ≤ 400 ms; reduce-motion üçin - statik nyşan.
Tükeniksiz ýalpyldawuk täsirlerden gaça duruň (jogapkär oýun üçin anti-pattern).

9) A11y we klawiatura

'role =' button 'nativnogo' <button> '.
Focus-ring görünýän; Tab tertibi mantykly. Enter/Space CTA-ny işjeňleşdirýär.
'aria-busy' ýüklenende; Bu ýagdaý üçin 'role =' status '-dan peýdalanyň.
Düwmäniň teksti SR; nyşanlar - 'aria-hidden = "true' we many göteriji ýeke-täk däl.

10) Metrikler we synaglar

CTR CTA, Conversion after click, Time-to-Click.
Scroll-depth → click: "bukulmagyň üstünde "/" bukulmagyň aşagynda" bolan basmalaryň paýy.
Zonalaryň ýylylygy (desktop/mob); Thumb-reach.
Töwekgelçilikli CTA üçin Cancel/Undo rate.
A/B: tekst, reňk/kontrast, ululyk, ýerleşiş, "ýelmeýän" panel vs statiki ýerleşdirme.

11) Dizaýn-ulgamyň bellikleri (mysal)

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 üçin patternler

Jedel etmek (Primary): golaýda mukdary we koeffisiýenti görkeziň; gijikdirilende> 3 s - "Tassyklamaga garaşýarys"... + howpsuz Retry.
Depozit: sticky-CTA aşaky mob. ekrany ("Doldurmak"), ikinjisi - "Usuly üýtgetmek"; görünýän komissiýalar/möhletler.
Keshaut: CTA oýun/kupon ekranynda ýazylýar; elmydama häzirki nagt puluny görkezýär; ýerine ýetirilmezden öň tassyklama.
Çägi kesgitlemek: CTA agressiw däl; golaýda - "Arkaly güýje girer".... AAA-kontrast, ýalpyldawuksyz.
Ýaryşlar: CTA "Goşulmak" ýaryşyň kartoçkasynda + ikinji derejeli "Düzgünler/baýraklar".

13) Antipatternler

Iki sany primary-CTA ("Jedel et" we "Bonus satyn al") - akyl bäsleşigi.
"Çal" düşündirişsiz aýryldy.
Tükeniksiz animasiýalar we ýalpyldawuk.
Bellikleri üýtgedýän we fokuslary aýyrýan düwme.
CTA bukulmak üçin gidýän uly "bezegden" aşakda.
Kritiki ýerlerde tekst ýerine nyşan (belliksiz).

14) Seljeriş snippetleri

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

Manysy we iýerarhiýasy

• Ekranda takmynan bir sany primary-CTA bar; ikinjisi agramy boýunça gapma-garşy däl.
• CTA teksti düşnüklidir, iki gezek inkär edilmez; golaýda - indiki näme bolar.

Elýeterlilik

• Focus-ring görýäris; Enter/Space işleýär; 'aria-busy' ýüklenende.
• Tekst/fon kontrast ≥ AA; nyşan ýeke-täk many göteriji däl.

Özüni alyp barşy

• Derrew jogap ≤ 100 ms; busy-ýagdaý we Retry şowsuzlykda.
• Töwekgelçilikli adamlar üçin - tassyklamak ýa-da undo.
• Sticky-CTA mobile dogry ýapyşýar, mazmuny ýapyşmaýar.

Ýerleşdirmek

• Baş barmak zolagynda ýa-da göz çyzygynda (desktop) CTA.
• Goňşy elementlerden ýeterlik boşluklar (16-24 px).

Metrikler

• CTR, Conversion after click, Time-to-Click, Undo-rate.
• Tekst/reňk/ululyk/ýerleşiş boýunça synaglar bar.

16) Dizaýn-ulgamdaky resminamalar

Компоненты: `ButtonPrimary`, `ButtonSecondary`, `ButtonGhost`, `StickyCTA`, `UndoBar`.
Ölçegleriň/kontrastlaryň/animasiýalaryň bellikleri, göçürmäniň mysallary.
Pattern: "Ekrana bir primary", "Sticky on mobile", "Confirm/Undo for risk".
Do/Don 't-galereýa hakyky ekranlar we ýylylyk kartalary bilen.

Gysgaça gysgaça

CTA maksady, ýeri we manysy bolanda işleýär: bir esasy ädim, aýdyň tekst, ýeterlik kontrast, üns/baş barmak zolagynda dogry ýerleşmek we dogruçyl seslenme. Muny dizaýn ulgamynda düzüň, özüni alyp barşyny ölçäň - we basmalar ýalňyşlyksyz we gaharsyz ynamly, aňly hereketlere öwrülýär.