Browserautofill in Ihren Formularen erfassen

Maud Nalpas
Maud Nalpas

Veröffentlicht: 20. November 2024

Der Erfolg im E-Commerce hängt von einem reibungslosen Bezahlvorgang ab. Formulare sind entscheidend für Conversions. Um die Nutzerfreundlichkeit zu optimieren, ist es wichtig zu verstehen, wie Nutzer mit Ihren Formularen interagieren. Die Funktion „Autofill“ spielt dabei eine wichtige Rolle.

Demo von Autofill in Chrome
Autofill in Chrome

Eine reibungslose Autofill-Funktion kann zu mehr Conversions, schnelleren Formulareinreichungen, weniger Formularausstiegen und einer höheren Nutzerzufriedenheit führen.

Aber haben Sie einen Überblick über die Nutzung der Autofill-Funktion und die Probleme auf Ihrer Website?

In diesem Leitfaden wird erläutert, wie Sie Daten dazu erheben und analysieren können, wie Nutzer die Funktion „Autofill“ in Ihren Formularen verwenden.

So können Sie diese Autofill-Statistiken verwenden:

  • Passen Sie Ihren Testansatz an die Workflows echter Nutzer an. Wenn die Statistiken zur Autofill-Nutzung darauf hinweisen, dass Ihre Nutzer Autofill häufig verwenden, ist es wichtig, Autofill-Tests in Ihre Workflows einzubinden.
  • Regressionen erkennen Vergleichen Sie Autofill-Nutzungssignale für einzelne Felder zwischen Bereitstellungen, die sich auf die Nutzerfreundlichkeit von Formularen auswirken. Große Abweichungen können bedeuten, dass sich das Autofill-Verhalten verschlechtert hat.
  • Achten Sie darauf, dass Ihre Autofill-freundliche Implementierung wie erwartet funktioniert. Erkennen Sie Trends, bei denen Nutzer Felder manuell ausfüllen, für die Sie die automatische Vervollständigung bevorzugen würden.

Demo und Code

Sehen Sie sich unsere Demo an und sehen Sie sich den Code auf GitHub an.

Demo des Autofill-Beobachters
Verwenden Sie den Democode, um die Nutzeraktionen in jedem Formularfeld programmatisch zu beobachten (leer lassen, manuell ausfüllen, mit Autofill ausfüllen oder mit Autofill ausfüllen und dann das Feld ändern). Probieren Sie es aus.

Versuchen Sie Folgendes:

  • Alle Felder automatisch ausfüllen
  • Füllen Sie ein Feld automatisch aus und leeren Sie es dann manuell.
  • Ein Feld automatisch ausfüllen und dann manuell ändern
  • Füllen Sie ein Feld vollständig manuell aus.
  • Lassen Sie ein Feld leer.

Unterstützte Browser

Die Demo funktioniert auf den neuesten Geräten und mit den neuesten Browserversionen. Dazu wird der CSS-Pseudo-Klasse :autofill erkannt, die in allen Browsern gut unterstützt wird.

Schritt 1: Autofill-Daten erfassen

Autofill-Status definieren

Definieren Sie zuerst die Status der Autofill-Felder, die Sie interessieren:

  • EMPTY: Der Nutzer lässt das Feld leer.
  • AUTOFILLED: Der Nutzer füllt das Feld nur mithilfe der Autofill-Funktion aus.
  • AUTOFILLED_THEN_MODIFIED: Der Nutzer füllt das Feld zuerst mit Autofill aus und bearbeitet den automatisch ausgefüllten Wert dann manuell. Beispiel: Der Nutzer füllt seine Adresse und Kontaktdaten automatisch aus, gibt aber manuell eine andere Telefonnummer ein.
  • ONLY_MANUAL: Der Nutzer füllt das Feld vollständig manuell aus.
// Possible values for autofill statuses
const EMPTY = 'empty';
const AUTOFILLED = 'autofilled';
const AUTOFILLED_THEN_MODIFIED = 'autofilled-then-modified';
const ONLY_MANUAL = 'only-manual';

Dienstfunktionen implementieren

