আপনার ফর্মগুলিতে ব্রাউজার অটোফিল পরিমাপ করুন

মড নলপাস
Maud Nalpas

প্রকাশিত: নভেম্বর 20, 2024

ইকমার্স সাফল্য একটি বিরামহীন চেকআউট প্রক্রিয়ার উপর নির্ভর করে। রূপান্তরগুলির জন্য ফর্মগুলি গুরুত্বপূর্ণ৷ ব্যবহারকারীর অভিজ্ঞতা অপ্টিমাইজ করার জন্য, ব্যবহারকারীরা কীভাবে আপনার ফর্মগুলির সাথে ইন্টারঅ্যাক্ট করে তা বোঝা অপরিহার্য। অটোফিল এই প্রক্রিয়ায় গুরুত্বপূর্ণ ভূমিকা পালন করে।

Chrome-এ অটোফিলের ডেমো।
Chrome-এ অটোফিল

একটি মসৃণ অটোফিল অভিজ্ঞতা বর্ধিত রূপান্তর, দ্রুত ফর্ম জমা, ফর্ম পরিত্যাগ এবং উন্নত ব্যবহারকারীর সন্তুষ্টির দিকে পরিচালিত করতে পারে।

কিন্তু আপনি কি আপনার সাইটে অটোফিল ব্যবহার এবং ঘর্ষণে দৃশ্যমানতা আছে?

এই নির্দেশিকা ব্যাখ্যা করে যে কীভাবে ব্যবহারকারীরা আপনার ফর্মগুলিতে অটোফিল ব্যবহার করে তার উপর ডেটা সংগ্রহ এবং বিশ্লেষণ করবেন।

আপনি কীভাবে এই অটোফিল অন্তর্দৃষ্টিগুলি ব্যবহার করতে পারেন তা এখানে রয়েছে:

  • বাস্তব ব্যবহারকারীর কর্মপ্রবাহের সাথে আপনার পরীক্ষার পদ্ধতিকে সারিবদ্ধ করুন। যদি অটোফিল ব্যবহারের অন্তর্দৃষ্টি সংকেত দেয় যে আপনার ব্যবহারকারীরা অটোফিলের উপর খুব বেশি নির্ভর করে, আপনি জানেন যে আপনার ওয়ার্কফ্লোতে অটোফিল টেস্টিং অন্তর্ভুক্ত করা অত্যন্ত গুরুত্বপূর্ণ।
  • রিগ্রেশন সনাক্ত করুন. UX ফর্মকে প্রভাবিত করে এমন স্থাপনার মধ্যে পৃথক ক্ষেত্রে স্বয়ংক্রিয়ভাবে ব্যবহার সংকেত তুলনা করুন। বড় বৈচিত্রের অর্থ হতে পারে যে একটি অটোফিল আচরণ প্রত্যাবর্তন করেছে৷
  • আপনার অটোফিল-বান্ধব বাস্তবায়ন আশানুরূপ কাজ করে তা নিশ্চিত করুন। প্রবণতা সনাক্ত করুন যেখানে ব্যবহারকারীরা ম্যানুয়ালি ক্ষেত্রগুলি পূরণ করছে বলে মনে হচ্ছে আপনি তাদের স্বতঃপূরণ ব্যবহার করতে পছন্দ করবেন৷

ডেমো এবং কোড

আমাদের ডেমো নিয়ে খেলুন এবং GitHub-এ কোডটি তদন্ত করুন।

অটোফিল পর্যবেক্ষকের ডেমো।
প্রতিটি ফর্ম ফিল্ডে ব্যবহারকারীর অ্যাকশন প্রোগ্রাম্যাটিকভাবে পর্যবেক্ষণ করতে ডেমো কোড ব্যবহার করুন (খালি ছেড়ে দিন, ম্যানুয়ালি পূরণ করুন, অটোফিল দিয়ে পূরণ করুন, অথবা অটোফিল দিয়ে পূরণ করুন এবং তারপর ক্ষেত্রটি পরিবর্তন করুন)। এটা চেষ্টা করে দেখুন

চেষ্টা করার জিনিস:

  • সমস্ত ক্ষেত্র স্বয়ংক্রিয়ভাবে পূরণ করুন।
  • একটি ক্ষেত্র স্বয়ংক্রিয়ভাবে পূরণ করুন, তারপর ম্যানুয়ালি খালি করুন।
  • একটি ক্ষেত্র স্বয়ংক্রিয়ভাবে পূরণ করুন, তারপরে এটি ম্যানুয়ালি সংশোধন করুন।
  • একটি ক্ষেত্র সম্পূর্ণরূপে ম্যানুয়ালি পূরণ করুন।
  • একটি ক্ষেত্র খালি রাখুন।

