طراحی فرم های UX

1) اصول

1. اول وظیفه، سپس زمینه ها. فرم ها ادامه اسکریپت کاربر هستند، نه لیستی از پایگاه های داده.
2. یک صفحه نمایش یک هدف است. حذف هر چیزی که کار را کامل نمی کند.
3. هرگز اطلاعات را از دست ندهید. ذخیره خودکار، بازگرداندن پیش نویس، تکرار ایمن.
4. نشان دادن «چگونه» قوانین و مثالهای پیش از خطا ؛ با دقت ارزیابی کنید.
5. در دسترس بودن پیش فرض. برچسب ها، تمرکز، کنتراست، ناوبری صفحه کلید.
6. سرعت قابل پیش بینی اولین پاسخ 100 میلی ثانیه ≤، ارسال با وضعیت صریح و پیشرفت.

2) معماری اطلاعات فرم

هدف → مراحل → زمینه ها. با نتیجه شروع کنید (به عنوان مثال، «پرداخت») و حداقل مجموعه فیلدها را انتخاب کنید.
گروه بندی بر اساس معنی: «اطلاعات شخصی»، «پرداخت»، «تایید». هر گروه ≤ 6 فیلد است.
افشای پیشرفته: زمینه های اضافی را با شرایط نشان می دهد (انتخاب ضامن/کشور).
ترتیب فیلدها مانند سر کاربر است: از شناخته شده به پیچیده.

3) طرح و شبکه

یک ستون برای تلفن همراه و اکثر وظایف سریع تر در نگاه و برگه سفارش است.
دو ستون برای زمینه های کوتاه مرتبط (تاریخ/زمان، نام/نام خانوادگی) مناسب است.
ارتفاع خط 40-48 پیکسل است، فاصله بین زمینه ها 8-12 پیکسل (مرتبط )/16-24 پیکسل (گروه ها) است.
تراز برچسب در بالای زمینه ؛ در سمت راست - برای فرم های باریک استفاده نکنید.

4) برچسب ها، مکان ها، یاران

برچسب اجباری است. جایگزینی یک مثال است نه یک جایگزین.
متن کمکی را در زیر فیلد قرار دهید: قوانین، فرمت، اشاره به یک مثال.
فیلدهای اختیاری شامل «(اختیاری)» به جای «» در زمینه های مورد نیاز است.

html
<label for = "iban"> IBAN <span class = "muted"> (optional) </span> </label>
<input id="iban" aria-describedby="iban-help">
<small id = "iban-help "> Format A-Z, 0-9; example: DE89 3704 0044 0532 0130 00 </small>

5) مراحل و پیشرفت

فرم های چند مرحله ای (ASC/Payouts): 3-5 مرحله، پیشرفت روشن «مرحله 2 از 4».
صرفه جویی در مراحل تکمیل شده ؛ اجازه بازگشت بدون از دست دادن اطلاعات.
دکمه های ناوبری: «بازگشت»، «بعدی»، نهایی «تایید» - همیشه در یک مکان.

6) کنترل ورودی

صفحه کلید و ویژگی های: «نوع»، «inputmode»، «autocomplete» برای نوع داده.
از ماسک های ورودی به آرامی استفاده کنید (تلفن، IBAN، PAN، تاریخ)، مقادیر نرمال را ذخیره کنید.

تکمیل خودکار را نشکنید: صحیح «autocomplete =» given-name «|» cc-number «|» one-time-code «»، و غیره

مقدار ایستگاه از پیش تنظیم/کلید های میانبر: «+ 50/+ 100/All» در کنار فیلد مقدار.

7) اعتبار سنجی و خطاها

استراتژی: قبل از ورود (کمکی)، در طی (پیشنهادات نرم)، بعد از (در تاری/ارسال).
چک های آسنکرون (منحصر به فرد بودن ورود، محدودیت ها، ریسک) - با بدهی 250-400 میلی ثانیه.
متن خطا: علت → چگونه به رفع → جایگزین.
پانل خلاصه در بالای فرم برای چندین خطا + تمرکز به اولین خطا.
Idempotency-کلید برای اقدامات مهم (پیشنهاد/پرداخت) و بازپرداخت امن.

8) دکمه ها و ارسال

