सीटीए बटन और ध्यान क्षेत्र

1) सीटीए और सिद्धांतों की भूमिका

1. प्रति स्क्रीन एक प्रमुख कदम। प्राथमिक-सीटीए स्पष्ट और अद्वितीय होना चाहिए।

2. संदर्भ → क्रिया। सीटीए के लिए हमेशा एक संक्षिप्त "आगे क्या होता है" स्पष्टीकरण है।

3. आक्रामकता के बिना दृश्यता। कंट्रास्ट ≥ AA, पर्याप्त आकार और पढ़ ने योग्य पाठ - आकर्षक प्रभाव के बजाय।

4. संगति। वही CTA सभी स्क्रीन पर समान व्यवहार करते हैं।

5. सुरक्षा। जोखिम भरे सीटीए पुष्टि या पूर्ववत के साथ होते हैं।

2) सीटीए पदानुक्रम

प्राथमिक - कुंजी पृष्ठ क्रिया ("एक शर्त रखें", "टॉप अप", "पुष्टि")। 1 पीसी।

द्वितीयक - वैकल्पिक या सहायक चरण ("विवरण", "परिवर्तन विधि")।

तृतीयक - न्यूनतम दृश्य भार के साथ पाठ/भूत बटन।

विनाशकारी - पृथक शैली (रंग/चेतावनी प्रतीक) + पुष्टि/पूर्ववत।

नियम: यदि स्क्रीन पर एक से अधिक "मजबूत" सीटीए है, तो बिना लक्ष्य के विकल्प की संभावना है। प्रवाह को नया स्वरूप दें।

3) कॉपीराइटिंग सीटीए

क्रिया + वस्तु, 2-4 शब्द: "एक शर्त रखें", "संतुलन को फिर से भरना", "एक सीमा निर्धारित करें।"

विशिष्ट: "आउटपुट 2,000 ₴" "भेजें" से बेहतर है।

दोहरी नकारात्मकता से बचें ("रद्द न करें") और अस्पष्ट रूपक।

जोखिम भरे कार्यों के लिए - सबहेडिंग 1 लाइन: "पुष्टि के बिना, आप 5 सेकंड रद्द कर सकते हैं।"

4) आयाम, आकार, विपरीत

न्यूनतम क्लिक ज़ोन: ≥ 44 × 44 px (स्पर्श), ≥ 32 × 32 px (डेस्कटॉप)।

बटन की ऊंचाई: 40-48 px; त्रिज्या 10-12 पीएक्स; int। क्षैतिज इंडेंट 16-20 px।

टेक्स्ट-टू-बैकग्राउंड कंट्रास्ट: WCAG AA; सिर्फ रंग पर भरोसा न करें - एक आइकन/लेबल का उपयोग करें।

मात्रा/कारक के लिए तालिका अंक: 'फॉन्ट-वेरिएंट-न्यूमेरिक: टैबुलर-नम्स; '.

5) राज्य और प्रतिक्रिया

होवर/फोकस/सक्रिय - दृश्यमान और विशिष्ट (फोकस-रिंग छुपाने योग्य नहीं)।

व्यस्त (लोडिंग): तत्काल प्रतिक्रिया ≤ 100 एमएस, स्पिनर/कंकाल "मौन" के बजाय।

अक्षम: सिर्फ "ग्रे" नहीं - समझाएं कि क्यों उपलब्ध नहीं है (टूलटिप/इनलाइन-संकेत)।

पूर्ववत/पुष्टि: विनाशकारी सीटीए के लिए - या तो एक पुष्टि मोडल या पूर्ववत 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) ध्यान क्षेत्र (डेस्कटॉप) और अंगूठे क्षेत्र (मोबाइल)

गेज़पैटर्न: एफ-पैटर्न/जेड-पैटर्न, हॉट स्पॉट: टॉप-लेफ्ट (शीर्षक), टॉप-राइट (सेकेंडरी), बॉटम ऑफ स्क्रीन (फिनिश)।

• छोटी स्क्रीन के लिए मोड़ के ऊपर या दृष्टि की रेखा पर फॉर्म के नीचे,
• मोबाइल (अंगूठे-क्षेत्र) के नीचे "चिपचिपा" पैनल।
• मोबाइल "अंगूठे": स्क्रीन का निचला 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) प्लेसमेंट और इंडेंट्स

सफेद अंतरिक्ष (16-24 px) के साथ माध्यमिक तत्वों से प्राथमिक-सीटीए को अलग करें।

एक दूसरे के बगल में दो प्राथमिक मत रखो - एक "झूठा" चुनाव होगा।

रूपों पर: अंतिम क्षेत्र के बाद सीटीए; द्वितीयक - सीटीए के तहत बाएं/( "वापस", "रद्द")।

कार्ड/टाइल्स पर: CTA नीचे दाईं ओर; लंबी सूचियों के लिए - प्रत्येक कार्ड पर इनलाइन-सीटीए।

8) एनिमेशन और गति पैटर्न

इनपुट/आउटपुट: 120-180 ms, 'अपारदर्शिता/परिवर्तन' (लेआउट-शेक के बिना)।

