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

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

उपयोगकर्ता के लिए आसान इंटरफ़ेस बनाना

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

लेबल

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

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

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

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

लेबल में शब्द जोड़ें

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

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

या आप इसका वर्णन इस तरह कर सकते हैं:

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

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

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

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

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

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

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

अच्छे फ़ॉर्म डिज़ाइन से फ़ॉर्म छोड़ने की दर काफ़ी कम हो सकती है. सही एलिमेंट और इनपुट टाइप का इस्तेमाल करके, डेटा डालने में उपयोगकर्ताओं की मदद करें फ़ॉर्म एलिमेंट और इनपुट के कई टाइप उपलब्ध हैं, जिनमें से किसी को भी चुना जा सकता है. सबसे अच्छा UX देने के लिए, अपने इस्तेमाल के उदाहरण के लिए सबसे सही एलिमेंट और इनपुट टाइप का इस्तेमाल करें. अगर उपयोगकर्ता को टेक्स्ट की एक से ज़्यादा लाइनें भरनी चाहिए, तो <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>

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

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

आपने जो सीखा है उसकी जांच करें

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

संसाधन

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