पेमेंट और पते का फ़ॉर्म इस्तेमाल करने के सबसे सही तरीके

अपने उपयोगकर्ताओं को जल्द से जल्द और आसानी से पता और पेमेंट फ़ॉर्म भरने में मदद करें और कन्वर्ज़न बढ़ाएं.

Sam Dutton

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

यहां एक आसान पेमेंट फ़ॉर्म का उदाहरण दिया गया है, जिसमें सभी सबसे सही तरीकों की जानकारी दी गई है:

यहां सामान्य पता फ़ॉर्म का एक उदाहरण दिया गया है, जिसमें सभी सबसे सही तरीकों की जानकारी दी गई है:

चेकलिस्ट

• काम के एचटीएमएल एलिमेंट इस्तेमाल करें: <form>, <input>, <label>, और <button>.
• हर फ़ॉर्म फ़ील्ड को <label> से लेबल करें.
• ब्राउज़र में पहले से मौजूद सुविधाओं को ऐक्सेस करने के लिए, एचटीएमएल एलिमेंट एट्रिब्यूट का इस्तेमाल करें. खास तौर पर, type और autocomplete में सही वैल्यू इस्तेमाल करें.
• उन नंबरों के लिए type="number" का इस्तेमाल करने से बचें जिनका इस्तेमाल बढ़ने के लिए नहीं किया जाना है, जैसे कि पेमेंट कार्ड के नंबर. इसके बजाय, type="text" और inputmode="numeric" का इस्तेमाल करें.
• अगर input, select या textarea के लिए, अपने-आप पूरा होने वाली सही वैल्यू उपलब्ध है, तो आपको उसका इस्तेमाल करना चाहिए.
• फ़ॉर्म को ऑटोमैटिक भरने में ब्राउज़र की मदद करने के लिए, name और id एट्रिब्यूट की ऐसी स्टेबल वैल्यू डालें जो पेज लोड या वेबसाइट डिप्लॉयमेंट के बीच नहीं बदलती.
• एक बार टैप या क्लिक करने के बाद, 'सबमिट करें' बटन को बंद करें.
• सिर्फ़ फ़ॉर्म सबमिट करने के दौरान ही नहीं, बल्कि एंट्री के दौरान डेटा की पुष्टि करें.
• बिना लॉग-इन खरीदारी को डिफ़ॉल्ट बनाएं और चेकआउट हो जाने के बाद, खाता बनाना आसान बनाएं.
• चेकआउट की प्रोसेस की प्रोग्रेस को साफ़ तौर पर, कॉल-टू-ऐक्शन के साथ दिखाएं.
• ग़ैर-ज़रूरी और ध्यान भटकाने वाली चीज़ों को हटाकर, चेकआउट प्रोसेस से बाहर निकलने की संभावित जगहों को सीमित करें.
• चेकआउट के समय ऑर्डर की पूरी जानकारी दिखाएं और ऑर्डर में बदलाव करना आसान बनाएं.
• उस डेटा के लिए न पूछें जिसकी आपको ज़रूरत नहीं है.
• अगर आपके पास ऐसा करने की सही वजह नहीं है, तो एक ही इनपुट वाले नाम पूछें.
• नामों और उपयोगकर्ता नामों के लिए, सिर्फ़ लैटिन वर्णों का इस्तेमाल न करें.
• पते के लिए, अलग-अलग फ़ॉर्मैट इस्तेमाल करने की अनुमति दें.
• पते के लिए एक textarea का इस्तेमाल करें.
• बिलिंग पते के लिए, अपने-आप पूरा होने की सुविधा का इस्तेमाल करें.
• जहां ज़रूरी हो वहां अंतरराष्ट्रीय और स्थानीय भाषा में अनुवाद करने की सुविधा.
• पिन कोड पता खोजने से बचें.
• पेमेंट कार्ड के अपने-आप पूरे होने वाली सही वैल्यू इस्तेमाल करें.
• पेमेंट कार्ड नंबर के लिए एक ही इनपुट का इस्तेमाल करें.
• कस्टम एलिमेंट का इस्तेमाल करने से बचें. ऐसा तब ही करें, जब कस्टम एलिमेंट से जानकारी अपने-आप भरने की सुविधा में रुकावट आए.
• फ़ील्ड के साथ-साथ लैब में भी टेस्ट करें: पेज के आंकड़े, इंटरैक्शन के आंकड़े, और रीयल-उपयोगकर्ता की परफ़ॉर्मेंस का आकलन.
• अलग-अलग ब्राउज़र, डिवाइसों, और प्लैटफ़ॉर्म पर टेस्ट करें.

