CTA баскычтары жана көңүл

1) CTA ролу жана негиздери

1. экранда бир негизги кадам. Primary-CTA айкын жана жалгыз болушу керек.
2. Контекст → аракет. CTA жанында ар дайым кыскача түшүндүрмө бар ", андан кийин эмне болот".
3. агрессия жок көрүнүү. Контраст ≥ AA, жетиштүү өлчөмдөгү жана текстти окуу - ордуна кыйкырык таасирлери.
4. ырааттуулугу. Бирдей CTA бардык экрандарда бирдей мамиле.
5. Коопсуздук. Тобокелдик CTA тастыктоо же undo менен коштолот.

2) CTA иерархиясы

Primary - барактын негизги аракети ("Коюм жасоо", "Толуктоо", "Ырастоо"). 1 даана.
Secondary - альтернативалуу же көмөкчү кадам ("Маалымат", "Ыкманы өзгөртүү").
Tertiary - текст/арбак баскычтары (ghost) аз визуалдык салмагы менен.
Destructive - өзүнчө стили (түсү/эскертүү сөлөкөтү) + ырастоо/undo.

Эреже: экранда бирден ашык "күчтүү" CTA болсо - максаттуу тандоо мүмкүн. Агымды кайра долбоорлоо.

3) Copyright CTA

Этиш + объект, 2-4 сөздөр: "Коюмду жасоо", "Балансты толуктоо", "Лимитти белгилөө".
Specifications: "Чыгаруу 2 000" жакшы "жөнөтүү".
Кош тануудан ("Жокко чыгарба") жана бүдөмүк метафоралардан алыс болуңуз.
Тобокелдүү аракеттер үчүн - 1-сапта субтитр: "Тастыктоосуз эле 5 сек жокко чыгарса болот".

4) өлчөмдөрү, түрү, карама-каршылык

Минималдуу басуу зонасы: ≥ 44 × 44 px (тач), ≥ 32 × 32 px (десктоп).
Баскычтын бийиктиги: 40-48 px; радиусу 10-12 px; ички. 16-20 px горизонталдуу чегинүү.
Тексттин фонго карама-каршылыгы: WCAG AA; гана түс таянуу эмес - сөлөкөт/белги колдонуу.
Суммалар/коэфф.: 'font-variant-numeric: tabular-nums;'.

5) Шарттар жана пикир

Hover/Focus/Active - көрүнүп жана айырмаланат (focus-ring жашыруу эмес).
Busy (жүктөө): заматта жооп ≤ 100 ms, ордуна spinner/скелет "унчукпай".
Disabled: жөн гана "боз" эмес - эмне үчүн жеткиликсиз экенин түшүндүрүп (tooltip/inline-hint).
Undo/Confirm: деструктивдүү CTA үчүн - же тастыктоо модалы, же Undo менен панелди 5-10 сек.

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) Көңүл буруу зоналары (десктоп) жана баш бармак зоналары (мобайл)

Көрүү үлгүлөрү: F-pattern/Z-pattern, "ысык" чекиттер: жогорку-сол (баш), жогорку-оң (экинчилик), экрандын төмөнкү бөлүгү (аяктоо).

• кыска экрандар үчүн бүктөлүүнүн үстүндө же көрүү сызыгында форманын астында,
• Мобилдеги төмөнкү "жабышчаак" панель (thumb-zone).
• Мобилдик "манжалар": ыңгайлуу төмөнкү 1/3 экран, оң/сол чети - үстөмдүк колуна көз каранды (демейки - төмөнкү борбору/оң).

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) жайгаштыруу жана чегинүү

Негизги-CTAны экинчи даражадагы элементтерден ак мейкиндик менен бөлүңүз (16-24 px).
бир "жалган" тандоо болуп калат - жакын эки негизги койду эмес.
Формаларда: Акыркы талаадан кийин CTA; экинчилик - солдо/CTA астында ("Артка", "Жокко чыгаруу").
Карталарда/плиткаларда: Оң жагында CTA; узун тизмелер үчүн - ар бир картада inline-CTA.

8) Анимация жана кыймыл үлгүлөрү

Кирүү/чыгуу: 120-180 ms, 'opacity/transform' (layout-селкинчек жок).
Press таасири: 96-98% + көлөкө → "чыкылдатуу сезилет" чейин азайтуу.
"Ийгилик" үчүн: кыска чек-микроанимация ≤ 400 ms; reduce-motion үчүн - статикалык сөлөкөт.
чексиз жалтылдаган эффекттерден алыс болуңуз (жооптуу оюн үчүн анти-үлгү).

