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.
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.
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-id
s 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"
}
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.