رابط کاربری و یاران

1) چرا آنها مورد نیاز هستند

سرنخ ها و کمک کننده ها بار شناختی و میزان خطا را کاهش می دهند اگر:

به نظر می رسد در زمینه زمانی که آنها واقعا مورد نیاز است،
کوتاه و خاص، بدون بازاریابی،
سناریوی اصلی را مسدود نکنید و در دسترس بودن احترام بگذارید.

2) نقشه ابزار و زمان استفاده از آنها

ابزار دقیق	چه زمانی استفاده کنیم	استفاده نکنید
متن کمک کننده (زیر زمینه)	قوانین ورودی/ماسک دائمی، نمونه ها	به خاطر «مشاوره فقط در مورد»
اشاره درون خطی	در داخل واحد/جزء تا زمانی که هیچ داده/عمل وجود دارد	اگر آن را با کلیک/ورودی تداخل
راهنمای ابزار	مرجع سریع به اصطلاح/آیکون (شناور/تمرکز)	برای دستورالعمل های مهم
علامت تجاری	برجسته کردن ویژگی جدید/مهم	اغلب و بدون سوئیچ
تور محصولات	آشنایی اول: 3-5 مرحله	سخنرانی های طولانی که کار را مسدود می کند
حالت خالی	بدون اطلاعات/نتایج/حقوق	بدون مسیر ادامه
لینک اسناد/« ؟ » دستورالعمل یا مقررات دقیق	اگر متن متناسب در رابط
پالت فرمان	یافتن سریع اقدامات/تنظیمات	مخفی شدن به عنوان تنها راه
کمک خلبان AI	مراحل پیچیده، پر کردن فرم، توضیحات	راه حل های مستقل بدون تایید

قانون: محتوای انتقادی - در میدان دید و در متن رابط، نه تنها در اشاره.

3) الگوهای قرار دادن و عوامل

قبل از عمل: متن کمکی/اشاره درون خطی («رمز عبور ≥ 8 کاراکتر»).
در لحظه عمل: راهنمای ابزار/coachmark با تمرکز/شناور/مطبوعات طولانی.
پس از عمل: نان تست/بنر با توضیح نتیجه و لینک «بیشتر».
با قصد: نشان دادن «؟»، «i»، «جزئیات»، «Ctrl +/» (پالت فرمان).

4) کپی رایت

یک فکر، یک جمله با یک فعل شروع کنید («انتخاب»...، «پر کردن»...).

بدون خطا: "فیلتر تمام ورودی ها را حذف کرد. آیا می خواهید فیلتر را دوباره تنظیم کنید ؟

اعداد و حقایق به جای برآورد: "کمیسیون 1. 5–2%».
زمان دقیق را وعده ندهید مگر اینکه تضمین شده باشد.

5) در دسترس بودن (A11y)

نکته ابزار: 'role = «tooltip»'، ارتباط از طریق 'aria-describby' با ماشه ؛ از طریق صفحه کلید در دسترس است.
بلوک های اطلاع: «نقش =» وضعیت «(مودبانه)، خطاها -» نقش = «هشدار».
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) نمایش مدیریت و «بهداشت»

Deduplication - پیام مشابه را بیش از N بار در هر جلسه نشان ندهید.
کنترل فرکانس: خنک کردن 24 ساعت برای coachmark/تور ؛ کاربر یک یادآوری ندارد.
ابزارها رقابت نمی کنند: نوک ابزار را روی coachmark باز نکنید و بالعکس.
حافظه پیشرفت: مراحل تکمیل شده تور دیگر ارائه نمی شود.

7) متون کمکی به فرم ها

قانون «چگونه عبور کنیم» را بنویسید، نه اینکه «چه کار اشتباهی انجام دادیم».
مثالی از فرمت کنار: 'DD. MMYYYY '،' @domain کاربر. سطح بالا.
برای زمینه های پیچیده - دکمه «Example» (یک قطعه کوچک/ماسک را باز می کند).
اعتبارسنجی و کمک کننده با هم در تضاد نیستند: با یک خطا، کمک کننده به یک «چگونگی رفع» تبدیل می شود.

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 "یا دکمه"