CTA اولیه در رنگ/اندازه برجسته شده است، در دسترس توسط Enter.
حالت 'مشغول' و کلیک کنید سعی کنید بلوک ؛ با تاخیر> 3-5 s - «در انتظار تایید»....
پس از موفقیت - وضعیت صریح (نان تست/صفحه نمایش آماده) + چه اتفاقی می افتد بعد.

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

پیوندهای صحیح "برچسب → ورودی"، خطاها از طریق "aria-describedby"، بحرانی - "نقش =" هشدار ".
قابل مشاهده «: تمرکز قابل مشاهده»، سفارش تب مربوط به بصری است.
کنتراست متن/آیکون ≥ AA ؛ معنی فقط رنگ نیست.
'Prefers-reduced-motion' پشتیبانی: حداقل انیمیشن ها.
برای گروه های دکمه رادیویی - "fieldset/legend"، برای prompts - "نقش =" وضعیت ".

10) بومی سازی و فرمت های بین المللی

تاریخ/ارز/شماره - محلی در ورود، ذخیره سازی - واحد ISO/جزئی.
اجازه برای حروف مختلف در نام/آدرس ؛ خطوط/آپوستروف ها را محدود نکنید.
تلفن را در E.164 نگه دارید کشور به صراحت یا از «+ CC» در درج انتخاب شده است.

11) عملکرد و ثبات

اولین پاسخ بصری ≤ 100 میلی ثانیه ؛ چک های آسنکرون - صفحه را قفل نکنید.
اسکلت به جای یک «حلق آویز» اسپینر، رفع ارتفاع، جلوگیری از CLS.

لیست های طولانی را مجازی کنید (به عنوان مثال کشورها/بانک ها)

فقط «تبدیل/کدورت» را تحریک کنید، بدون تاری/سایه های فله.

12) امنیت و حریم خصوصی

PAN/CVC/گذرنامه را وارد نکنید به RUM/console ارسال نکنید.
زمینه های حساس ماسک، آنها را در ذخیره سازی خودکار ذخیره نکنید.
هنوز فاش نیست که آیا حساب وجود دارد: «اگر ایمیل ثبت شده است، ما یک ایمیل ارسال کنید».

ذخیره سازی - حداقل مورد نیاز ؛ نشان دهید که چرا KYC مورد نیاز است

13) الگوهای سناریو معمولی

13. 1 پرداخت/سپرده

فیلد مقدار با ایستگاه از پیش تنظیم، ارز به صراحت مشخص شده است.
PAN با ماسک نرم، بررسی لان ؛ CVC پنهان است ؛ تاریخ 'MM/YY' با auto- '/'.
متن در مورد کمیسیون/مهلت در این نزدیکی هست، نه در راهنمای ابزار.

13. 2 برداشت

مراحل مقدار → روش → تایید

پیشرفت و «معمولا تا N دقیقه/ساعت» (بدون وعده های سخت).

انواع روش های کشور ؛ هشدارها را محدود کنید

13. 3 KYC

گام به گام لودر فایل: فرمت/وزن مورد نیاز، پیش نمایش، حریم خصوصی.
بررسی تاریخ و وضعیت کانال (ایمیل/اطلاع رسانی).

13. ۴ محدودیت و بازی مسئولانه

پاک کردن واحد (روز/هفته/ماه)، قبل از تنظیمات، تایید تغییرات، «خواهد شد اثر در»....

14) ضد گلوله

نگه دارنده به جای برچسب

اشتباهات «در هر شخصیت» بدون debunking.
فرم را به اشتباه برگردانید.
دستورالعمل بحرانی فقط در نوک ابزار پنهان است.
ماسک های سخت ممنوع شخصیت های معتبر/درج.
کل صفحه را قفل کنید تا یک فیلد تأیید شود.
ارسال بدون صریح مشغول/پیشرفت.

15) قطعه پیاده سازی

خلاصه اشتباهات + تمرکز بر روی موضوع اول

js function focusFirstError() {
const el = document. querySelector('[aria-invalid="true"]');
if (el) el. focus({ preventScroll:false });
}

دکمه با اشغال فوری و idemotency

js btn. addEventListener('click', async () => {
btn. classList. add('is-busy');
try {
const r = await fetch('/api/submit', {
method: 'POST',
headers: { 'Idempotency-Key': crypto. randomUUID() },
body: new FormData(document. querySelector('form'))
});
if (!r.ok) throw new Error();
// success UI
} catch {
// show retry
} finally {
btn. classList. remove('is-busy');
}
});

