इंटरफ़ेस संकेत और सहायक

1) उन्हें क्यों जरूरत है

• संदर्भ में दिखाई देते हैं जब वे वास्तव में आवश्यक
• विपणन के बिना लघु और विशिष्ट,
• मुख्य परिदृश्य और सम्मान उपलब्धता को अवरुद्ध न

2) उपकरण मानचित्र और उनका उपयोग कब करें

नियम: महत्वपूर्ण सामग्री - दृश्य के क्षेत्र में और इंटरफ़ेस के पाठ में, न केवल संकेत में।

3) प्लेसमेंट पैटर्न और ट्रिगर

क्रिया से पहले: सहायक पाठ/इनलाइन-संकेत ("पासवर्ड ≥ 8 वर्ण")।

कार्रवाई के क्षण में: फोकस/होवर/लॉन्ग-प्रेस के साथ टूलटिप/कोचमार्क।

कार्रवाई के बाद: परिणाम की व्याख्या और लिंक "अधिक" के साथ टोस्ट/बैनर।

इरादे से: '?', 'i', "विवरण", 'Ctrl +/' (कमांड पैलेट) द्वारा दिखाया गया है।

4) नकल लेखन

एक सोचा, एक वाक्य। एक क्रिया के साथ शुरू करें ("चुनें...", "भरें"...)।

कोई गलती नहीं: "फ़िल्टर ने सभी प्रविष्टियों को बाहर रखा। क्या आप फ़िल्टर रीसेट करना चाहते हैं?
अनुमान के बजाय संख्या और तथ्य: "आयोग 1। 5–2%».

महत्वपूर्ण: जब तक इसकी गारंटी न हो, एक सटीक समय का वादा न करें।

5) उपलब्धता (A11y)

टूलटिप: 'रोल = "टूलटिप", ट्रिगर के साथ' आरिया-डिस्क्रिप्बी 'के माध्यम से संचार; कीबोर्ड के माध्यम से उपलब्ध है।

सूचित ब्लॉक: 'रोल = "स्थिति" (विनम्र), त्रुटियां -' रोल = "अलर्ट"।

कोचमार्क/टूर: क्रम में फोकस, 'Esc' बंद हो जाता है, वापस स्रोत पर ध्यान केंद्रित करता है।

पाठ कंट्रास्ट ≥ एए; संकेत अर्थ का एकमात्र वाहक नहीं है।

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) प्रबंधन और "स्वच्छता" दिखाएं

Deduplication - एक ही संदेश प्रति सत्र N से अधिक मत दिखाएँ।

आवृत्ति नियंत्रण: कोचमार्क/दौरे के लिए कूल-डाउन 24 एच; उपयोगकर्ता के पास एक डू नॉट रिमाइंड है।

उपकरण प्रतिस्पर्धा नहीं करते हैं: कोचमार्क पर टूलटिप न खोलें और इसके विपरीत।

प्रगति की स्मृति: दौरे के पूर्ण चरण अब प्रस्ताव पर नहीं हैं।

7) रूपों के लिए सहायक ग्रंथ

"नियम कैसे पारित करें" लिखें, न कि "आपने जो गलत किया है।"

इसके बगल में प्रारूप का उदाहरण: 'डीडी। 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 'या बटन ""

पैलेट में: आइकन और हॉटकी के साथ क्रियाएं ("बेट... — ⏎»).

स्टेट मशीनः क्रिया - तत्काल नेविगेशन/निष्पादन का चयन करते समय, "रद्द करें" - 'Esc'।

9) एआई हेल्पर/कोपिलॉट

फॉर्म/शब्द संकेत ("एक वेगर क्या है? "), आवेदन करने से पहले परिवर्तनों की एक सूची के साथ ड्राफ्ट-फ़ील्ड।

संवेदनशील परिदृश्यों (भुगतान/दर) के लिए - केवल स्पष्टीकरण और जांच सूची, निर्णय उपयोगकर्ता के पास रहता है।

अपने स्वयं के दस्तावेज/एफएक्यू पर सिखाएं; स्टेटिक्स में सुधार के लिए लॉग प्रश्

10) iGaming की बारीकियाँ

