डिज़ाइन से जुड़ी बुनियादी बातें

पहले सेक्शन में, आपने बेसिक फ़ॉर्म बनाने का तरीका सीखा. इस सेक्शन में, सबसे सही तरीकों के बारे में बताया गया है. इस मॉड्यूल में, उपयोगकर्ता अनुभव (UX) के बारे में जानें, और क्यों बेहतर यूज़र इंटरफ़ेस (यूआई) बनाना फ़ायदेमंद साबित हो सकता है.

इस्तेमाल में आसान इंटरफ़ेस बनाना

फ़ॉर्म भरने में समय लग सकता है और परेशानी हो सकती है. ज़रूरी नहीं है. बेहतरीन उपयोगकर्ता अनुभव के लिए, इस बात का ध्यान रखें कि यूज़र इंटरफ़ेस (यूआई) आसान हो. पक्का करें कि आपके फ़ॉर्म का स्ट्रक्चर और ग्राफ़िक डिज़ाइन सही हो. जैसे, लेआउट, स्पेस, फ़ॉन्ट का साइज़, और रंग और लॉजिकल यूज़र इंटरफ़ेस (यूआई) (जैसे कि लेबल शब्द और सही इनपुट टाइप). आइए देखते हैं कि अपने फ़ॉर्म को कैसे बेहतर और इस्तेमाल में आसान बनाया जा सकता है.

लेबल

क्या आपको याद है कि <label> एलिमेंट किस काम के लिए है? लेबल, फ़ॉर्म कंट्रोल के बारे में बताता है. दिखने वाला और सही तरह से लिखा गया लेबल, उपयोगकर्ता को फ़ॉर्म कंट्रोल के मकसद को समझने में मदद करता है.

हर फ़ॉर्म कंट्रोल के लिए लेबल का इस्तेमाल करें

क्या आपको अपने फ़ॉर्म में नया फ़ॉर्म कंट्रोल जोड़ना है? नए फ़ील्ड के लिए लेबल जोड़कर शुरू करें. इस तरीके से, उसे जोड़ना न भूलें.

सबसे पहले लेबल जोड़ने से, आपको फ़ॉर्म के लक्ष्यों पर फ़ोकस करने में भी मदद मिलती है. मुझे यहां किस तरह का डेटा चाहिए? इसके बाद, डेटा डालने और फ़ॉर्म भरने में उपयोगकर्ता की मदद की जा सकती है.

लेबल के शब्द

मान लें कि आपको ईमेल फ़ील्ड के बारे में बताना है. ऐसा करने के लिए, यह तरीका अपनाएं:

<label for="email">Enter your email address</label>

या आप इसके बारे में इस तरह बता सकते हैं:

<label for="email">Email address</label>

आपको कौनसा ब्यौरा चुनना है?

हमारे उदाहरण के लिए, शब्द 'ईमेल पता' को प्राथमिकता दी जाती है, छोटे लेबल को स्कैन करना आसान होता है, इसलिए चीज़ें समझने में आसान होती हैं. साथ ही, तेज़ी से यह समझने में लोगों की मदद करती हैं कि कौनसे डेटा की ज़रूरत है.

लेबल की स्थिति

सीएसएस से, आप लेबल को फ़ॉर्म नियंत्रण के ऊपर, नीचे, बाईं और दाईं ओर रख सकते हैं. आप इसे कहां रखते हैं?

रिसर्च शो सबसे सही तरीका है कि लेबल को फ़ॉर्म कंट्रोल के ऊपर रखें, ताकि उपयोगकर्ता किसी फ़ॉर्म को तुरंत स्कैन करके यह देख सके कि कौनसा लेबल किस फ़ॉर्म कंट्रोल से जुड़ा है.

फ़ॉर्म डिज़ाइन करना

अच्छी फ़ॉर्म डिज़ाइन से फ़ॉर्म को छोड़ने की दरों को काफ़ी कम करें. सही एलिमेंट और इनपुट टाइप का इस्तेमाल करके, डेटा डालने में उपयोगकर्ताओं की मदद करना कई फ़ॉर्म एलिमेंट और इनपुट टाइप में से किसी को भी चुना जा सकता है. उपयोगकर्ताओं को बेहतरीन अनुभव देने के लिए, सबसे सही एलिमेंट और इनपुट टाइप का इस्तेमाल करें. अगर उपयोगकर्ता को टेक्स्ट की कई लाइनों में जवाब देना है, तो <textarea> एलिमेंट का इस्तेमाल करें. जहां उन्हें आपकी साइट के नियमों और शर्तों को स्वीकार करना हो, वहां <input type="checkbox"> का इस्तेमाल करें.

आपको अलग-अलग तरह के फ़ॉर्म कंट्रोल के बीच, विज़ुअल के तौर पर अंतर भी करना चाहिए. बटन, बटन के जैसा दिखना चाहिए. इनपुट जैसा इनपुट. उपयोगकर्ताओं के लिए, फ़ॉर्म कंट्रोल का मकसद पहचानना आसान बनाएं. उदाहरण के लिए, अगर कोई लिंक जैसा दिखता है, तो उस पर क्लिक करने से नया पेज खुल जाएगा, और फ़ॉर्म सबमिट न करें.