Jetzt ist es an der Zeit, die Hauptfunktion dieses Codes zu implementieren: Prüfen, ob ein Feld gerade automatisch ausgefüllt wurde. Im Hintergrund werden dazu zwei Funktionen verwendet:

  • getAllAutofilledFields prüft alle <input>- und <select>-Elemente in einem bestimmten Formular auf die CSS-Pseudoklasse :autofill. Es wird eine Liste der Elemente ausgegeben, die automatisch ausgefüllt wurden.
  • checkIsAutofilled prüft dann, ob ein bestimmtes Element Teil dieser Liste ist.
// 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);

Außerdem benötigen Sie eine Dienstprogrammfunktion, um zu prüfen, ob ein Feld leer ist.

// 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;
}

Autofill-Status initialisieren

Erstellen Sie ein globales Objekt namens autofillStatuses, um den Autofill-Status jedes Felds zu speichern.

Erfassen Sie alle Feld-ids aus dem Formular und initialisieren Sie den Status jedes Felds auf 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'));

Um alle gewünschten Feldelemente zu erfassen, verwendet initializeAutofillStatuses eine Dienstprogrammfunktion:

// Collect all field elements for a given form
function getAllFieldsAsArray(formElement) {
  return Array.from(formElement.querySelectorAll('input, select'));
}

Änderungen beobachten

Jetzt können Sie das Autofill-Verhalten beobachten.

Fügen Sie jedem Formularelement einen Listener für das Ereignis „Änderung“ hinzu. Wenn sich etwas ändert, wird mithilfe der Dienstprogrammfunktion checkIsAutofilled geprüft, ob das Element derzeit automatisch ausgefüllt wird. Anschließend wird der Autofill-Status des Elements im autofillStatuses-Objekt basierend auf dem aktuellen und dem vorherigen Status aktualisiert.

Wenn der vorherige Status beispielsweise AUTOFILLED war und das Feld jetzt nicht automatisch ausgefüllt wurde (d. h., es hat nicht die Klasse :autofill), wurde es nach dem automatischen Ausfüllen manuell aktualisiert. Der Status wird daher auf AUTOFILLED_THEN_MODIFIED aktualisiert.

// 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'));

Ergebnisse an Ihren Server senden

Sende das autofillStatuses-Objekt nach dem Senden des Formulars an den Server. Für ein Adressformular würden Sie beispielsweise die folgenden Daten auf dem Server erhalten:

{
    "name": "only-manual",
    "street-address": "only-manual",
    "postal-code": "autofilled-then-modified",
    "city": "autofilled",
    "country": "autofilled"
}
Demo für Autofill-Beobachter: Anzeigebereich für verschiedene Autofill-Status
Anzeigebereich für den Autofill-Status verschiedener Felder. Nur zu Demozwecken.

Schritt 2: Ergebnisse analysieren

Sie können die von vielen Nutzern empfangenen autofillStatuses-Objekte zusammenfassen und Trends in den Daten analysieren.

Sehen Sie sich zuerst die Statistiken zur allgemeinen Autofill-Nutzung an: Welcher Prozentsatz Ihrer Nutzer verwendet die Browser-Autofill-Funktion, um mindestens ein Feld auszufüllen?

Anschließend können Sie sich einzelne Felder genauer ansehen. Angenommen, Sie stellen fest, dass ein erheblicher Teil der Nutzer bestimmte Felder nicht automatisch ausfüllt, die für die automatische Vervollständigung geeignet sein sollten. Sie können jetzt mögliche Gründe untersuchen.

  • Sind die Felder <label> unklar? Gibt es Hinweise oder Platzhalter, die irreführend sein könnten?
  • Haben Sie die richtige Syntax für den Wert autocomplete verwendet? Ein häufiges Problem ist <input autocomplete="first-name">, das von Browsern nicht ausgefüllt wird, da der richtige Wert "given-name" ist.

Fazit

Wenn Sie das Autofill-Verhalten verstehen und nutzen, können Sie die Nutzerfreundlichkeit Ihrer Website verbessern. Implementieren Sie die in diesem Leitfaden beschriebenen Techniken, um wertvolle Informationen dazu zu erhalten, wie Nutzer mit Ihren Formularen interagieren, und Verbesserungsmöglichkeiten zu identifizieren.

Denken Sie daran, dass das automatische Ausfüllen ein leistungsstarkes Tool ist, um die User Journey zu optimieren. Wenn Sie Ihre Formulare für das automatische Ausfüllen optimieren, können Sie die Nutzerfreundlichkeit für Ihre Besucher verbessern.

Alle Ressourcen zum automatischen Ausfüllen