حوافز الواجهة والمساعدين

1) سبب الحاجة إليها

• تظهر في السياق عندما تكون هناك حاجة حقيقية إليها،
• قصيرة ومحددة، بدون تسويق،
• لا تعرقل السيناريو الرئيسي وتحترم التوافر.

2) خريطة الأداة ومتى يتم استخدامها

القاعدة: المحتوى النقدي - في مجال الرؤية وفي نص الواجهة البينية، وليس فقط في التلميح.

3) أنماط التنسيب وأدوات التشغيل

قبل الإجراء: نص مساعد/تلميح داخلي («كلمة المرور ≥ 8 أحرف»).
في لحظة العمل: tooltip/coachmark مع التركيز/التحليق/الضغط الطويل.
بعد الإجراء: نخب/لافتة مع شرح للنتيجة ورابط «المزيد».
بالنية: عرض بواسطة «؟»، «i»، «التفاصيل»، «Ctrl +/» (لوحة الأوامر).

4) كتابة الإعلانات

فكرة واحدة، جملة واحدة. ابدأ بفعل («اختر»...، «املأ»...).

لا خطأ: "استثنى المرشح جميع الإدخالات. هل تريد إعادة تعيين المرشح ؟

الأرقام والوقائع بدلا من التقديرات: "اللجنة 1. 5–2%».
مهم: لا تعد بوقت محدد إلا إذا كان مضمونًا.

5) التوافر (A11y)

الأدوات: «role =» tooltip «»، الاتصال عبر «aria-despacby» مع الزناد ؛ متاح عبر لوحة المفاتيح.
كتل المعلومات: "الدور =" الحالة "(مهذب)، الأخطاء -" الدور = "التنبيه" ".
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 ساعة للمدرب/الجولة ؛ المستخدم لديه لا تذكير.
الأدوات لا تتنافس: لا تفتح الأدوات على المدرب والعكس صحيح.
ذاكرة التقدم: لم تعد الخطوات المكتملة للجولة معروضة.

7) النصوص المساعدة على النماذج

اكتب «كيفية تمرير» القاعدة، وليس «ما فعلته بشكل خاطئ».
مثال على التنسيق بجوار: 'DD. MM. YYYY '،' user @ 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) مساعد الذكاء الاصطناعي/مساعد الطيار

تلميحات الشكل/المصطلح ("ما هو المهرج ؟ ")

بالنسبة للسيناريوهات الحساسة (الدفع/السعر) - فقط التفسيرات وقوائم التحقق، يبقى القرار على عاتق المستخدم.
التدريس على الوثائق الخاصة بك/الأسئلة الشائعة ؛ سجل الأسئلة لتحسين statics.

10) تفاصيل iGaming

القواعد والحدود: مساعدون ملحوظون بجوار الأزرار "ضع رهانًا" و "كاشوت" و "ضع حدًا. "لغة واضحة وأمثلة.
KYC/AML: نصائح خطوة بخطوة (المستندات، تواريخ التحقق، ماذا سيحدث بعد ذلك).
البطولات: في البطاقة - «كيف يتم منح النقاط» (تلميح الأدوات/inline)، رابط «القواعد».
المدفوعات: مساعد بشأن الرسوم/المواعيد النهائية و «سبب الحاجة إلى التحقق».
اللعب المسؤول: مطالب غير مزعجة ولكن مرئية «ضع حدًا يوميًا» (تباين AAA، لا وميض).

11) الأداء وتحديد المواقع

الرسوم المتحركة الخفيفة «التعتيم/التحويل» ≤ 180 مللي ثانية، أسرع.
توضع إلى المصدر، تحول 4-8 px، تقلب تلقائيًا عند الحواف.
لا تصنع شجرة DOM من مئات المطالبات - مثبتة بكسل بالتركيز/التحليق.
ضع في اعتبارك «تفضيل الحركة المخفضة»: مطالبات ثابتة بدلاً من وميض.

12) المقاييس والتجارب

نصائح CTR (انطباعات → نقرات على STA/» More«).
تقليل الأخطاء/الإخفاقات في النماذج مع المساعد مقابل السيطرة.
حان الوقت للنجاح الأول بعد فارغ/جولة.
إخفاء/رفض المطالب (إشارة سلبية - اكتب فوق النص/لحظة العرض).
سجلات الاستفسارات الشائعة في لوحة الأوامر/مساعد الذكاء الاصطناعي.

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) قائمة QA المرجعية

توافر

• Tooltip/coachmark متاح على لوحة المفاتيح، «Esc» يغلق، ويعود التركيز.
• على النقيض ≥ AA، النصوص مستقلة عن اللون فقط.

السلوك

• لا تتداخل التلميحات مع العناصر المهمة، وهي موضوعة في المصدر.
• هناك انطباع بالتفريغ ولا تذكّر.
• الرسوم المتحركة ≤ 180 مللي متر، أسرع.

يعني

• النص محدد وقصير، CTA مناسب.
• ترد أمثلة في الصيغ/القيود.

المقاييس

• يتم إزالة CTRs، الوقت إلى النجاح، نسبة الجلود.

17) التوثيق في نظام التصميم

Компоненты: «HelperText' و» InlineHint' و «Tooltip» و «Coachmark» و «ProductTour» و «DocsLink» و «CommandPalette» و «AiHelper».
رموز الحجم/الوقت/النغمة، دليل ARIA وأمثلة على كتابة الإعلانات.
نماذج للسيناريوهات المتكررة (KYC، الحدود، المدفوعات، البطولات، الرهانات).
افعل/لا تعرض بشاشات حقيقية.

موجز موجز

المساعدون جيدون في الوقت المحدد وفي السياق وبدون دراما غير ضرورية. أعط تلميحات قصيرة ويمكن الوصول إليها ويمكن التحقق منها، واحترم تركيز وتواتر الانطباعات، وأصلح الرموز والأنماط في نظام التصميم. لذلك من غير المرجح أن يرتكب المستخدمون أخطاء ويصلون إلى النتيجة بشكل أسرع - خاصة في سيناريوهات iGaming الحساسة.