तारीख और समय के इनपुट फ़ील्ड: उन्हें भरना आसान बनाएं

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

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

तारीख और समय के फ़ील्ड आपके फ़ॉर्म के पूरा होने की दर के लिए क्यों मायने रखते हैं

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

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

समय के फ़ील्ड में भी ऐसी ही समस्या आती है। शाम 2:30 बजे का अपॉइंटमेंट तय करने की कोशिश कर रहे विज़िटर को घंटे, मिनट और AM/PM के लिए अलग-अलग ड्रॉपडाउन लिस्ट में टैप नहीं करना चाहिए। आप उन फ़ील्ड को कैसे बनाते हैं, इसका सीधा असर इस पर पड़ता है कि कोई अपॉइंटमेंट बुक करता है या ब्राउज़र बंद कर देता है।

टेक्स्ट इनपुट बनाम डेट पिकर: सही इंटरैक्शन चुनना

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

बहुत पुरानी या बहुत आगे की तारीखों के लिए टेक्स्ट इनपुट बॉक्स इस्तेमाल करें

जब कोई अपनी जन्मतिथि डालता है, तो वह ऐसी तारीख ढूंढ रहा है जो 30, 40 या 50 साल पीछे हो सकती है। कैलेंडर डेट पिकर में वहां पहुंचने के लिए उन्हें दर्जनों महीनों में क्लिक करना पड़ता है। Day, Month और Year लेबल वाले तीन अलग टेक्स्ट बॉक्स बेहतर काम करते हैं। विज़िटर हर फ़ील्ड में तेज़ी से टाइप करता है, एक बॉक्स से अगले में अपने आप चला जाता है। आठ से दस कीस्ट्रोक और काम खत्म। उसी काम के लिए डेट पिकर में कहीं ज़्यादा टैप या क्लिक लगते हैं।

अगर आप तीन अलग बॉक्स की जगह एक टेक्स्ट बॉक्स इस्तेमाल करते हैं, तो अपने क्षेत्र के हिसाब से "MM/DD/YYYY" या "DD/MM/YYYY" जैसे लेबल से अपेक्षित फ़ॉर्मैट साफ़ दिखाएं। ऐसा प्लेसहोल्डर इस्तेमाल न करें जो यूज़र के क्लिक करते ही गायब हो जाए। लेबल दिखता रहता है और बताता है कि आप क्या चाहते हैं।

नज़दीकी भविष्य की तारीखों के लिए डेट पिकर इस्तेमाल करें

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

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

डेट पिकर के बेस्ट प्रैक्टिस: उन्हें अपने विज़िटर के लिए काम करने लायक बनाना

डेट पिकर उतना ही काम का है जितना विज़िटर उसके साथ इंटरैक्ट कर सकते हैं। ये नियम मायने रखते हैं:

पिकर के साथ हाथ से टेक्स्ट टाइप करने का विकल्प दें

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

मोबाइल पर HTML5 इनपुट टाइप इस्तेमाल करें

मोबाइल डिवाइस में ऑपरेटिंग सिस्टम में बने तारीख और समय के पिकर होते हैं। अपने HTML फ़ॉर्म फ़ील्ड में type="date" या type="time" इस्तेमाल करें। iPhone पर यह iOS का डेट व्हील चलाता है। Android पर यह प्लेटफ़ॉर्म का डेट पिकर दिखाता है। विज़िटर अपने फ़ोन पर यही इंटरैक्शन उम्मीद करते हैं, और नेटिव पिकर मोबाइल इस्तेमाल के लिए बना है।

अंतहीन स्क्रोलिंग रोकने के लिए तारीख का दायरा सीमित करें

अगर आप भविष्य की तारीख मांग रहे हैं, तो पिकर को अगले 2-3 साल के महीने दिखाने तक सीमित करें, अगले 50 साल तक नहीं। अगर आप बीती तारीख मांग रहे हैं, तो शुरुआत का एक उचित बिंदु तय करें। "जन्मतिथि" के लिए डिफ़ॉल्ट 30 या 50 साल पहले रखें, 100 साल पहले नहीं।

अनुपलब्ध तारीखों का संदर्भ दिखाएं

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

समय के फ़ील्ड का डिज़ाइन: विज़िटर को सही पल चुनने में मदद करना