प्रेस प्रभाव: 96-98% + छाया में कमी - "क्लिक महसूस किया जाता है।"

"सफलता" के लिए: लघु चेक-माइक्रोनिमेशन ≤ 400 एमएस; कम गति के लिए - एक स्थिर आइकन।

अंतहीन टिमटिमाते प्रभाव (जिम्मेदार खेल के लिए विरोधी पैटर्न) से बचें।

9) A11y और कीबोर्ड

'role = "बटन"' देशी '<बटन>' के साथ आवश्यक नहीं है।

फोकस-रिंग दिखाई दे रहा है; टैब अनुक्रम तार्किक है। CTA को सक्रिय/स्थान भरें।

'एरिया-व्यस्त' बूट; स्थिति के लिए, लाइव-क्षेत्र 'रोल = "स्थिति" का उपयोग करें।

बटन पाठ एसआर उपलब्ध है; आइकन -' आरिया-हिडन =" ट्रू" के साथ और अर्थ का एकमात्र वाहक नहीं।

10) मेट्रिक्स और प्रयोग

CTR 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 s - "पुष्टि की प्रतीक्षा कर रहा है"... + सुरक्षित पुनरावृत्ति।

जमा: चिपचिपा-सीटीए नीचे मोबाइल स्क्रीन ("रिप्लेनिश"), माध्यमिक - "परिवर्तन विधि"; पास में दृश्यमान कमीशन/समय सीमा।

कैशआउट: सीटीए मैच/कूपन स्क्रीन पर कब्जा कर लिया गया है; हमेशा वर्तमान कैशआउट राशि दिखाता है; निष्पादन से पहले पुष्टि।

सीमा निर्धारित करें: सीटीए आक्रामक नहीं है; पास में - "में प्रभावी होगा"...। एएए कंट्रास्ट, कोई चमकता नहीं।

टूर्नामेंट: टूर्नामेंट कार्ड + माध्यमिक "नियम/पुरस्कार" पर सीटीए "जुड़ें"।

13) एंटीपैटर्न

पास में दो प्राथमिक-सीटीए (बेट और बाय बोनस) संज्ञानात्मक प्रतियोगिता हैं।

"ग्रे" बिना स्पष्टीकरण के अक्षम।

अंतहीन ध्यान एनिमेशन और विंकिंग।

एक बटन जो मार्कअप बदलता है और फोकस को दूर ले जाता है।

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) क्यूए चेकलिस्ट

अर्थ और पदानुक्रम

• स्क्रीन पर बिल्कुल एक प्राथमिक-सीटीए है; माध्यमिक वजन में संघर्ष नहीं करते हैं।
• सीटीए का पाठ स्पष्ट है, दोहरी नकारात्मकता के बिना; पास में - आगे क्या होता है।

उपलब्धता

• फोकस-रिंग देखें; अंतरिक्ष कार्य दर्ज करें; बूट पर 'एरिया-व्यस्त'।
• पाठ/पृष्ठभूमि विपरीत ≥ एए; आइकन अर्थ का एकमात्र वाहक नहीं है।

व्यवहार

• त्वरित प्रतिक्रिया ≤ 100 एमएस; व्यस्त-राज्य और विफलताओं पर पुनरावृत्ति।
• जोखिम भरे लोगों के लिए, पुष्टि या पूर्ववत।
• स्टिकी-सीटीए मोबाइल पर सही ढंग से चिपक जाता है, सामग्री को ओवरलैप नहीं करता है।

आवास

• अंगूठे के क्षेत्र (भीड़) में या दृष्टि की रेखा पर (डेस्कटॉप)।
• आसन्न तत्वों से पर्याप्त इंडेंटेशन (16-24 पीएक्स)।

मेट्रिक्स

• CTR, क्लिक के बाद रूपांतरण, टाइम-टू-क्लिक, पूर्ववत-दर को हटा दिया जाता है।
• पाठ/रंग/आकार/स्थान प्रयोग हैं।

16) डिजाइन प्रणाली में प्रलेखन

Компоненты: 'बटन प्राइमरी', 'बटन सेकेंडरी', 'बट्टनघोस्ट', 'स्टिकी सीटीए', 'अंडरबार'।

आकार/कंट्रास्ट/एनीमेशन टोकन, कॉपीराइटिंग के उदाहरण।

पैटर्न: "प्रति स्क्रीन एक प्राथमिक", "एक मोबाइल पर स्टिकी", "जोखिम के लिए पुष्टि/पूर्ववत"।

असली स्क्रीन और हीट मैप के साथ गैलरी न करें/करें।

संक्षिप्त सारांश

सीटीए तब काम करता है जब इसका उद्देश्य, स्थान और अर्थ होता है: एक प्रमुख कदम, स्पष्ट पाठ, पर्याप्त विपरीत, ध्यान/अंगूठे क्षेत्र में सही स्थान और ईमानदार प्रतिक्रिया। इसे डिजाइन प्रणाली में कैप्चर करें, व्यवहार को मापें - और क्लिक गलतियों और जलन के बिना आत्मविश्वास, जानबूझकर कार्यों में बदल जाते हैं