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

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

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

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

लेबल

क्या आपको याद है कि <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>

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

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

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

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

संसाधन

• शानदार फ़ॉर्म बनाना
• मोबाइल फ़ॉर्म डिज़ाइन करने के सबसे सही तरीके
• Baymard Institute: ई-कॉमर्स यूज़र एक्सपीरियंस रिसर्च
• Don't Make Me Think