सही एचटीएमएल का इस्तेमाल करना

जॉब के लिए बनाए गए एलिमेंट और एट्रिब्यूट इस्तेमाल करें:

• <form>, <input>, <label>, और <button>
• type, autocomplete, और inputmode

इनसे ब्राउज़र में पहले से मौजूद फ़ंक्शन चालू हो जाते हैं, सुलभता बेहतर होती है, और आपके मार्कअप को बेहतर बनाया जा सकता है.

एचटीएमएल एलिमेंट का इस्तेमाल सही तरीके से करना

अपना फ़ॉर्म <form> में डालें

शायद आप <form> में अपने <input> एलिमेंट को रैप करने की चिंता न करें. साथ ही, आप सिर्फ़ JavaScript की मदद से डेटा सबमिट करने की सुविधा को मैनेज करना चाहें.

ऐसा मत करो!

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

अगर उपयोगकर्ता का इनपुट देने के लिए, आपके पास एक से ज़्यादा पेज कॉम्पोनेंट हैं, तो पक्का करें कि आपने हर कॉम्पोनेंट को उसके <form> एलिमेंट में डाला हो. उदाहरण के लिए, अगर आपके पास एक ही पेज पर खोज और साइन-अप है, तो हर एक को उसके <form> में रखें.

एलिमेंट को लेबल करने के लिए, <label> का इस्तेमाल करें

<input>, <select> या <textarea> को लेबल करने के लिए, <label> का इस्तेमाल करें.

लेबल के for एट्रिब्यूट को इनपुट के id एट्रिब्यूट की तरह ही वैल्यू देकर, किसी इनपुट के साथ लेबल जोड़ें.

<label for="address-line1">Address line 1</label>
<input id="address-line1" …>

एक इनपुट के लिए एक ही लेबल का इस्तेमाल करें: कई इनपुट को सिर्फ़ एक लेबल से लेबल करने की कोशिश न करें. यह सुविधा, ब्राउज़र पर और स्क्रीन रीडर के लिए सबसे सही है. लेबल पर टैप या क्लिक करने से, फ़ोकस उससे जुड़े इनपुट की तरफ़ हो जाता है. साथ ही, लेबल या लेबल के इनपुट पर फ़ोकस होने पर, स्क्रीन रीडर उस लेबल के टेक्स्ट को पढ़कर सुनाता है.

बटनों को मददगार बनाएं

बटन के लिए <button> का इस्तेमाल करें! <input type="submit"> का भी इस्तेमाल किया जा सकता है, लेकिन div या बटन की तरह काम करने वाले दूसरे रैंडम एलिमेंट का इस्तेमाल न करें. बटन एलिमेंट ऐक्सेस करने लायक व्यवहार, बिल्ट-इन फ़ॉर्म सबमिशन फ़ंक्शन देते हैं और इन्हें आसानी से स्टाइल किया जा सकता है.

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

अगर उपयोगकर्ता किसी बटन पर टैप या क्लिक करता है, तो 'सबमिट करें' बटन को बंद करें. खास तौर पर, ऐसा तब करें, जब उपयोगकर्ता पेमेंट कर रहा हो या ऑर्डर दे रहा हो. कई उपयोगकर्ता बटन पर बार-बार क्लिक करते हैं, भले ही वे ठीक से काम कर रहे हों. इससे चेकआउट की प्रोसेस में गड़बड़ी हो सकती है और इसे सर्वर पर लोड होने में दिक्कत हो सकती है.

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

