So optimieren Sie Formulare, um die Vorteile von AutoFill zu nutzen

Veröffentlicht: 2021-05-17

Überraschung! Mit AutoFill können Sie es Benutzern erleichtern, Ihre Produkte online zu kaufen.

Es muss Ihr Glückstag sein. Oder, naja, Jahre?

Das automatische Ausfüllen ist nicht neu, obwohl es sich im Laufe der Zeit verbessert hat. Es ist jedoch eine fantastische Möglichkeit, Benutzer zu ermutigen, Ihre Webformulare auszufüllen – egal, ob Sie möchten, dass sie Sie kontaktieren oder ihre Zahlungsinformationen eingeben, damit sie auf diese große, schöne Schaltfläche „Kaufen“ klicken können.

Das automatische Ausfüllen von Formularen nimmt Webformularen den ganzen Aufwand ab, der mühsam, zeitaufwändig und ein Hindernis für die Konvertierung sein kann. Wenn Sie Formulardaten für Ihre Benutzer automatisch ausfüllen, bieten Sie eine bessere Benutzeroberfläche und Benutzererfahrung (UX), indem Sie den Benutzern Zeit sparen und das Potenzial für Fehler (wie Tippfehler) reduzieren.

Es erspart den Benutzern auch, zu viel nachzudenken oder, schlimmer noch, bequem von ihrer Couch aufzustehen, um die gefürchtete Strecke zu ihrer Brieftasche zu gehen.

Sie denken vielleicht, dass wir dramatisch sind, aber manchmal ist Ihr Lead nach einem langen Arbeitstag zu erschöpft, um aufzustehen. Oder sie sind eine vielbeschäftigte Mutter, die dachte, sie würde in ihrer 5-minütigen Pause einen schnellen Einkauf tätigen, und plötzlich hat sie keine Zeit mehr.

In einer Studie fand Google heraus, dass Benutzer Formulare 30 % schneller ausfüllten, wenn das automatische Ausfüllen von Formularen aktiviert war. Diese Geschwindigkeit, kombiniert mit dem reinen Komfort des automatischen Ausfüllens, steigert die Formularübermittlungsraten und Conversions und sorgt gleichzeitig für zufriedene Benutzer. Und zufriedene Benutzer sind wiederkehrende Benutzer.

Aus diesem Grund stehen automatische Funktionen auf unserer Liste der Best Practices für das Formulardesign.

Wie funktioniert das automatische Ausfüllen Ihrer Webformulare also?

Alles beginnt damit, dass Ihr Webentwickler Ihre Formulare so optimiert, dass sie mit dem Browser des Benutzers funktionieren, damit er Ihre Formularfelder als das erkennen kann, was sie sind.

Wie funktioniert das automatische Ausfüllen?

Wie wäre es, wenn wir hier beginnen: Was ist überhaupt Autofill?

Autofill ist ein raffiniertes Tool, das von den meisten Browsern für ihre Benutzer angeboten wird. Wenn Benutzer das automatische Ausfüllen aktivieren, füllt ihr Browser automatisch Formulare für sie mit allen anwendbaren Benutzerdaten aus, die er gespeichert hat. Dadurch muss der Benutzer nicht jedes Feld von Hand ausfüllen.

Verschiedene Browser speichern leicht unterschiedliche Benutzerdaten, sind aber insgesamt ähnlich:

Grafik, die die Autofill-Elemente in verschiedenen Browsern zeigt

Hinweis: „Adressen“ umfasst Telefonnummern, E-Mail-Adressen und Lieferadressen.

Nun, wie wirkt das automatische Ausfüllen?

Es ist ziemlich einfach. Der Browser sammelt die Informationen, die ein Benutzer in frühere Formulare auf Websites anderer oder Ihrer eigenen eingegeben hat. Einige Benutzer richten möglicherweise sogar das automatische Ausfüllen in den Autofill-Einstellungen ihres Browsers ein und geben die Informationen direkt ein, um das Leben einfacher zu machen. In diesem Fall kann der Browser durch ein Authentifizierungsverfahren sensible Daten wie eine Zahlungsmethode speichern.

Benutzer steuern die Autofill-Einstellungen auf ihrer Seite über ihre Autofill-Einstellungen und können sie aktivieren oder deaktivieren.

Solange es aktiviert ist, verwendet ihr Browser mehrere Heuristiken, um zu bestimmen, welche Ihrer Formularfelder basierend auf Benutzerberechtigungen automatisch ausgefüllt werden können.

