Κίνητρα διεπαφής και βοηθοί

1) Γιατί χρειάζονται

• εμφανίζονται στο πλαίσιο της πραγματικής τους ανάγκης,
• σύντομη και ειδική, χωρίς εμπορία,
• δεν εμποδίζουν το κύριο σενάριο και σέβονται τη διαθεσιμότητα.

2) Χάρτης εργαλείων και χρόνος χρήσης τους

Κανόνας: κρίσιμο περιεχόμενο - στο οπτικό πεδίο και στο κείμενο της διεπαφής, όχι μόνο στην υπόδειξη.

3) Πρότυπα και ενεργοποιήσεις τοποθέτησης

Πριν από τη δράση: κείμενο βοηθού/inline-hint («κωδικός πρόσβασης ≥ 8 χαρακτήρες»).
Κατά τη στιγμή της δράσης: tooltip/coachmark με εστίαση/hover/long-press.
Μετά τη δράση: τοστ/πανό με εξήγηση του αποτελέσματος και του συνδέσμου «Περισσότερα».
Με πρόθεση: δείχνει από '?', 'i', «Λεπτομέρειες», 'Ctrl +/' (παλέτα εντολών).

4) Copywriting

Μια σκέψη, μία πρόταση. Αρχίστε με ένα ρήμα («Επιλέξτε»..., «Γεμίστε»...).

Καμία βλάβη: "Το φίλτρο απέκλεισε όλες τις καταχωρίσεις. Επιθυμείτε την επαναφορά του φίλτρου

Αριθμοί και γεγονότα αντί εκτιμήσεων: "Επιτροπή 1. 5–2%».
Σημαντικό: Μην υποσχεθείτε ακριβή ώρα εκτός αν είναι εγγυημένη.

5) Διαθεσιμότητα (A11y)

Tooltip: 'role =' tooltip '', επικοινωνία μέσω 'aria-description' με σκανδάλη. διατίθεται μέσω πληκτρολογίου.
Ενημερώστε τα μπλοκ: 'role =' status '' (ευγενικά), σφάλματα - 'role =' alert ''.
Coachmark/Tour: Εστίαση στη σειρά, «Esc» κλείνει, εστίαση πίσω στην πηγή.
Αντίθεση κειμένου ≥ AA. η υπόδειξη δεν είναι ο μόνος φορέας νοήματος.

html
<button id="kpi" aria-describedby="kpi-tip">RTP</button>
<div id = "kpi-tip" role = "tooltip" hidden> Return to Player - the share of bets returned to players in the long term. </div>
<script>
const b = document. getElementById('kpi'), t = document. getElementById('kpi-tip');
b. addEventListener('focus', ()=>t. hidden=false); b. addEventListener('blur', ()=>t. hidden=true);
b. addEventListener('mouseenter', ()=>t. hidden=false); b. addEventListener('mouseleave', ()=>t. hidden=true);
</script>

6) Προβολή διαχείρισης και «υγιεινής»

Αφαίρεση - Μην εμφανίσετε το ίδιο μήνυμα περισσότερες από N φορές ανά συνεδρία.
Έλεγχος συχνότητας: ψύξη 24 ώρες για μαρκαδόρο/περιήγηση. ο χρήστης έχει ένα Do Not Remind.
Τα εργαλεία δεν ανταγωνίζονται: δεν ανοίγουν εργαλεία πάνω από το αμαξάκι και αντίστροφα.
Μνήμη της προόδου: Τα ολοκληρωμένα βήματα της περιοδείας δεν προσφέρονται πλέον.

7) Κείμενα βοηθών σε έντυπα

Γράψτε «πώς να περάσετε» τον κανόνα, όχι «τι κάνατε λάθος».
Παράδειγμα μορφής δίπλα στο: 'DD. MM. YYYY ', χρήστης @ domain. tld '.
Για σύνθετα πεδία - το κουμπί «Παράδειγμα» (ανοίγει ένα μικρό κομμάτι/μάσκα).
Η επικύρωση και ο βοηθός δεν συγκρούονται: με ένα σφάλμα, ο βοηθός μετατρέπεται σε ένα σύντομο «πώς να διορθώσετε».