एचटीएमएल एट्रिब्यूट का ज़्यादा से ज़्यादा फ़ायदा पाना

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

मोबाइल पर सही कीबोर्ड देने के लिए, सही इनपुट type एट्रिब्यूट का इस्तेमाल करें. साथ ही, ब्राउज़र से बुनियादी तौर पर इसकी पुष्टि करने की सुविधा चालू करें.

उदाहरण के लिए, ईमेल पतों के लिए type="email" और फ़ोन नंबर के लिए type="tel" का इस्तेमाल करें.

तारीखों के लिए, कस्टम select एलिमेंट का इस्तेमाल करने से बचें. अगर उन्हें ठीक से लागू नहीं किया जाता है और वे पुराने ब्राउज़र पर काम नहीं करते हैं, तो ऑटोमैटिक भरने की सुविधा में गड़बड़ी होती है. जन्म का साल जैसी संख्याओं के लिए, select के बजाय input एलिमेंट का इस्तेमाल करें. खास तौर पर मोबाइल पर, किसी लंबी ड्रॉप-डाउन सूची में से चुनने के बजाय, मैन्युअल रूप से अंक डालने से आसान और कम गड़बड़ी होने की संभावना होती है. मोबाइल पर सही कीबोर्ड के लिए, inputmode="numeric" का इस्तेमाल करें. साथ ही, टेक्स्ट या प्लेसहोल्डर के साथ, पुष्टि और फ़ॉर्मैट से जुड़े संकेत जोड़ें, ताकि यह पक्का किया जा सके कि उपयोगकर्ता ने सही फ़ॉर्मैट में डेटा डाला है.

सुलभता को बेहतर बनाने के लिए, अपने-आप पूरा होने की सुविधा का इस्तेमाल करें और उपयोगकर्ताओं को दोबारा डेटा डालने से रोकने में मदद करें

सही autocomplete वैल्यू का इस्तेमाल करने से, ब्राउज़र डेटा को सुरक्षित तरीके से सेव करने के साथ-साथ input, select, और textarea की वैल्यू को अपने-आप भरने में उपयोगकर्ताओं की मदद करते हैं. यह खास तौर पर मोबाइल पर ज़रूरी है. साथ ही, यह खास तौर पर, सेशन बीच में छोड़ने की दर से बचने के लिए बहुत ज़रूरी है. ऑटोकंप्लीट की सुविधा से, सुलभता के कई फ़ायदे भी मिलते हैं.

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

स्थिर वैल्यू

बिलिंग का पता

डिफ़ॉल्ट रूप से, बिलिंग पते को डिलीवरी के पते के तौर पर सेट करें. फ़ॉर्म में बिलिंग पता दिखाने के बजाय, बिलिंग पते में बदलाव करने का लिंक दें (या summary और details एलिमेंट का इस्तेमाल करें)

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

<input autocomplete="shipping address-line-1" ...>
...
<input autocomplete="billing address-line-1" ...>

सही डेटा डालने में उपयोगकर्ताओं की मदद करें

ग्राहकों को "बताने" से बचने की कोशिश करें, क्योंकि उन्होंने "कुछ गलत किया". इसके बजाय, समस्याओं को तुरंत ठीक करने में उपयोगकर्ताओं की मदद करें, ताकि वे ज़्यादा तेज़ी और आसानी से फ़ॉर्म भर सकें. चेकआउट प्रोसेस के दौरान, ग्राहक किसी प्रॉडक्ट या सेवा के लिए आपकी कंपनी को पैसे देने की कोशिश करते हैं. आपका काम उनकी मदद करना है, न कि उन्हें सज़ा देना!