So fügen Sie Ihren Webformularen das automatische Ausfüllen von Formularen hinzu

Bist du bereit für gute Nachrichten?

Solange Sie Ihre Webformulare mit Best Practices für Formulare erstellen, ist das automatische Ausfüllen normalerweise eine Selbstverständlichkeit, da die Hauptfunktionalität in den Browser oder das Gerät des Benutzers integriert ist. Sie müssen sich also nur auf die Entwicklung von Formularen konzentrieren, die den Codierungsstandards entsprechen. Verwalten Sie das, und das automatische Ausfüllen sollte auf Ihren mobilen und Desktop-Formularen funktionieren.

Falls nicht, nennt Google zwei Gründe, warum das automatische Ausfüllen für Nutzer möglicherweise nicht funktioniert:

    1. Ihre Website ist möglicherweise nicht sicher genug, damit Chrome Benutzerdaten bereitstellen kann.
    2. Wenn Ihre Website sicher ist, kann Chrome Ihre Formularfelder möglicherweise nicht erkennen.

Um diese Probleme mit Ihren Webformularen zu vermeiden, stellen Sie sicher, dass Ihre Website sicher genug ist, um die Browserstandards zu erfüllen. Legen Sie Sicherheitsrichtlinien fest, halten Sie Ihre Website und Software auf dem neuesten Stand, verwenden Sie eine Firewall und ein VPN und verhindern Sie Datensilos.

Wenn Ihre Website sicher ist und das automatische Ausfüllen nicht von selbst funktioniert, vergewissern Sie sich, dass Ihr Formular den folgenden Best Practices für Formularcode entspricht.

Best Practices für Formulare, um sicherzustellen, dass das automatische Ausfüllen funktioniert

Während Browser ihre Magie entfalten, um das Leben der Benutzer einfacher zu machen, gibt es Möglichkeiten, wie Sie ihnen helfen können. Indem Sie Webformulare entwickeln, die dem Browser die richtigen Hinweise geben, können Sie garantieren, dass er Formulardaten für Ihre Benutzer automatisch ausfüllen kann.

Beginnen Sie damit, Browsern Hinweise zu geben, mit welcher Art von Daten Ihre Formularfelder ausgefüllt werden sollen, damit der Browser Ihr Formular leichter lesen und seine Arbeit erledigen kann.

Stellen Sie dazu sicher, dass Sie den richtigen Eingabetyp und die entsprechenden Eingabebezeichnungen verwenden. Sie sollten auch das Namensattribut und das Autocomplete-Attribut für jedes Eingabeelement bereitstellen. Das folgende Bild zeigt den allgemeinen Namen und die Attribute zur automatischen Vervollständigung gemäß den HTML-Standards, die Sie möglicherweise benötigen.

Google Developers-Attribute, um sicherzustellen, dass das automatische Ausfüllen funktioniert

Foto von Google Developers.

Um den Standardpraktiken für HTML-Formulare zu entsprechen, sollten Sie oder Ihr Website-Entwickler außerdem sicherstellen, dass Eingabeelemente in ein <form>-Tag eingeschlossen werden, um das automatische Ausfüllen zu aktivieren. Der Google Chrome-Webbrowser erfordert, dass sich Formularfelder in einem HTML-Formular-Tag befinden, oder er bietet nur Vorschläge und füllt keine Formulardaten automatisch aus.

Was Sie nicht tun sollten: Praktiken, die das automatische Ausfüllen verhindern

Während einige Praktiken Browsern helfen, Formulardaten automatisch auszufüllen, stehen andere im Weg. Stellen Sie beim Erstellen von Formularen sicher, dass Sie:

    • Vermeiden Sie Fallstricke bei der Feldvalidierung wie die clientseitige Validierung
    • Verwenden Sie Standard-Eingabefelder, anstatt eigene zu erstellen
    • Verwenden Sie das Platzhalterattribut in Eingabefeldern anstelle von gefälschten Platzhaltern
    • Kopieren Sie keine Lieferadresse in die Rechnungsadresse
    • Stellen Sie sicher, dass Ihre Formulare mit Passwort-Managern funktionieren
    • Manchmal sind Browserdaten nicht die einzige hilfreiche Hand, wenn es um das automatisierte Ausfüllen von Formularen geht.