html
<label for="iban">IBAN</label>
<input id="iban" aria-describedby="iban-help">
<small id = "iban-help "> Format: 22-34 characters, Latin letters and numbers only. </small>

8) Παλέτα εντολών και αναζήτηση με ενέργειες

Ενεργοποίηση: 'Ctrl +/',' Ctrl + K 'ή κουμπί «»

Στην παλέτα: ενέργειες με εικονίδια και hotkeys ("Στοίχημα... — ⏎»).
Κατά την επιλογή μιας ενέργειας - στιγμιαία πλοήγηση/εκτέλεση, «Ακύρωση» - «Esc».

9) Βοηθός ΓΕ/συγκυβερνήτης

Υπόδειξη μορφής/όρου ("Τι είναι ένα βάδισμα "), τα πεδία πλήρωσης σχεδίων με κατάλογο αλλαγών πριν από την εφαρμογή.
Για ευαίσθητα σενάρια (πληρωμή/επιτόκιο) - μόνο εξηγήσεις και καταλόγους ελέγχου, η απόφαση παραμένει στην αρμοδιότητα του χρήστη.
Να διδάσκετε τα δικά σας έγγραφα/συχνές ερωτήσεις. καταγραφή ερωτήσεων για τη βελτίωση των στατικών.

10) Οι ιδιαιτερότητες του iGaming

Κανόνες και όρια: αισθητοί βοηθοί δίπλα στα κουμπιά «Τοποθετήστε ένα στοίχημα», «Cashou ,» Ορίστε ένα όριο. "Σαφής γλώσσα και παραδείγματα.
KYC/AML: συμβουλές βήμα προς βήμα (έγγραφα, ημερομηνίες ελέγχου, τι θα συμβεί στη συνέχεια).
Τουρνουά: στην κάρτα - «Πώς απονέμονται οι βαθμοί» (tooltip/inline-hint), σύνδεσμος «Κανόνες».
Πληρωμές: βοηθός για τα τέλη/προθεσμίες και «Γιατί χρειάζεται επαλήθευση».
Υπεύθυνο παιχνίδι: απαράδεκτα αλλά ορατά κίνητρα «Καθορισμός ημερήσιου ορίου» (αντίθεση AAA, κανένα τρέμουλο).

11) Επιδόσεις και τοποθέτηση

Φωτεινά κινούμενα σχέδια 'αδιαφάνεια/μετασχηματισμός' ≤ 180ms, έξω γρηγορότερα.
Τοποθέτηση στην πηγή, μετατόπιση 4-8 px, αυτόματη αναστροφή στις ακμές.
Μην δημιουργήσετε ένα δέντρο DOM από εκατοντάδες προτροπές - τεμπέλης με εστίαση/αιώρηση.
Σκεφτείτε «προτιμώμενη-μειωμένη κίνηση»: στατικά κίνητρα αντί για λαμπερή κίνηση.

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

Συμβουλές CTR (εντυπώσεις → κλικ στο STA/» More«).
Μείωση σφαλμάτων/αστοχιών σε μορφές με βοηθό έναντι ελέγχου.
Ώρα για πρώτη επιτυχία μετά την άδεια/περιοδεία.
Απόκρυψη/απόρριψη κινήσεων (αρνητικό σήμα - αντικατάσταση κειμένου/στιγμής απεικόνισης).
Αρχεία με δημοφιλή ερωτήματα στην παλέτα εντολών/βοηθός AI.

13) Μάρκες συστήματος σχεδιασμού (παράδειγμα)

json
{
"help": {
"maxWidth": 320,
"gap": 8,
"radius": 10,
"elev": 8,
"iconSize": 16,
"enterMs": 180,
"exitMs": 120,
"cooldownHours": 24
},
"tour": { "maxSteps": 5, "backdropOpacity": 0. 5, "escCloses": true },
"palette": { "hotkey": "Ctrl+K", "rowHeight": 40 },
"a11y": { "contrastAA": true, "useAriaLive": true }
}