समय के फ़ील्ड की अपनी चुनौतियां हैं। अपॉइंटमेंट का समय चुनने वाले विज़िटर को घंटे, मिनट और AM/PM अलग-अलग ड्रॉपडाउन में नहीं चुनने चाहिए। उन्हें समझदारी से मिलाएं।

समय 30 मिनट के अंतराल पर दें

ज़्यादातर शेड्यूलिंग सिस्टम को मिनट तक की बारीकी नहीं चाहिए। तीस मिनट के अंतराल अपॉइंटमेंट, कंसल्टेशन और रिज़र्वेशन के लिए काफ़ी हैं। 9:00 AM, 9:30 AM, 10:00 AM जैसे समय दें। इससे कार्यक्षमता खोए बिना विकल्पों की संख्या घटती है।

समय उस फ़ॉर्मैट में दिखाएं जो विज़िटर पहले से इस्तेमाल करते हैं

US के दर्शकों के लिए AM/PM के साथ 12-घंटे का फ़ॉर्मैट इस्तेमाल करें। इंटरनेशनल संदर्भ या शिफ़्ट वाली शेड्यूलिंग के लिए 24-घंटे का फ़ॉर्मैट सही हो सकता है। पूरे फ़ॉर्म में एक जैसे रहें। एक ही फ़ॉर्म के बीच में फ़ॉर्मैट कभी न बदलें।

डिफ़ॉल्ट समय पहले से चुनें या मौजूदा समय दिखाएं

समय का फ़ील्ड कभी पूरी तरह खाली नहीं होना चाहिए। या तो अपॉइंटमेंट का कोई आम समय पहले से चुनें (जैसे 10:00 AM) या मौजूदा समय दिखाएं। इससे विज़िटर को शुरुआती बिंदु मिलता है और दिखता है कि आप कौन-सा फ़ॉर्मैट चाहते हैं।

तारीख और समय के फ़ील्ड के लिए मोबाइल की बातें

मोबाइल फ़ॉर्म की सीमाएं डेस्कटॉप से अलग हैं। जगह सीमित है। टच टारगेट बड़े होने चाहिए। कीबोर्ड आधी स्क्रीन ढक लेते हैं।

जब हो सके तो नेटिव मोबाइल पिकर इस्तेमाल करें

HTML5 के तारीख और समय के इनपुट मोबाइल पर ऑपरेटिंग सिस्टम का पिकर चालू करते हैं। यह आपके खुद डिज़ाइन किए कस्टम पिकर से तेज़ है और यूज़र को ज़्यादा जाना-पहचाना लगता है। iOS का डेट व्हील और Android का डेट पिकर पहले से मोबाइल इंटरैक्शन के लिए बेहतर बने हैं।

टच टारगेट इतने बड़े रखें कि टैप हो सकें

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

अपने आप सबमिट होने से बचें

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

एरर मैसेज और वैलिडेशन: यूज़र को सही तारीख की ओर ले जाना

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

रियल टाइम में वैलिडेट करें

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

ऐसे एरर मैसेज लिखें जो बताएं कि क्या गलत हुआ

बुरा एरर कहता है "Invalid date"। मददगार एरर कहता है "Please enter a date in MM/DD/YYYY format" या "That date is unavailable. Please choose another."

खास समस्या का नाम लें और हल सुझाएं। आपका एरर मैसेज सज़ा नहीं है। यह मददगार मार्गदर्शन है।

तार्किक रूप से नामुमकिन चुनाव रोकें

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

असल दुनिया के पैटर्न: अलग-अलग इस्तेमाल के लिए क्या काम करता है

सबसे अच्छा डेट फ़ील्ड डिज़ाइन आपके खास फ़ॉर्म के प्रकार पर निर्भर है। ये आम पैटर्न हैं।

बुकिंग और अपॉइंटमेंट फ़ॉर्म

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

जन्मतिथि के फ़ील्ड

तीन टेक्स्ट इनपुट बॉक्स (Day, Month, Year) या लचीली फ़ॉर्मैटिंग वाला एक टेक्स्ट फ़ील्ड इस्तेमाल करें। डेट पिकर से बचें क्योंकि तारीख इतनी पुरानी है कि पिकर संभालना मुश्किल हो जाता है।

रिकरिंग ऑर्डर या सब्सक्रिप्शन की शुरुआती तारीख

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

इवेंट का समय चुनना

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

तारीख और समय के इनपुट फ़ील्ड के बारे में अक्सर पूछे जाने वाले सवाल