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

Բայը + օբյեկտ, 2-4 բառ ՝ «Ապավինել», «Համալրեք հավասարակշռությունը», «Տեղադրել սահմանը»։

Կոնկրետիկա ՝ «Երկու 000 ռուբլիներ բերել» ավելի լավ է, քան «Ուղարկել»։

Խուսափեք երկակի ժխտումներից («Մի վերացրեք») և բացելով փոխաբերությունը։

Ռիսկային գործողությունների համար, 1-րդ տողի ենթավերնագիրն է. <<Առանց հաստատման, կարող եք վերացնել 5 վայրկյան>>։

4) Չափերը, ձևը, հակադրությունը

Կլիկի նվազագույն գոտին ՝ 3844-44 px (tach), 3832-32 px (desktop)։

Կոճակի բարձրությունը 40-48 px; շառավղը 10-12 px; արբիտր. դիրքերը 16-20 px հորիզոնական։

Տեքստի հակադրություն ֆոնին 'WCAG AA; մի ապավինեք միայն գույնին 'օգտագործեք պատկերակ/պիտակ։

Գումարների/կոոֆի համար պլանշետային թվեր: <։

5) Վիճակը և հետադարձ կապը

Hover/Focus/Active-ը տեսանելի և տարբեր է (focus-ring չի թաքցնում)։

Busy (loading): ակնթարթային արձագանք 24100 մզ, spinner/կմախք «լռության» փոխարեն։

Diabled: ոչ միայն «մոխրագույն» - բացատրեք, թե ինչու է անհասանելի (tooltip/inter-hint)։

Undo/Mastirm: կործանարար 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) Ուշադրության գոտիները (desktop) և մեծ մատի գոտիները (altil)

Patterns (վերնագիր), F-pattern/Z-pattern, «տաք» կետեր, վերևում-ձախ (վերնագիր), ճիշտ (ստացիոնար), էկրանի ներքևի մասը (ավարտը)։

Primary-CTA տեղադրեք

կարճ էկրանների կամ տեսողական գծերի ներքևի մասում,

«կպչուն» պանելային ներքևում (thumb-zone)։

Բջջային «մեծ մատները» 'ավելի հարմար, քան ներքևի 1/3 էկրանը, աջ/ձախ ծայրը կախված է գերիշխող ձեռքից (լռելյայն' ստորին կենտրոն/իրավունք)։

Լիպիկ հաստատման վահանակ (Altaile)

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)։

Մի դրեք երկու primary, մեկը կդառնա «կեղծ» ընտրություն։

Ձևերով 'CTA վերջին դաշտից հետո; էքսպորտային 'ձախ/CTA-ի տակ («Ետ», «Վերացում»)։

Քարտերի/սալիկների վրա 'CTA ներքևում աջ կողմում; երկար ցուցակների համար inault-CTA-ն յուրաքանչյուր քարտի վրա։

8) Անիմացիա և motion-pattern

Express/ելք: 120-180 ms, «opacity/transform» (առանց layout-ցնցում)։

Press-էֆեկտը 'նվազեցումը մինչև 96-98 տոկոսը + ստվերը «զգւոմ է»։

«Հաջողության» համար կարճ չեկ-միկրոշրջան թիվ 400 մզ; reduce-motion-ի համար ստատիկ իկոն է։

Խուսափեք անվերջ չափիչ ազդեցություններից (anti-pattern պատասխանատու խաղի համար)։

9) A1y և ստեղնաշար

«role =» button «» անհրաժեշտ չէ national >։

Focus-ring-ը տեսանելի է; Tab-ի կարգը տրամաբանական է։ Enter/Space-ը ակտիվացնում է CTA-ն։

«aria-buby» բեռնման ժամանակ; կարգավիճակի համար օգտագործեք role = «status»։

Կոճակի տեքստը հասանելի է SR; Iconki - "aria-hidden =" art "և միակ իմաստը չէ։

10) Մետրիկի և փորձարկումների

CTR CTA, Conversion after click, Time-to-Click-ից մինչև սեղմումը։

