تکمیل خودکار مرورگر را در فرم های خود اندازه گیری کنید

مود نالپاس
Maud Nalpas

تاریخ انتشار: 20 نوامبر 2024

موفقیت تجارت الکترونیک منوط به فرآیند پرداخت یکپارچه است. فرم ها برای تبدیل بسیار مهم هستند. برای بهینه سازی تجربه کاربری، درک نحوه تعامل کاربران با فرم های شما ضروری است. تکمیل خودکار نقش مهمی در این فرآیند دارد.

نسخه ی نمایشی تکمیل خودکار در کروم.
تکمیل خودکار در کروم

یک تجربه تکمیل خودکار روان می‌تواند منجر به افزایش تبدیل، ارسال سریع‌تر فرم، کاهش رها شدن فرم و بهبود رضایت کاربر شود.

اما آیا امکان مشاهده استفاده از تکمیل خودکار و اصطکاک در سایت خود دارید؟

این راهنما نحوه جمع‌آوری و تجزیه و تحلیل داده‌ها را درباره نحوه استفاده کاربران از تکمیل خودکار در فرم‌های شما توضیح می‌دهد.

در اینجا نحوه استفاده از این اطلاعات تکمیل خودکار آمده است:

  • رویکرد آزمایشی خود را با گردش کار واقعی کاربر هماهنگ کنید. اگر بینش استفاده از تکمیل خودکار نشان می‌دهد که کاربران شما به شدت به تکمیل خودکار اعتماد دارند، می‌دانید که گنجاندن آزمایش تکمیل خودکار در گردش‌های کاری خود بسیار مهم است.
  • رگرسیون ها را شناسایی کنید. سیگنال‌های استفاده از تکمیل خودکار را در فیلدهای جداگانه بین استقرارهایی که بر روی UX تأثیر می‌گذارند، مقایسه کنید. تغییرات زیاد ممکن است به این معنی باشد که یک رفتار تکمیل خودکار پسرفت کرده است.
  • اطمینان حاصل کنید که پیاده سازی پسند تکمیل خودکار شما همانطور که انتظار می رود کار می کند. روندهایی را شناسایی کنید که به نظر می رسد کاربران به صورت دستی فیلدهایی را پر می کنند که ترجیح می دهید از تکمیل خودکار استفاده کنند.

نسخه ی نمایشی و کد

با نسخه نمایشی ما بازی کنید و کد را در GitHub بررسی کنید.

نسخه ی نمایشی ناظر تکمیل خودکار.
از کد آزمایشی برای مشاهده برنامه‌ای عملکرد کاربر در هر فیلد فرم استفاده کنید (خالی بگذارید، به صورت دستی پر کنید، با تکمیل خودکار پر کنید، یا با تکمیل خودکار پر کنید و سپس فیلد را تغییر دهید). آن را امتحان کنید .

چیزهایی که باید امتحان کنید:

  • تکمیل خودکار تمام فیلدها
  • یک فیلد را به صورت خودکار پر کنید، سپس آن را به صورت دستی خالی کنید.
  • یک فیلد را به صورت خودکار تکمیل کنید، سپس آن را به صورت دستی تغییر دهید.
  • یک فیلد را کاملاً دستی پر کنید.
  • یک فیلد را خالی بگذارید.

پشتیبانی از مرورگر

نسخه ی نمایشی در آخرین دستگاه ها و نسخه های مرورگر کار می کند. متکی به تشخیص کلاس شبه :autofill CSS است که در مرورگرها به خوبی پشتیبانی می شود.

مرحله 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> در یک فرم داده شده نگاه می کند و وجود شبه کلاس CSS :autofill را بررسی می کند. لیستی از عناصری که به صورت خودکار تکمیل شده اند را خروجی می دهد.
  • 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" است.

نتیجه گیری

با درک و استفاده از رفتار تکمیل خودکار، می توانید تجربه کاربری را در وب سایت خود بهبود بخشید. برای به دست آوردن بینش های ارزشمند در مورد نحوه تعامل کاربران با فرم های شما و شناسایی زمینه های بهبود، تکنیک های ذکر شده در این راهنما را اجرا کنید.

به یاد داشته باشید، تکمیل خودکار یک ابزار قدرتمند برای ساده کردن سفر کاربر است. بهینه سازی فرم های خود برای تکمیل خودکار می تواند تجربه کاربر پسندتری را برای بازدیدکنندگان شما ایجاد کند.

همه منابع تکمیل خودکار ما را مرور کنید.