Prototyp und Testformen

Formulare dienen in der Regel einem ganz bestimmten Zweck – der Erfassung von Daten von Benutzern in Ihrer Datenbank. Und während der Zweck von Formularen sehr einfach ist, kann die Erstellung eines Formulars, das Benutzer schnell ausfüllen können, eine überraschende Herausforderung sein.

Das Prototyping von Formularen ist ein wichtiger Bestandteil des Designprozesses. Es zwingt die Designer dazu, sich mit verschiedenen Aspekten ihres Formulars auseinanderzusetzen, die sie sonst vielleicht übersehen hätten – das Testen von Formularen durch die Benutzer hilft, Probleme zu erkennen, die in der Prototyping-Phase übersehen wurden.

Aber warum sollte man sich die ganze Mühe machen? Warum ist das eine gute Sache und wie profitieren die Benutzer davon? Lesen Sie weiter, um es herauszufinden.

Es gibt einige Gründe, warum UX-Designer in der Regel alle ihre Designs als Prototypen erstellen, bevor sie eine einzige Zeile programmieren.

Für den Benutzer mag ein Formular einfach und unkompliziert aussehen, wenn er es zum ersten Mal online sieht, aber oft verschwindet diese Illusion der Einfachheit, wenn er kryptische Beschriftungen und das seltsame Verhalten von Kontrollschaltflächen bemerkt. Für Designer mag es verlockend erscheinen, einfach nur ein paar Eingabefelder zusammenzustellen, aber das Ergebnis ist kein Formular, das den Benutzern weiterhilft.

Wenn Sie Prototypen von Formularen erstellen, bevor sie online gehen, tun Sie Ihren Benutzern einen großen Gefallen. Die meisten Designer werden dies bereits wissen, aber es lohnt sich immer wieder, es zu wiederholen: Prototyping und Testen ist der einzige Weg, um Probleme am Horizont zu erkennen.

Das Prototyping von Formularen kann so billig oder so teuer sein, wie es die Situation erfordert. Wenn Sie schnell und mit geringer Genauigkeit arbeiten, können Sie mit einem MVP-Formular viel Geld sparen, indem Sie sich und Ihre Benutzer vor Design-Fallen schützen.

Das Testen von Formularprototypen spielt eine wichtige Rolle bei der Überarbeitung Ihres Designs. Es gibt nichts Besseres, als Ihr Formular echten Nutzern, echten Menschen, vorzulegen und zu sehen, wie sie reagieren. Indem Sie die Benutzer beobachten und von ihnen lernen, werden Sie die guten und schlechten Aspekte des Formulars verstehen.

Und hier gibt es einen wichtigen Unterschied: Beim UX design gibt es fast nie ein Richtig oder Falsch; es gibt nur den Benutzer und seine Erfahrung. Manchmal kann ein hässliches Design, das Ihr Designteam in Angst und Schrecken versetzt, den Benutzern bequemer und einfacher erscheinen als ausgeklügelte Kreationen.

Und genau hier kommt das Testen Ihres Formulars ins Spiel. Gefällt den Benutzern das kleine Etikett? War es hilfreich oder hat es nur Platz auf dem Bildschirm weggenommen? Lässt das Eingabefeld die Benutzer verwirrt zurück? Was ist mit dem Format der Eingabe – war das auf Anhieb klar? Testen Sie das Design Ihres Formulars und finden Sie es heraus.

Die Erstellung eines Formulars kann auf den ersten Blick recht einfach erscheinen – aber je nach Ihren Anforderungen an die Benutzerfreundlichkeit kann es ziemlich viel Zeit und Sorgfalt erfordern. Es ist nicht immer einfach, ein Formular zu erstellen, das gut funktioniert und den Benutzern nicht schadet. Und wenn es um die Benutzerfreundlichkeit geht, kann die Struktur Ihres Formulars über den Erfolg oder Misserfolg der Benutzererfahrung entscheiden.

Das wireframing Ihres Formulars ist ein Muss, denn dabei werden Sie mit einigen entscheidenden Fragen konfrontiert. Wie viele Fragen sollte Ihr Formular zum Beispiel haben? Hat eine responsive Website Auswirkungen auf das Layout des Formulars?

