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) CTA көшірмесі

Етiс + объект, 2-4 сөздерi: «Ставка жасау», «Балансты толықтыру», «Лимит белгiлеу».
Нақтылығы: «Шығару» «Жіберу» дегеннен 2 000 жақсы.
Қос теріске («Болдырмау») және анық емес метафораларға жол бермеңіз.
Тәуекелді әрекеттер үшін - «Растаусыз, 5 секундты алып тастауға болады» деген жолмен 1-кіші тақырып.

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 (loading): жылдам жауап беру ≤ 100 мс, «тыныштық» орнына спиннер/скелет.
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) Орналасу және шегіністер

primary-CTA-ны екінші дәрежелі элементтерден ақ кеңістікпен (16-24 px) бөліңіз.
Екеуін қатар қоймаңыз - біреуі «жалған» таңдау болады.
Нысандарда: соңғы жолдан кейін CTA; екінші - сол/төменгі CTA («Артқа», «Болдырмау»).
Карточкаларда/тақталарда: CTA төменде оң жақта; ұзын тізімдер үшін - әрбір карточкадағы inline-CTA.

8) Анимациялар және motion-паттерндер

Кіру/шығу: 120-180 мс, 'opacity/transform' (layout-саңылаусыз).
Баспасөз әсері: 96-98% + көлеңке → «клик сезіледі».
«Табыс» үшін: қысқа чек-микроанимация ≤ 400 мс; reduce-motion үшін - статикалық белгі.
Шексіз жылтылдақ әсерлерден аулақ болыңыз (жауапты ойын үшін anti-pattern).

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.
Тәуекелді CTA үшін Cancel/Undo rate.
A/B: мәтін, түсі/қарама-қарсылығы, өлшемі, орналасуы, «жабысқақ» панелі 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 төменгі ұялы. экран («Толықтыру»), екiншi - «Әдiстi өзгерту»; көрінетін комиссиялар/мерзімдер.
Кэшаут: CTA матч/купон экранында тіркеледі; әрқашан кэшауттың ағымдағы сомасын көрсетеді; орындау алдындағы растау.
Лимит белгіленсін: CTA агрессивті емес; қатар - «Арқылы күшіне енеді».... AAA-контраст, жыпылықтамай.
Турнирлер: CTA «Қосылу» турнирінің карточкасында + екінші «Ережелер/Сыйлықтар».

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

Екі primary-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-чек парағы

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

• Экранда дәл бір primary-CTA бар; екіншілері салмағы бойынша қайшы келмейді.
• CTA мәтіні анық, екі рет теріске шығарылмайды; жанында - одан әрі не болады.

Қол жетімділік

• Focus-ring көреміз; Enter/Space жұмыс істейді; 'aria-busy' қотару кезінде.
• Мәтін/ая контрасты ≥ AA; белгішесі тек мағынаны жеткізуші ғана емес.

Мінез-құлық

• Жедел жауап беру ≤ 100 мс; busy-күйі және Retry сәтсіздікке ұшыраған кезде.
• Тәуекелдер үшін - растау немесе undo.
• Sticky-CTA ұялы телефонға дұрыс жабысады, мазмұнды жабыстырмайды.

Орналастыру

• Бас саусақ аймағында немесе көрініс сызығында (десктоп) CTA.
• Көршілес элементтерден жеткілікті шегіністер (16-24 px).

Метрика

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

16) Дизайн-жүйедегі құжаттама

Компоненты: `ButtonPrimary`, `ButtonSecondary`, `ButtonGhost`, `StickyCTA`, `UndoBar`.
Өлшем/контраст/анимация токендері, копирайтинг мысалдары.
Паттерндер: «Экранға бір primary», «Sticky on mobile», «Confirm/Undo for risk».
Do/Don 't - нақты экрандары мен жылу карталары бар галерея.

Қысқаша түйіндеме

CTA мақсаты, орны және мәні бар кезде жұмыс істейді: бір басты қадам, айқын мәтін, жеткілікті қарама-қарсылық, назар/бас саусақтың дұрыс орналасуы және адал кері байланыс. Мұны дизайн жүйесінде бекітіңіз, мінез-құлықты өлшеңіз - және басу қателіксіз және тітіркенусіз сенімді, саналы әрекетке айналады.