उपयोगकर्ताओं को फ़ॉर्म पर नेविगेट करने में मदद करें

शानदार लेआउट मज़ेदार हो सकता है, लेकिन फ़ॉर्म भरने में रुकावट आ सकती है.

खास तौर पर, रिसर्च शो कि सिर्फ़ एक कॉलम का इस्तेमाल करना सबसे अच्छा है. उपयोगकर्ता अपना समय यह नहीं खोजना चाहते कि अगला फ़ॉर्म कंट्रोल कहां हो. एक कॉलम इस्तेमाल करने पर, आपको सिर्फ़ एक दिशा मिलेगी.

फ़ॉर्म से इंटरैक्ट करने में उपयोगकर्ताओं की मदद करें

गलती से टैप या क्लिक से बचने के लिए, साथ ही, उपयोगकर्ताओं को आपके फ़ॉर्म के साथ इंटरैक्ट करने में मदद मिलती है. इससे आपके बटन बड़े साइज़ के हो जाते हैं. इसका सुझाव टैप टारगेट का साइज़ कम से कम 48 पिक्सल होना चाहिए. margin का इस्तेमाल करके आपको फ़ॉर्म कंट्रोल के बीच में काफ़ी स्पेस भी जोड़ना चाहिए अनजाने में होने वाले इंटरैक्शन से बचने के लिए सीएसएस प्रॉपर्टी का इस्तेमाल करें.

फ़ॉर्म कंट्रोल का डिफ़ॉल्ट साइज़ बहुत छोटा है, इसलिए इसे इस्तेमाल नहीं किया जा सकता. आपको padding का इस्तेमाल करके और डिफ़ॉल्ट font-size को बदलकर, साइज़ बढ़ाना चाहिए.

अलग-अलग पॉइंटिंग डिवाइसों के लिए अलग-अलग साइज़ तय किए जा सकते हैं, उदाहरण के लिए, pointer सीएसएस मीडिया सुविधा का इस्तेमाल करके माउस.

// pointer device, for example, a mouse
@media (pointer: fine) {
  input[type="checkbox"] {
    width: 15px;
    height: 15px;
  }
}

// pointer device of limited accuracy, for example, a touch-based device
@media (pointer: coarse) {
  input[type="checkbox"] {
    width: 30px;
    height: 30px;
  }
}

ज़्यादा जानने के लिए, pointer सीएसएस मीडिया की सुविधा.

त्रुटियां दिखाएं, जहां वे होती हैं

उपयोगकर्ताओं को यह आसानी से पता चल सके कि किस फ़ॉर्म कंट्रोल पर ध्यान देने की ज़रूरत है, उनके सुझाए गए फ़ॉर्म कंट्रोल के बगल में, गड़बड़ी के मैसेज दिखेंगे. फ़ॉर्म सबमिशन में गड़बड़ियां दिखाते समय, पक्का करें कि आपने फ़ॉर्म के पहले अमान्य कंट्रोल पर जाया हो.

उपयोगकर्ताओं को साफ़ तौर पर बताएं कि उन्हें कौनसा डेटा डालना है

पक्का करें कि उपयोगकर्ताओं को मान्य डेटा डालने का तरीका पता हो. क्या उन्हें पासवर्ड के लिए कम से कम आठ वर्ण डालने होंगे? उन्हें बताएं.

<label for="password">Password (required)</label>
<input required minlength="8" type="password" id="password" name="password" aria-describedby="password-minlength">
<span id="password-minlength">Enter at least eight characters</span>

उपयोगकर्ताओं को साफ़ तौर पर बताएं कि कौनसे फ़ील्ड ज़रूरी हैं

<label for="name">Name (required)</label>
<input name="name" id="name" required>

अगर कोई फ़ील्ड ज़रूरी है, तो उसे साफ़ तौर पर बताएं! सुलभता फ़ॉर्म की बनावट में, जानकारी देने के लिए इस्तेमाल होने वाले दूसरे तरीकों के बारे में बताया गया है ज़रूरी फ़ील्ड. अगर किसी फ़ॉर्म के ज़्यादातर फ़ील्ड ज़रूरी हैं, तो वैकल्पिक फ़ील्ड बताएं.

गड़बड़ी के मैसेज को फ़ॉर्म कंट्रोल से कैसे जोड़ा जा सकता है, ताकि उन्हें स्क्रीन रीडर आसानी से ऐक्सेस कर सके? आप इसके बारे में अगले मॉड्यूल में जान सकते हैं.

देखें कि आपको कितना समझ आया है

फ़ॉर्म डिज़ाइन करने के बारे में अपनी जानकारी परखें

संसाधन

• शानदार फ़ॉर्म बनाएं
• मोबाइल फ़ॉर्म डिज़ाइन करने के सबसे सही तरीके
• बेमार्ड इंस्टिट्यूट: ई-कॉमर्स यूएक्स रिसर्च
• नतीजा करो