एलिमेंट बनाने के लिए कंस्ट्रेंट एट्रिब्यूट जोड़े जा सकते हैं, ताकि स्वीकार की जा सकने वाली वैल्यू के बारे में बताया जा सके. इनमें min, max, और pattern शामिल हैं. एलिमेंट की वैधता की स्थिति, इस आधार पर अपने-आप सेट हो जाती है कि एलिमेंट की वैल्यू मान्य है या नहीं. यह इस बात पर भी निर्भर करती है कि :valid और :invalid सीएसएस स्यूडो-क्लास का इस्तेमाल, मान्य या अमान्य वैल्यू वाले एलिमेंट को स्टाइल करने के लिए किया जा सकता है या नहीं.

उदाहरण के लिए, नीचे दिया गया एचटीएमएल 1900 से 2020 के बीच के जन्म के साल के बारे में जानकारी देता है. type="number" का इस्तेमाल करने से, इनपुट वैल्यू सिर्फ़ नंबर तक सीमित हो जाती हैं. ये वैल्यू, min और max की दी गई रेंज में होती हैं. अगर आपने रेंज से बाहर की कोई संख्या डालने की कोशिश की, तो इनपुट को अमान्य स्थिति पर सेट कर दिया जाएगा.

इस उदाहरण में, खाली जगह देते हुए पेमेंट कार्ड के मान्य नंबर को पक्का करने के लिए pattern="[\d ]{10,30}" का इस्तेमाल किया गया है:

मॉडर्न ब्राउज़र, email या url टाइप वाले इनपुट की बुनियादी पुष्टि भी करते हैं.

फ़ॉर्म सबमिट करते समय, ब्राउज़र उन फ़ील्ड पर अपने-आप फ़ोकस सेट कर देते हैं जिनमें समस्या है या ज़रूरी वैल्यू मौजूद नहीं हैं. JavaScript की ज़रूरत नहीं है!

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

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

ज़्यादा जटिल रीयल-टाइम पुष्टि के लिए JavaScript का इस्तेमाल करना में ज़्यादा जानकारी पाएं.

उपयोगकर्ताओं को ज़रूरी डेटा दिखने से बचाने में मदद करें

ज़रूरी वैल्यू के लिए, इनपुट पर required एट्रिब्यूट का इस्तेमाल करें.

जब कोई फ़ॉर्म सबमिट किया जाता है, तो मॉडर्न ब्राउज़र अपने-आप अनुरोध सबमिट करते हैं और उन required फ़ील्ड पर फ़ोकस करते हैं जिनमें डेटा मौजूद नहीं है. साथ ही, ज़रूरी फ़ील्ड को हाइलाइट करने के लिए, :required स्यूडो-क्लास का इस्तेमाल किया जा सकता है. JavaScript की ज़रूरत नहीं है!

हर ज़रूरी फ़ील्ड के लिए, लेबल में स्टार का निशान लगाएं. साथ ही, तारे के निशान का मतलब समझाने के लिए फ़ॉर्म के शुरू में एक नोट जोड़ें.

चेकआउट करना आसान बनाएं

मोबाइल कॉमर्स गैप को ध्यान में रखें!

मान लें कि आपके उपयोगकर्ताओं के लिए मुश्किल बजट है. इसका इस्तेमाल करते रहें और आपके उपयोगकर्ता चले जाएंगे.

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

इन सबसे ज़्यादा, उपयोगकर्ताओं के उन फ़ॉर्म को छोड़ने की संभावना ज़्यादा होती है जो लंबे, जटिल और बिना किसी दिशा के की जानकारी के बिना दिखते हैं. ऐसा खास तौर पर तब होता है, जब उपयोगकर्ता छोटी स्क्रीन का इस्तेमाल कर रहे हों, ध्यान भटकाने वाले हों या भाग-दौड़ भरी हुई हो. जितना हो सके कम से कम डेटा मांगें.

लॉग इन किए बिना खरीदारी करने की सुविधा को डिफ़ॉल्ट बनाएं

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

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

चेकआउट की प्रोग्रेस दिखाएं

प्रोग्रेस दिखाकर और यह साफ़ तौर पर बताएं कि आगे क्या करना है. इससे चेकआउट प्रोसेस को समझना मुश्किल हो सकता है. नीचे दिए गए वीडियो में दिखाया गया है कि यूके के खुदरा दुकानदार johnlewis.com ने यह उपलब्धि कैसे हासिल की.

