In den vorherigen Modulen haben Sie gelernt, wie Sie ein Formular erstellen, wie Sie Nutzern helfen, Daten nicht noch einmal einzugeben, und wie Formulardaten validiert werden. Wie können Sie jetzt dafür sorgen, dass das Formular nutzungsfreundlich ist? Sie können das Formular testen und analysieren, um diese Frage zu beantworten.
Funktioniert das Formular auch auf anderen Geräten?
Sie prüfen zuerst, ob das Formular auf Ihrem Gerät funktioniert. Es gibt jedoch viele Arten von Geräten, die Ihre Nutzer verwenden können. Wie können Sie testen, ob Ihr Formular mit anderen Geräten funktioniert?
Testen Sie das Formular zuerst auf einem Desktop-Gerät. Verwenden Sie dann ausschließlich Ihre Tastatur. Testen Sie es als Nächstes auf einem Smartphone. Sie haben das Formular jetzt mit verschiedenen Eingabemethoden (Tastatur, Touchscreen und Maus), unterschiedlichen Bildschirmgrößen, Browsern und Betriebssystemen getestet.
Haben Sie weitere Geräte, auf denen Sie Tests durchführen können? Testen Sie das Formular an allen. Je mehr Geräte, Browser, Browserversionen und Betriebssysteme Sie testen können, desto besser!
Sie können Ihr Formular auch mit einem Testdienst in vielen verschiedenen Browsern, verschiedenen Browserversionen, verschiedenen Geräten und Betriebssystemen testen. BrowserStack bietet kostenlose Testkonten für Open-Source-Projekte, um Tests in verschiedenen Browsern, Geräten und Betriebssystemen zu ermöglichen.
Wie können Sie testen, ob Ihr Formular auch bei anderen funktioniert?
Ihr erstes Formular ist fertig. Sie investieren viel Zeit dafür, dass es gut funktioniert. Wie können Sie prüfen, ob Ihr Formular auch für alle anderen Nutzer nutzbar ist? Als ersten Schritt können Sie Ihre Freunde und Kollegen bitten, Ihr Formular auszufüllen.
Sie sitzen nebeneinander oder teilen einen Bildschirm. So können Sie sehen, wie Nutzer mit Ihrem Formular interagieren. Seien Sie dabei, wenn Ihr Kind das Formular ausfüllt. Bitte ihn, laut zu sagen, was er tut und ob er Probleme hat. Nachdem sie die Aufgabe abgeschlossen hat, stellen Sie ihnen Fragen. War ihnen klar, was sie ausfüllen sollten? Gab es beim Ausfüllen des Formulars Probleme? War etwas unklar? Mithilfe dieser Fragen können Sie Ihre Formulare noch besser gestalten.
Wie können Sie die Leistung Ihres Formulars messen?
Sie haben bestätigt, dass Ihr Formular für andere Personen verwendet werden kann. Als Nächstes sollten Sie die Leistung Ihres Formulars messen. Dafür gibt es kostenlose Tools. Sehen wir uns einige davon an.
PageSpeed Insights (PSI)
PSI misst die Leistung Ihrer Website und gibt Ihnen Tipps zur Verbesserung.
Ausprobieren: PageSpeed stellt anhand von Lab- und Felddaten einen Leistungsbericht zur Verfügung. Eine schnelle Website ist der erste Hinweis darauf, dass Ihr Formular nutzungsfreundlich ist. Ihre Website ist noch nicht schnell? PSI zeigt Ihnen Empfehlungen zur Leistungssteigerung.
Sehen Sie sich noch einmal den Bericht der Website an, die Sie zuvor mit PSI getestet haben. Sehen Sie sich die Informationen zu Core Web Vitals an. Dies ist eine Zusammenfassung, wenn Ihre Website die Core Web Vitals-Kriterien erfüllt. Mit Core Web Vitals können Sie die Nutzerfreundlichkeit einer Webseite analysieren.
Leuchtturm
Mit Lighthouse können Sie Probleme in Bezug auf Leistung, Suchmaschinenoptimierung (SEO), Best Practices und Barrierefreiheit erkennen.
Es gibt verschiedene Möglichkeiten, Lighthouse zu verwenden. Eine Möglichkeit besteht darin, den Code direkt in den DevTools auszuführen. Öffne die URL mit deinem Formular in Chrome und öffne die Entwicklertools, wechsle zum Tab „Lighthouse“ und führe die Prüfung aus.
Die Leistungsmesswerte von PSI werden angezeigt. Außerdem prüft Lighthouse deine Website auf SEO, Best Practices und Barrierefreiheit. Sie haben vergessen, ein Label mit einer Formularsteuerung zu verknüpfen? Lighthouse warnt Sie und stellt Ihnen eine Anleitung zur Behebung des Problems zur Verfügung.
Tools zur Identifizierung häufiger Probleme
Es gibt viele Tools, mit denen sich häufige Probleme identifizieren lassen.
Eine Möglichkeit ist z. B. die Erweiterung für die Fehlerbehebung für Formulare.
Sie werden dann gewarnt, wenn autocomplete-Attribute, nicht standardmäßige Attribute, fehlende oder leere Labels usw. fehlen.
Sie können auch ein Tool zur Bewertung der Barrierefreiheit wie WAVE oder axe verwenden. Diese Tools benachrichtigen Sie über fehlende Labels, fehlende Verbindungen zwischen Labels und Formularsteuerelementen, unzureichende Farbkontraste und viele weitere Probleme mit der Barrierefreiheit.
Wie können Sie die Nutzerfreundlichkeit von Formularen im Blick behalten?
Wenn Sie die tatsächliche Nutzererfahrung in Ihren Formularen beobachten, können Sie neue Probleme schnell erkennen. Sehen wir uns an, wie Sie Ihr Formular im Blick behalten.
PSI
Eine Möglichkeit, die Nutzerfreundlichkeit zu überwachen, ist die erneute Verwendung von PSI. Sie können die PSI API verwenden, um Ihr eigenes Monitoringtool zu erstellen. In der PageSpeed Insights API wird beschrieben, wie Sie dies tun.
PSI enthält Daten aus dem Chrome User Experience Report (CrUX)-Dataset, sofern diese für die angegebene URL verfügbar sind. So sehen Sie Felddaten auch direkt im Bericht.
Leuchtturm
Lighthouse kann als Befehlszeilentool, als Knotenmodul oder mit den Lighthouse-CI-Tools verwendet werden. Unter Leistungsüberwachung mit Lighthouse CI wird erläutert, wie Lighthouse zu einem Continuous-Integration-System wie GitHub Actions hinzugefügt wird.
Es gibt viele weitere tools zum Messen und Überwachen deiner Website. Einige sind als Webtools verfügbar, andere ermöglichen die Ausführung der Prüfung in der Befehlszeile, während andere eine API zur Einbindung in Ihre Tools bieten.
Formulare analysieren
Sie haben Ihr Formular mit echten Nutzenden getestet und gelernt, wie Sie es messen und überwachen. Wie können Sie Statistiken über Ihre Nutzer und deren Interaktion mit Ihrem Formular erfassen? Dazu können Sie ein Analysetool verwenden. Sehen wir uns ein Beispiel an und wie es funktioniert.
Analysen
Ein Tool, das Sie verwenden können, ist Google Analytics (GA). Nach der Einrichtung erhalten Sie ein JavaScript-Snippet, das Sie auf jeder Seite Ihrer Website einfügen. Jetzt können Sie herausfinden, wie Nutzer Ihre Website verwenden.
Wie viele Nutzer besuchen die Seite mit Ihrem Formular? Wie viele Nutzer füllen das Formular aus und wechseln zur nächsten Seite? Sie erhalten Antworten auf diese Fragen mithilfe von Analysetools.
Sie können auch erweiterte Analyseberichte einrichten. Möchten Sie wissen, wie viele Nutzer auf die Schaltfläche Senden klicken? Sie können Ereignisse definieren und einbinden, um dies zu analysieren.
Es stehen zahlreiche Analysetools zur Verfügung. Einige sind minimalistisch, andere bieten viele Optionen zur Individualisierung. Probieren Sie verschiedene Tools aus, um das für Ihre Anforderungen am besten geeignete Tool zu finden.
Wissen testen
Testen Sie Ihr Wissen über Testformulare
Was sind Felddaten?
RUM erfasst Messwerte aus folgenden Quellen: