फ़ोन नंबर फ़ील्ड: इंटरनेशनल फ़ॉर्मैट और बेस्ट प्रैक्टिस

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

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

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

फ़ोन फ़ील्ड को टेक्स्ट फ़ील्ड से अलग तरह क्यों संभालना चाहिए

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

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

एक फ़ील्ड बनाम बंटे हुए फ़ील्ड का फ़ैसला

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

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

इनपुट मास्किंग गड़बड़ी को व्यवस्था में कैसे बदलती है

इनपुट मास्किंग यूज़र के टाइप करते समय नंबर को अपने आप फ़ॉर्मैट करती है। वे 5 5 5 1 2 3 4 5 6 7 टाइप करते हैं और फ़ील्ड (555) 123-4567 दिखाता है। वे धीरे टाइप करें या तेज़, फ़ॉर्मैटिंग साथ चलती है। इसके दो काम हैं। पहला, यह उन्हें तुरंत फ़ीडबैक देती है कि वे सही फ़ॉर्मैट में टाइप कर रहे हैं। दूसरा, यह उन्हें शुरू से ही गलत फ़ॉर्मैट डालने से रोकती है। वे ऐसा कोई अक्षर टाइप नहीं कर सकते जो फ़ॉर्मैट तोड़े। फ़ील्ड उसे स्वीकार ही नहीं करेगा।

कौन-सा फ़ॉर्मैट दिखेगा, यह चुने हुए देश पर निर्भर करता है। अगर वे United States चुनते हैं, तो मास्क (XXX) XXX-XXXX है। अगर Canada चुनते हैं, तो वही। अगर Germany चुनते हैं, तो मास्क बदल जाता है। यूज़र को वह फ़ॉर्मैट दिखता है जिसे वह पहचानता है। वह उसमें टाइप करता है। डेटा आपके पास साफ़ पहुंचता है।

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

कंट्री कोड और इंटरनेशनल सपोर्ट

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

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

कंट्री कोड नंबर के साथ दिखना चाहिए। यूज़र को सिर्फ़ (555) 123-4567 नहीं, +1 (555) 123-4567 दिखता है। इससे फ़ॉर्मैट साफ़ हो जाता है। +1 प्रीफ़िक्स से वे जानते हैं कि यह US नंबर है। अगर उन्होंने गलती से गलत देश चुन लिया, तो वह तुरंत दिख जाता है और वे बदल सकते हैं।

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

मोबाइल कीबोर्ड और type="tel" एट्रिब्यूट

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

न्यूमेरिक कीबोर्ड अपने आप दिखाने के लिए HTML में type="tel" इस्तेमाल करें। हर फ़ोन एक जैसा कीबोर्ड नहीं दिखाता। कुछ 0-9 के साथ चिह्न दिखाते हैं। कुछ सिर्फ़ नंबर। कुछ नंबर के साथ अक्षर भी। यह डिवाइस के हिसाब से बदलता है। पर हर फ़ोन पूरे QWERTY कीबोर्ड से ज़्यादा मददगार कुछ दिखाएगा।

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

कौन-से वैलिडेशन तरीके सच में काम करते हैं

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

फ़ोन नंबर के लिए सबसे अच्छा वैलिडेशन तरीका E.164 मानक है। यह ITU का तय किया इंटरनेशनल फ़ॉर्मैट है जिसे हर ग्लोबल सिस्टम समझता है। E.164 फ़ॉर्मैट में प्लस चिह्न, कंट्री कोड और फिर राष्ट्रीय नंबर होता है। कोई स्पेस, कोष्ठक या डैश नहीं। US नंबर के लिए +14155550123। आपके डेटाबेस में यही स्टोर होता है। यूज़र जो देखता और टाइप करता है, वह पढ़ने में आसान फ़ॉर्मैट में होता है। जो स्टोर होता है, वह एकरूपता और सटीकता के लिए E.164 होता है।

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

फ़ोन कन्फ़र्मेशन मांगने की गलती

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

बेहतर तरीका है टाइप करते समय ही नंबर को रियल-टाइम में वैलिडेट करना। सबमिट बटन तक पहुंचते-पहुंचते नंबर पहले ही वैलिडेट हो चुका होता है। आपको उनसे उसे दो बार टाइप करवाने की ज़रूरत नहीं। वैलिडेशन ही कन्फ़र्मेशन है।

आम गलतियां जो फ़ोन डेटा की क्वालिटी बिगाड़ती हैं

देश जांचे बिना कोई भी फ़ोन नंबर स्वीकार करना

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

वैलिडेशन एरर सिर्फ़ सबमिट के बाद दिखाना

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

कंट्री सेलेक्टर को उलझाने वाली जगह पर छिपाना

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

यह न बताना कि फ़ोन नंबर क्यों चाहिए

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

ऐसी फ़ॉर्मैटिंग इस्तेमाल करना जो सिर्फ़ एक देश में काम करे

अगर आप सारे नंबर (XXX) XXX-XXXX फ़ॉर्मैट में बनाते हैं, तो आपने खुद को US नंबरों तक बांध लिया। यह फ़ॉर्मैट जर्मनी या जापान में किसी काम का नहीं। या तो स्टोरेज के लिए E.164 और इनपुट के लिए देश के हिसाब से मास्क इस्तेमाल करें, या फ़ॉर्मैट को चुने हुए देश के हिसाब से बदलने दें। यह न मानें कि एक फ़ॉर्मैट हर जगह चलेगा।

प्राइवेसी की चिंताएं और वैकल्पिक फ़ोन फ़ील्ड

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

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

अपने फ़ॉर्म में फ़ोन नंबर फ़ील्ड

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

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