आपको उनकी दिलचस्पी बरकरार रखनी होगी! पेमेंट के हर चरण के लिए, पेज की हेडिंग और ज़्यादा जानकारी देने वाले बटन की वैल्यू इस्तेमाल करें. इनसे यह पता चलता है कि पेमेंट करने के लिए अभी क्या करना चाहिए और चेकआउट के आगे क्या चरण है.

मोबाइल कीबोर्ड पर Enter बटन लेबल सेट करने के लिए, फ़ॉर्म इनपुट पर enterkeyhint एट्रिब्यूट का इस्तेमाल करें. उदाहरण के लिए, कई पेज वाले फ़ॉर्म में enterkeyhint="previous" और enterkeyhint="next" का इस्तेमाल करें, फ़ॉर्म के फ़ाइनल इनपुट के लिए enterkeyhint="done" और खोज इनपुट के लिए enterkeyhint="search" इस्तेमाल करें.

enterkeyhint एट्रिब्यूट का इस्तेमाल Android और iOS पर किया जा सकता है. इस बारे में ज़्यादा जानकारी के लिए, Enterkeyhint डायरेक्टिव पर जाएं.

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

फ़ोटो और वीडियो से अनचाहे ऑब्जेक्ट हटाएं

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

अपने सफ़र पर फ़ोकस बनाए रखें. यह उपयोगकर्ताओं को कुछ और करने के लिए प्रेरित करने का समय नहीं है!

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

नाम और पता आसानी से डालें

सिर्फ़ वही डेटा मांगें जो आपको चाहिए

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

कोई एक नाम डालें

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

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

नाम ऑटोमैटिक भरने की सुविधा चालू करें

पूरे नाम के लिए name का इस्तेमाल करें:

<input autocomplete="name" ...>

अगर वाकई में नाम के हिस्सों को बांटने की कोई सही वजह है, तो पक्का करें कि अपने-आप पूरा होने की सही वैल्यू का इस्तेमाल किया जा रहा हो:

• honorific-prefix
• given-name
• nickname
• additional-name-initial
• additional-name
• family-name
• honorific-suffix

अंतरराष्ट्रीय नामों की अनुमति दें

आप अपने नाम इनपुट की पुष्टि कर सकते हैं या नाम के डेटा के लिए मंज़ूर किए गए वर्णों को सीमित कर सकते हैं. हालांकि, आपको अंग्रेज़ी वर्णमाला का ज़्यादा से ज़्यादा इस्तेमाल करके पाबंदी नहीं होनी चाहिए. यह कहना गलत है कि आपका नाम "अमान्य" है!

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

<!-- Names with non-Latin characters (such as Françoise or Jörg) are 'invalid'. -->
<input pattern="[\w \-]+" ...>

<!-- Accepts Unicode letters. -->
<input pattern="[\p{L} \-]+" ...>

पते के अलग-अलग फ़ॉर्मैट के लिए अनुमति दें

पता फ़ॉर्म डिज़ाइन करते समय, किसी एक देश में भी पते के अलग-अलग तरह के फ़ॉर्मैट का ध्यान रखें. "सामान्य" पतों के बारे में कोई अनुमान न लगाएं. (अगर आप संतुष्ट नहीं हैं, तो यूनाइटेड किंगडम के पते की ऑडिटी पर एक नज़र डालें!)

पते के फ़ॉर्म को सुविधाजनक बनाएं

उपयोगकर्ताओं को उनके पते को ऐसे फ़ॉर्म फ़ील्ड में दबाने के लिए मजबूर न करें जो फ़िट नहीं होते.

उदाहरण के लिए, अलग-अलग इनपुट में घर के नंबर और सड़क के नाम पर ज़ोर न दें. इसकी वजह यह है कि कई पते इस फ़ॉर्मैट का इस्तेमाल नहीं करते और अधूरा डेटा, ब्राउज़र की ऑटोमैटिक भरने की सुविधा में गड़बड़ी कर सकता है.