در پالت: اقدامات با آیکون ها و کلید های میانبر ("Bet... — ⏎»).
ماشین حالت: هنگام انتخاب یک عمل - ناوبری/اجرای فوری، «لغو» - «Esc».

9) کمک کننده AI/کمک خلبان

نکات فرم/اصطلاح ("vager چیست ؟ "), پیش نویس پر کردن زمینه با یک لیست از تغییرات قبل از اعمال.
برای سناریوهای حساس (پرداخت/نرخ) - فقط توضیحات و لیست چک، تصمیم با کاربر باقی می ماند.
آموزش در مستندات خود را/پرسش و پاسخ; سوالات ورود به سیستم برای بهبود استاتیک.

10) ویژگی های iGaming

قوانین و محدودیت ها: کمک کننده های قابل توجه در کنار دکمه های «قرار دادن شرط»، «Cashout»، «تنظیم حد». زبان روشن و مثال ها

KYC/AML: نکات گام به گام (اسناد، تاریخ چک، آنچه بعدا اتفاق می افتد).
مسابقات: در کارت - «چگونه امتیاز تعلق می گیرد» (نکته ابزار/درون خطی اشاره), لینک «قوانین».
پرداخت: کمک در مورد هزینه/مهلت و «چرا تایید مورد نیاز است».
بازی مسئول: محجوب اما قابل مشاهده «تنظیم محدودیت روزانه» باعث می شود (کنتراست AAA، بدون سوسو زدن).

11) عملکرد و موقعیت

انیمیشن های سبک «opacity/transform» ≤ 180 میلی ثانیه، سریعتر.
موقعیت به منبع، تغییر 4-8 پیکسل، تلنگر خودکار در لبه.
یک درخت DOM را از صدها دستور ایجاد نکنید - به راحتی با تمرکز/شناور سوار شوید.
«prefers-reduced-motion» را در نظر بگیرید: دستورات استاتیک به جای روشن و خاموش شدن.

12) معیارها و آزمایشات

راهنمایی CTR (برداشت → کلیک بر روی STA/» بیشتر«).
کاهش خطاها/شکست در فرم ها با کمک کننده در مقابل کنترل.
زمان برای اولین موفقیت پس از خالی/تور.
پنهان کردن/امتناع از اعلان (سیگنال منفی - بازنویسی متن/لحظه نمایش).
سیاهههای مربوط از نمایش داده شد محبوب در پالت فرمان/کمک 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:

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) تحقق: coachmark و «یادآوری نکنید»

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، متون تنها مستقل از رنگ هستند.

رفتار

نکات عناصر مهم را همپوشانی نمی کنند، به منبع قرار می گیرند.
deduplication تصور و یادآوری وجود ندارد.
انیمیشن ها ≤ 180 میلی ثانیه، سریعتر.

معنی

متن خاص و کوتاه است، CTA مناسب است.
مثال ها در فرمول ها/محدودیت ها داده می شود.

معیارها

CTR ها، زمان موفقیت، نسبت پنهان حذف می شوند.

17) مستندسازی در سیستم طراحی

Компоненты: 'HelperText', 'InlineHint', 'Tooltip', 'Coachmark', 'ProductTour', 'DocsLink', 'CommandPalette', 'AiHelper'.
نشانه های اندازه/زمان/تن، راهنمای ARIA و نمونه هایی از copywriting.
قالب برای سناریوهای مکرر (KYC، محدودیت ها، پرداخت ها، مسابقات، شرط ها).
آیا/آیا گالری با صفحه نمایش واقعی نیست.

خلاصه ای کوتاه

کمک کنندگان در زمان مناسب، در زمینه و بدون درام غیر ضروری خوب هستند. نکات کوتاه، قابل دسترس و قابل اثبات را ارائه دهید، به تمرکز و فرکانس برداشت ها احترام بگذارید، نشانه ها و الگوهای موجود در سیستم طراحی را برطرف کنید. بنابراین کاربران کمتر احتمال دارد اشتباه کنند و سریعتر به نتیجه برسند - مخصوصا در سناریوهای حساس iGaming.

رابط کاربری و یاران

رفتار

معنی

معیارها

خلاصه ای کوتاه

با ما در تماس باشید

ارتباط سریع

ویدئو به‌زودی به‌روزرسانی می‌شود

ما در حال حاضر بسیار درگیر پروژه‌ها هستیم