पेमेंट और पते के फ़ॉर्म के लिए सबसे सही तरीके

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

Sam Dutton

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

यहां पेमेंट फ़ॉर्म का एक आसान उदाहरण दिया गया है. इसमें सबसे सही तरीके दिखाए गए हैं:

यहां पते के एक आसान फ़ॉर्म का उदाहरण दिया गया है. इसमें सबसे सही तरीके दिखाए गए हैं:

चेकलिस्ट

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

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

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

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

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

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

ऐसा हो सकता है कि आप अपने <input> एलिमेंट को <form> में रैप न करना चाहें और डेटा सबमिशन को पूरी तरह से JavaScript की मदद से मैनेज करना चाहें.

ऐसा न करें!

एचटीएमएल <form> से आपको सभी मॉडर्न ब्राउज़र में, पहले से मौजूद सुविधाओं के बेहतरीन सेट का ऐक्सेस मिलता है. साथ ही, इससे आपकी साइट को स्क्रीन रीडर और अन्य Assistant की सुविधा वाले डिवाइसों के लिए ऐक्सेस किया जा सकता है. <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 या किसी अन्य एलिमेंट का इस्तेमाल न करें. बटन एलिमेंट, सुलभता की सुविधा देते हैं. इनमें फ़ॉर्म सबमिट करने की सुविधा पहले से मौजूद होती है. साथ ही, इन्हें आसानी से स्टाइल किया जा सकता है.

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

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

const form = document.querySelector('form');
const submitButton = form.querySelector('button[type="submit"]');

form.addEventListener('submit', () => {
  submitButton.disabled = true;
  submitButton.textContent = 'Placing order…';
});

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

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

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

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

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

Android फ़ोन के दो स्क्रीनशॉट, जिनमें ईमेल पता (type=email का इस्तेमाल करके) और टेलीफ़ोन नंबर (type=tel के साथ) डालने के लिए सही कीबोर्ड दिखाया गया है.
ईमेल और टेलीफ़ोन के लिए सही कीबोर्ड.

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

ऑटोकंप्लीट की सुविधा का इस्तेमाल करें, ताकि उपयोगकर्ताओं को डेटा फिर से न डालना पड़े और उन्हें बेहतर अनुभव मिले

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

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

स्टेबल वैल्यू

बिलिंग पता

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

उदाहरण के तौर पर, चेकआउट पेज पर बिलिंग पता बदलने का लिंक दिखाया गया है.
बिलिंग की समीक्षा करने के लिए लिंक जोड़ें.

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

<input autocomplete="shipping address-line1" ...>
<!-- Other fields omitted. -->
<input autocomplete="billing address-line1" ...>

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

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

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

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

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

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

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

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

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

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

क्लाइंट-साइड फ़ॉर्म की पुष्टि में ज़्यादा जानें.

उपयोगकर्ताओं को ज़रूरी डेटा शामिल करने में मदद करना

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

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

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

चेकआउट की प्रोसेस को आसान बनाएं

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

मान लें कि आपके उपयोगकर्ताओं के पास फ़टीग बजट है. अगर आपने इसका इस्तेमाल किया, तो आपके उपयोगकर्ता चले जाएंगे.

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

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

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

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

चेकआउट के दौरान, शॉपिंग कार्ट छोड़ने की वजहें.
baymard.com/checkout-usability से

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

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

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

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

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

फ़ॉर्म के बटन को ऐसे नाम दें जिनसे पता चले कि आगे क्या होने वाला है.

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

Android पर पते के फ़ॉर्म के दो स्क्रीनशॉट. इनमें दिखाया गया है कि enterkeyhint इनपुट एट्रिब्यूट, Enter बटन के आइकॉन को कैसे बदलता है.
Android पर Enter बटन: 'आगे बढ़ें' और 'हो गया'.

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

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

अनचाहे ऑब्जेक्ट हटाएं

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

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

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

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

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

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

नाम और पता डालने की प्रोसेस को आसान बनाना

सिर्फ़ ज़रूरी डेटा मांगें

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

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

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

खास तौर पर, जब तक आपके पास कोई ठोस वजह न हो, तब तक प्रीफ़िक्स या टाइटल (जैसे, श्रीमती, डॉक्टर या लॉर्ड) के लिए अलग से इनपुट जोड़ने की ज़रूरत नहीं है. अगर उपयोगकर्ता चाहें, तो वे अपने नाम के साथ इसे टाइप कर सकते हैं. साथ ही, 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-line1" id="address-line1" ...>
<input autocomplete="address-line2" id="address-line2" ...>

मैच करने के लिए लेबल जोड़ें:

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

<label for="address-line2">
Address line 2 (optional)
</label>
<input autocomplete="address-line2" 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 बनाने से बचें. उदाहरण के लिए, कई देशों के पतों में पिन कोड नहीं होता. साथ ही, ग्रामीण इलाकों के पतों में सड़क या रास्ते का नाम नहीं होता.
  • सभी को शामिल करने वाले नाम इस्तेमाल करें: 'देश' के बजाय 'देश/इलाका'; 'पिन कोड' के बजाय 'पिन कोड/पोस्टल कोड'.

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

पिन कोड के हिसाब से पता खोजने की सुविधा का इस्तेमाल न करें

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

पिन कोड के आधार पर पते के सुझाव पाने की सुविधा, सभी देशों में काम नहीं करती. साथ ही, कुछ इलाकों में पिन कोड के आधार पर कई पते मिल सकते हैं.

पिन कोड में कई पते शामिल हो सकते हैं!

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

एक ही नाम वाले इनपुट से, एक टैप (एक क्लिक) में पता डाला जा सकता है.

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

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

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

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

  • cc-number
  • cc-name
  • cc-exp या अलग-अलग फ़ील्ड के लिए cc-exp-month और cc-exp-year
  • cc-csc

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

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

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

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

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

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

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

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

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

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

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

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

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

iPhone 7 और 11 पर पेमेंट फ़ॉर्म. 'पेमेंट पूरा करें' बटन, iPhone 11 पर दिखता है, लेकिन iPhone 7 पर नहीं
iPhone 7 और iPhone 11 पर एक ही पेज.
छोटे मोबाइल व्यूपोर्ट के लिए पैडिंग कम करें, ताकि पेमेंट पूरा करें बटन छिपा न रहे.

Analytics और आरयूएम लागू करना

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

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

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

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

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

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

यह फ़ोटो Unsplash पर @rupixen ने अपलोड की है.