required पते के फ़ील्ड को इस्तेमाल करते समय, खास तौर पर सावधानी बरतें. उदाहरण के लिए, यूके के बड़े शहरों के पतों में काउंटी नहीं होती है, लेकिन फिर भी कई साइटें उपयोगकर्ताओं को एक काउंटी डालने के लिए मजबूर करती हैं.

दो सुविधाजनक पता पंक्तियों का इस्तेमाल करना अलग-अलग पता फ़ॉर्मैट के लिए काफ़ी अच्छा काम करता है.

<input autocomplete="address-line-1" id="address-line1" ...>
<input autocomplete="address-line-2" id="address-line2" ...>

मिलान के लिए लेबल जोड़ें:

<label for="address-line-1">
Address line 1 (or company name)
</label>
<input autocomplete="address-line-1" id="address-line1" ...>

<label for="address-line-2">
Address line 2 (optional)
</label>
<input autocomplete="address-line-2" id="address-line2" ...>

इसे आज़माने के लिए, यहां एम्बेड किए गए डेमो को रीमिक्स और उसमें बदलाव करें.

पते को बेहतर बनाने के लिए एक ही टेक्स्टक्षेत्र का इस्तेमाल करें

पतों के लिए सबसे सुविधाजनक विकल्प एक textarea देना है.

textarea तरीका किसी भी पते के फ़ॉर्मैट में फ़िट हो सकता है. इसे कॉपी करने और चिपकाने का यह सबसे अच्छा तरीका है. हालांकि, ध्यान रखें कि यह आपके डेटा की ज़रूरतों को पूरा नहीं करता. साथ ही, अगर उपयोगकर्ता सिर्फ़ address-line1 और address-line2 के साथ फ़ॉर्म का इस्तेमाल करते हैं, तो वे ऑटोमैटिक भरने की सुविधा का इस्तेमाल नहीं कर पाएंगे.

टेक्स्ट एरिया के लिए, ऑटोकंप्लीट वैल्यू के तौर पर street-address का इस्तेमाल करें.

यहां एक फ़ॉर्म का उदाहरण दिया गया है, जिसमें पते के लिए एक textarea के इस्तेमाल के बारे में बताया गया है:

पते के फ़ॉर्म को अंतरराष्ट्रीय और स्थानीय भाषा में उपलब्ध कराना

आपके उपयोगकर्ताओं की जगह के आधार पर, पता फ़ॉर्म को अंतरराष्ट्रीय और स्थानीय भाषा के अनुसार बनाने के बारे में विचार करना खास तौर पर ज़रूरी होता है.

ध्यान रखें कि पते के हिस्सों के नाम, पते के फ़ॉर्मैट के साथ-साथ अलग-अलग होते हैं, भले ही वह एक ही भाषा में हो.

    ZIP code: US
 Postal code: Canada
    Postcode: UK
     Eircode: Ireland
         PIN: India

अगर किसी ऐसे फ़ॉर्म को पेश किया जाए जो आपके पते के हिसाब से सही नहीं हो या जिसमें आपकी उम्मीद के मुताबिक शब्दों का इस्तेमाल न किया गया हो, तो उसे दिखाना परेशान करने वाला या परेशान करने वाला हो सकता है.

