![4 inspirierende Formularentwurfsmuster [FREE]](/cdn-cgi/image/width=1024,quality=83,format=auto/api/_files/skUfFRwsVbubAsUUd7xwq7/download/)
Eine von HubSpot durchgeführte Studie ergab, dass 82 % der Befragten angaben, den Kaufprozess auf einer Website aufgrund schlechter oder unvollständiger Formulare abgebrochen zu haben, und dass 93 % dieser Personen zum ersten Mal mit diesen Formularen auf Desktop-Computern in Berührung kamen.
Formulare sind ein wesentlicher Bestandteil Ihrer Website und Ihres Unternehmens, ganz gleich, ob Sie eine Umfrage durchführen, potenziellen Kunden eine Möglichkeit zur Kontaktaufnahme bieten oder zur Anmeldung für einen Newsletter auffordern. Es gibt viele Möglichkeiten, ein gut aussehendes und effektives Webformular zu erstellen, aber es gibt immer Raum für Verbesserungen. Formulare müssen nicht langweilig sein.
4 inspirierende Muster für die Gestaltung von Formularen [KOSTENLOS]
Ein gut gestaltetes Formular wertet das gesamte Design auf, ohne seinen Nutzen zu schmälern. Darüber hinaus funktionieren solche Formulare viel besser. Im neuen UI-Design-Framework von Salesforce, Lightning, können kleine Änderungen am Formulardesign die Formularkonvertierung verbessern. Gehen wir näher darauf ein.
Boxlose Formulare
Boxlose Webformulare sind Webformulare, die keine sichtbaren Boxen oder Ränder haben. Sie lassen Webformulare zeitgemäßer und moderner erscheinen, da sie nicht das traditionelle Aussehen von Webformularen mit umliegenden Kästen haben. Traditionelle Webformulare mit Rahmen können als veraltet angesehen werden.
Webformulare, die auf Kurven basieren, nutzen die Vorteile von gebogenen Linien und Ecken, um Interesse zu wecken. Kurven finden sich in den Formen und den Layouts wieder. Gut gestaltete geschwungene Boxen müssen nicht unbedingt dem traditionellen kastenförmigen Design folgen. Richtig gemacht, können Kurven den Blick sogar um das gesamte Webformular herumführen und Spannung zwischen negativem und positivem Raum erzeugen. Das verleiht dem Ganzen einen großen visuellen Reiz und kann dazu beitragen, ein langweilig aussehendes Webformular aufregender und ansprechender zu gestalten.
Animierte Formulare
Animierte Formulare werden mit einer gewissen Animation innerhalb des Formulars selbst gestaltet. Dies kann auf vielen verschiedenen Ebenen geschehen, von einfachen Animationen, die das Interesse wecken und die Aufmerksamkeit auf sich ziehen (wie springende Pfeile und Schaltflächen) bis hin zu komplexeren und aufwändigeren Designs, die das Beste aus dem animierten Webdesign herausholen, wie Hintergrundanimationen oder Übergänge zwischen Seiten. Der Hauptzweck des Einsatzes solcher animierten Effekte besteht darin, die Benutzererfahrung so attraktiv wie möglich zu gestalten - etwas, von dem wir alle wissen, dass die Benutzer mit diesen langweiligen Website-Formularen zu kämpfen haben!
Von unten oder von der Seite einschieben
Diese Webflow-Vorlage ermöglicht es den Benutzern, jederzeit ein Kontaktformular einzureichen, ohne das Gesamtbild zu beeinträchtigen. Sie können Ihren Kunden die Möglichkeit geben, sich mit Ihnen in Verbindung zu setzen, wann immer sie dazu bereit sind, indem Sie eine Kontakt-Schaltfläche am unteren Rand der Website einfügen.
Sie können auch ein Slide-out-Menü verwenden, damit die Besucher auf Ihr Formular zugreifen können. Anstatt die Besucher auf eine Kontaktseite zu schicken, ziehen Sie das Formular an der Seite des Bildschirms ein. Dies ist ein ausgezeichnetes Muster für Fälle, in denen jemand Informationen auf der Website nachschlagen möchte, während er Ihnen hilft.
Bildschirmfüllendes Formular
Eine großartige Technik, um die Aufmerksamkeit auf Ihr Formular zu lenken, ist die Beseitigung von Ablenkungen. Anstatt Ihr Formular an einer bereits überfüllten Stelle auf Ihrer Website (z. B. in der Fußzeile) unterzubringen, sollten Sie einen Punkt einbauen, an dem Sie das Formular bildschirmfüllend anzeigen können. Das hilft dem Benutzer, die gewünschten Informationen einfach und konzentriert einzugeben, und erleichtert ihm das Ausfüllen.
Formulare in natürlicher Sprache
Wenn Webformulare sprechen könnten, würden sie sich vielleicht so anhören: "Sie sind dabei, Ihre Informationen zu übermitteln. Sind Sie sicher? Das ist erforderlich." Formulare im Internet sind nicht immer so einfach, wie wir es uns wünschen. Heutzutage erwarten wir, dass Web-Erlebnisse und Benutzeroberflächen menschlicher und vertrauter sind; zum Beispiel sollte sich die Interaktion mit einer Webseite eher wie ein Gespräch anfühlen als wie das Tippen. Die Eingabe in natürlicher Sprache ist eine der Möglichkeiten, Webformulare so zu gestalten, dass sie sich wie ein Gespräch anfühlen - also nicht wie ein weiteres Stück geschriebener Text, das ausgefüllt werden muss. Eine natürlichsprachliche Schnittstelle hilft den Benutzern, indem sie Fragen stellt, so dass Menschen Fragen stellen. Sie ermöglicht es Ihnen, einen Gesprächskontext zu schaffen und gleichzeitig Missverständnisse zu vermeiden, indem Sie das herkömmliche Muster von Formularbeschriftungen und Eingabefeldern verwenden.
Schrittweises (prozedurales) Formulardesign
Ein Schritt-für-Schritt-Webformular-Design ermöglicht es Ihnen, Informationsabschnitte in leicht verdauliche Teile aufzuteilen, die einfach zu folgen sind. Hier werden dem Benutzer visuelle Hinweise gegeben, um jedes Feld auszufüllen.
Diese Webseite hat einen klaren Pfad für die Benutzer, der sie durch die einzelnen Schritte des Webformulars führt, mit Überschriften und visuellen Hinweisen, die ihnen den Weg weisen. Die Verwendung dieses Formularmusters erleichtert es Personen, die vielleicht zögern, ihre Daten online zu übermitteln.
Die Möglichkeit, Informationen in leicht verständlichen Abschnitten einzugeben, fördert das Vorankommen und bietet ein konzentrierteres Erlebnis als die Anzeige aller Felder auf einmal.
In manchen Fällen reicht ein einziger Klick auf eine Schaltfläche aus. In manchen Fällen reicht ein einziger Klick auf eine Schaltfläche. Manchmal ist es aber auch sinnvoll, anzuzeigen, wie viele Schritte zum Ausfüllen des Formulars erforderlich sind, damit der Benutzer während des gesamten Vorgangs nicht den Überblick verliert.
Schlussfolgerungen
Das Web ist eine zweiseitige Straße, und wir müssen wertvolle Webinhalte für die Benutzer erstellen und sie mit spannendem Webformular-Design bei der Stange halten. Formulare sind ein wesentlicher Bestandteil des Web-Browsing-Erlebnisses. Warum also nicht etwas mehr Zeit darauf verwenden, darüber nachzudenken, wie Sie Ihre Webformulare so ansprechend wie möglich gestalten können? Indem wir diese Muster durchdenken und unsere Webformulare menschlicher gestalten, können wir die Abbruchquoten senken und gleichzeitig eine bessere Beteiligung mit weniger Verwirrung fördern.