Es ist immer ratsam, ein kurzes Formular zu verwenden, aber manchmal braucht man ein bisschen mehr Informationen. Wo ziehen Sie also die Grenze? Wo ist das richtige Gleichgewicht zwischen dem, was wir wollen, und dem, was der Benutzer will?

Weitere Möglichkeiten, ein Design zusammenzustellen, finden Sie in diesem Beitrag über Prototyping-Methoden.

Wenn Sie das wireframe Ihres Formulars entwerfen, sollten Sie sich ausschließlich auf das Wesentliche konzentrieren – jetzt ist nicht der richtige Zeitpunkt, um sich über Farbschemata oder Interaktion Gedanken zu machen. Sie müssen entscheiden, was Sie fragen wollen, wie Sie es fragen wollen und wo die wichtigsten Elemente des Formulars platziert werden.

Sobald Sie sich mit den Grundlagen Ihres Formulars befassen, werden Sie mit dem großen Ganzen konfrontiert. Beim Design eines Formulars müssen Sie viele damit zusammenhängende Konzepte im Auge behalten, z. B. die Datenintegrität.

Wie helfen diese Aktionsschaltflächen dem Benutzer? Gibt es irgendetwas in unserem Formular, das als zweideutig angesehen werden könnte? Wenn ja, werden Sie die Daten, die Sie mit Ihrem Formular erfassen, möglicherweise in Frage stellen – und damit den Zweck des Formulars völlig verfehlen.

Nachdem Sie verstanden haben, welche Rolle jedes Element in Ihrem Formular spielt und wie es sich auf das Produkt und den Benutzer auswirkt, haben Sie eine Blaupause, der Sie bei der Entwicklung Ihres Designs folgen können. Das bringt uns zum nächsten Schritt: dem Prototyping von Formularen.

Übrigens, wenn Sie sich für das Design von Formularen inspirieren lassen möchten, sehen Sie sich unsere Liste mit tollen Beispielen für Umfragen an.

Sie haben den wireframe und eine klare Vorstellung davon, was wo zu sehen sein muss. Nach dem Wireframe ist es an der Zeit, über die Details Ihres Designs nachzudenken – und Ihr bevorzugtes Prototyping-Tool zu öffnen.

Arbeiten Sie sich vom wireframe zum High-Fidelity-Prototyp vor – jetzt ist es an der Zeit, das Aussehen, die Interaktionen und alles, was mit Ihrem Formulardesign zusammenhängt, zu berücksichtigen. So wie das wireframing Ihres Formulars Sie dazu zwingt, sich auf die Erstellung einer soliden Struktur zu konzentrieren, werden Sie beim Prototyping von Formularen auf diese Struktur aufbauen.

Das wiederum führt dazu, dass Sie Ihre Aufmerksamkeit auf den eher visuellen und verhaltensbezogenen Teil Ihres Formular-Designs richten. Werfen wir also einen genaueren Blick darauf, worauf Sie beim Prototyping von Formularen besonders achten sollten.

Dies kann die meisten der klassischen Richtlinien des Formular-Designs beinhalten. Visuelle Hinweise wie der Fokus des Feldes sind wichtig, denn sie helfen dem Benutzer, sich auf das betreffende Feld zu konzentrieren und verringern die Wahrscheinlichkeit, dass er verwirrt ist. Sie möchten jeden möglichen Kontext einbeziehen, damit die Benutzer etwas haben, worauf sie sich stützen können, um Klarheit und Orientierung zu erhalten.

Die Art und Weise, wie sich Ihr Formular verhält, ist von entscheidender Bedeutung – Benutzer können nicht Computer sprechen, also muss Ihr Formular auf visuelle Weise kommunizieren. Das gilt für alles, vom Feldfokus bis zu Fehlermeldungen, Inline-Validierung und Schaltflächenstatus.

Beim Prototyping von Formularen sollten Sie alle Interaktionen einbeziehen, mit denen das echte Formular rechnen wird. Diese Interaktionen sind wichtige Hinweise darauf, was in dem Formular passiert – die Sichtbarkeit des Systemstatus ist etwas, das Sie beim Prototyping von Formularen nicht übersehen sollten. Der Benutzer unternimmt bereits eine kognitive Anstrengung, um das Formular auszufüllen. Lassen Sie sie sich nicht fragen, ob die Schaltfläche funktioniert!