एक से ज़्यादा स्थान-भाषा के लिए पता फ़ॉर्म को पसंद के मुताबिक बनाना, आपकी साइट के लिए ज़रूरी हो सकता है. हालांकि, फ़ॉर्म में अपने हिसाब से बदलाव करने के लिए, तकनीकों का इस्तेमाल करना (जैसा कि ऊपर बताया गया है), काफ़ी हो सकता है. अगर पते के फ़ॉर्म का स्थानीय भाषा में अनुवाद नहीं किया जाता है, तो पते के अलग-अलग फ़ॉर्मैट से जुड़ी अहम प्राथमिकताओं को समझ लें: * पते के अलग-अलग हिस्सों के बारे में ज़्यादा जानकारी न दें, जैसे कि सड़क के नाम या घर के नंबर पर ज़ोर देना. * जहां संभव हो वहां required फ़ील्ड बनाने से बचें. उदाहरण के लिए, कई देशों के पतों में पिन कोड नहीं होता है और हो सकता है कि ग्रामीण पतों में सड़क या सड़क का कोई नाम न हो. * सभी नाम शामिल करें: 'देश/इलाका' का इस्तेमाल करें, न कि 'देश'; 'ज़िप/पिन कोड', न कि 'ज़िप'.

इसे सुविधाजनक बनाए रखें! ऊपर दिए गए आसान पते वाले फ़ॉर्म के उदाहरण में, कई स्थानीय भाषाओं के हिसाब से लिखा जा सकता है.

पिन कोड पता खोजने से बचें

कुछ वेबसाइटें पिन कोड या ZIP के आधार पर पते खोजने के लिए, किसी सेवा का इस्तेमाल करती हैं. यह कुछ कामों के लिए सही हो सकता है लेकिन आपको इसके संभावित कमियों के बारे में पता होना चाहिए.

पोस्टल कोड पते का सुझाव सभी देशों के लिए काम नहीं करता है—और कुछ इलाकों में, पोस्ट कोड में बड़ी संख्या में संभावित पते शामिल हो सकते हैं.

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

पेमेंट का तरीका आसान बनाएं

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

उपयोगकर्ताओं को पेमेंट डेटा दोबारा डालने से बचने में मदद करें

पेमेंट कार्ड के फ़ॉर्म में सही autocomplete वैल्यू जोड़ना न भूलें. इनमें पेमेंट कार्ड का नंबर, कार्ड पर मौजूद नाम, खत्म होने की तारीख का महीना, और साल शामिल हैं:

• cc-number
• cc-name
• cc-exp-month
• cc-exp-year

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

पेमेंट कार्ड की तारीखों के लिए कस्टम एलिमेंट का इस्तेमाल करने से बचें

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

पेमेंट कार्ड और फ़ोन नंबर के लिए एक ही इनपुट का इस्तेमाल करें

पेमेंट कार्ड और फ़ोन नंबर के लिए एक ही इनपुट का इस्तेमाल करें: नंबर को भागों में न बांटें. इससे उपयोगकर्ताओं के लिए डेटा डालना आसान हो जाता है, पुष्टि करना आसान हो जाता है, और ब्राउज़र अपने-आप जानकारी भर जाते हैं. पिन और बैंक कोड जैसे दूसरे अंकों वाले डेटा के लिए भी ऐसा ही करें.

ध्यान से पुष्टि करें

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

हालांकि, आपके pattern रेगुलर एक्सप्रेशन में इतना लचीला होना चाहिए कि पेमेंट कार्ड की संख्या की सीमा को हैंडल कर सकें: 14 अंकों से लेकर 20 (या कम) तक. LDAPwiki पर जाकर, पेमेंट कार्ड नंबर बनाने के बारे में ज़्यादा जानकारी पाएं.

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

अलग-अलग डिवाइसों, प्लैटफ़ॉर्म, ब्राउज़र, और वर्शन पर टेस्ट करें

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

आंकड़े और RUM लागू करें

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

इसके लिए, आपको आंकड़ों और असली उपयोगकर्ताओं के अनुभव से जुड़े डेटा की ज़रूरत होगी. जैसे, असल उपयोगकर्ताओं के अनुभव से जुड़ा डेटा. जैसे- चेकआउट पेजों को लोड होने में कितना समय लगता है या पेमेंट पूरा होने में कितना समय लगता है:

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

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

इससे आपको अपनी कोशिशों को प्राथमिकता देने, बदलाव करने, और कामयाबी पाने के लिए एक ठोस आधार मिलता है.

सीखना जारी रखें

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

Unsplash पर @रुपixen ने फ़ोटो क्लिक की है.