आपका विज़िटर एक भी अक्षर टाइप करने से पहले दो सेकंड में आपका फ़ॉर्म स्कैन कर लेता है। वह फ़ील्ड का साइज़, दूरी और लेआउट पढ़ता है। पूरे फ़ॉर्म जितना चौड़ा ज़िप कोड फ़ील्ड उलझन चिल्लाता है। विस्तृत फ़ीडबैक के लिए एक लाइन का टेक्स्टएरिया यह संदेश देता है कि आप ज़्यादा की उम्मीद नहीं रखते।
आपके इनपुट फ़ील्ड की चौड़ाई यूज़र को बताती है कि आप उनसे कितना टेक्स्ट चाहते हैं। छोटा टेक्स्ट बॉक्स कहता है "अपना नाम बताइए"। ऊंचा टेक्स्टएरिया कहता है "अपनी कहानी बताइए"। इसे गलत करेंगे, तो उलझन, टाइप करने की मेहनत और फ़ॉर्म छोड़ने को न्योता देंगे।
आपके फ़ॉर्म में दो तरह के टेक्स्ट इनपुट फ़ील्ड होते हैं: एक लाइन वाला इनपुट और कई लाइन वाला टेक्स्टएरिया। वे अलग दिखते हैं, अलग बर्ताव करते हैं और अलग समस्याएं हल करते हैं। सही वाला चुनना जटिल नहीं है, पर इससे फ़र्क पड़ता है कि यूज़र आपके फ़ॉर्म को कैसे देखते हैं और उसे भरते हैं या नहीं।
टेक्स्ट इनपुट फ़ील्ड क्या है
टेक्स्ट इनपुट फ़ील्ड एक लाइन का बॉक्स है जिसमें यूज़र छोटा टेक्स्ट टाइप करते हैं। किनारे तक पहुंचने पर यह नई लाइन में नहीं जाता। यह कई पैराग्राफ़ सपोर्ट नहीं करता। एंटर दबाएं तो फ़ॉर्म सबमिट हो जाता है (या अगले फ़ील्ड पर चला जाता है)। इसे सीमित, छोटे डेटा के लिए बनाया गया है।
टेक्स्ट इनपुट फ़ील्ड यूज़र के साथ एक मानसिक समझौता लागू करता है। आप कुछ जल्दी वाला मांग रहे हैं। एक नाम। एक ईमेल। एक ज़िप कोड। एक तारीख। जानकारी का एक टुकड़ा।
टेक्स्टएरिया क्या है
टेक्स्टएरिया कई लाइन वाला टेक्स्ट बॉक्स है जो यूज़र के टाइप करने पर फैलता है। एंटर दबाने पर टेक्स्ट की नई लाइन मिलती है। कंटेंट दिखने वाले इलाके से ज़्यादा हो जाए तो यह खड़ी दिशा में स्क्रोल होता है। यह यूज़र को संकेत देता है कि आप कुछ शब्दों से ज़्यादा की उम्मीद करते हैं। यहां पैराग्राफ़ का स्वागत है। विस्तृत विचारों की उम्मीद है।
टेक्स्टएरिया बंदिश हटा देता है। यूज़र जानता है कि वह अपना जवाब एक लाइन में ठूंसे बिना जितना चाहे उतना लिख सकता है।
एक लाइन वाला टेक्स्ट इनपुट फ़ील्ड कब इस्तेमाल करें
टेक्स्ट इनपुट फ़ील्ड तब इस्तेमाल करें जब अपेक्षित जवाब एक लाइन में आ जाए और यूज़र कुछ शब्दों या उससे कम में जवाब दे सके।
संपर्क जानकारी
नाम, ईमेल, फ़ोन नंबर। ये फ़ील्ड हमेशा एक लाइन वाले इनपुट होते हैं। यूज़र उम्मीद करता है कि वह नाम टाइप करके आगे बढ़ेगा, अपने फ़ोन नंबर के लिए टेक्स्ट एडिटर नहीं खोलेगा।
छोटे पहचान चिह्न
यूज़रनेम, अकाउंट नंबर, ज़िप कोड, पासवर्ड। इनकी लंबाई तय होती है या इनके छोटे होने की उम्मीद होती है। यहां एक लाइन वाला इनपुट सही रहता है।
लोकेशन और लॉजिस्टिक्स फ़ील्ड
शहर, राज्य, देश, सड़क का पता (पहली लाइन)। ये आम तौर पर एक लाइन की एंट्री होती हैं। आप पते को एक बड़े टेक्स्टएरिया की जगह कई एक लाइन वाले फ़ील्ड में बांट सकते हैं।
सर्च और फ़िल्टरिंग
सर्च बॉक्स। प्रोडक्ट फ़िल्टर। तारीख के दायरे। इनमें झटपट एंट्री की उम्मीद होती है, पैराग्राफ़ की नहीं। एक लाइन वाले इनपुट सही लगते हैं।
तारीख और नंबर
कोई भी फ़ील्ड जहां यूज़र खास तारीख, समय, मात्रा या कीमत डालता है। एक लाइन वाला इनपुट। कभी-कभी आप तारीख के लिए खास इनपुट टाइप चाहते हैं (जैसे डेट पिकर), पर इंटरैक्शन का तरीका फिर भी एक लाइन वाला ही है।
टेक्स्टएरिया कब इस्तेमाल करें
टेक्स्टएरिया तब इस्तेमाल करें जब आप उम्मीद करें कि यूज़र एक वाक्य से ज़्यादा लिखेगा या जब जवाब स्वाभाविक रूप से एक लाइन से लंबा हो।
कमेंट और फ़ीडबैक
अगर आप पूछते हैं "आपका क्या फ़ीडबैक है?", तो यूज़र अकेले शब्दों में नहीं, पैराग्राफ़ में सोच रहा है। टेक्स्टएरिया संकेत देता है कि उनके पूरे विचार के लिए जगह है। उन्हें तंगी महसूस नहीं होगी।
मैसेज और पूछताछ फ़ॉर्म
जब कोई विज़िटर मैसेज फ़ील्ड वाला कॉन्टैक्ट फ़ॉर्म भरता है, तो उसे अपनी स्थिति समझाने के लिए जगह चाहिए। टेक्स्ट की मात्रा बहुत अलग-अलग होती है। टेक्स्टएरिया दो वाक्य के झटपट सवाल और दो पैराग्राफ़ की विस्तृत रिक्वेस्ट, दोनों को समा लेता है।
विवरण और डिटेल फ़ील्ड
प्रोडक्ट का विवरण, प्रोजेक्ट ब्रीफ़, सर्विस की ज़रूरतें। कोई भी फ़ील्ड जो यूज़र से संदर्भ या डिटेल मांगता है। टेक्स्टएरिया उस डिटेल को न्योता देता है।
नोट और खास निर्देश
"कोई खास रिक्वेस्ट जोड़ें" या "डिलीवरी के लिए कोई नोट" कहने वाले फ़ील्ड को अक्सर टेक्स्टएरिया चाहिए, क्योंकि आप अंदाज़ा नहीं लगा सकते कि यूज़र जोड़ने के लिए दो शब्द रखता है या दो पैराग्राफ़।
साइज़ का सिद्धांत: फ़ील्ड की चौड़ाई अपेक्षित लंबाई का संकेत देती है
आपके फ़ील्ड का साइज़ यूज़र के एक भी अक्षर टाइप करने से पहले संदेश भेज देता है। पूरे फ़ॉर्म की चौड़ाई जितना ज़िप कोड फ़ील्ड उलझन पैदा करता है। यूज़र वह सारी जगह देखकर सोचता है "क्या मैंने समझने में गलती की कि आप क्या मांग रहे हैं?"
यह नियम अपनाएं: फ़ील्ड का विज़ुअल साइज़ जवाब की अपेक्षित लंबाई से मेल खाना चाहिए।
छोटे टेक्स्ट इनपुट फ़ील्ड
ज़िप कोड के लिए इनपुट फ़ील्ड संकरा रखें। डेस्कटॉप पर शायद 80 से 120 पिक्सल चौड़ा। यह विज़ुअल संकेत यूज़र को बताता है "पांच अंक टाइप करें, पैराग्राफ़ नहीं"।
नाम के फ़ील्ड के लिए मध्यम चौड़ाई रखें। शायद 200 से 300 पिक्सल। "Alexander Thompson" के लिए काफ़ी लंबा, पर इतना चौड़ा नहीं कि वह जीवनी को न्योता दे।
टेक्स्टएरिया
टेक्स्टएरिया क्षैतिज और खड़ी, दोनों दिशाओं में फैलते हैं। चार लाइन ऊंचा टेक्स्टएरिया दो लाइन ऊंचे टेक्स्टएरिया से बड़े जवाब का संकेत देता है। अपने टेक्स्टएरिया को अपेक्षित मेहनत से मेल खाने वाला रखें।
अगर आप कुछ वाक्यों की उम्मीद करते हैं, तो तीन से पांच लाइन दिखती हुई रखकर शुरू करें। अगर आप विस्तृत फ़ीडबैक मांग रहे हैं, तो छह से आठ लाइन से शुरू करें। ज़रूरत हो तो यूज़र फ़ील्ड का साइज़ बदल सकते हैं, पर शुरुआती साइज़ उनकी उम्मीद तय करता है।
टेक्स्ट इनपुट फ़ील्ड के डिज़ाइन नियम
हमेशा लेबल के साथ जोड़ें
दिखने वाले लेबल की जगह प्लेसहोल्डर टेक्स्ट कभी इस्तेमाल न करें। यूज़र के टाइप शुरू करते ही प्लेसहोल्डर टेक्स्ट गायब हो जाता है, जिससे एक्सेसिबिलिटी टूटती है और यूज़र अंदाज़ा लगाते रह जाते हैं कि फ़ील्ड क्या चाहता था। फ़ील्ड के ऊपर या बगल में साफ़ लेबल इस्तेमाल करें, और प्लेसहोल्डर टेक्स्ट सिर्फ़ हल्के संकेत के तौर पर रखें।
बुरा उदाहरण: बिना लेबल का फ़ील्ड, बस धूसर प्लेसहोल्डर टेक्स्ट जिस पर "Enter your name" लिखा है।
अच्छा उदाहरण: इनपुट के ऊपर "Name" लेबल, और वैकल्पिक प्लेसहोल्डर टेक्स्ट जैसे "John Doe"।
ज़रूरी फ़ील्ड साफ़ दिखाएं
ज़रूरी फ़ील्ड को तारे (*) या कोष्ठक में "(required)" शब्द से चिह्नित करें। यूज़र को अंदाज़ा लगाते न छोड़ें कि कोई फ़ील्ड वैकल्पिक है या नहीं।
जल्दी वैलिडेट करें, आराम से सुधार करने दें
अगर यूज़र गलत ईमेल एड्रेस या गलत फ़ॉर्मैट वाला फ़ोन नंबर डालता है, तो उसकी एंट्री साफ़ न करें। ऐसा एरर मैसेज दिखाएं जो समस्या को ठीक-ठीक समझाए, और उनकी आधी-अधूरी एंट्री रखें ताकि वे शुरू से दोबारा टाइप करने की जगह उसे ठीक कर सकें।
अपेक्षित इनपुट टाइप को सपोर्ट करें
ईमेल के लिए type="email" इस्तेमाल करें ताकि मोबाइल यूज़र को ईमेल के लिए बना कीबोर्ड मिले। फ़ोन के लिए type="tel"। नंबर के लिए type="number"। ये खास इनपुट टाइप आपकी तरफ़ से बिना काम बढ़ाए मोबाइल अनुभव सुधारते हैं।
टेक्स्टएरिया के डिज़ाइन नियम
टेक्स्टएरिया को कंटेंट के साथ बढ़ने दें
अगर यूज़र लंबा मैसेज टाइप कर रहा है और टेक्स्टएरिया का साइज़ तय रहता है, तो उसे टाइप करते समय फ़ील्ड के अंदर स्क्रोल करना पड़ता है। इससे लिखने का अनुभव बिगड़ता है। CSS या JavaScript इस्तेमाल करें ताकि यूज़र के ज़्यादा लाइन जोड़ने पर टेक्स्टएरिया अपने आप फैले। वे स्वाभाविक रूप से टाइप करते हैं, फ़ील्ड बढ़ता है, फ़ील्ड के अंदर स्क्रोल नहीं करना पड़ता।
शुरुआती साइज़ साफ़ दिखाएं
टेक्स्टएरिया में इतनी दिखने वाली ऊंचाई होनी चाहिए जो संकेत दे कि आप एक लाइन से ज़्यादा की उम्मीद करते हैं। कम से कम तीन से पांच लाइन की खाली जगह दिखाएं ताकि यूज़र समझें कि यह एक लाइन वाला फ़ील्ड नहीं है।
ज़रूरत हो तो अक्षरों की उचित सीमा तय करें
कुछ टेक्स्टएरिया में सीमाएं होती हैं। कस्टमर सपोर्ट फ़ॉर्म फ़ीडबैक को 5,000 अक्षरों तक सीमित कर सकता है। अगर आपकी कोई सीमा है, तो यूज़र के टाइप करते समय बचे हुए अक्षरों की गिनती दिखाएं। उन्हें दीवार से टकराकर पता लगने की जगह पहले ही देखने दें कि कितनी जगह बची है।
कोड या तकनीकी इनपुट के लिए मोनोस्पेस फ़ॉन्ट इस्तेमाल करें
अगर टेक्स्टएरिया कोड स्निपेट या तकनीकी डेटा के लिए है, तो मोनोस्पेस फ़ॉन्ट इस्तेमाल करें ताकि स्पेसिंग और अलाइनमेंट विज़ुअली मायने रखें। मैसेज या फ़ीडबैक जैसे आम टेक्स्ट के लिए आपके ब्रांड से मेल खाता डिफ़ॉल्ट सैन-सेरिफ़ फ़ॉन्ट इस्तेमाल करें।
टेक्स्ट इनपुट फ़ील्ड की आम गलतियां
सारे टेक्स्ट फ़ील्ड एक ही चौड़ाई के बनाना
अगर आपके फ़ॉर्म का हर इनपुट फ़ील्ड एक ही चौड़ाई का है, तो अपेक्षित लंबाई का विज़ुअल संकेत खो जाता है। ज़िप कोड फ़ील्ड नाम के फ़ील्ड जितना चौड़ा नहीं होना चाहिए। साइज़ को अपेक्षा बताने दें।
लेबल की जगह प्लेसहोल्डर टेक्स्ट इस्तेमाल करना
यह ऊपर बताया जा चुका है, पर यह बहुत अहम है। प्लेसहोल्डर टेक्स्ट संकेत के तौर पर मददगार है, लेबल के तौर पर नहीं। स्क्रीन रीडर इस्तेमाल करने वाले यूज़र को प्लेसहोल्डर टेक्स्ट नहीं दिखेगा। जो यूज़र कुछ फ़ील्ड भरकर वापस आया है, वह भूल जाएगा कि फ़ील्ड क्या चाहता था।
वैलिडेशन एरर को संदर्भ में न दिखाना
अगर यूज़र गलत ईमेल टाइप करे और एरर मैसेज फ़ॉर्म के ऊपर दिखे जबकि ईमेल फ़ील्ड नीचे है, तो उन्हें समस्या ढूंढने के लिए स्क्रोल करना पड़ता है। एरर मैसेज को उस फ़ील्ड के पास रखें जिसकी वजह से वह आया, रंग (लाल या नारंगी) में, और ऐसे आइकन के साथ जो संकेत दे कि "कुछ गलत है"।
क्लियर करने पर वापस लौटने का तरीका न देना
अगर यूज़र गलती से कोई फ़ील्ड साफ़ कर दे या फ़ॉर्म में "Clear" बटन हो जो सब कुछ मिटा दे, तो पक्का करें कि वे उस क्रिया को पलट सकें। एक बटन टैप से पांच मिनट की फ़ॉर्म भरने की मेहनत नहीं मिटनी चाहिए।
टेक्स्टएरिया की आम गलतियां
तय साइज़ वाले टेक्स्टएरिया जो फैलते नहीं
जो टेक्स्टएरिया उसी साइज़ का रहता है जबकि कंटेंट बाहर बहता है और स्क्रोल करना पड़ता है, वह यूज़र को एक छोटी खिड़की में टाइप करने पर मजबूर करता है। उनका अनुभव टूटा हुआ लगता है। टेक्स्टएरिया को कंटेंट के साथ फैलने वाला बनाएं।
अक्षरों की सीमा का कोई साफ़ संकेत न होना
अगर आपके टेक्स्टएरिया की अधिकतम लंबाई है, तो यूज़र को उस तक पहुंचने से पहले पता होना चाहिए। अक्षरों का काउंटर दिखाएं जो टाइप करते समय अपडेट हो। "500 अक्षर बचे हैं" या "5000 में से 2 अक्षर" उन्हें तुरंत बताता है कि कितनी जगह है।
बहुत छोटा शुरू करना
सिर्फ़ एक लाइन ऊंचा टेक्स्टएरिया यह नहीं बताता कि "मुझे आपका विस्तृत फ़ीडबैक चाहिए"। वह अब भी एक लाइन वाला फ़ील्ड लगता है। कम से कम तीन-चार लाइन दिखती हुई रखकर शुरू करें ताकि यूज़र समझें कि वे और लिख सकते हैं।
उदाहरण: संदर्भ में इनपुट फ़ील्ड बनाम टेक्स्टएरिया
कॉन्टैक्ट फ़ॉर्म
नाम फ़ील्ड: एक लाइन वाला इनपुट फ़ील्ड। लंबे नाम के लिए काफ़ी चौड़ा पर इतना संकरा कि संकेत दे "बस आपका नाम"।
ईमेल फ़ील्ड: type="email" वाला एक लाइन का इनपुट फ़ील्ड।
फ़ोन फ़ील्ड: type="tel" वाला एक लाइन का इनपुट फ़ील्ड।
मैसेज फ़ील्ड: टेक्स्टएरिया, इतना ऊंचा कि कुछ पैराग्राफ़ आ सकें।
प्रोडक्ट रिव्यू फ़ॉर्म
आपका नाम: एक लाइन का इनपुट।
आपका ईमेल: type="email" वाला एक लाइन का इनपुट।
रेटिंग (1 से 5 स्टार): खास इनपुट टाइप, पर टेक्स्टएरिया नहीं।
आपका रिव्यू: टेक्स्टएरिया।
दूसरों को सुझाएंगे: चेकबॉक्स, टेक्स्ट इनपुट नहीं।
चेकआउट फ़ॉर्म
पहला नाम, आखिरी नाम, ईमेल, फ़ोन: सब एक लाइन वाले इनपुट।
शिपिंग पता (सड़क, शहर, राज्य, ज़िप): आम तौर पर कई एक लाइन वाले इनपुट, पूरे पते के लिए एक टेक्स्टएरिया नहीं।
डिलीवरी के खास निर्देश: टेक्स्टएरिया। यूज़र के पास अपनी ज़रूरत के हिसाब से एक वाक्य हो सकता है या तीन।
अपने फ़ॉर्म में इनपुट फ़ील्ड और टेक्स्टएरिया
अपने फ़ॉर्म में फ़ील्ड जोड़ते समय, फ़ील्ड का टाइप इस आधार पर चुनें कि आप क्या मांग रहे हैं।
कॉन्टैक्ट फ़ॉर्म के लिए, विज़िटर के नाम और ईमेल के लिए टेक्स्ट इनपुट रखें, फिर उनके मैसेज के लिए टेक्स्टएरिया। इनपुट फ़ील्ड और टेक्स्टएरिया की स्टाइलिंग आपके ब्रांड के रंगों और टाइपोग्राफ़ी से मेल खानी चाहिए। आप सही सवाल पूछने पर ध्यान दें।
अगर आपको खास इनपुट चाहिए (जैसे डेट पिकर या ईमेल वैलिडेशन), तो उसका ध्यान रखें। फ़ील्ड का साइज़, बर्ताव और वैलिडेशन मिलकर यूज़र को फ़ॉर्म पूरा करने की ओर ले जाते हैं।