9) A11y жана клавиатура

'role =' button '' жергиликтүү '<button>'.
Focus-ring көрүнгөн; Tab тартиби логикалуу. Enter/Space CTA иштетет.
'aria-busy' жүктөп жатканда; Статус үчүн 'role =' status 'аймагын колдонуңуз.
Баскычтын тексти жеткиликтүү SR; сөлөкөттөр - 'aria-hidden = "true' жана маанинин жалгыз алып жүрүүчүсү эмес.

10) Метрика жана эксперименттер

CTR CTA, Conversion after click, Time-to-Click пайда чыкылдатуу чейин.
Scroll-depth → click: "бүктөлүүнүн үстүндө "/" бүктөлүүнүн астында" болгон чыкылдатуулардын үлүшү.
Heatmap зоналары (desktop/mob); Thumb-reach.
Cancel/Undo rate үчүн кооптуу CTA.
A/B: текст, түсү/карама-каршы, өлчөмү, жайгаштыруу, "жабышчаак" Panel vs статикалык жайгаштыруу.

11) Дизайн системасы токендери (мисал)

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 үчүн үлгүлөр

Коюмду жасоо (Primary): суммасын жана катышын көрсөтүү үчүн жакын; кечигүү менен> 3 с - "Ырастоо күтөбүз"... + коопсуз Retry.
Депозиттик: sticky-CTA төмөнкү мобилдик. экинчилик - "Ыкманы өзгөртүү"; көзгө көрүнгөн комиссиялар/мөөнөттөр жакын.
Кэшаут: CTA матч/купон экранында жазылган; дайыма учурдагы кэшаут суммасын көрсөтөт; аткаруунун алдында тастыктоо.
Чекти белгилөө: CTA агрессивдүү эмес; жакын - "аркылуу күчүнө кирет".... AAA-карама-каршы, эч кандай жарык.
Турнирлер: CTA турнир картасында "Кошулуу" + экинчилик "Эрежелер/Сыйлыктар".

13) Антипаттерндер

Эки негизги-CTA жакын ("коюм" жана "бонус сатып алуу") - когнитивдик атаандаштык.
"Боз" түшүндүрмөсү жок disabled.
Чексиз көңүл жана жылтылдатуу анимациялары.
Белгини өзгөртүп, фокусту алып кетүүчү баскычы.
чоң "декор" төмөн CTA бүктөлүү астында кетип жатат.
критикалык жерлерде текст ордуна сөлөкөтү (белги жок).

14) Сниппет аналитика

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-чек тизмеси

Мааниси жана иерархиясы

• Экранда так бир негизги-CTA; экинчилери салмагы боюнча карама-каршы келбейт.
• CTA тексти ачык-айкын, кош тануу жок; кийинки эмне болот.

Жеткиликтүүлүк

• Focus-ring көрүп; Enter/Space иштеп жатат; 'aria-busy' жүктөп жатканда.
• Контраст текст/фон ≥ AA; сөлөкөт гана маани алып жүрүүчү эмес.

Жүрүм-туруму

• токтоосуз жооп ≤ 100 мс; бузулган учурда busy-абалы жана Retry.
• тобокелдик үчүн - ырастоо же undo.
• Sticky-CTA туура мобилдик жабышып, мазмунду жаап жок.

жайгаштыруу

• CTA баш бармак зонасында (мобу) же көрүү сызыгында (desktop).
• Жетиштүү чегинүү (16-24 px) кошуна элементтерден.

Метрика

• CTR, Conversion after click, Time-to-Click, Undo-rate.
• текст/түсү/өлчөмү/орду боюнча эксперименттер бар.

16) Дизайн системасында документтер

Компоненты: `ButtonPrimary`, `ButtonSecondary`, `ButtonGhost`, `StickyCTA`, `UndoBar`.
Өлчөмү/контраст/анимация токендери, копирайтинг мисалдары.
Үлгүлөр: "Экранда бир primary", "Мобилдеги Sticky", "Confirm/Undo үчүн тобокелдик".
Do/Don 't галереясы реалдуу экрандар жана жылуулук карталар менен.

Кыскача резюме

CTA максаты, орду жана мааниси бар болгондо иштейт: бир негизги кадам, так текст, жетиштүү карама-каршылык, көңүл/баш бармак жана чынчыл пикир туура жайгашкан. Аны дизайн системасында оңдоп, жүрүм-турумун өлчөө - жана чыкылдатуулар катасыз жана кыжырдануусуз ишенимдүү, аң-сезимдүү аракеттерге айланат.