यूएक्स फॉर्म डिजाइन करना

1) सिद्धांत

1. पहले कार्य, फिर खेतों। फॉर्म उपयोगकर्ता स्क्रिप्ट की एक निरंतरता है, डेटाबेस की सूची नहीं।

2. एक स्क्रीन एक लक्ष्य है। कुछ भी हटाएँ जो कार्य पूरा नहीं करता है।

3. डेटा कभी नहीं खोना। ऑटोसेव, ड्राफ्ट पुनर्स्थापित करें, सुरक्षित रीप

4. "कैसे दिखाएँ। "पूर्व त्रुटि नियम और उदाहरण; ध्यान से मान्य करें।

5. डिफ़ॉल्ट उपलब्धता। लेबल, फोकस, कंट्रास्ट, कीबोर्ड नेविगेशन।

6. अनुमानित गति। पहली प्रतिक्रिया ≤ 100 एमएस, स्पष्ट स्थिति और प्रगति के साथ भेजना

2) फॉर्म सूचना वास्तुकला

उद्देश्य कदम - क्षेत्र। परिणाम के साथ प्रारंभ करें (उदाहरण के लिए, "संवितरण") और फ़ील्ड के न्यूनतम सेट का चयन करें।

अर्थ द्वारा समूहीकरण: "व्यक्तिगत डेटा", "भुगतान", "पुष्टि। "प्रत्येक समूह ≤ 6 क्षेत्र।

प्रगतिशील प्रकटीकरण: शर्त के अनुसार अतिरिक्त क्षेत्र दिखाएँ (टॉगल/देश चयन)।

क्षेत्रों का क्रम उपयोगकर्ता के सिर की तरह है: प्रसिद्ध से परिसर तक।

3) लेआउट और ग्रिड

मोबाइल और अधिकांश कार्यों के लिए एक स्तंभ लुक और टैब क्रम में तेज है।

दो स्तंभ छोटे परस्पर जुड़े हुए क्षेत्रों (तिथि/समय, नाम/उपनाम) के लिए उपयुक्त हैं।

लाइन की ऊंचाई 40-48 px है, खेतों के बीच की दूरी 8-12 px (संबंधित )/16-24 px (समूह) है।

क्षेत्र के शीर्ष पर लेबल संरेखण; दायीं ओर - संकीर्ण रूपों के लिए उपयोग न करें।

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) कदम और प्रगति

मल्टी-स्टेप फॉर्म (एएससी/पेआउट): 3-5 चरण, स्पष्ट प्रगति "4 का चरण 2"।

पूर्ण चरण सहेजें; बिना डेटा हानि के लौटने की अनुमति दें।

नेविगेशन बटन: "बैक", "नेक्स्ट", अंतिम "पुष्टि" - हमेशा एक स्थान पर।

6) इनपुट नियंत्रण

कीबोर्ड और विशेषता: 'प्रकार', 'इनपुटमोड', डेटा प्रकार के लिए 'स्वतः पूर्ण'।

इनपुट मास्क धीरे से उपयोग करें (फोन, IBAN, PAN, तिथि), सामान्यीकृत मानों को संग्रहीत करें।

स्वतः अपूर्ण न तोड़ें: सही' autocomplete =" दिया गया नाम" | "cc-name" | "वन-टाइम-कोड", आदि.

राशि प्रीसेट/शॉर्टकट: "+ 50/+ 100/All" राशि क्षेत्र के बगल में।

7) मान्यता और त्रुटियाँ

रणनीति: प्रवेश करने से पहले (सहायक), (नरम संकेत) के दौरान, (ब्लर/सबमिट पर)।

अतुल्यकालिक जाँच (लॉगिन, सीमा, जोखिम की विशिष्टता) - 250-400 एमएस के डेबिट के साथ।

त्रुटि पाठ: कारण विकल्प को कैसे ठीक करें।

कई त्रुटियों के लिए फ़ॉर्म के ऊपर सारांश पैनल + पहली त्रुटि पर फ़ोकस करें.

महत्वपूर्ण कार्यों (बोली/वेतन) और सुरक्षित रिट्रे के लिए पहचान-कुंजी।

