Autofill und vorausgefüllte Felder sind zwei Wege, Besuchern das Tippen zu ersparen. Autofill kommt vom Browser. Vorausgefüllte Felder kommen aus deinem Backend. Zusammen heben sie die Abschlussraten deutlich an.
Dieses Kapitel behandelt, was beides leistet, wie es funktioniert, wann du was einsetzt und wie du es richtig umsetzt.
Der messbare Nutzen von Autofill und vorausgefüllten Feldern
Eine Studie von Chrome Developers hat Tausende Formulare in den USA ausgewertet. Wenn Besucher die Autofill-Funktion ihres Browsers nutzen, füllen sie Formulare etwa 35 % schneller aus. Ihre Abbruchrate sinkt um etwa 75 %, selbst wenn Autofill nur einen Teil des Formulars ausfüllt. Nutzer müssen weiterhin prüfen und bestätigen, was der Browser eingetragen hat, aber der geringere Tippaufwand macht den eigentlichen Unterschied.
In einem Datensatz über mehrere Formulartypen löste Autofill bei 23 % der Nutzer während ihres Formularwegs aus. Diese Nutzer schlossen das Formular zu 71 % ab. Bei Besuchern ohne Autofill lag die Abschlussrate bei 59 %. Diese Lücke von 12 Prozentpunkten summiert sich schnell, wenn du Formulare in großem Umfang betreibst.
Vorausgefüllte Felder zeigen eine ähnliche Wirkung. Wenn ein Formular teilweise ausgefüllt erscheint, schließen Nutzer es eher ab, als wenn sie ein leeres Formular sehen. Das funktioniert, weil es sich leichter anfühlt, etwas Begonnenes zu beenden, als bei null anzufangen.
Wie Autofill funktioniert und was du tun musst, um es zu unterstützen
Die meisten Besucher nutzen heute einen Browser mit Autofill. Chrome und alle anderen gängigen Browser haben es. Viele nutzen Passwortmanager, die die Autofill-Fähigkeit noch erweitern. Aber Autofill funktioniert nur, wenn dein Formular darauf eingerichtet ist.
Der Browser betrachtet den Namen jedes Eingabefelds und das Attribut „type“. Wenn dein Feld etwas Allgemeines wie „field1“ oder „input2“ heißt, weiß der Browser nicht, womit er es füllen soll. Wenn du es „email“ nennst und den Typ auf „email“ setzt, weiß der Browser Bescheid. Wenn du es „shipping_address_line_1“ nennst und das Attribut „autocomplete“ auf „address-line1“ setzt, weiß der Browser genau, was er eintragen soll.
Dein HTML muss zu dem passen, was Browser erwarten. Nutze Standardnamen für Felder. Setze das richtige Attribut „type“ (email, tel, number, text). Ergänze das Attribut „autocomplete“ mit dem richtigen Wert für jedes Feld. Die häufigsten Felder, bei denen Nutzer Autofill erwarten, sind E-Mail-Felder (type="email" und autocomplete="email"), Telefonfelder (type="tel" und autocomplete="tel"), Adressfelder (bestimmte autocomplete-Werte wie autocomplete="address-line1" für die Straße, autocomplete="address-level1" für das Bundesland, autocomplete="postal-code" für die Postleitzahl) und Namensfelder (type="text" und entweder autocomplete="given-name" für den Vornamen oder autocomplete="family-name" für den Nachnamen).
Wenn dein Formular das Attribut „autocomplete“ ganz weglässt, versuchen Browser trotzdem, anhand der Feldnamen zu raten. Ausdrückliche autocomplete-Werte funktionieren aber besser. Die Mühe, diese Attribute richtig zu setzen, zahlt sich jedes Mal aus, wenn der Browser jemandes Adresse einträgt, ohne dass er sie tippen muss.
Wie vorausgefüllte Felder funktionieren und wann sie wirklich helfen
Vorausgefüllte Felder funktionieren am besten, wenn der Nutzer weiß, dass du die Informationen hast. Wenn sich jemand in sein Konto eingeloggt hat, erwartet er, dass Telefonnummer und Name schon dastehen. Wenn er auf einen Link in einer E-Mail mit „Bestätige deine Adresse“ geklickt hat, erwartet er, dass die Adresse vorausgefüllt erscheint. Die Daten sind keine Überraschung.
Fülle gängige Felder vor, die Nutzer dir schon gegeben haben. Die E-Mail, wenn sie sich mit E-Mail angemeldet haben. Den Firmennamen, wenn sie sich mit einer Firma registriert haben. Jede Adresse, nach der du schon gefragt hast. Lass Felder leer, die neue Informationen abfragen. Ein Besucher will sehen, dass du dir gemerkt hast, was er dir gesagt hat, aber er will auch Kontrolle darüber, was in ein Formular kommt, das er gleich absendet.
Transparenz zählt hier. Mach klar, warum diese Felder vorausgefüllt sind. „Wir haben deinen Firmennamen gespeichert“ oder „Das ist die Adresse, die du uns beim letzten Mal genannt hast“ ist in zwei Sekunden als kleiner Hinweis über dem Formular ergänzt und beseitigt Verwirrung. Reibung entsteht, wenn sich Felder so anfühlen, als würden sie ohne Einwilligung gefüllt.
Wann du mit dem Vorausfüllen zurückhaltend sein solltest und was schiefgehen kann
Vorausgefüllte Felder funktionieren nur, wenn die Daten richtig und aktuell sind. Wenn ein Besucher seine Telefonnummer geändert hat, das Formular aber aus einer alten Datenbank zieht, sieht er falsche Informationen und muss sie korrigieren. Diese Reibung macht den Zweck zunichte. Gib Nutzern immer die Möglichkeit, vorausgefüllte Daten zu bearbeiten und zu korrigieren. Sperre ein Feld nie so, dass sie den Support kontaktieren müssen, um es zu ändern.
Wenn du dir bei der Datengenauigkeit nicht sicher bist, fülle nur die Felder vor, die du regelmäßig aktualisierst, und lass die anderen leer. In regulierten Branchen wie Finanzdienstleistungen oder Gesundheitswesen solltest du sensible Felder auch dann nicht vorausfüllen, wenn du die Daten hast. Fülle Zahlungsarten im Checkout nur vor, wenn der Besucher diese Zahlungsart ausdrücklich gespeichert hat. Das Ziel ist, die Reibung für Besucher zu senken, nicht den Anschein eines fertig ausgefüllten Formulars zu erzeugen.
Autofill und vorausgefüllte Felder kombinieren für die größte Wirkung
Am stärksten ist es, beides gleichzeitig zu nutzen. Für Besucher, die eingeloggt sind, fülle die Daten vor, die dein System hat. Für Besucher mit neuem Browser oder Gerät sorge dafür, dass deine autocomplete-Attribute richtig gesetzt sind, damit das Autofill ihres Browsers funktionieren kann. Manche Besucher sehen vorausgefüllte Daten. Manche nutzen Autofill. Manche beides. So oder so braucht das Formular weniger Tippen und die Abschlussraten steigen.
Verschiedene Besucher kommen in verschiedenen Situationen an. Ein wiederkehrender Kunde, der eingeloggt ist, ist ein Szenario. Ein neuer Besucher bei der ersten Interaktion ein anderes. Ein wiederkehrender Besucher mit neuem Gerät ein drittes. Jeder profitiert vom einen oder anderen Mechanismus. Zusammen schaffen sie ein Formularerlebnis, das sich effizient anfühlt, egal welchen Weg der Besucher nimmt.
Was sich gut zum Vorausfüllen eignet und was du leer lassen solltest
Autofill und Vorausfüllen sind bei allgemeinen Angaben am wirksamsten. E-Mail, Telefon, Name, Adresse, Firmenname, Postleitzahl. Diese Felder kommen in vielen Formularen vor, sodass sowohl Besucher als auch Browser davon profitieren, dass sie gemerkt werden.
Bei sensiblen Angaben sei wählerisch. Finanzformulare sollten Zahlungsarten nicht vorausfüllen, es sei denn, der Besucher hat eine ausdrücklich gespeichert. Gesundheitsformulare sollten die Krankengeschichte nicht vorausfüllen. Sicherheitsfelder wie Passwörter sollten nie manuell vorausgefüllt werden (Passwortmanager übernehmen das automatisch). Wenn deine Branche Compliance-Vorgaben hat, befolge sie unabhängig vom Komfort.
So misst du die Wirkung auf deine Abschlussraten
Aus deinen Formularabsendungen siehst du nicht, ob ein Besucher Autofill genutzt hat. Aber du kannst die Wirkung messen, indem du die Abschlussraten vor und nach der Umsetzung der Autofill-Unterstützung vergleichst. Wenn dein Code heute nicht autofill-freundlich ist, setze deine autocomplete-Attribute richtig. Miss die Abschlussrate eine Woche lang und vergleiche sie dann mit der folgenden Woche. Eine messbare Steigerung sollte sich zeigen.
Bei vorausgefüllten Feldern ist der Test ähnlich. Wenn du deine Zielgruppe segmentieren kannst, zeige einigen Besuchern vorausgefüllte Daten und anderen leere Felder. Die Abschlussrate sollte in der vorausgefüllten Gruppe höher sein. Wenn nicht, sind entweder deine Daten ungenau oder die Zahl der vorausgefüllten Felder erzeugt Verwirrung statt Schwung.
Häufig gestellte Fragen
Funktioniert Autofill auf dem Smartphone genauso wie am Desktop?
Ist es sicher, Autofill für Passwortfelder zu nutzen?
Kann ich ein Formular über einen URL-Parameter vorausfüllen?
Was passiert, wenn automatisch ausgefüllte Daten falsch sind?
Senkt das Vorausfüllen die Datenqualität oder führt es zu veralteten Informationen?
Welche Formulartypen profitieren am meisten von Autofill und Vorausfüllen?
Autofill und vorausgefüllte Felder liefern messbare Ergebnisse. Die 35 % Zeitersparnis und die 75 % weniger Abbrüche gelten für die Besucher, die sie nutzen. Am besten wirken sie zusammen mit einem kurzen Formular und klaren Beschriftungen. Zusammen verstärken diese drei Elemente die Abschlussgewinne deutlich.
Mehr zum Kürzen von Formularen findest du im kompletten Leitfaden zur idealen Formularlänge. Zur technischen Umsetzung siehst du, wie du Formulare mit Nutzerdaten vorausfüllst. Für die übergeordnete Optimierungsstrategie schau dir den Leitfaden zur Conversion-Optimierung von Formularen an.