फ़ॉर्म फ़ील्ड के सबसे अच्छे तरीके: लेबल, प्लेसहोल्डर और वैलिडेशन

जब आप फ़ॉर्म भर रहे होते हैं, तो फ़ॉर्म का फ़ील्ड छोटी चीज़ नहीं लगता। यही वह पल है जब आप तय करते हैं कि आगे बढ़ना है या छोड़ देना है। और वह पल पूरी तरह इस पर टिका होता है कि फ़ील्ड खुद साफ़ है या नहीं, निर्देश आसानी से समझ आते हैं या नहीं, और कुछ गलत होने पर एरर मैसेज समझ में आता है या नहीं।

अध्ययन बताते हैं कि 67% लोग फ़ॉर्म इसलिए छोड़ देते हैं क्योंकि उनमें आगे बढ़ना मुश्किल होता है। इस मुश्किल की ज़्यादातर वजह यह नहीं कि बहुत ज़्यादा जानकारी मांगी गई। वजह यह है कि वह जानकारी फ़ील्ड के स्तर पर कैसे पेश की गई। एक अस्पष्ट लेबल, एक उलझाने वाला प्लेसहोल्डर या एक धुंधला वैलिडेशन एरर किसी को वह फ़ॉर्म पूरा करने से रोक सकता है जिसे वह सच में भरना चाहता है।

इस लेख में वे व्यावहारिक, बिना थ्योरी वाले नियम हैं जो फ़ॉर्म फ़ील्ड को रुकावट से कन्वर्ज़न के औज़ार में बदलते हैं। आप सीखेंगे कि लेबल कैसे काम करने चाहिए, डिज़ाइनर प्लेसहोल्डर पर निर्भर रहें तो वे क्यों फ़ेल होते हैं, और वैलिडेशन मैसेज कैसे तय करते हैं कि यूज़र आपके फ़ॉर्म पर भरोसा करेगा या उसे छोड़ देगा। इन बारीकियों को समझ लें, तो आप जान जाएंगे कि कुछ ब्रांड के फ़ॉर्म 80% तक पूरे क्यों होते हैं जबकि दूसरे 50% छूने में भी जूझते हैं।

फ़ॉर्म फ़ील्ड आसान बनाम भारी क्यों लगता है

फ़ॉर्म फ़ील्ड इनपुट बॉक्स से बढ़कर है। यह आपके ब्रांड और विज़िटर के बीच बातचीत है। फ़ील्ड खुद सवाल पूछता है, लेबल बताता है कि आप क्या चाहते हैं, और प्लेसहोल्डर इशारा देता है। जब कुछ ठीक नहीं होता तो वैलिडेशन मैसेज जवाब देता है। हर हिस्सा मिलकर एक एहसास बनाता है।

वह एहसास "मुझे ठीक पता है कि क्या करना है, और मुझे इस पर भरोसा है" भी हो सकता है, या "मुझे पता नहीं यहां क्या डालना है, और यह फ़ॉर्म टूटा लगता है।" यह फ़र्क किस्मत का नहीं है। यह ढांचे का है।

जब फ़ील्ड आसान होते हैं, तो वे सहज लगते हैं। लेबल क्लिक करने से पहले ही बता देता है कि फ़ील्ड में कौन सी जानकारी जाती है। इनपुट में टाइप करने लायक खुली जगह होती है। अगर आपसे गलती हो, तो एरर मैसेज ठीक बताता है कि क्या गलत हुआ और कैसे सुधारें। आप भरोसे के साथ फ़ॉर्म में आगे बढ़ते हैं।

जब फ़ील्ड मुश्किल होते हैं, तो रुकावट पैदा करते हैं। लेबल गायब या अस्पष्ट हो सकता है। आप टाइप शुरू करते हैं और प्लेसहोल्डर गायब हो जाता है, इसलिए आप भूल जाते हैं कि क्या डालना था। बिना बताए कि समस्या क्या है, एक एरर आ जाता है, और आपको अंदाज़ा लगाना पड़ता है। हर फ़ील्ड सुलझाने वाली एक छोटी पहेली बन जाता है। तीन-चार ऐसी पहेलियों के बाद लोग चले जाते हैं।

फ़ॉर्म लेबल: उन्हें साफ़ और हमेशा दिखने वाला रखें

लेबल सजावट नहीं है। यह वह निर्देश है जो बताता है कि फ़ील्ड में कौन सी जानकारी जाती है। सबसे अच्छे लेबल साफ़, वर्णनात्मक और हमेशा दिखने वाले होते हैं। छिपे हुए नहीं। गायब होने वाले नहीं। हमेशा वहां।

रिसर्च यह दिखाती है। जब लेबल फ़ील्ड के ठीक ऊपर होता है और यूज़र के टाइप करते समय भी दिखता रहता है, तो फ़ॉर्म पूरा होने की दर बढ़ती है। जब लेबल की जगह ऐसे प्लेसहोल्डर होते हैं जो किसी के टाइप शुरू करते ही गायब हो जाते हैं, तो दर गिरती है। वजह सीधी है। लोगों को याद रखना होता है कि उन्होंने क्या भरा, टाइपो जांचने होते हैं, और सबमिट करने से पहले अपना काम परखना होता है। अगर लेबल गायब हो जाए, तो वे इनमें से कुछ भी नहीं कर सकते।

लेबल को फ़ील्ड का वर्णन इस तरह करना चाहिए कि वह एक सवाल का जवाब दे। यहां कौन सी जानकारी जाएगी? "Email address" "Email" से ज़्यादा काम करता है। "Phone number" "Phone" से ज़्यादा साफ़ है। "Company name" "Company" से बेहतर है। विशिष्टता के ये छोटे फ़र्क तुरंत साफ़ होने और पल भर की झिझक के बीच का अंतर बनाते हैं।

ऐसे लेबल से बचें जो जानकारी छिपाते हैं। "Other", "Additional info" या "Details" जैसे धुंधले लेबल इस्तेमाल न करें। ये यूज़र को क्लिक या होवर करने पर मजबूर करते हैं ताकि वह समझे कि फ़ील्ड किस लिए है। "आपने हमारे बारे में कैसे सुना?" या "आपकी सबसे बड़ी चुनौती क्या है?" जैसा खास लेबल काम पहले ही कर देता है और लोगों को आगे बढ़ाता रहता है।

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

लंबे या जटिल फ़ॉर्म में लेबल के नीचे छोटा सहायक टेक्स्ट फ़ायदेमंद होता है। यह ज़िंदगी भर के निर्देश नहीं हैं। यह एक वाक्य है जो ज़रूरत पड़ने पर बात साफ़ करता है। अगर आप फ़ोन नंबर मांग रहे हैं और एक खास फ़ॉर्मेट चाहिए, तो लेबल के नीचे एक लाइन जोड़ें: "एरिया कोड शामिल करें। हम पहले पूछे बिना इसका इस्तेमाल आपको कॉल करने के लिए नहीं करेंगे।" यह एक लाइन फ़ॉर्मेट की गलतियां रोकती है और भरोसा बनाती है। पर इसे छोटा रखें। हर फ़ील्ड के नीचे सहायक टेक्स्ट के पैराग्राफ़ फ़ॉर्म को भारी बना देते हैं।

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

प्लेसहोल्डर क्यों फ़ेल होते हैं और उनकी जगह क्या इस्तेमाल करें

प्लेसहोल्डर फ़ॉर्म फ़ील्ड के अंदर का वह टेक्स्ट है जो क्लिक करते ही गायब हो जाता है। यह मददगार दिखता है। इशारे जैसा लगता है। असल में यह फ़ॉर्म डिज़ाइन की सबसे आम गलती है।