8) बटन और सबमिशन

प्राथमिक सीटीए रंग/आकार में उभारा गया है, जो एंटर द्वारा उपलब्ध है।

'व्यस्त' स्टेट और क्लिक रीट्री ब्लॉक; देरी> 3-5 एस - "पुष्टि की प्रतीक्षा"...।

सफलता के बाद - स्पष्ट स्थिति (टोस्ट/रेडी स्क्रीन) + आगे क्या होता है।

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

लिंक 'लेबल → इनपुट' को सही करें, 'आरिया-डिस्क्रिबेडबी', महत्वपूर्ण - 'रोल =' अलर्ट 'के माध्यम से त्रुटियां।

दृश्यमान ': फ़ोकस-दृश्यमान', टैब क्रम दृश्य से मेल खाता है.

पाठ/प्रतीक कंट्रास्ट ≥ एए; अर्थ सिर्फ रंग नहीं है।

'प्रीफ़र्स-कम-मोशन' समर्थन: न्यूनतम एनिमेशन।

रेडियो बटन समूहों के लिए - 'फील्डसेट/लीजेंड', संकेतों के लिए - 'रोल = "स्थिति"।

10) स्थानीयकरण और अंतर्राष्ट्रीय प्रारूप

तिथियां/मुद्राएं/संख्या - प्रवेश पर स्थानीय, भंडारण - आईएसओ/लघु इकाइयां।

नाम/पते में विभिन्न वर्णमालाओं के लिए अनुमति दें; हाइफ़न/एपोस्ट्रोफ़को सीमित न करें।

फोन को E.164 में रखें; देश स्पष्ट रूप से या '+ सीसी' से सम्मिलन पर चयनित।

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

पहली दृश्य प्रतिक्रिया ≤ 100 एमएस; अतुल्यकालिक जाँच - स्क्रीन को लॉक न करें।

"हैंगिंग" स्पिनर के बजाय कंकाल, ऊंचाइयों को ठीक करें, सीएलएस से बचें।

लंबी सूचियों का वर्चुअलाइज़करें (उदा। देश/बैंक)।

केवल 'ट्रांसफॉर्म/अपारदर्शिता' को एनिमेट करें, कोई थोक धब्बा/छाया नहीं।

12) सुरक्षा और गोपनीयता

पैन/सीवीसी/पासपोर्ट लॉग न करें; RUM/कंसोल को न भेजें।

मास्क संवेदनशील क्षेत्र, उन्हें ऑटोसेव में सहेजें नहीं।

यह खुलासा न करें कि क्या खाता मौजूद है: "यदि ईमेल पंजीकृत है, तो हम एक ईमेल भेजेंगे।"

भंडारण - न्यूनतम आवश्यकता; दिखाएं कि KYC की आवश्यकता क्यों है।

13) विशिष्ट परिदृश्य पैटर्न

13. 1 भुगतान/जमा

प्रीसेट के साथ राशि क्षेत्र, मुद्रा स्पष्ट रूप से निर्दिष्

नरम मुखौटा के साथ पैन, लुहन जाँच; सीवीसी छिपा हुआ है; तिथि 'MM/YY' ऑटो- '/' के साथ।

पास में आयोगों/समय सीमाओं के बारे में पाठ, टूलटिप में नहीं।

13. 2 निकासी

कदम मात्रा → विधि → पुष्टि

प्रगति और "आमतौर पर एन मिनट/घंटे तक" (कोई कठिन वादा नहीं)।

देश द्वारा विधि वेरिएंट; चेतावनियों को सीमित करें।

13. 3 KYC

चरण-दर-चरण फ़ाइल लोडर: प्रारूप/वजन आवश्यकताएं, पूर्वावलोकन, गोपनीयता।

तिथि और स्थिति चैनल (मेल/सूचना) जाँचें।

13. 4 सीमाएँ और जिम्मेदार नाटक

स्पष्ट इकाइयाँ (दिन/सप्ताह/महीना), पूर्व सेटिंग, परिवर्तनों की पुष्टि, "प्रभावी होगा"...।

14) एंटीपैटर्न