چارچوب HTML گروه دکمه رادیویی موجود

html
<fieldset>
<legend> How to get </legend>
<label><input type="radio" name="method" value="sepa"> SEPA</label>
<label><input type="radio" name="method" value="swift"> SWIFT</label>
</fieldset>

16) نشانه های سیستم طراحی (به عنوان مثال)

json
{
"form": {
"gap": 12,
"groupGap": 20,
"labelSize": 14,
"fieldHeight": 44,
"radius": 10
},
"motion": {
"pressMs": 90,
"hoverMs": 160,
"overlayInMs": 240
},
"validation": {
"debounceMs": 300,
"blurFeedbackMs": 100
},
"a11y": {
"focusRing": { "width": 2, "offset": 2 },
"contrastAA": true
}
}

ایستگاه از پیش تنظیم CSS

css
.form { display:grid; gap:12px; }
.form__group { display:grid; gap:20px; }
label { font-size:14px; }
.input { height:44px; padding:0 12px; border-radius:10px; }
.input:focus-visible { outline:2px solid var(--focus-ring); outline-offset:2px; }
.field-error { color: var(--role-danger); font-size:.875rem; margin-top:6px; }

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

نرخ تکمیل، زمان تکمیل، نرخ خطا توسط فیلد.
میزان موفقیت مجدد، نسبت فرم های پرتاب شده، عمق مرحله.
CTR از نکات/نمونه ها، نسبت تکمیل خودکار.
A/B: سفارش فیلد، ایستگاه از پیش تنظیم مقدار، متون خطا، تقسیم به مراحل.

18) چک لیست QA

معنی و جریان

• زمینه های مربوط به هدف ؛ اضافی نیست.
• گروه ها منطقی هستند ؛ حداکثر 6 فیلد در هر گروه.

ورودی

• صحیح 'نوع/inputmode/تکمیل خودکار'.
• ماسک ها نرم هستند، درج نمی شکند، مراقبت قابل پیش بینی است.

اعتبار سنجی

• کمک کننده قبل از ورودی ؛ خطا در تاری/ارسال ؛ 250-400 میلی ثانیه
• پانل خلاصه برای خطاهای متعدد ؛ تمرکز بر اولی

در دسترس بودن

• برچسب ها مرتبط هستند ؛ کنتراست ≥ AA ؛ ': تمرکز قابل مشاهده' قابل مشاهده است.
• ناوبری صفحه کلید ؛ گروه های رادیویی با «fieldset/افسانه».

عملکرد

• اولین پاسخ ≤ 100 میلی ثانیه ؛ هیچ «حلق آویز» spinners.
• بدون CLS ؛ لیست های طولانی مجازی می شوند.

امنیت

• بدون سیاهههای مربوط به زمینه حساس ؛ PAN/CVC در ذخیره سازی خودکار نیست.
• idempotency و عقب نشینی امن گنجانده شده است.

19) ویژگی های iGaming

شرط: میدان مقدار + ایستگاه از پیش تنظیم, فوری 'مشغول', تایید خوش بینانه با امکان خنثیسازی (اگر مقررات اجازه می دهد).

پرداخت/برداشت: هزینه های صریح و مهلت در نزدیکی زمینه, نه فقط در راهنمایی; بررسی محدودیتها و وضعیت KYC

مسابقات: نوعی ثبت نام با حداقل مجموعه داده ها، قوانین و چک باکس های توافق شده بدون «الگوهای تاریک».
بازی مسئولانه: اشکال تنظیم محدودیت ها در فواصل مشخص و پیش نمایش نتیجه («محدودیت روزانه شما از فردا 2000 ₴ خواهد بود»).

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

یک فرم خوب یک هدف روشن، مجموعه ای حداقل از زمینه ها، قوانین روشن قبل از خطا، پاسخ فوری و داده های ذخیره شده است. ساختار را از اسکریپت طراحی کنید، به دسترسی و مکان ها احترام بگذارید، شامل retrays safe و idempotence. این است که چگونه فرم ها سریع و قابل اعتماد هستند - به ویژه در سناریوهای مهم iGaming.