css
.helper { display:flex; gap:8px; align-items:flex-start; max-width:320px; }
.helper__icon { width:16px; height:16px; opacity:.8; }
.tooltip { position:absolute; padding:8px 10px; border-radius:10px; box-shadow:var(--elev-2); }
.tooltip[data-show="true"] { animation: fadeIn. 18s cubic-bezier(.2,0,.2,1); }
@keyframes fadeIn { from { opacity:0; transform: translateY(4px) } to { opacity:1; transform:none } }

14) Πραγματοποίηση: αμαξοστοιχία και «μην το θυμάστε»

html
<div id="cm1" class="coachmark" role="dialog" aria-labelledby="cm1-title" hidden>
<h3 id = "cm1-title "> New Fast Cashout </h3>
<p> Check out with one button directly from the coupon. </p>
<div class="row">
<button id = "cm1-ok "> Clear </button>
<button id = "cm1-skip"> Don't remind me </button>
</div>
</div>
<script>
const seen = localStorage. getItem('cm1-skip')==='1';
if(!seen) document. getElementById('cm1'). hidden=false;
document. getElementById('cm1-skip'). onclick=()=>{ localStorage. setItem('cm1-skip','1'); cm1. hidden=true; };
document. getElementById('cm1-ok'). onclick=()=> cm1. hidden=true;
</script>

15) Αντι-μοτίβα

Υπόδειξη κλεισίματος CTA ή επικάλυψης εστίασης.
Κρίσιμες πληροφορίες μόνο σε εργαλειοθήκη/αιώρηση.
10 + βήμα περιήγηση χωρίς Skip Αργότερα.
Shimmering/jumping ενδείξεις, ειδικά σε σκοτεινή κατάσταση.
«Αστεία» και πολιτιστικές μεταφορές σε λάθη και όρια.
Επιθετικά χρώματα και ήχος για υπεύθυνο παιχνίδι.

16) Κατάλογος ελέγχου QA

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

• Tooltip/coachmark διαθέσιμο στο πληκτρολόγιο, «Esc» κλείνει, εστίαση επιστρέφει.
• Αντίθετα ≥ AA, τα κείμενα είναι ανεξάρτητα μόνο από το χρώμα.

Συμπεριφορά

• Οι υποδείξεις δεν επικαλύπτουν σημαντικά στοιχεία, τοποθετούνται στην πηγή.

Υπάρχει απεμπλοκή της εντύπωσης και μην το θυμάστε.

• Κινούμενα σχέδια ≤ 180ms, έξω γρηγορότερα.

Έννοια

• Το κείμενο είναι συγκεκριμένο και σύντομο, το CTA είναι κατάλληλο.
• Παραδείγματα δίνονται στους τύπους/περιορισμούς.

Μετρικές

• CTR, χρόνος έως την επιτυχία, ποσοστό δορών αφαιρείται.

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

: 'HelperTex ,' Inline Hin , 'Tooltip', 'Coachmark', 'ProducTour', 'DocsLink', 'AngousPalette', 'AiHelper'.
Μέγεθος/χρόνος/τόνος, οδηγός ARIA και παραδείγματα αντιγραφής.
Πρότυπα για τα συχνά σενάρια (KYC, όρια, πληρωμές, τουρνουά, στοιχήματα).
Κάντε/Μην γκαλερί με πραγματικές οθόνες.

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

Οι βοηθοί είναι καλοί όταν βρίσκονται στην ώρα τους, στο πλαίσιο και χωρίς περιττό δράμα. Δώστε σύντομες, προσβάσιμες και επαληθεύσιμες υποδείξεις, σεβαστείτε την εστίαση και τη συχνότητα των εντυπώσεων, διορθώστε τις μάρκες και τα μοτίβα στο σύστημα σχεδιασμού. Έτσι, οι χρήστες είναι λιγότερο πιθανό να κάνουν λάθη και να φτάσουν στο αποτέλεσμα γρηγορότερα - ειδικά σε ευαίσθητα σενάρια iGaming.