जब कोई लेबल की जगह प्लेसहोल्डर पर निर्भर करता है, तो यह होता है। एक विज़िटर फ़ॉर्म पर आता है। प्लेसहोल्डर "john@example.com" कहता है ताकि दिखे कि कौन सा फ़ॉर्मेट अपेक्षित है। वे ईमेल फ़ील्ड पर क्लिक करके टाइप करना शुरू करते हैं। प्लेसहोल्डर गायब हो जाता है। अब उन्हें दिखता नहीं कि कौन सा फ़ॉर्मेट अपेक्षित था, इसलिए वे सोचते हैं कि सही कर रहे हैं या नहीं। वे टाइप पूरा करते हैं। अगले फ़ील्ड पर टैब करते हैं। अब उन्हें याद नहीं कि ईमेल सही टाइप किया या नहीं, पर वापस जाकर जांच भी नहीं सकते क्योंकि फ़ील्ड में अब प्लेसहोल्डर नहीं दिखता। तो वे अपनी एंट्री मिटाकर दोबारा टाइप करते हैं। यह हर उस फ़ील्ड के लिए दोहराया जाता है जिसमें निर्देश सिर्फ़ प्लेसहोल्डर में है। फ़ॉर्म पूरा होने की दर धड़ाम से गिरती है।

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

यह काम करता है: निर्देश के लिए लेबल इस्तेमाल करें, और प्लेसहोल्डर सिर्फ़ उदाहरण के लिए। "Email address" लेबल और "your.name@company.com" प्लेसहोल्डर वाला फ़ील्ड बढ़िया चलता है। लेबल यूज़र को बताता है कि फ़ील्ड में क्या जाता है। प्लेसहोल्डर निर्देश छिपाए बिना फ़ॉर्मेट दिखाता है। जब यूज़र क्लिक करता है और प्लेसहोल्डर गायब हो जाता है, तो उन्हें पहले से पता होता है कि फ़ील्ड किस लिए है क्योंकि साफ़ दिखने वाला लेबल उन्हें बता रहा है।

हर फ़ील्ड को प्लेसहोल्डर की ज़रूरत नहीं। "First name" या "Company name" जैसे सरल फ़ील्ड को सिर्फ़ लेबल चाहिए। प्लेसहोल्डर उन फ़ील्ड के लिए उपयोगी है जहां फ़ॉर्मेट मायने रखता है (फ़ोन नंबर, तारीखें, URL) या जहां यूज़र को पता न हो कि कौन सा उदाहरण डेटा डालना है (सोशल मीडिया हैंडल, रेफ़रल कोड)।

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

वैलिडेशन मैसेज: एरर को मार्गदर्शन में बदलें

वैलिडेशन तब होता है जब कोई फ़ील्ड गलत भरता है। एक एरर मैसेज दिखता है। इस पल में यूज़र कुछ महसूस करता है। या तो उसे लगता है कि फ़ॉर्म टूटा और उलझाने वाला है, या उसे लगता है कि फ़ॉर्म उसे सही करने में मदद कर रहा है।

खराब वैलिडेशन मैसेज धुंधले होते हैं। वे "Invalid input" या "Error" कहते हैं और कुछ नहीं। यूज़र को पता नहीं चलता कि क्या गलत हुआ। फ़ॉर्मेट गलत था? एंट्री बहुत छोटी थी? क्या उन्होंने ऐसा अक्षर डाला जिसकी इजाज़त नहीं है? उन्हें अंदाज़ा लगाकर दोबारा कोशिश करनी पड़ती है।

अच्छे वैलिडेशन मैसेज खास और करने लायक होते हैं। "Invalid" की जगह कहें "पासवर्ड कम से कम 8 अक्षर का होना चाहिए और उसमें एक बड़ा अक्षर और एक संख्या होनी चाहिए।" यह यूज़र को ठीक बताता है कि क्या गलत हुआ और सुधारने के लिए क्या करें। फ़ॉर्म अब टूटा नहीं लगता। वह मदद करता लगता है।

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

