CTA πλήκτρα και πεδία προσοχής

1) Ρόλος της CTA και αρχές

1. Ένα σημαντικό βήμα ανά οθόνη. Η πρωτογενής CTA πρέπει να είναι προφανής και μοναδική.
2. Πλαίσιο δράσης. Υπάρχει πάντα μια σύντομη εξήγηση «τι θα συμβεί στη συνέχεια» για το CTA.
3. Ορατότητα χωρίς επιθετικότητα. Αντίθεση ≥ ΑΑ, επαρκές μέγεθος και ευανάγνωστο κείμενο - αντί για φανταχτερά αποτελέσματα.
4. Συνέπεια. Οι ίδιες CTA συμπεριφέρονται το ίδιο σε όλες τις οθόνες.
5. Ασφάλεια. Οι επικίνδυνες CTA συνοδεύονται από επιβεβαίωση ή αναίρεση.

2) Ιεραρχία CTA

Πρωταρχική - δράση σελίδας κλειδιού («Τοποθετήστε ένα στοίχημα», «Top up», «Επιβεβαίωση»). 1 pc.
Δευτερεύον - εναλλακτικό ή βοηθητικό στάδιο («Λεπτομέρειες», «Μέθοδος αλλαγής»).
Τριτογενής - κείμενα/κουμπιά-φάντασμα με το χαμηλότερο οπτικό βάρος.
Καταστροφικό - ξεχωριστό στυλ (χρώμα/προειδοποιητικό εικονίδιο) + επιβεβαίωση/αναίρεση.

Κανόνας: αν υπάρχουν περισσότεροι από ένας «ισχυροί» CTA στην οθόνη, είναι πιθανή η επιλογή χωρίς στόχο. Επανασχεδιασμός της ροής.

3) Αντιγραφικό CTA

Ρήμα + αντικείμενο, 2-4 λέξεις: «Τοποθετήστε ένα στοίχημα», «Αναπληρώστε την ισορροπία», «Ορίστε ένα όριο».
Ιδιαιτερότητες: Το «Output 2.000 ₴» είναι καλύτερο από το «Send».
Αποφύγετε διπλές αρνήσεις («Μην ακυρώσετε») και ασαφείς μεταφορές.
Για επικίνδυνες ενέργειες - γραμμή διάκρισης 1: «Χωρίς επιβεβαίωση, μπορείτε να ακυρώσετε 5 δευτερόλεπτα».

4) Διαστάσεις, σχήμα, αντίθεση

Ζώνη ελάχιστου κλικ: ≥ 44 × 44 px (αφή), ≥ 32 × 32 px (επιφάνεια εργασίας).
Ύψος κουμπιού: 40-48 px. ακτίνα 10-12 px· int. οριζόντιες περιπτώσεις 16-20 px.
Αντίθεση κειμένου προς φόντο: WCAG AA Μην βασίζεστε μόνο στο χρώμα - χρησιμοποιήστε ένα εικονίδιο/ετικέτα.
Ψηφία πίνακα για τα ποσά/συντελεστή: 'αριθμητικό γραμματοσειράς-παραλλαγής: αριθμοί πίνακα· '.

5) Κράτη και ανατροφοδότηση

Hover/Focus/Active - ορατό και διακριτό (ο δακτύλιος εστίασης δεν κρύβεται).
Απασχολημένος (φόρτωση): άμεση απόκριση ≤ 100 ms, spinner/σκελετός αντί της «σιωπής».
Απενεργοποιημένα: όχι μόνο «γκρίζα» - εξηγήστε γιατί δεν είναι διαθέσιμα (tooltip/inline-hint).
Undo/Επιβεβαίωση: για καταστροφικές CTA - είτε ένας τρόπος επιβεβαίωσης είτε ένα πάνελ με Undo 5-10 sec.

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) Τοποθέτηση και περιπτώσεις

Διαχωρισμός πρωτογενούς-CTA από δευτερεύοντα στοιχεία με λευκό χώρο (16-24 px).
Μην βάζετε δύο πρωταρχικά το ένα δίπλα στο άλλο - το ένα θα είναι μια «ψευδής» επιλογή.
Σχετικά με τα έντυπα: CTA μετά το τελευταίο πεδίο. δευτερεύουσα - αριστερά/κάτω από CTA («Πίσω», «Ακύρωση»).
Στα φύλλα/πλακάκια: κάτω δεξιά CTA. για μεγάλους καταλόγους - inline-CTA σε κάθε φύλλο.

8) Κινούμενα σχέδια και μοτίβα κίνησης

Εισροή/έξοδος: 120-180 ms, 'αδιαφάνεια/μετασχηματισμός' (χωρίς αναταράξεις διάταξης).
Επίδραση στον τύπο: μείωση σε 96-98% + σκιώδης → «Το κλικ γίνεται αισθητό».
Για την «επιτυχία»: σύντομη μικροαποικιοποίηση ελέγχου ≤ 400 ms. για τη μείωση της κίνησης - ένα στατικό εικονίδιο.
Αποφυγή ατελείωτων εφέ τρεμοπαίζοντας (αντι-μοτίβο για υπεύθυνο παιχνίδι).

