Тугмаҳои CTA ва минтақаҳои диққат

1) Нақши CTA ва принсипҳо

1. Як қадами асосӣ дар як экран. Ибтидоӣ-CTA бояд возеҳ ва беназир бошад.
2. Контекст → амал. Ҳамеша шарҳи мухтасари "баъд чӣ мешавад" барои CTA вуҷуд дорад.
3. Намоёнӣ бидуни таҷовуз. Муқоиса ≥ АА, андозаи кофӣ ва матни хондан - ба ҷои эффектҳои дурахшон.
4. Мутобиқат. Ҳамон CTA-ҳо дар ҳама экранҳо якхела рафтор мекунанд.
5. Амният. CTA-ҳои хатарнок бо тасдиқ ё бекор карда мешаванд.

2) зинанизоми CTA

Ибтидоӣ - амали асосии саҳифа ("Ҷойгиркунии гарав", "Боло", "Тасдиқ"). 1 саҳ.
Дуюмдараҷа - қадами алтернативӣ ё ёрирасон ("Тафсилот", "Усули тағйир").
Сеюм - тугмаҳои матнӣ/арвоҳӣ бо вазни камтарини визуалӣ.
Вайронкунанда - услуби алоҳида (тасвири ранг/огоҳӣ) + тасдиқ/бекор кардан.

Қоида: агар дар экран зиёда аз як CTA "қавӣ" мавҷуд бошад, интихоб бидуни ҳадаф эҳтимол дорад. Ҷараёнро аз нав тарҳрезӣ кунед.

3) Нусхабардории CTA

Verb + объект, 2-4 калимаҳо: "Ҷойгир кардани гарав", "Пур кардани тавозун", "Маҳдудиятро муқаррар кунед".
Хусусиятҳо: "Баромади 2000 ₴" аз "Ирсол" беҳтар аст.
Нагузоред, ки манфии дукарата ("Бекор накунед") ва метафораҳои норавшан.
Барои амалҳои хатарнок - сарлавҳаи 1 сатр: "Бе тасдиқ, шумо метавонед 5 сонияро бекор кунед".

4) Андоза, шакл, контраст

Минималии минтақаи ангуштзанӣ: ≥ 44 × 44 px (touch), ≥ 32 × 32 px (мизи корӣ).
Баландии тугма: 40-48 px; радиус 10-12 px; инт. уфуқҳои уфуқӣ 16-20 px.
Контрасти матн ба замина: WCAG AA; на танҳо ба ранг такя кунед - нишона/нишонро истифода баред.
Рақамҳои ҷадвал барои миқдор/омил: 'ҳуруф-вариант-рақам: ҷадвал-рақамҳо; '.

5) Давлатҳо ва фикру мулоҳизаҳо

Hover/Focus/Active - намоён ва фарқкунанда (фокус-ҳалқа пинҳон намешавад).
Банд (боркунӣ): вокуниши фаврӣ ≤ 100 мс, спиннер/скелет ба ҷои "хомӯшӣ".
Маъюбон: на танҳо "хокистарӣ" - фаҳмонед, ки чаро дастрас нест (абзор/inline-hint).
Бекор кардан/Тасдиқ кардан: барои CTA-ҳои харобиовар - ё модалии тасдиқ ё панел бо Undo 5-10 sec.

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-намуна/Z-намуна, нуқтаҳои гарм: аз чап ба чап (унвон), боло-рост (миёна), поёни экран (марра).

• болои хам барои экранҳои кӯтоҳ ё дар поёни шакл дар хати чашм,
• панели "часпанда" дар поёни мобилӣ (минтақаи ангушти калон).
• "Ангушти" мобилӣ: 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 мс, 'шаффофият/тағирот' (бидуни тарҳ-ларзиш).
Таъсири матбуот: коҳиш то 96-98% + соя → "клик ҳис карда мешавад".
Барои "муваффақият": санҷиши кӯтоҳ-микроаниматсия ≤ 400 мс; барои кам кардани ҳаракат - тасвири статикӣ.
Аз эффектҳои беохир ҷилавгирӣ кунед (анти-намуна барои бозии масъул).

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

'role = "тугма"' бо ватании '<тугма>' лозим нест.
Фокус-ҳалқаи намоён; Тартиби ҷадвал мантиқӣ аст. CTA-ро фаъол созед.
'мӯза-банд'; барои вазъ, истифодаи live-regional 'role = "status"'.
Матни тугма SR мавҷуд аст; нишонаҳо - бо' aria-пинҳон =" ҳақиқӣ"' ва на ягона интиқолдиҳандаи маъно.