एरर मैसेज की जगह तय करती है कि लोग उन्हें सुधार पाते हैं या नहीं। एरर टेक्स्ट उस फ़ील्ड के ठीक नीचे दिखना चाहिए जिसने समस्या पैदा की, फ़ॉर्म के ऊपर सारांश की सूची में नहीं। जब एरर फ़ील्ड के नीचे होता है, तो यूज़र गलती और फ़ील्ड दोनों एक साथ पढ़ सकता है। वे देख सकते हैं कि उन्होंने क्या टाइप किया, समझ सकते हैं कि क्या गलत हुआ, और तुरंत सुधार सकते हैं। जब एरर फ़ॉर्म के ऊपर सूची में होता है, तो उन्हें वापस ऊपर स्क्रॉल करना, फ़ील्ड ढूंढना और याद रखना पड़ता है कि एरर क्या था।

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

एरर मैसेज का लहजा मायने रखता है कि लोग आपके फ़ॉर्म के बारे में कैसा महसूस करते हैं। "आपने गलत ईमेल डाला" जैसा कठोर मैसेज लोगों को ऐसा महसूस कराता है कि उन्होंने कुछ गलत किया। "हम उस ईमेल का फ़ॉर्मेट पहचान नहीं पाए। कृपया टाइपो जांचें और फिर कोशिश करें" जैसा मददगार मैसेज उन्हें मदद मिलने का एहसास कराता है। दूसरा मैसेज वही काम करता है पर अनुभव को फ़ैसले से ज़्यादा सहयोग जैसा बनाता है।

सभी यूज़र के लिए सुलभ फ़ॉर्म बनाने के मार्गदर्शन के लिए हमारा लेख एक्सेसिबल फ़ॉर्म डिज़ाइन देखें।

फ़ील्ड की स्पेसिंग कैसे तय करती है कि फ़ॉर्म अपना सा लगे

फ़ॉर्म एक विज़ुअल माहौल है। हर फ़ील्ड के आसपास की जगह, लेबल और इनपुट के बीच की दूरी, और फ़ील्ड ग्रुप के बीच के अंतर, सब संकेत देते हैं कि फ़ॉर्म संभालने लायक है या भारी।

कसी हुई स्पेसिंग दस फ़ील्ड को तीस जैसा दिखाती है। हर फ़ील्ड नज़र के लिए होड़ करता है। यूज़र को पता नहीं चलता कि कौन से फ़ील्ड साथ हैं। लेबल अपने नीचे के इनपुट के पास बैठते हैं और अगला लेबल बस कुछ पिक्सल नीचे। पूरा फ़ॉर्म तंग और भारी लगता है। पहला फ़ील्ड भरने से पहले ही लोग छोड़ देते हैं।

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

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

लेबल की जगह भी स्पेसिंग की समझ पर असर डालती है। लेबल इनपुट के ठीक ऊपर होने चाहिए, बगल में नहीं। जब लेबल बाईं तरफ़ होते हैं, तो लेबल और इनपुट के बीच की दूरी बढ़ जाती है, जिससे उलझन होती है कि कौन सा फ़ील्ड किस लेबल का है। यह मोबाइल पर खासकर सच है जहां बाईं तरफ़ के लेबल टेक्स्ट को लपेटने या न पढ़ने लायक छोटा होने पर मजबूर करते हैं। ऊपर रखे लेबल अपने इनपुट से जुड़े रहते हैं और साफ़ लगते हैं।

वैकल्पिक और ज़रूरी फ़ील्ड के संकेत जो सच में काम करते हैं

हर फ़ील्ड या तो ज़रूरी है (भरना ही है) या वैकल्पिक (छोड़ा जा सकता है)। यूज़र को सहायक टेक्स्ट या निर्देश पढ़े बिना, एक नज़र में पता होना चाहिए कि कौन सा क्या है।