9) A11y και πληκτρολόγιο

Το 'role = «button»' δεν χρειάζεται με το εγγενές '<button>'.
Ορατός δακτύλιος εστίασης. Η εντολή καρτέλας είναι λογική. Εισάγετε/Ενεργοποιήστε το CTA.
'aria-busy' at boot? για το καθεστώς, χρησιμοποιήστε live-region 'role = «status»'.
Το κείμενο κουμπιού είναι διαθέσιμο SR. εικονίδια - με' aria-κρυμμένα =» αληθινά»' και όχι το μοναδικό φορέα νοήματος.

10) Μετρήσεις και πειράματα

CTR CTA, μετατροπή μετά το κλικ, Time-to-Click από την εμφάνιση στο κλικ.
Κλικ σε βάθος κύλισης: η αναλογία των κλικ που εμφανίστηκαν «πάνω από τη στροφή «/» κάτω από τη στροφή ».
Ζώνες θερμικού χάρτη (επιφάνεια εργασίας/όχλος), Εμβάπτιση αντίχειρα (όχλος).
Ποσοστό ακύρωσης/ακύρωσης για επικίνδυνες 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
.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 κάτω κινητή οθόνη («Replenish»), δευτερογενής - «Μέθοδος αλλαγής», ορατές προμήθειες/προθεσμίες σε κοντινή απόσταση.
Cashout: Το CTA καταγράφεται στην οθόνη αγώνα/κουπονιού. δείχνει πάντοτε το τρέχον ποσό των ταμειακών ροών· επιβεβαίωση πριν από την εκτέλεση.
Ορισμός ορίου: ο CTA δεν είναι επιθετικός. σε κοντινή απόσταση - «Θα τεθεί σε ισχύ σε»... Αντίθεση AAA, καμία αναλαμπή.
Τουρνουά: CTA «Join» στην κάρτα τουρνουά + δευτερεύουσα «Κανόνες/Βραβεία».

13) Αντιπατερίδια

Δύο κοντινά CTA (Bet and Buy Bonus) είναι γνωστικοί διαγωνισμοί.
«Γκρι» απενεργοποιημένο χωρίς εξήγηση.
Ατελείωτη προσοχή κινούμενα σχέδια και μάτι.
Ένα κουμπί που αλλάζει τη σήμανση και αφαιρεί την εστίαση.
Η CTA είναι χαμηλότερη από τη μεγάλη «διακόσμηση» που πηγαίνει κάτω από τη στροφή.
Εικονίδιο αντί κειμένου (χωρίς ετικέτα) σε κρίσιμα σημεία.

14) Snippets analytics

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 είναι σαφές, χωρίς διπλές αρνήσεις. σε κοντινή απόσταση - τι θα συμβεί στη συνέχεια.

Διαθεσιμότητα

• Δαχτυλίδι εστίασης, βλ. Εισάγετε/Διαστημική εργασία; 'aria-busy' at boot.
• Αντίθεση κειμένου/φόντου ≥ ΣΣ· το εικονίδιο δεν είναι ο μόνος φορέας νοήματος.

Συμπεριφορά

• Άμεση απόκριση ≤ 100 ms. busy-state και Retry για τις αποτυχίες.
• Για τα επικίνδυνα, επιβεβαίωση ή αναίρεση.
• Το Sticky-CTA κολλάει σωστά στο κινητό, δεν επικαλύπτει το περιεχόμενο.

Κατάλυμα

• CTA στην περιοχή του αντίχειρα (όχλος) ή στη γραμμή της όρασης (επιφάνεια εργασίας).
• Επαρκής εσοχή (16-24 px) από παρακείμενα στοιχεία.

Μετρικές

• CTR, Μετατροπή μετά το κλικ, Χρόνος-to-Click, Undo-rate αφαιρούνται.
• Υπάρχουν πειράματα κειμένου/χρώματος/μεγέθους/τοποθεσίας.

16) Τεκμηρίωση στο σύστημα σχεδιασμού

: " Primary", " Secondary", " Ghos ," StickyCTA "," UndoBar ".
Μέγεθος/αντίθεση/μάρκες κινουμένων σχεδίων, παραδείγματα αντιγραφής.
Μοτίβα: «Ένα πρωτογενές ανά οθόνη», «Sticky on a mobile», «Review/Undo for risk».
Μην γκαλερί με πραγματικές οθόνες και χάρτες θερμότητας.

Σύντομη Περίληψη

Το CTA λειτουργεί όταν έχει σκοπό, τόπο και νόημα: ένα σημαντικό βήμα, σαφές κείμενο, επαρκή αντίθεση, σωστή θέση στη ζώνη προσοχής/αντίχειρα, και έντιμη ανατροφοδότηση. Συλλάβετε αυτό στο σύστημα σχεδιασμού, μετρήστε τη συμπεριφορά - και τα κλικ μετατρέπονται σε αυτοπεποίθηση, εσκεμμένες ενέργειες χωρίς λάθη και ερεθισμό.