ব্রাউজার সমর্থন

ডেমো সর্বশেষ ডিভাইস এবং ব্রাউজার সংস্করণ জুড়ে কাজ করে. এটি :অটোফিল সিএসএস সিউডো-ক্লাস সনাক্ত করার উপর নির্ভর করে, যা ব্রাউজার জুড়ে ভালভাবে সমর্থিত।

ধাপ 1: অটোফিল ডেটা সংগ্রহ করুন

অটোফিল স্ট্যাটাস সংজ্ঞায়িত করুন

প্রথমে, সম্ভাব্য অটোফিল ফিল্ড স্ট্যাটাসগুলি সংজ্ঞায়িত করুন যা আপনি আগ্রহী:

  • 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 pseudo-class-এর উপস্থিতি পরীক্ষা করে। এটি স্বয়ংক্রিয়ভাবে পূরণ করা উপাদানগুলির একটি তালিকা আউটপুট করে।
  • 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"
}
অটোফিল পর্যবেক্ষক ডেমো: বিভিন্ন অটোফিল স্ট্যাটাসের জন্য প্রদর্শন এলাকা।
বিভিন্ন ক্ষেত্রের স্বতঃপূর্ণ অবস্থার জন্য প্রদর্শন এলাকা। শুধুমাত্র ডেমো উদ্দেশ্যে।

ধাপ 2: ফলাফল বিশ্লেষণ

autofillStatuses অবজেক্টগুলিকে একত্রিত করুন যা আপনি অনেক ব্যবহারকারীর কাছ থেকে পান এবং ডেটার প্রবণতা বিশ্লেষণ করুন৷

প্রথমে, সামগ্রিক অটোফিল ব্যবহারের অন্তর্দৃষ্টি দেখুন: আপনার কত শতাংশ ব্যবহারকারী অন্তত একটি ক্ষেত্র পূরণ করতে ব্রাউজার অটোফিল ব্যবহার করেন?

তারপরে, আপনি পৃথক ক্ষেত্রগুলিতে ডুব দিতে পারেন। উদাহরণস্বরূপ, আপনি লক্ষ্য করেছেন যে ব্যবহারকারীদের একটি উল্লেখযোগ্য অংশ স্বয়ংক্রিয়ভাবে পূরণ করা নির্দিষ্ট ক্ষেত্রগুলি স্বয়ংক্রিয়ভাবে পূরণ করছে না যা অটোফিল-সামঞ্জস্যপূর্ণ হওয়া উচিত। আপনি এখন সম্ভাব্য কারণ অনুসন্ধান করতে পারেন.

  • ক্ষেত্র <label> অস্পষ্ট? বিভ্রান্তিকর হতে পারে এমন কোন ইঙ্গিত বা স্থানধারক আছে কি?
  • আপনি স্বয়ংসম্পূর্ণ মান জন্য সঠিক সিনট্যাক্স ব্যবহার করেছেন? একটি সাধারণ সমস্যা হল <input autocomplete="first-name"> , যা ব্রাউজারগুলি পূরণ করে না কারণ সঠিক মানটি হল "given-name"

উপসংহার

অটোফিল আচরণ বোঝার এবং ব্যবহার করে, আপনি আপনার ওয়েবসাইটে ব্যবহারকারীর অভিজ্ঞতা বাড়াতে পারেন। ব্যবহারকারীরা কীভাবে আপনার ফর্মগুলির সাথে ইন্টারঅ্যাক্ট করে এবং উন্নতির জন্য ক্ষেত্রগুলি চিহ্নিত করে সে সম্পর্কে মূল্যবান অন্তর্দৃষ্টি পেতে এই নির্দেশিকায় বর্ণিত কৌশলগুলি প্রয়োগ করুন৷

মনে রাখবেন, অটোফিল হল ব্যবহারকারীর যাত্রাকে স্ট্রিমলাইন করার জন্য একটি শক্তিশালী টুল। অটোফিলের জন্য আপনার ফর্মগুলি অপ্টিমাইজ করা আপনার দর্শকদের জন্য আরও ব্যবহারকারী-বান্ধব অভিজ্ঞতা তৈরি করতে পারে।

আমাদের সমস্ত অটোফিল রিসোর্স পর্যালোচনা করুন।