Wir alle sind dankbar, wenn die Straßen einfach und gut sichtbar ausgeschildert sind, nicht wahr? Besonders an unbekannten Orten. Dieses Konzept können (und sollten) Sie auch beim Prototyping von Formularen anwenden. Die Benutzer füllen das Formular wahrscheinlich zum ersten Mal aus und bewegen sich dabei weitgehend auf unbekanntem Terrain.

Sie können den Benutzern helfen, indem Sie so viele Wegweiser wie möglich anbieten. Schauen Sie sich den Prototyp Ihres Formulars genau an und versuchen Sie, Lücken in den Anweisungen oder Versäumnisse bei der expliziten Benutzerführung zu erkennen. Hier sind einige Elemente, die Ihnen helfen können, ein reibungsloses und stressfreies Formular design zu erreichen.

Fügen Sie immer Platzhalter und Masken ein. Menschen schreiben Dinge auf ihre eigene Art und Weise, und es ist besser, wenn Ihr Formular angibt, wie die Daten geschrieben werden müssen – Masken sind bei Datumsangaben, Kreditkartennummern und sogar bei E-Mail-Feldeingaben üblich. Platzhalter können in allen Textfeldeinträgen verwendet werden, um die Übersichtlichkeit zu erhöhen.

Haben Sie beschreibende Texte. Der geschriebene Text Ihres Formulars ist ein Schlüsselelement, um dem Benutzer Informationen zu geben. Der Text von Fragen, Beschriftungen, Popup-Fenstern und Schaltflächen muss so anschaulich wie möglich sein.

Sorgen Sie beim Prototyping von Formularen für eine Inline-Validierung. Es ist sehr ärgerlich, wenn man ein ganzes Formular ausfüllt und feststellt, dass man es wegen eines kleinen Fehlers im zweiten Eingabefeld nicht abschicken kann. Die Inline-Validierung hilft Benutzern, zusätzlichen Stress und Frustration zu vermeiden, indem sie ihnen genau sagt, was falsch gelaufen ist, sobald der Fehler aufgetreten ist.

Das Prototyping von Formularen kann weiter gehen als das eigentliche Formular. Was die Benutzerfreundlichkeit betrifft, so schätzen die Benutzer in der Regel eine Bestätigung, dass die Dinge reibungslos verlaufen sind und das Ziel erreicht wurde. Häufig tun Designer dies, indem sie den Benutzern nach dem Ausfüllen des Formulars einen Erfolgsstatus-Bildschirm oder eine Erklärung zeigen.

Es ist eine gute Idee, diese Post-Task-Bildschirme als Teil des Prototyping-Prozesses für Formulare zu betrachten. Sie sind zwar nicht unbedingt dasselbe, aber sie arbeiten zusammen, um Daten von den Benutzern zu erhalten und trotzdem ein gutes Erlebnis zu bieten.

Einige Designer stellen eine Verbindung zwischen dem Formular und einer Landing Page her, die dem doppelten Zweck dient, eine Erfolgsmeldung und einen zusätzlichen Zweck zu liefern. Dieser zusätzliche Zweck kann Cross-Selling, Werbung für Inhalte oder etwas anderes sein, das nichts mit dem Formular selbst zu tun hat – die Aufmerksamkeit des Benutzers haben Sie ja schon… das können Sie auch!

Richtig. Das Prototyping von Formularen ist der Schritt vor dem eigentlichen Testen. Ihr High-Fidelity-Formularprototyp ist die greifbare Manifestation Ihrer Ideen, und jetzt ist es an der Zeit, diese Ideen auf den Prüfstand zu stellen. Buchstäblich.

Das Testen von Formularprototypen unterscheidet sich nur geringfügig vom Testen anderer Webprodukte. Sie sollten sicherstellen, dass Sie die Reaktionen der Benutzer genau beobachten und beachten – bemerken Sie nicht nur, dass sie verwirrt aussehen. Achten Sie darauf, was sie taten, als die Verwirrung auftrat und wie sie versuchten, das Problem zu umgehen.

Wir bei Justinmind glauben fest an das qualitative Testen. Und damit meinen wir, dass Sie bei jeder Art von Benutzertest die wichtigsten Metriken zur Hand haben müssen. Diese Metriken dienen als Indikator dafür, wie nah oder wie weit Ihr Formularprototyp von der Fertigstellung entfernt ist.