10) Нишондиҳандаҳо ва таҷрибаҳо

CTR CTA, Табдилдиҳӣ пас аз клик, Вақт-ба-Клик аз намуди зоҳирӣ барои клик кардан.
Ангуштзании чуқурии → клик: таносуби кликҳо, ки "дар болои хам "/" дар зери хам "рух додаанд.
Минтақаҳои гармидиҳӣ (мизи корӣ/моб); Ангушти калон (моб).
Бекор кардан/Бекор кардан барои CTA-ҳои хатарнок.
A/B: матн, ранг/контраст, андоза, макон, панели часпанда ва ҷойгиркунии статикӣ.

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

Бет (ибтидоӣ) созед: миқдор ва коэффисиентро паҳлӯ ба паҳлӯ нишон диҳед; дар таъхир> 3 с - "Интизории тасдиқ"... + Retry бехатар.
Амонат: экрани мобилии часпанда-CTA ("Пур кардан"), дуввум - "Усули тағирот"; комиссия/мӯҳлатҳои намоён дар наздикӣ.
Cashout: CTA дар экрани бозии/купон сабт шудааст; ҳамеша миқдори ҷории пули нақдро нишон медиҳад; тасдиқ пеш аз иҷро.
Маҳдудият: CTA хашмгин нест; дар наздикӣ - "Дар амал татбиқ хоҳад шуд".... Баръакси AAA, дурахшон нест.
Мусобиқаҳо: CTA "Ҳамроҳ шавед" дар корти мусобиқа + миёна "Қоидаҳо/Мукофотҳо".

13) Антипаттернҳо

Ду CTA-и ибтидоӣ (Bet and Buy Bonus) рақобати маърифатӣ мебошанд.
"Грей" бидуни шарҳ маъюб аст.
Аниматсияҳои беохир ва чашм.
Тугмае, ки аломатро тағир медиҳад ва диққати худро дур мекунад.
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 равшан аст, бидуни радди дугона; наздик - баъд чӣ мешавад.

Дастрасӣ

• Фокус-ангуштарин; Корҳои вуруд/фазо; 'aria-банд' ҳангоми боркунӣ.
• Контрасти матн/замина ≥ АА; нишона ягона барандаи маъно нест.

Рафтор

• Ҷавоби фаврӣ ≤ 100 мс; банд-давлат ва Retry оид ба нокомӣ.
• Барои шахсони хатарнок, тасдиқ ё бекор кардан.
• Часпак-CTA дар мобилӣ дуруст часпидааст, мундариҷаро ба ҳам намеорад.

Ҷойгиршавӣ

• CTA дар минтақаи ангушти калон (моб) ё дар хати чашм (мизи корӣ).
• Нишондиҳии кофӣ (16-24 px) аз унсурҳои ҳамсоя.

Нишондиҳандаҳо

• CTR, Табдилдиҳӣ пас аз ангуштзанӣ, Вақт ба клик, Меъёри бекоркунӣ нест карда мешавад.
• Таҷрибаҳои матн/ранг/андоза/макон мавҷуданд.

16) Ҳуҷҷатгузорӣ дар системаи тарроҳӣ

Компоненты: 'Тугмачаи ибтидоӣ', 'Тугмаи дуюмдараҷа', 'Тугмаи Ghost', 'Sticky

Нишонаҳои андоза/контраст/аниматсия, намунаҳои нусхабардорӣ.
Намунаҳо: "Як экрани ибтидоӣ дар як экран", "Часпидан дар мобилӣ", "Тасдиқ/бекор кардани хатар".
Бо экранҳои воқеӣ ва харитаҳои гармӣ галерея накунед.

Хулосаи мухтасар

CTA вақте кор мекунад, ки мақсад, ҷой ва маъно дорад: як қадами асосӣ, матни равшан, контрасти кофӣ, ҷойгиршавии дуруст дар минтақаи диққат/ангушти калон ва фикру мулоҳизаҳои самимӣ. Инро дар системаи тарроҳӣ сабт кунед, рафтори андозагирӣ кунед - ва кликҳо ба амалҳои эътимоднок ва қасдан бе хато ва хашм табдил меёбанд.