नियम और सीमा: बटन के बगल में ध्यान देने योग्य सहायक "एक शर्त रखें", "कैशआउट", "एक सीमा निर्धारित करें। "स्पष्ट भाषा और उदाहरण।

KYC/AML: चरण-दर-चरण युक्तियाँ (दस्तावेज़, तारीखें जांचें, आगे क्या होगा)।

टूर्नामेंट: कार्ड में - "कैसे अंक प्रदान किए जाते हैं" (टूलटिप/इनलाइन-संकेत), लिंक "नियम"।

भुगतान: शुल्क/समय सीमा के बारे में सहायक और "सत्यापन की आवश्यकता क्यों है।"

जिम्मेदार नाटक: विनम्र लेकिन दृश्यमान "दैनिक सीमा निर्धारित करें" संकेत देता है (एएए कंट्रास्ट, कोई झिलमिलाहट नहीं)।

11) प्रदर्शन और स्थिति

प्रकाश एनिमेशन 'अपारदर्शिता/परिवर्तन' ≤ 180 मीटर, तेजी से बाहर।

स्रोत पर स्थिति, किनारों पर 4-8 पीएक्स, ऑटो-फ्लिप शिफ्ट करें।

सैकड़ों संकेतों से एक DOM ट्री नहीं बनाएँ - आलसी माउंट फोकस/होवर द्वारा।

'पसंद-कम-गति' पर विचार करें: झिलमिलाहट के बजाय स्थिर संकेत।

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

सीटीआर टिप्स (इंप्रेशन → एसटीए/" अधिक" पर क्लिक करता है)।

सहायक बनाम नियंत्रण के साथ रूपों में त्रुटियों/विफलताओं को कम करना।

खाली/दौरे के बाद पहली सफलता का समय।

प्रांप्ट छुपाना/मना करना (नकारात्मक संकेत - प्रदर्शन के पाठ/क्षण को अधिलेखित करें)।

कमांड पैलेट/एआई सहायक में लोकप्रिय प्रश्नों के लॉग।

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 + चरण दौरा।

झिलमिलाना/कूदना सुराग, विशेष रूप से अंधेरे मोड में।

"चुटकुले" और गलतियों और सीमाओं में सांस्कृतिक रूपक।

जिम्मेदार खेल के लिए आक्रामक रंग और ध्वनि

16) क्यूए चेकलिस्ट

उपलब्धता

• कीबोर्ड पर उपलब्ध टूलटिप/कोचमार्क, 'Esc' बंद हो जाता है, फ़ोकस रिटर्न।
• कंट्रास्ट ≥ एए, ग्रंथ केवल रंग से स्वतंत्र हैं।

व्यवहार

• संकेत महत्वपूर्ण तत्वों को ओवरलैप नहीं करते हैं, स्रोत पर तैनात हैं।
• छाप deduplication और डोन्ट रिमाइंड है।
• एनिमेशन ≤ 180 मीटर, तेजी से बाहर।

अर्थ

• पाठ विशिष्ट और छोटा है, सीटीए उपयुक्त है।
• उदाहरण सूत्रों/प्रतिबंधों में दिए गए हैं।

मेट्रिक्स

• सीटीआर, सफलता का समय, खाल का अनुपात हटा दिया जाता है।

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

: 'हेल्परटेक्स्ट', 'इनलाइनहिन्ट', 'टूलटिप', 'कोचमार्क', ' Tour', 'डॉक्सलिंक', ' पैलेट', 'आइहेल्पर'।

आकार/समय/टोन टोकन, ARIA गाइड और नकल लेखन के उदाहरण।

लगातार परिदृश्यों (केवाईसी, सीमा, भुगतान, टूर्नामेंट, दांव) के लिए साँचा।

वास्तविक स्क्रीन के साथ गैलरी न करें/करें।

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

सहायक समय पर, संदर्भ में और अनावश्यक नाटक के बिना अच्छे होते हैं। छोटे, सुलभ और सत्यापित संकेत दें, इंप्रेशन के फोकस और आवृत्ति का सम्मान करें, डिजाइन प्रणाली में टोकन और पैटर्न को ठीक करें। इसलिए उपयोगकर्ताओं को गलतियाँ करने और परिणाम को तेजी से प्राप्त करने की संभावना कम है - विशेष रूप से संवेदनशील आईगेमिंग परिदृश्यों में।