フォームでのブラウザの自動入力を測定する

Maud Nalpas
Maud Nalpas

公開日: 2024 年 11 月 20 日

e コマースの成功は、シームレスな購入手続きにかかっています。フォームはコンバージョンに不可欠です。ユーザー エクスペリエンスを最適化するには、ユーザーがフォームをどのように操作しているかを把握することが不可欠です。このプロセスにおいて、自動入力は重要な役割を果たします。

Chrome の自動入力のデモ。
Chrome の自動入力

スムーズな自動入力により、コンバージョンの増加、フォームの送信時間の短縮、フォームの放棄の減少、ユーザー満足度の向上を実現できます。

では、サイトにおける自動入力の使用状況と不満を把握できていますか?

このガイドでは、ユーザーがフォームで自動入力を使用する方法に関するデータを収集して分析する方法について説明します。

自動入力に関する分析情報は、次のように使用できます。

  • テスト方法を実際のユーザー ワークフローに適合させる。自動入力の使用状況に関する分析情報で、ユーザーが自動入力に大きく依存していることが示されている場合は、自動入力テストをワークフローに組み込むことが重要です。
  • リグレッションを特定する。フォームの 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';

ユーティリティ関数を実装する

次に、このコードのコア機能である、フィールドが自動入力されたかどうかを確認する機能を実装します。内部的には、次の 2 つの関数を使用します。

  • 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"
}
自動入力オブザーバーのデモ: さまざまな自動入力ステータスの表示領域。
さまざまなフィールドの自動入力ステータスを表示する領域。デモ専用です。

ステップ 2: 結果を分析する

複数のユーザーから受信した autofillStatuses オブジェクトを集計し、データの傾向を分析します。

まず、自動入力の全体的な使用状況に関する分析情報を確認します。ブラウザの自動入力を使用して 1 つ以上のフィールドに入力するユーザーの割合はどのくらいですか?

その後、個々のフィールドを詳しく確認できます。たとえば、自動入力に対応しているはずの特定のフィールドが、多くのユーザーで自動入力されていないことがわかります。これで、考えられる原因を調査できます。

  • フィールド <label> が不明確ですか?誤解を招くヒントやプレースホルダはないか。
  • autocomplete 値に正しい構文を使用しましたか?よくある問題は <input autocomplete="first-name"> です。適切な値は "given-name" であるため、ブラウザは <input autocomplete="first-name"> を入力しません。

まとめ

自動入力の動作を理解して活用することで、ウェブサイトのユーザー エクスペリエンスを向上させることができます。このガイドで説明する手法を導入して、ユーザーがフォームを操作する方法に関する有益な分析情報を取得し、改善が必要な領域を特定します。

自動入力は、ユーザー ジャーニーを効率化する強力なツールです。フォームを自動入力用に最適化すると、訪問者にとってよりユーザー フレンドリーなエクスペリエンスを提供できます。

自動入力リソースをすべてご確認ください。