Benutzer haben es satt, den Überblick über eine Million Passwörter zu behalten, und können Sie ihnen die Schuld geben? Nichts ist schlimmer, als ein Passwort zu erraten, bis Sie aus einem Konto ausgesperrt werden, oder ein Passwort aufzugeben und zurückzusetzen, nur um zu erfahren, dass Sie das aktuelle nicht verwenden können. (Hast du das nicht schon probiert?!)

Passwort-Manager wiederum, die alle Ihre Benutzernamen und Passwörter an einem Ort verfolgen, erfreuen sich zunehmender Beliebtheit. Die besten dieser Manager, wie LastPass und 1Password, bieten die Möglichkeit, Passwörter in Anmeldeformularen automatisch auszufüllen.

Für Websitebesitzer bedeutet dies, sicherzustellen, dass Ihre Anmeldeformulare mit Apps zum automatischen Ausfüllen von Passwörtern funktionieren.

Glücklicherweise hängen sich Passwort-Manager von selbst in korrekt gebaute Formulare ein – genau wie Browser. Befolgen Sie die obigen Formulartipps und Ihr Formular sollte nahtlos mit LastPass und 1Password funktionieren.

Aber wie bei Browsern gibt es Möglichkeiten, wie Sie Passwort-Managern helfen können, Ihr Formular zu lesen und deren Funktion zu gewährleisten:

    • Verwenden Sie keine Anmeldeformulare, die dynamisch Felder hinzufügen oder entfernen
    • Zeigen Sie Ihr Formular auf dem ersten Rendering der Webseite an
    • Verwenden Sie wie beabsichtigt Platzhalterattribute
    • Vermeiden Sie nach Möglichkeit mehrseitige Anmeldeformulare

So füllen Sie automatisch aus: Weitere Tipps

Wenn es um Form UX geht, ist das Erfüllen der Benutzererwartungen die Mindestanforderung, und das Übertreffen der Erwartungen ist das Ziel. Manchmal bedeutet dies, flexible Formularlayouts zu implementieren, um sich an unterschiedliche Benutzererwartungen anzupassen.

Im Fall der AutoFill-Funktion kann die Erstellung eines flexiblen Formularlayouts für Unternehmen, die in mehreren Ländern geschäftlich tätig sind oder Verbraucher in mehreren Ländern bedienen, von entscheidender Bedeutung sein, da Menschen auf der ganzen Welt Adressen unterschiedlich schreiben. Um den Erwartungen dieser Benutzer und Browser gerecht zu werden, sollten Sie ein flexibles Formular bereitstellen, das die Adressfelder entsprechend anpasst.

Einrichten von AutoFill-Formularen für Apps

Stellen Sie beim Erstellen einer App, auf die Benutzer auf Apple-Geräten zugreifen, sicher, dass Ihre App die Funktion zum automatischen Ausfüllen von Kennwörtern von Apple unterstützt, und richten Sie die zugehörigen Domänen Ihrer App wie hier beschrieben ein:

Anforderungen für das automatische Ausfüllen von iOS

Für Apps auf Android-Geräten füllt das Android-Framework zum automatischen Ausfüllen Formulare automatisch aus, solange Ihre App Standardansichten verwendet. Sie können die Funktionsweise Ihrer App innerhalb des Frameworks optimieren, indem Sie einen Autofill-Workflow abschließen, zugeordnete Domains einrichten, Felder als wichtig markieren und das Attribut android:autofillHints wie hier beschrieben verwenden:

Bedienung und Anweisungen zum automatischen Ausfüllen von Android

Lassen Sie sich bei Konvertierungen danken

Sicherzustellen, dass Ihre Formulare gut mit den Autofill-Funktionen von Browsern und Passwort-Managern funktionieren, ist eine der besten Möglichkeiten, die Formular-UX zu verbessern und Reibungsverluste beim Senden von Formularen zu reduzieren. Wer liebt es nicht, mit der Hälfte (oder weniger!) des Aufwands dasselbe Ergebnis zu erzielen?

Das automatische Ausfüllen erleichtert das Leben der Benutzer, indem Formulare schneller und einfacher ausgefüllt werden können, was bedeutet, dass die Benutzer das bekommen, wonach sie gesucht haben, und Sie mehr Conversions erzielen.

Und Conversions sind unserer Meinung nach die beste Möglichkeit, sich zu bedanken.

Sind Sie daran interessiert, Ihre Formulare zu einem Traum zu machen (auch bekannt als schnell, großartig, benutzerfreundlich und für das automatische Ausfüllen von Formulardaten optimiert)? Unser Team ist von all dem begeistert und wir lieben es zu reden. Greifen Sie zu.