पारंपरिक तरीका ज़रूरी फ़ील्ड को तारे से चिह्नित करता है और कहता है "ज़रूरी फ़ील्ड तारे के निशान से दिखाए गए हैं"। यह तभी काम करता है जब यूज़र नियम याद रखें। कई नहीं रखते। वे फ़ॉर्म स्कैन करते हैं और तारे देखते हैं पर उनका मतलब नहीं समझते।

बेहतर तरीका ज़रूरी फ़ील्ड को साफ़ दिखने वाले निशान (तारा या रंगीन बिंदु) से चिह्नित करता है और वैकल्पिक फ़ील्ड को लेबल के पास साफ़ "(वैकल्पिक)" से लिखता है। अब एक झलक में यूज़र को पता चल जाता है कि हर फ़ील्ड ज़रूरी है या नहीं। ज़रूरी फ़ील्ड निशान के साथ सामान्य दिखते हैं। वैकल्पिक फ़ील्ड पर साफ़ लेबल होता है। इससे नियम याद रखने की ज़रूरत खत्म हो जाती है।

कुछ फ़ॉर्म ज़रूरी और वैकल्पिक फ़ील्ड को अलग करने के लिए रंग इस्तेमाल करते हैं। यह चल सकता है, पर इसके लिए ऊंचा कंट्रास्ट चाहिए और इसे टेक्स्ट लेबल के साथ मिलाना चाहिए, अकेला नहीं। लेबल के पास लाल तारा लाल फ़ील्ड बैकग्राउंड से बेहतर काम करता है क्योंकि फ़ील्ड का बैकग्राउंड इनपुट को कम दिखने वाला बना सकता है।

कंडीशनल फ़ील्ड और सिर्फ़ ज़रूरी चीज़ दिखाना

कुछ फ़ील्ड को तभी दिखना चाहिए जब यूज़र ने पिछले फ़ील्ड में कोई चुनाव किया हो। "मैं US में रहता हूं" का चेकबॉक्स राज्य का ड्रॉपडाउन दिखा सकता है। अकाउंट टाइप फ़ील्ड में "Business" चुनने पर कंपनी के नाम का फ़ील्ड दिख सकता है। ये कंडीशनल फ़ील्ड सिर्फ़ वे फ़ील्ड दिखाकर मानसिक बोझ घटाते हैं जो यूज़र को सच में भरने हैं।

जब कंडीशनल फ़ील्ड दिखें, तो उन्हें सहजता से और साफ़ तरीके से दिखना चाहिए। बिना एनिमेशन के अचानक दिखना चौंका सकता है। फ़ेड-इन या स्लाइड-डाउन इफ़ेक्ट बदलाव को साफ़ करता है। नए दिखे फ़ील्ड का भी अपना लेबल और वैलिडेशन होना चाहिए, बिल्कुल सामान्य फ़ील्ड की तरह। यह न मान लें कि फ़ील्ड दिख गया तो यूज़र समझ जाएगा कि उसे क्या करना है।

कंडीशनल फ़ील्ड सबसे अच्छे तब काम करते हैं जब वे शुरू करने वाले फ़ील्ड के नीचे दिखें, ऊपर या बगल में नहीं। यूज़र चुनाव करता है, और उस चुनाव के ठीक नीचे उससे जुड़े नए फ़ील्ड दिखते हैं। इससे मानसिक रास्ता सीधा रहता है और उलझन घटती है।

WEMASY में फ़ॉर्म

WEMASY में फ़ॉर्म टूल है, और आप फ़ॉर्म सीधे अपनी वेबसाइट पर बना सकते हैं। आप मुफ़्त में शुरू कर सकते हैं और पेड प्लान 7 दिन आज़मा सकते हैं।

फ़ॉर्म बनाते समय लेबल साफ़ रखें और हर एरर मैसेज को मददगार बनाएं।

हर WEMASY प्लान में कौन से फ़ीचर शामिल हैं, यह देखें।

अक्सर पूछे जाने वाले सवाल