लेबल के बजाय प्लेसहोल्डर।

डिबंकिंग के बिना त्रुटियां "प्रति वर्ण"।

त्रुटि पर फॉर्म रीसेट करता है।

महत्वपूर्ण निर्देश केवल टूलटिप में छुपा हुआ है।

वैध अक्षरों/सम्मिलन को प्रतिबंधित करने वाले हार्ड मास्क

एकल क्षेत्र को मान्य करने के लिए पूरे पृष्ठ को लॉक करें।

बिना स्पष्ट व्यस्त/प्रगति के भेजें।

15) कार्यान्वयन स्निपेट्स

त्रुटियों का सारांश + पहले अंक पर फोकस करें

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

तत्काल व्यस्त और पहचान के साथ बटन

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
<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
.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) मेट्रिक्स और प्रयोग

पूर्णता दर, समय से पूर्ण, क्षेत्र द्वारा त्रुटि दर।

सफलता दर, फेंके गए रूपों का अनुपात, कदम गहराई।

संकेतों/उदाहरणों का सीटीआर, स्वतः पूर्णता का अनुपात।

A/B: फील्ड ऑर्डर, राशि प्रीसेट, त्रुटि ग्रंथ, चरणों में विभाजन।

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

अर्थ और प्रवाह

• क्षेत्र लक्ष्य के अनुरूप हैं; कोई अतिरिक्त न
• समूह तार्किक हैं; प्रति समूह अधिकतम 6 क्षेत्

इनपुट

• सही 'प्रकार/इनपुटमोड/स्वतः पूर्ण'.
• मास्क नरम हैं, डालना टूटता नहीं है, कैरेट अनुमानित है।

सत्यापन

• इनपुट से पहले सहायक; ब्लर/सबमिट पर त्रुटियां; debouns 250-400 ms।
• कई त्रुटियों के लिए सारांश पैनल; पहले पर ध्यान केंद्रित

उपलब्धता

• लेबल जुड़े हुए हैं; इसके विपरीत ≥ एए; ': फोकस-दृश्यमान' दृश्यमान।
• कुंजीपट नेविगेशन; 'फील्डसेट/लीजेंड' वाले रेडियो समूह।

निष्पादन

• पहली प्रतिक्रिया ≤ 100 एमएस; कोई "हैंगिंग" स्पिनर नहीं।
• कोई सीएलएस नहीं; लंबी सूचियाँ वर्चुअलाइज्ड हैं।

सुरक्षा

• कोई संवेदनशील क्षेत्र लॉग नहीं पैन/सीवीसी ऑटोसेव में नहीं है।
• आइडेम्पोटेंसी और सुरक्षित रिट्रीट शामिल हैं।

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

दांव: राशि क्षेत्र + प्रीसेट, तत्काल 'व्यस्त', पूर्ववत की संभावना के साथ आशावादी पुष्टि (यदि नियम अनुमति देते हैं)।

भुगतान/निकासी: स्पष्ट शुल्क और समय सीमा क्षेत्रों के पास, न केवल युक्तियों में; सीमा और केवाईसी स्थिति की जाँच करें

टूर्नामेंट: "डार्क पैटर्न" के बिना डेटा, नियमों और सहमत चेकबॉक्स के न्यूनतम सेट के साथ पंजीकरण का एक रूप।

जिम्मेदार खेल: स्पष्ट अंतराल पर सीमा निर्धारित करने और परिणाम का पूर्वावलोकन करने के रूप ("आपकी दैनिक सीमा कल से 2,000 ₴ होगी")।

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

एक अच्छा रूप एक स्पष्ट लक्ष्य है, क्षेत्रों का एक न्यूनतम सेट, एक त्रुटि से पहले स्पष्ट नियम, त्वरित प्रतिक्रिया और डेटा स्क्रिप्ट से संरचना, सम्मान पहुंच और स्थानों को डिजाइन करें, जिसमें सुरक्षित रिट्रे और आइडेम्पोटेंस शामिल हैं। यह है कि रूपों को तेजी से और विश्वसनीय महसूस होता है - विशेष रूप से महत्वपूर्ण iGaming परिदृश्यों में।