Definieren Sie, was in Ihrem Formular am wichtigsten ist. Woran können Sie schließlich erkennen, dass Ihr Formular gut genug ist, um in die virtuelle Wildnis entlassen zu werden? Auf welche Dinge sollten Sie besonders achten?

UX-Designer achten häufig auf die Zeit, die die Benutzer zum Ausfüllen des Formulars benötigen, da dies ein wichtiger Hinweis auf die Komplexität des Formulars ist. Andere Teams schauen sich Heatmaps an, um zu sehen, ob eine der Fragen geklärt werden muss, oder wie viele Versuche die Benutzer benötigen, um einzelne Felder erfolgreich auszufüllen.

Ihre Metriken hängen wahrscheinlich von der Art des Formulars ab, für das Sie einen Prototyp erstellen. Längere und komplexere Formulare haben in der Regel mehrere Metriken, die jede Seite, jeden Bildschirm oder jeden Abschnitt des Formularprototyps bewerten.

Nachdem Sie nun festgelegt haben, was Ihnen und Ihrem Team beim Testen von Prototypen wichtig ist, müssen Sie die Messlatte dafür festlegen, was akzeptabel ist und was nicht.

Das bedeutet, dass Sie anhand Ihrer Schlüsselkennzahlen einen bestimmten Standard festlegen müssen, der das Minimum an Benutzerfreundlichkeit für ein gutes Formular darstellt. Wenn Sie also festgestellt haben, dass die Zeit bis zur Fertigstellung die wichtigste Kennzahl für Ihren Formularprototyp ist, müssen Sie die maximale Zeit festlegen, die die Benutzer benötigen können.

Sie brauchen diese Standards, um eine Linie im Sand zu ziehen. Nachdem Sie einen Prototyp Ihres Formulars erstellt und diesen Prototyp echten Nutzern zur Verfügung gestellt haben, werden diese Standards der Maßstab sein, an dem Sie erkennen können, ob Ihr aktuelles Design erfolgreich war oder nicht.

Wenn Sie die Leistung Ihres Formularprototyps mit den gesetzten Standards vergleichen und er nicht ausreicht, ärgern Sie sich nicht. Das Aufspüren verwirrender Bereiche, die Identifizierung zweideutiger Aktionskontrollen oder die Verbesserung kryptischer Texte ist die Mühe wert, den Prototyp zu wiederholen und erneut zu testen! Sie sparen Zeit, Mühe und eine beträchtliche Menge Geld, wenn Sie diese Probleme jetzt beheben.

Indem Sie Ihr Design nach jedem Benutzertest des Formularprototyps mehrmals überarbeiten, können Sie problematische Bereiche identifizieren und beseitigen – das Ergebnis ist eine effizientere Nutzung Ihrer Mittel und generell zufriedenere Benutzer! Es geht darum, das Feedback der Nutzer zu verstehen und das Design entsprechend zu ändern.

Die Prototyping-Formulare sind der Moment der Wahrheit. Das ist der Moment, in dem Sie mit den Ideen konfrontiert werden, die Ihnen in Ihrem Kopf großartig erschienen. Aber sind es Ideen, mit denen die Benutzer etwas anfangen können? Führen sie zu einem Formularprototyp, der den Benutzern hilft, das gewünschte Ziel zu erreichen?

Das Prototyping hilft den UX-Designern, das Formular aus einer besseren Perspektive zu betrachten, ihre Ideen zu kommunizieren und die bisher geleistete Arbeit zu validieren. Jede neue Änderung am Formularprototyp bedeutet, dass Sie einem qualitativ hochwertigen Produkt einen Schritt näher kommen – vorausgesetzt, Sie verfügen über eine solide Datenbasis aus Benutzertests.

Prototyping von Formularen und Testen dieser Formulare sind die beiden Wege, die zum Erfolg führen. Die meisten Abkürzungen sind gefährliche Wege, die den Benutzer auf eine rutschige Piste mit unklaren Texten, verwirrenden Fragen und allgemeiner Frustration führen. Vernachlässigen Sie die Erstellung von Prototypen und das ordnungsgemäße Testen Ihres Formulars auf eigene Gefahr!