כפתורי CTA ואזורי תשומת לב

1) תפקיד CTA ועקרונות

1. צעד אחד גדול לכל מסך. הסי-טי-איי-איי צריך להיות ברור וייחודי.
2. הקשר = פעולה. תמיד יש הסבר קצר ”מה יקרה הלאה” עבור הסי-טי-איי.
3. ראות ללא תוקפנות. ניגוד בין א "א, גודל מספיק וטקסט קריא - במקום אפקטים ראוותניים.
4. עקביות. אותם סי-טי-איי מתנהגים אותו הדבר בכל המסכים.
5. אבטחה. סי-טי-איי מסוכן מלווה באישור או ביטול.

2) היררכיית CTA

פעולת עמוד עיקרי (”הימור”, ”למעלה”, ”אישור”). המחשב האישי 1.
שלב משני - חלופי או עזר (”פרטים”, ”שיטת שינוי”).
שליש- כפתורי טקסט/רוח רפאים עם המשקל החזותי הנמוך ביותר.
סגנון הרסני - נפרד (צבע/סמל אזהרה) + אישור/ביטול.

חוק: אם יש יותר מ ”חזק” אחד על המסך, סביר להניח שתהיה בחירה ללא מטרה. לעצב מחדש את הזרימה.

3) קופירייטינג CTA

פועל + אובייקט, 2-4 מילים: ”הצב הימור”, ”חידש את שיווי המשקל”, ”קבע גבול”.
מפרט: ”פלט 2,000 ₴” עדיף על ”שלח”.
הימנע משלילה כפולה (”אל תבטל”) ומטאפורות מעורפלות.
לפעולות מסוכנות - תת ־ ראש קו 1: ”ללא אישור, אתה יכול לבטל 5 שניות”.

4) ממדים, צורה, ניגודיות

אזור לחיצה מינימלי: window 44 × 44 px (מגע), (32 × 32 px (שולחן עבודה).
גובה כפתור: 40-48 px; רדיוס 10-12 px; חריצים אופקיים 16-20 px.
ניגוד טקסט לרקע: WCAG AA; לא רק להסתמך על צבע - להשתמש אייקון/תווית.
ספרות טבלה עבור כמויות/פקטור: 'פונט-וריאנט-מספרי: tabular-nums; '.

5) מצבים ומשוב

Hover/פוקוס/Active - גלוי וניתן להבחין בו (פוקוס-ring לא מתחבא).
תגובה מיידית על 100 ms, ספינר/שלד במקום ”שקט”.
נכה: לא רק ”אפור” - הסבר מדוע אינו זמין (tooltip/inline-rink).
לבטל/לאשר: עבור CTAs הרסני - או מודל אישור או לוח עם 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-תבנית, נקודות חמות: למעלה-שמאלה (כותרת), למעלה-ימינה (משנית), תחתית המסך (גימור).

• מעל העיקול למסכים קצרים או בתחתית הצורה בקו הראייה,
• פנל ”דביק” בתחתית הנייד (אזור האגודל).
• Mobile ”אגודלים”: ה-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 למטה ימינה; לרשימות ארוכות - CTA מקוון על כל כרטיס.

8) אנימציות ותבניות תנועה

קלט/פלט: 120-180 ms, "opicity/transform' (ללא פריסה-שייקים).
אפקט לחץ: הפחתה ל-96-98% + צל * ”לחיצה מורגשת”.
עבור ”הצלחה”: צ 'ק-מיקרו-אנימציה קצרה על 400 ms; לצמצום תנועה - סמל סטטי.
הימנע מתופעות הבהוב אינסופיות (אנטי-דפוס למשחק אחראי).

9) A11y ומקלדת

”רול =” כפתור ”אינו נחוץ עם 'native' <button>”.
מיקוד-טבעת נראית; סדר לשונית הוא הגיוני. הזן/מרחב הפעל את CTA.
'Aria-עסוק' אתחול; עבור מעמד, השתמש live-region 'role = ”סטטוס”.
טקסט כפתור זמין SR; אייקונים - עם' אריה נסתרת =” נכון” ולא נושא המשמעות היחיד.

10) מדדים וניסויים

CTR CTA, המרה לאחר לחיצה, זמן לחיצה מהופעה ללחיצה.
גלילה לעומק * לחץ: הפרופורציה של קליקים שהתרחשו ”מעל העיקול ”/” מתחת לעיקול ”.
אזורי חימום (שולחן עבודה/מאפיה); אגודל-להגיע (אספסוף).
ביטול/ביטול שיעור עבור CTAs מסוכן.
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 - ”מחכה לאישור”... + Retry בטוח.
הפקדה: מסך נייד תחתון דביק CTA (”Repenish”), משני - ”שיטת שינוי”; עמלות/מועדים גלויים בקרבת מקום.
CTA נתפס על מסך הגפרור/קופון; תמיד מראה את סכום המזומנים הנוכחי; אישור לפני ההוצאה להורג.
קבע גבול: CTA לא אגרסיבי; - ”ייכנס לתוקף...” ניגודיות, בלי הבזקים.
טורנירים: CTA ”הצטרף” בכרטיס הטורניר + המשני ”Rules/Prizes”.

13) תרופות אנטי ־ פטריות

שני CTAs ראשוניים בקרבת מקום (Bet ו-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 ברור, ללא שלילה כפולה; בקרבת מקום - מה קורה הלאה.

זמינות

[ ] פוקוס-טבעת לראות; עבודת הזנה/מרחב; 'Aria-עסוק' באתחול.

[ ] טקסט/רקע ניגוד AA; האייקון אינו נושא המשמעות היחיד.

התנהגות

[ תגובה מיידית ] 100 ms; מדינה עסוקה ו Retre על כישלונות.

[ ] עבור אלה מסוכנים, אישור או לבטל.

[ ] דביק-CTA מקלות בצורה נכונה על הנייד, אינו חופף תוכן.

לינה

[ ] CTA באזור האגודל (mob) או על קו הראייה (desktop).

[ ] הזחה מספקת (16-24 px) מאלמנטים סמוכים.

Metrics

[ ] CTR, המרה אחרי לחיצה, זמן לחיצה, ביטול קצב הוסר.

[ ] ישנם ניסויי טקסט/צבע/גודל/מיקום.

16) תיעוד במערכת התכנון

ראשי תיבות: "Primary", "Secondary Secondary", "GuildGhost'," StickyCTA "," UndoBar ".
אסימונים בגודל/ניגוד/אנימציה, דוגמאות לקופירייטינג.
תבניות: ”ראשי אחד לכל מסך”, ”דביק על נייד”, ”לאשר/לבטל לסיכון”.
לעשות/לא גלריה עם מסכים אמיתיים ומפות חום.

תקציר

CTA עובד כאשר יש לו מטרה, מקום ומשמעות: צעד אחד עיקרי, טקסט ברור, ניגודיות מספקת, מיקום נכון באזור הקשב/אגודל, ומשוב ישר. ללכוד את זה במערכת התכנון, למדוד התנהגות - וללחוץ להפוך בטוח, פעולות מכוונות ללא טעויות וגירוי.