पब्लिश करने की तारीख: 20 नवंबर, 2024
ई-कॉमर्स की सफलता, आसानी से चेकआउट करने की सुविधा पर निर्भर करती है. फ़ॉर्म, कन्वर्ज़न के लिए ज़रूरी हैं. उपयोगकर्ता अनुभव को ऑप्टिमाइज़ करने के लिए, यह समझना ज़रूरी है कि उपयोगकर्ता आपके फ़ॉर्म के साथ कैसे इंटरैक्ट करते हैं. इस प्रोसेस में, ऑटोमैटिक भरने की सुविधा अहम भूमिका निभाती है.
ऑटोमैटिक भरने की सुविधा से, कन्वर्ज़न बढ़ सकते हैं, फ़ॉर्म तेज़ी से सबमिट किए जा सकते हैं, फ़ॉर्म बीच में छोड़ने की संख्या कम हो सकती है, और उपयोगकर्ता की संतुष्टि बढ़ सकती है.
क्या आपको अपनी साइट पर, ऑटोमैटिक भरने की सुविधा के इस्तेमाल और उससे जुड़ी समस्याओं के बारे में पता है?
इस गाइड में, उपयोगकर्ता आपके फ़ॉर्म में ऑटोमैटिक भरने की सुविधा का इस्तेमाल कैसे करते हैं, इस बारे में डेटा इकट्ठा करने और उसका विश्लेषण करने का तरीका बताया गया है.
अपने-आप जानकारी भरने की सुविधा से जुड़ी अहम जानकारी का इस्तेमाल करने का तरीका यहां बताया गया है:
- टेस्टिंग के तरीके को असल उपयोगकर्ता के वर्कफ़्लो के हिसाब से अलाइन करें. अगर जानकारी अपने-आप भरने की सुविधा के इस्तेमाल से जुड़ी अहम जानकारी से पता चलता है कि आपके उपयोगकर्ता, जानकारी अपने-आप भरने की सुविधा का ज़्यादा इस्तेमाल करते हैं, तो आपको पता है कि अपने वर्कफ़्लो में, जानकारी अपने-आप भरने की सुविधा की जांच को शामिल करना ज़रूरी है.
- रिग्रेशन की पहचान करना. फ़ॉर्म के यूज़र एक्सपीरियंस (UX) पर असर डालने वाले डिप्लॉयमेंट के बीच, अलग-अलग फ़ील्ड पर अपने-आप भरने की सुविधा के इस्तेमाल के सिग्नल की तुलना करें. ज़्यादा उतार-चढ़ाव का मतलब यह हो सकता है कि ऑटोमैटिक भरने की सुविधा का काम करने का तरीका पहले के मुकाबले खराब हो गया है.
- पक्का करें कि ऑटोमैटिक भरने की सुविधा, उम्मीद के मुताबिक काम कर रही हो. उन रुझानों का पता लगाएं जिनमें उपयोगकर्ता, उन फ़ील्ड को मैन्युअल तरीके से भरते हैं जिनमें आपको उन्हें ऑटोमैटिक भरने की सुविधा का इस्तेमाल करने के लिए कहना है.
डेमो और कोड
हमारे डेमो को आज़माएं और GitHub पर मौजूद कोड की जांच करें.
इन्हें आज़माएं:
- सभी फ़ील्ड अपने-आप भर जाएंगे.
- किसी फ़ील्ड में जानकारी अपने-आप भरने की सुविधा चालू करें. इसके बाद, मैन्युअल तरीके से उस फ़ील्ड को खाली करें.
- किसी फ़ील्ड को अपने-आप भरने के बाद, उसमें मैन्युअल तरीके से बदलाव करें.
- किसी फ़ील्ड को पूरी तरह से मैन्युअल तरीके से भरें.
- किसी फ़ील्ड को खाली छोड़ें.
ब्राउज़र समर्थन
यह डेमो, नए डिवाइसों और ब्राउज़र के वर्शन पर काम करता है. यह :autofill सीएसएस सुडो-क्लास का पता लगाने पर निर्भर करता है. यह सभी ब्राउज़र पर काम करता है.
पहला चरण: ऑटोमैटिक भरने की सुविधा से जुड़ा डेटा इकट्ठा करना
ऑटोमैटिक भरने की सुविधा की स्थितियां तय करना
सबसे पहले, अपने-आप भरने वाले फ़ील्ड की उन स्थितियों को तय करें जिनमें आपकी दिलचस्पी है:
EMPTY
: उपयोगकर्ता फ़ील्ड को खाली छोड़ देता है.AUTOFILLED
: उपयोगकर्ता सिर्फ़ ऑटोमैटिक भरने की सुविधा का इस्तेमाल करके फ़ील्ड भरता है.AUTOFILLED_THEN_MODIFIED
: उपयोगकर्ता पहले ऑटोमैटिक भरने की सुविधा का इस्तेमाल करके फ़ील्ड को भरता है. इसके बाद, ऑटोमैटिक भरी गई वैल्यू में मैन्युअल तौर पर बदलाव करता है. उदाहरण के लिए, उपयोगकर्ता अपने पते और संपर्क की जानकारी अपने-आप भरने की सुविधा का इस्तेमाल करता है, लेकिन मैन्युअल तरीके से कोई दूसरा फ़ोन नंबर डालता है.ONLY_MANUAL
: उपयोगकर्ता फ़ील्ड को पूरी तरह से मैन्युअल तरीके से भरता है.
// Possible values for autofill statuses
const EMPTY = 'empty';
const AUTOFILLED = 'autofilled';
const AUTOFILLED_THEN_MODIFIED = 'autofilled-then-modified';
const ONLY_MANUAL = 'only-manual';
यूटिलिटी फ़ंक्शन लागू करना
अब इस कोड की मुख्य सुविधा को लागू करने का समय आ गया है: यह जांचना कि कोई फ़ील्ड अभी-अभी अपने-आप भरा गया है या नहीं. इसके लिए, दो फ़ंक्शन का इस्तेमाल किया जाता है:
getAllAutofilledFields
किसी फ़ॉर्म में मौजूद सभी<input>
और<select>
एलिमेंट को देखता है. साथ ही,:autofill
CSS के स्यूडो-क्लास की मौजूदगी की जांच करता है. यह उन एलिमेंट की सूची दिखाता है जो अपने-आप भर गए हैं.checkIsAutofilled
इसके बाद, यह जांच करता है कि कोई एलिमेंट इस सूची में शामिल है या नहीं.
// Get all elements that are autofilled, using the :autofill pseudo-class
function getAllAutofilledFields(formElement) {
return formElement.querySelectorAll(':autofill');
}
// Check if the passed element is in the list of autofilled fields
function checkIsAutofilled(allAutofilledFields, fieldElement) {
return Array.from(allAutofilledFields).includes(fieldElement);
}
// Usage
const allAutofilledFields = getAllAutofilledFields(formElement);
const isAutofilled = checkIsAutofilled(allAutofilledFields, fieldElement);
इसके अलावा, आपको यह देखने के लिए एक यूटिलिटी फ़ंक्शन की ज़रूरत होगी कि कोई फ़ील्ड खाली है या नहीं.
// Check if the value of the element is empty
function checkIsEmpty(fieldElement) {
const value = fieldElement.value.trim();
// value is a string, even for a type = number field
const isEmpty = value === '';
return isEmpty;
}
ऑटोमैटिक भरने की सुविधा की स्थिति शुरू करना
हर फ़ील्ड के लिए, ऑटोमैटिक भरने की सुविधा की स्थिति सेव करने के लिए, ग्लोबल ऑब्जेक्ट autofillStatuses
बनाएं.
फ़ॉर्म से सभी फ़ील्ड id
इकट्ठा करें और हर फ़ील्ड की स्थिति को EMPTY
पर शुरू करें.
// Global variable storing autofill statuses for each field
const autofillStatuses = {};
// Example: {
// "name": "autofilled",
// "street-address": "autofilled-then-modified",
// "country": "only-manual"
// }
// Initialize autofill status for all fields
function initializeAutofillStatuses(formElement) {
const allFieldsAsArray = getAllFieldsAsArray(formElement);
allFieldsAsArray.forEach((fieldElement) => {
autofillStatuses[fieldElement.id] = EMPTY;
});
}
initializeAutofillStatuses(document.getElementById('form'));
अपनी पसंद के सभी फ़ील्ड एलिमेंट इकट्ठा करने के लिए,
initializeAutofillStatuses
एक यूटिलिटी फ़ंक्शन का इस्तेमाल करता है:
// Collect all field elements for a given form
function getAllFieldsAsArray(formElement) {
return Array.from(formElement.querySelectorAll('input, select'));
}
बदलावों को देखना
अब ऑटोमैटिक भरने की सुविधा के व्यवहार को देखने के लिए, सब कुछ तैयार है.
हर फ़ॉर्म एलिमेंट में बदलाव इवेंट का लिस्नर अटैच करें. कोई बदलाव होने पर, यह जांच की जाती है कि checkIsAutofilled
यूटिलिटी फ़ंक्शन का इस्तेमाल करके, एलिमेंट में जानकारी अपने-आप भरी जा रही है या नहीं. इसके बाद, मौजूदा और पिछली स्थितियों के आधार पर, autofillStatuses
ऑब्जेक्ट में एलिमेंट के अपने-आप भरने की स्थिति अपडेट की जाती है.
उदाहरण के लिए, अगर पिछला स्टेटस AUTOFILLED
था और फ़ील्ड अब अपने-आप नहीं भरा गया है (यानी, इसमें :autofill
क्लास नहीं है), तो इसका मतलब है कि ऑटोमैटिक भरने के बाद, फ़ील्ड को मैन्युअल तरीके से अपडेट किया गया था. इसलिए, स्टेटस को AUTOFILLED_THEN_MODIFIED
पर अपडेट कर दिया गया है.
// Add event listener to all fields to update autofill status
function initializeChangeObserver(formElement) {
const allFieldsAsArray = getAllFieldsAsArray(formElement);
allFieldsAsArray.forEach((fieldElement) => {
fieldElement.addEventListener('change', () => {
updateAutofillStatus(formElement, fieldElement);
});
});
}
// Update autofill status
function updateAutofillStatus(formElement, fieldElement) {
const isEmpty = checkIsEmpty(fieldElement);
const allAutofilledFields = getAllAutofilledFields(formElement);
const isAutofilled = checkIsAutofilled(allAutofilledFields, fieldElement);
const previousAutofillStatus = autofillStatuses[fieldElement.id];
if (isEmpty) {
autofillStatuses[fieldElement.id] = EMPTY;
// NOTE: if (previousAutofillStatus === AUTOFILLED), the field has just been emptied manually. Autofill can't empty fields.
} else {
if (isAutofilled) {
autofillStatuses[fieldElement.id] = AUTOFILLED;
} else {
if (
previousAutofillStatus === ONLY_MANUAL ||
previousAutofillStatus === EMPTY
) {
// NOTE: ONLY_MANUAL is only used for fields where autofilled was *never* used. A field where autofilled was used will be AUTOFILLED_THEN_MODIFIED, even if the user has completely retyped the whole value
autofillStatuses[fieldElement.id] = ONLY_MANUAL;
} else if (
previousAutofillStatus === AUTOFILLED ||
previousAutofillStatus === AUTOFILLED_THEN_MODIFIED
) {
autofillStatuses[fieldElement.id] = AUTOFILLED_THEN_MODIFIED;
}
}
}
}
initializeChangeObserver(document.getElementById('form'));
नतीजे अपने सर्वर पर भेजना
फ़ॉर्म सबमिट करने के बाद, सर्वर पर अपना autofillStatuses
ऑब्जेक्ट भेजें. उदाहरण के लिए, पते के फ़ॉर्म के लिए, आपको सर्वर पर यह डेटा मिलेगा:
{
"name": "only-manual",
"street-address": "only-manual",
"postal-code": "autofilled-then-modified",
"city": "autofilled",
"country": "autofilled"
}
दूसरा चरण: नतीजों का विश्लेषण करना
कई उपयोगकर्ताओं से मिले autofillStatuses
ऑब्जेक्ट को इकट्ठा करें और
डेटा में रुझानों का विश्लेषण करें.
सबसे पहले, ऑटोमैटिक जानकारी भरने की सुविधा के इस्तेमाल से जुड़ी अहम जानकारी देखें: आपके कितने प्रतिशत उपयोगकर्ता, कम से कम एक फ़ील्ड भरने के लिए ब्राउज़र की ऑटोमैटिक जानकारी भरने की सुविधा का इस्तेमाल करते हैं?
इसके बाद, अलग-अलग फ़ील्ड में जाकर जानकारी देखी जा सकती है. उदाहरण के लिए, आपको पता चलता है कि उपयोगकर्ताओं का एक बड़ा हिस्सा, कुछ ऐसे फ़ील्ड में अपने-आप जानकारी भरने की सुविधा का इस्तेमाल नहीं कर रहा है जिनमें यह सुविधा काम करनी चाहिए. अब इसकी संभावित वजहों की जांच की जा सकती है.
- क्या
<label>
फ़ील्ड साफ़ तौर पर नहीं दिख रहे हैं? क्या कोई ऐसा संकेत या प्लेसहोल्डर है जो गुमराह कर सकता है? - क्या आपने autocomplete वैल्यू के लिए सही सिंटैक्स का इस्तेमाल किया है?
<input autocomplete="first-name">
एक आम समस्या है. ब्राउज़र इसे नहीं भरते, क्योंकि सही वैल्यू"given-name"
है.
नतीजा
ऑटोमैटिक भरने की सुविधा के व्यवहार को समझकर और उसका फ़ायदा उठाकर, अपनी वेबसाइट पर उपयोगकर्ता अनुभव को बेहतर बनाया जा सकता है. इस गाइड में बताई गई तकनीकों को लागू करें. इससे आपको यह अहम जानकारी मिलेगी कि उपयोगकर्ता आपके फ़ॉर्म के साथ कैसे इंटरैक्ट करते हैं. साथ ही, आपको यह भी पता चलेगा कि किन चीज़ों को बेहतर बनाया जा सकता है.
याद रखें कि ऑटोमैटिक भरने की सुविधा, उपयोगकर्ताओं को आसानी से साइट पर नेविगेट करने में मदद करने वाला एक बेहतरीन टूल है. अपने फ़ॉर्म को ऑटोमैटिक भरने की सुविधा के लिए ऑप्टिमाइज़ करने से, वेबसाइट पर आने वाले लोगों को बेहतर अनुभव मिल सकता है.