دکمه های CTA و مناطق توجه

1) نقش CTA و اصول

1. یک گام بزرگ در هر صفحه. CTA اولیه باید واضح و منحصر به فرد باشد.
2. زمینه → عمل. همیشه یک توضیح مختصر «چه اتفاقی می افتد بعدی» برای CTA وجود دارد.
3. دید بدون تجاوز کنتراست ≥ AA، اندازه کافی و متن قابل خواندن - به جای جلوه های زرق و برق دار.
4. انسجام. CTA های مشابه در همه صفحه ها یکسان رفتار می کنند.
5. امنیت. CTA های خطرناک با تأیید یا لغو همراه هستند.

2) سلسله مراتب CTA

اقدام صفحه اصلی («شرط بندی»، «بالا بردن»، «تأیید»). 1 کامپیوتر.
ثانویه - مرحله جایگزین یا کمکی («جزئیات»، «تغییر روش»).
Tertiary - دکمه های متن/شبح با کمترین وزن بصری.
مخرب - سبک جداگانه (رنگ/هشدار آیکون) + تایید/خنثیسازی.

قانون: اگر بیش از یک CTA قوی بر روی صفحه نمایش وجود داشته باشد، انتخاب بدون هدف محتمل است. جریان را دوباره طراحی کنید.

3) کپی رایت CTA

فعل + مفعول، 2-4 کلمه: «محل شرط»، «دوباره پر کردن تعادل»، «تنظیم حد».
ویژگی: «خروجی 2000 ₴» بهتر از «ارسال» است.
اجتناب از نفی دوگانه («لغو نکنید») و استعاره های مبهم.
برای اقدامات خطرناک - زیر عنوان 1 خط: «بدون تایید، شما می توانید 5 ثانیه لغو کنید».

4) ابعاد، شکل، کنتراست

حداقل منطقه کلیک: ≥ 44 × 44 پیکسل (لمس)، ≥ 32 × 32 پیکسل (دسکتاپ).
ارتفاع دکمه: 40-48 پیکسل ؛ شعاع 10-12 پیکسل ؛ inted. indents افقی 16-20 پیکسل.
کنتراست متن به پس زمینه: WCAG AA ؛ فقط به رنگ تکیه نکنید - از یک آیکون/برچسب استفاده کنید.
ارقام جدول برای مقادیر/عامل: 'font-variant-numeric: tabular-numbs ؛ '.

5) ایالات و بازخورد

شناور/تمرکز/فعال - قابل مشاهده و قابل تشخیص (تمرکز حلقه پنهان نیست).
مشغول (بارگذاری): پاسخ فوری ≤ 100 میلی ثانیه، اسپینر/اسکلت به جای «سکوت».
غیرفعال: نه فقط «خاکستری» - توضیح دهید که چرا در دسترس نیست (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/الگوی 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) قرار دادن و indents

CTA اولیه را از عناصر ثانویه با فضای سفید (16-24 پیکسل) جدا کنید.
دو اصلی را در کنار یکدیگر قرار ندهید - یکی انتخاب «نادرست» خواهد بود.
در فرم ها: CTA پس از آخرین فیلد ؛ ثانویه - چپ/تحت CTA («بازگشت»، «لغو»).
بر روی کارت/کاشی: CTA پایین سمت راست ؛ برای لیست های طولانی - درون خطی CTA در هر کارت.

8) انیمیشن ها و الگوهای حرکت

ورودی/خروجی: 120-180 میلی ثانیه، «کدورت/تبدیل» (بدون طرح بندی).
اثر مطبوعات: کاهش به 96-98٪ + سایه → «کلیک احساس می شود».
برای «موفقیت»: بررسی کوتاه microanimation ≤ 400 میلی ثانیه ؛ برای کاهش حرکت - یک آیکون استاتیک.
اجتناب از اثرات سوسو زدن بی پایان (ضد الگوی برای بازی مسئول).

9) A11y و صفحه کلید

'role = «دکمه»' با '<button>' بومی مورد نیاز نیست.

حلقه تمرکز قابل مشاهده است دستور tab منطقی است. Enter/Space: فعال کردن CTA

'aria مشغول' در بوت ؛ برای وضعیت، از live-region 'role = «وضعیت» استفاده کنید.
متن دکمه در دسترس است SR ؛ آیکون - با "aria-hidden =" true "و نه تنها حامل معنی.

10) معیارها و آزمایشات

CTR CTA، تبدیل پس از کلیک، زمان کلیک از ظاهر تا کلیک.
Scroll-depth → click: نسبت کلیک هایی که «بالای خم «/» زیر خم »رخ داده است.
مناطق نقشه حرارتی (دسکتاپ/اوباش) ؛ دسترسی به انگشت شست (اوباش).
لغو/لغو نرخ برای 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

یک شرط (اولیه): مقدار و ضریب را در کنار هم نشان دهید. at delay> 3 s - «در حال انتظار برای تأیید»... + امن مجدد.
سپرده: چسبنده-CTA پایین صفحه نمایش تلفن همراه («دوباره پر کردن»), ثانویه - «روش تغییر»; کمیسیون/مهلت قابل مشاهده در نزدیکی.

Cashout: CTA بر روی صفحه بازی/کوپن گرفته شده است ؛ همیشه مقدار cashout فعلی را نشان می دهد ؛ تایید قبل از اعدام

محدودیت: CTA تهاجمی نیست ؛ نزدیک - «اثر در».... کنتراست AAA، بدون فلاش.
مسابقات: CTA «Join» بر روی کارت مسابقات + «قوانین/جوایز» ثانویه.

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 روشن است، بدون نفی دوگانه ؛ نزدیک - چه اتفاقی می افتد بعد.

در دسترس بودن

• تمرکز حلقه را ببینید ؛ وارد شوید/کار فضایی ؛ 'آريا مشغول' در بوت.
• متن/کنتراست پس زمینه ≥ AA ؛ نماد تنها حامل معنا نیست.

رفتار

• پاسخ فوری ≤ 100 میلی ثانیه ؛ حالت شلوغ و سعی در شکست.
• برای موارد خطرناک، تأیید یا لغو.
• Sticky-CTA به درستی بر روی تلفن همراه قرار می گیرد، محتوای همپوشانی ندارد.

محل اقامت

• CTA در منطقه انگشت شست (اوباش) و یا در خط دید (دسکتاپ).
• تورفتگی کافی (16-24 پیکسل) از عناصر مجاور.

معیارها

• CTR، تبدیل پس از کلیک، زمان کلیک، نرخ لغو حذف می شوند.
• آزمایش متن/رنگ/اندازه/محل وجود دارد.

16) مستندات در سیستم طراحی

Компоненты: 'Primary', 'ButtonSecondary', 'ButtonGhost', 'StickyCTA', 'UndoBar'.
نشانه های اندازه/کنتراست/انیمیشن، نمونه هایی از copywriting.
الگوها: «یکی در هر صفحه»، «چسبنده در تلفن همراه»، «تأیید/خنثی کردن خطر».
آیا/آیا گالری با صفحه نمایش واقعی و نقشه های گرما نیست.

خلاصه ای کوتاه

CTA زمانی کار می کند که هدف، مکان و معنی داشته باشد: یک گام اصلی، متن روشن، کنتراست کافی، موقعیت صحیح در منطقه توجه/انگشت شست و بازخورد صادقانه. این را در سیستم طراحی قرار دهید، رفتار را اندازه گیری کنید - و کلیک ها به اقدامات با اعتماد به نفس و عمدی بدون اشتباه و تحریک تبدیل می شوند.