CTA ღილაკები და ყურადღების სფეროები

1) CTA- ს როლი და პრინციპები

1. ერთი მთავარი ნაბიჯი ეკრანზე. Primary-CTA უნდა იყოს აშკარა და ერთადერთი.
2. კონტექსტი - მოქმედება. CTA- ს გვერდით ყოველთვის არის მოკლე ახსნა „რა მოხდება შემდეგ“.
3. ხილვადობა აგრესიის გარეშე. კონტრასტი - AA, საკმარისი ზომა და წაკითხული ტექსტი - ყვირილის ეფექტების ნაცვლად.
4. თანმიმდევრობა. იგივე CTA ყველა ეკრანზე ერთნაირად იქცევა.
5. უსაფრთხოება. სარისკო CTA- ს თან ახლავს დადასტურება ან undo.

2) CTA იერარქია

Primary არის გვერდის მთავარი მოქმედება („გააკეთე ფსონი“, „შევსება“, „დადასტურება“). 1 ცალი

მეორე არის ალტერნატიული ან დამხმარე ნაბიჯი („დამატებითი“, „შეცვალეთ მეთოდი“).
Tertiary - ტექსტური/მოჩვენებითი ღილაკები (ghost) ყველაზე დაბალი ვიზუალური წონით.
Destructive - ცალკეული სტილი (ფერი/გაფრთხილების ხატი) + დადასტურება/undo.

წესი: თუ ეკრანზე ერთ „ძლიერ“ CTA- ზე მეტია, არჩევანი სავარაუდოა მიზნის გარეშე. გადააკეთეთ ნაკადი.

3) CTA საავტორო უფლებები

ზმნა + ობიექტი, 2-4 სიტყვა: „ფსონი გააკეთე“, „ბალანსის შევსება“, „დააწესე ზღვარი“.
სპეციფიკა: „გამოიტანეთ 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 - ხილული და გამორჩეული (დამალვა არ შეიძლება).
Busy (loading): მყისიერი პასუხი 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, „ცხელი“ წერტილები: ზედა მარცხენა (სათაური), ზედა მარჯვენა (მეორადი), ეკრანის ქვედა ნაწილი (დასასრული).

განათავსეთ Primary-CTA:

მოკლე ეკრანების გასწვრივ ან ფორმის ქვემოთ, მზერის ხაზზე,
ქვემოთ მდებარე „წებოვანი“ პანელი (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 ქვემოთ მარჯვნივ; გრძელი სიებისთვის - ინლაინ-CTA თითოეულ ბარათზე.

8) ანიმაციები და motion ნიმუშები

შესასვლელი/გასასვლელი: 120-180 ms, 'opacity/transform' (layout-crack- ის გარეშე).
პრესის ეფექტი: შემცირება 96-98% + ჩრდილში - „დაჭერა იგრძნობა“.
„წარმატებისთვის“: მოკლე შემოწმების მიკროანიმაცია 400 ms; reduce-motion- ისთვის - სტატიკური ხატი.
მოერიდეთ გაუთავებელ ციმციმულ ეფექტებს (anti-pattern საპასუხისმგებლო თამაშისთვის).

9) A11y და კლავიატურა

'role = „button“' არ არის საჭირო მშობლიური '<button>'.
ხილული Focus-ring; Tab ბრძანება ლოგიკურია. Enter/Space ააქტიურებს CTA- ს.
'aria-busy' დატვირთვის დროს; სტატუსისთვის გამოიყენეთ ცოცხალი რეგიონი 'role = "status" ".
ღილაკის ტექსტი ხელმისაწვდომია SR; ხატები - s' aria-hidden =“ ნამდვილი“ და არ არის მნიშვნელობის ერთადერთი გადამზიდავი.

10) მეტრიკა და ექსპერიმენტები

CTR CTA, Conversion after click, Time-to-Click გარეგნობიდან დაჭერით.
Scroll-depth-click: დაწკაპუნება, რომელიც მოხდა „სისხლძარღვზე “/“ ნაპერწკლის ქვეშ“.
Heatmap ზონები (desktop/mob); Thumb-reach (mob).
Cancel/Undo rate სარისკო CTA- სთვის.
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 პრესეტები:

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 წმ - „ჩვენ ველოდებით დადასტურებას“... + უსაფრთხო რეტრი.
ანაბარი: sticky-CTA მობ. ეკრანზე („შევსება“), მეორადი - „მეთოდის შეცვლა“; თვალსაჩინო კომისიები/ვადები ახლოსაა.
კეშუტი: CTA ფიქსირდება მატჩის/კუპონის ეკრანზე; ყოველთვის აჩვენებს ფულადი სახსრების ამჟამინდელ რაოდენობას; დადასტურება შესრულებამდე.
ლიმიტის დაყენება: CTA არ არის აგრესიული; იქვე - „ძალაში შედის“.... AAA კონტრასტი, მოციმციმე გარეშე.
ტურნირები: CTA „University“ ტურნირის ბარათზე + მეორადი „წესები/პრიზები“.

13) ანტიპატერები

ორი primary-CTA იქვე („გააკეთე ფსონი“ და „შეიძინე ბონუსი“) შემეცნებითი კონკურენციაა.
„ნაცრისფერი“ ახსნა-განმარტების გარეშე.
გაუთავებელი ყურადღების ანიმაციები და ცეცხლის შეწყვეტა.
ღილაკი, რომელიც ცვლის მარკირებას და იღებს ფოკუსს.
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 ms; busy მდგომარეობა და Retry ჩავარდნების დროს.
სარისკო ადამიანებისთვის - დადასტურება ან undo.
Sticky-CTA სწორად იჭრება მობილურ ტელეფონზე, არ ბლოკავს შინაარსს.

განთავსება

CTA თითის ზონაში (მობ) ან მხედველობის ხაზზე (დესკტოპი).
საკმარისი უკან დახევა (16-24 px) მეზობელი ელემენტებიდან.

მეტრიკა

გადაღებულია CTR, Conversion after click, Time-to-Click, Undo-rate.
არსებობს ექსპერიმენტები ტექსტის/ფერის/ზომის/ადგილმდებარეობის შესახებ.

16) დოკუმენტაცია დიზაინის სისტემაში

Компоненты: `ButtonPrimary`, `ButtonSecondary`, `ButtonGhost`, `StickyCTA`, `UndoBar`.
ზომების/კონტრასტის/ანიმაციის ნიშნები, საავტორო უფლებების მაგალითები.
ნიმუშები: „ერთი ეკრანზე“, „Sticky Mobile“, „Confirm/Undo რისკის ქვეშ“.
Do/Don 't გალერეა ნამდვილი ეკრანებითა და თერმული რუქებით.

მოკლე რეზიუმე

CTA მუშაობს, როდესაც მას აქვს მიზანი, ადგილი და მნიშვნელობა: ერთი მთავარი ნაბიჯი, მკაფიო ტექსტი, საკმარისი კონტრასტი, ყურადღების ზონაში სწორი მოწყობა/თითის თითი და გულწრფელი გამოხმაურება. დააფიქსირეთ ეს დიზაინის სისტემაში, გაზომეთ ქცევა - და დაწკაპუნება გადაიქცევა თავდაჯერებულ, შეგნებულ მოქმედებად შეცდომების და გაღიზიანების გარეშე.

CTA ღილაკები და ყურადღების სფეროები

ხელმისაწვდომობა

ქცევა

განთავსება

მეტრიკა

მოკლე რეზიუმე

დაგვიკავშირდით

სწრაფი კავშირი

ვიდეო მალე განახლდება

ჩვენ ახლა ძალიან დაკავებული ვართ პროექტებით