Scrome-depth wwww.click 'տեսահոլովակների մասը, որոնք տեղի են ունեցել «վերևում »/» ճեղքման տակ»։

Heatmap գոտիներ (desktop/mob); Thumb-reach (1934)։

Cancel/Undo rate ռիսկային 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 ճնշումները

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 s - «Սպասում ենք ապացույց»... + անվտանգ Retry.

Դեպոզիտ 'sticky-CTA ներքևում։ էկրանը («Համալրեք»), ստացիոնար '«Փոխել մեթոդը»; տեսանելի պարամետրեր/ժամանակներ մոտակայքում։

Քեշաութ 'CTA-ն գրանցվում է խաղի/կուպոնի էկրանին։ միշտ ցույց է տալիս քեշաուտի ներկա գումարը։ ապացույց կատարելուց առաջ։

Տեղադրել սահմանը 'CTA-ը ագրեսիվ չէ։ մոտ, «Կգործի»... AAA-հակադրություն, առանց միգրացիայի։

Մրցույթներ ՝ CTA «Միանալ» քարտեզի վրա + Կանոններ/Մրցանակներ։

13) Անտիպատերնի

Երկու primary-CTA-ը մոտակայքում («Ապավինել» և «Գնել բոնուսը») ճանաչողական մրցակցություն է։

«Մոխրագույն» diabled առանց բացատրության։

Անսահման անիմացիաներ և վերամարմնավորում։

Կոճակը, որը փոխում է գծանշումը և անջատում ֆոկուսը։

CTA-ի ներքևում մեծ «դեկոր» է, որը հեռանում է ներքևի տակ։

Իկոնկան տեքստի փոխարեն (առանց պիտակի) կրիտիկական վայրերում։

14) Snipets վերլուծաբաններ

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-թերթ

Իմաստ և հիերարխիա

• Էկրանին ուղիղ մեկ primary-CTA; հիբրիդային չեն հակամարտում քաշով։
• CTA տեքստը պարզ է, առանց երկակի ժխտումների։ , թե ինչ կլինի հետո։

Հասանելիություն

• Focus-ring տեսնում ենք; Enter/Space աշխատում են, «aria-buby» բեռնման ժամանակ։
• Տեքստի/ֆոնի հակադրություն AA; իկոնկան միակ իմաստը չէ։

Վարք

• Ակնթարթային արձագանք 100 մզ; busy-վիճակը և Retry-ը ձախողումների ժամանակ։
• Ռիսկերի համար 'հաստատում կամ undo։
• Sticky-CTA-ն ճիշտ կպչում է պոլիիլային, չի արգելափակում բովանդակությունը։

Տեղադրումը

• CTA-ն մեծ մատի գոտում (105) կամ հայացքի գծի վրա (desktop)։
• Բավարար շեղումներ (16-24 px) հարևան տարրերից։

Metriki

• Նկարահանվում են CTR, Conversion after click, Time-to-Click, Undo-rate։
• Տեքստի/գույնի/չափի/գտնվելու վայրի փորձեր կան։

16) Մոսկվա դիզայնի համակարգում

Компоненты: `ButtonPrimary`, `ButtonSecondary`, `ButtonGhost`, `StickyCTA`, `UndoBar`.

Toxens չափսեր/հակադրություն/անիմացիաներ, կոպիրայթինգի օրինակներ։

Պատրանքները ՝ «Մեկ պրիմարի էկրանի վրա», «Sticky», «Medirm/Undo ռիսկի համար»։

Do/Don 't-պատկերասրահը իրական էկրաններով և ջերմային քարտեզներով։

Live ռեզյումե

CTA-ն աշխատում է, երբ նա ունի նպատակ, տեղ և իմաստ 'մեկ հիմնական քայլ, պարզ տեքստ, բավարար հակադրություն, ուշադրության/մեծ մատի ճիշտ դիրք և ազնիվ հետադարձ կապ։ Եվ դրանք տեղադրեք դիզայնի համակարգում, չափեք վարքագիծը, և կլիկները վերածվում են վստահ, գիտակցված գործողությունների առանց սխալների և բաժանման։