Verbessere die Benutzerfreundlichkeit jedes Webformulars, das du erstellst und gestaltest. Lerne die besten Verfahren kennen und wende sie auf jede Website oder Landing Page an. Die Beziehung zwischen Benutzererfahrung und Website-Formulardesign ist untrennbar: Ein erfolgreiches Website-Formular hängt von einer ausgefeilten Benutzererfahrung ab. Aber wie können wir als Webentwickler feststellen, ob unser Website-Formular benutzerfreundlich ist oder nicht?
Welche Kriterien sollten wir bei der Erstellung eines ansprechenden Website-Formulars berücksichtigen, das sich leicht ausfüllen lässt?
Um die Auswirkungen unseres Website-Formulars zu verstehen, müssen wir nicht nur den Erfolg bei der Lead-Generierung oder beim Kundeneinstieg messen. Die grundlegendste Zutat für ein erfolgreiches Website-Formular könnte nicht einfacher sein: Die Entscheidung des Benutzers, den Aufruf zur Handlung auszuführen, wird durch einen komfortablen, kohärenten Entscheidungsprozess erleichtert.
Doch welche Formularelemente vereinfachen diesen Prozess? Wie solltest du das Layout des Formulars strukturieren? Wie werden sich deine Styling-Entscheidungen auf das Endergebnis auswirken? Und schließlich: Wie können Webentwickler ihre Fähigkeiten am besten einsetzen, um ein Formular zu erstellen, das die Besucher begeistert? Genau das wirst du in diesem Beitrag erfahren.
Wie du weißt, ob dein Website-Formular benutzerfreundlich ist?
Die Gestaltung eines ansprechenden Website-Formulars mit einer attraktiven Benutzeroberfläche ist nur die halbe Miete. Nachdem ein Formular den Benutzer mit seinem guten Aussehen angelockt hat, entscheidet die Benutzererfahrung über seinen Erfolg. Wenn du die Konversionsziele deines Formulars ermittelt hast, wie kannst du dann wissen, ob das von dir erstellte Formular diese Ziele erreichen kann? Was muss bei der Planung und Gestaltung beachtet werden?
Wie hoch sind die Interaktionskosten des Formulars?
Wenn es unser Ziel als Webentwickler ist, ein benutzerfreundliches Website-Formular zu erstellen, müssen wir uns immer wieder die Frage stellen: „Wie viel Aufwand verlange ich dem Benutzer ab?“. Der Grund für diese Frage ist einfach: Je mehr Aufwand, desto weniger benutzerfreundlich ist das Formular. Ein Formular mit minderwertiger Benutzerfreundlichkeit wird wahrscheinlich nicht die gewünschten Ergebnisse liefern.
Dieses Element der Benutzerfreundlichkeit bezeichnen die UX-Experten der Nielsen Norman Group als Interaktionskosten:
„Die Summe der Anstrengungen – geistig und körperlich -, die die Benutzer bei der Interaktion mit einer Website aufwenden müssen, um ihre Ziele zu erreichen.“
Unser Ziel bei der Gestaltung eines Webformulars ist es immer, die Interaktionskosten so weit wie möglich zu reduzieren. Dies ist möglich, indem wir die UX so gut wie möglich verfeinern: Minimierung der Anzahl der erforderlichen Handlungen und Verhaltensweisen (Lesen, Scrollen, Klicken, Tippen, Informationssuche, kognitive Belastung, Aufmerksamkeitswechsel und so weiter).
Aber gefährdet die Minimierung der Anzahl von Benutzerverhaltensweisen die Menge an Informationen, die du von diesen Benutzern erhältst? Das muss nicht so sein – wie wir jetzt diskutieren werden.
Inhaltsübersicht
- #1 Visuelle Layouts und Design
- #2 Formularstruktur
- #3 Formularfragen und Aufforderungen
- #4 Formularelemente
- #5 Übermittlung und Bestätigung
Wichtige UX- und UI-Überlegungen für Website-Formulare
Was sind die wichtigsten UX- und UI-Überlegungen bei der Erstellung eines Website-Formulars? Es gibt so viele Design-Entscheidungen zu treffen, wie können wir wissen, was für unsere Benutzer am besten geeignet ist? Lass uns das Ganze aufschlüsseln und den Designprozess vereinfachen.
#1 Visuelle Layouts und Design
Gut integrierte Website-Formulare fühlen sich wie eine intuitive Komponente deiner Website-UI und ein natürlicher Schritt in deinem Benutzerfluss an. Formulare, die mit dem visuellen Design deiner Website übereinstimmen, sind nicht nur im Layout deiner Website leicht zu erkennen, sondern fügen sich auch nahtlos in dein Branding und Designmotiv ein. Dein Website-Besucher sollte dein Formular leicht finden können und es als vollständig konsistent mit deiner Marke und visuellen Sprache sehen.
Mit Formularen in der Fußzeile, Popups, die durch Scrollen ausgelöst werden, usw. hast du zahlreiche Möglichkeiten für das Design der einzelnen Formulare und die Art und Weise, wie die Benutzer sie finden. Du kannst diese Entscheidungen auf der Grundlage einer Reihe von Faktoren treffen: die Größe deiner Elemente, deine User Journey, deine Website-Bilder, das Ziel des Popups, deine Sprache und dein Ton und vieles mehr.
Direkt auf der Seite
Manchmal ist es am einfachsten, die Aufmerksamkeit der NutzerInnen auf dein Website-Formular zu lenken, indem du seine Felder direkt auf deiner Seite oder sogar in deinem Hero-Content platzierst. Da wir uns bemühen, so wenig Formularfelder wie möglich zu verwenden, können Anmeldeformulare mit nur einem Feld, wie auf der Website der Kreativagentur Facet zu sehen, alle deine Anforderungen an das Ausfüllen von Formularen erfüllen. Dies gilt insbesondere für E-Mail-Anmeldeformulare, die auf ein einziges Formularfeld beschränkt werden können.
Fußzeilen-Formular
Viele Webentwickler entscheiden sich dafür, Formularfelder (ein einzelnes Feld oder mehrere Felder) in ihre Fußzeile einzufügen. Das in Athen ansässige Motion- und Sound-Studio Mellow verwendet eine hohe, geräumige Fußzeile, die Platz für viele Navigationselemente bietet: Navigationsmenüpunkte, Social-Media-Handles und ein vollständiges Kontaktformular.
Die Gestaltung einer großen Fußzeile bietet dir einen angemessenen, komfortablen Platz für ein klares, ansprechendes Formular. Deine Fußzeile erscheint naturgemäß auf jeder Seite deiner Website, und ihr Formular gibt den Besuchern so viele Möglichkeiten wie möglich, mit dir in Kontakt zu treten – ohne dass dein Inhalt aggressiv oder verkaufsorientiert wirkt.
Popup-Formular
Popup-Formulare können die Qualität deines Designs und die Benutzerfreundlichkeit auf verschiedene Weise verbessern.
Das Hauptziel von Website-Popups, wie in dieser Elementor-Popup-Vorlage aus der Elementor-Vorlagenbibliothek gezeigt, besteht darin, sicherzustellen, dass der Besucher keine wichtigen Informationen oder Aktionspunkte verpasst. Ob durch Scrollen, Timing, Klicken oder mehr ausgelöst, Popups können Benutzer an die Schritte erinnern, die sie vor dem Verlassen deiner Website ausführen sollen. Darüber hinaus bieten Popups die Möglichkeit, deine Website weitere Inhalte hinzuzufügen, ohne ihr Design zu beeinträchtigen.
Formulargestaltung und Design
Die Branding- und Marketing-Agentur Markit erreicht eine visuelle Kontinuität zwischen der Markenidentität ihrer Website und ihren Anmeldeformularen. Die nahtlose Navigation von der Homepage zu den Anmelde- und Login-Formularen wird zu einer ganzheitlichen User Journey, mit identischen Illustrationen und Typografien auf jeder Seite und jedem Formular.
Diese gestalterische Kontinuität ist für den Erfolg eines jeden Website-Formulars von entscheidender Bedeutung: Die Besucher müssen deine Marke und dein Designschema von dem Moment an erleben, in dem deine Website geladen wird, bis zu der Sekunde, in der ihre Formularanmeldung bestätigt wird.
#Nr. 2 Formularstruktur
Die Struktur deines Formulars bezieht sich nicht nur auf die Komponenten, die es enthält. Auch für das Format und das strukturelle Layout des Formulars gibt es eine Vielzahl von Möglichkeiten und Richtlinien.
Mit dem Ziel, den Benutzerfluss zu vereinfachen, kannst du dein Formular in eine Frage pro Bildschirm aufteilen, so dass sich die Benutzer auf die einzelne Frage konzentrieren können und nicht auf eine Sammlung von Fragen gleichzeitig. Wenn du mit nur einem Bildschirm arbeitest, kannst du ein einspaltiges Layout verwenden, um die visuelle Harmonie der Schnittstelle zu stärken.
Eine Frage pro Bildschirm
Dieses Formularfeld stammt von fastthisway.com, wo David Aspreys New York Times-Bestseller „Fast This Way“ vorgestellt wird. Dieses Formular am Ende der Homepage verlangt das Hochladen und Einreichen einer Quittung über den Kauf des Buches, um einen 20 %-Rabattgutschein für den Kauf von Enzympräparaten zu erhalten.
Wenn dein Besucher nicht in der Verfassung ist, zahlreiche Eingabeschritte zu machen (persönliche Informationen mitteilen, ein Bild hochladen, Feedback geben usw.), verliert er vielleicht die Geduld, das Formular auszufüllen. Ein Bildschirm pro Frage ist eine gute Möglichkeit, dieses Szenario zu verhindern. Dadurch, dass jeweils nur eine Frage angezeigt wird, können sich die Benutzer ausschließlich auf die Frage oder den Schritt vor ihnen konzentrieren, ohne durch andere Fragen abgelenkt zu werden, die vor oder nach ihnen gestellt werden.
Auch wenn du deine Benutzer aufforderst, eine Reihe von Informationen und Inhaltstypen zu übermitteln, erleichterst du diesen Prozess, indem du eine „Ein-Schritt-zur-Zeit“-Umgebung förderst.
Einspaltiges Layout
Experten für Lead Conversion schwören auf einspaltige Layouts. Diese Formulare sehen viel einfacher aus und geben den Nutzern die Gewissheit, dass es nicht lange dauern wird, sie auszufüllen. Das sehen wir in der oben gezeigten Elementor-Landingpage-Vorlage, die potenziellen Kunden eine schnelle und einfache Möglichkeit bietet, ein kostenloses Beratungsgespräch mit einem Finanzexperten zu erhalten.
Mehrere Spalten mit Formularfeldern können den vertikalen Schwung stören und den Besucher zwingen, sich zwischen den einzelnen Fragen visuell neu zu orientieren. Das Gleiche gilt für die Feldausrichtung (und die entsprechenden Feldbeschriftungen), die immer links ausgerichtet sein sollten, damit die Augenbewegung der Nutzer gerade bleibt.
Einspaltige Formulare fördern auch die Reaktionsfähigkeit auf mobile Endgeräte. Die Anpassung deiner Formularfelder an ein kleines, vertikales Gerät wird einfacher, wenn du nur die Größe eines vertikalen Elements reduzieren musst, ohne sein Layout zu ändern.
Vergesse nicht, dass es zu jeder Regel Ausnahmen gibt. NN/g gibt in ihren Best Practices für die Gestaltung von Webformularen an, dass „kurze und/oder logisch zusammenhängende Felder in derselben Zeile dargestellt werden können.“
#3 Formularfragen und Aufforderungen
Wie kannst du am besten sicherstellen, dass deine Besucher genau verstehen, was du von ihnen verlangst und warum du das tust? Es ist keine leichte Aufgabe, ein Webformular zu erstellen, dessen Fragenstruktur und -reihenfolge sinnvoll ist. Versetze dich in die Lage des Benutzers und versuche, seine Logik zu verstehen, damit du die Dinge aus seiner Sicht sehen kannst.
Dein Ziel ist es, jede Person, die auf dein Website-Formular stößt, anzusprechen, sie über den Zweck des Formulars zu informieren und den Nutzen des Ausfüllens des Formulars zu verdeutlichen.
Die Reihenfolge der Formularfragen
Bedenke, dass ein Website-Formular ein menschliches Gespräch widerspiegelt. Die Reihenfolge und das Format der Fragen sollten für jeden Benutzer logisch und intuitiv sein. Dieses Menü zur Getränkeanpassung in der Starbucks-App ordnet die Anpassungsoptionen nach einer Logik an, die darauf basiert, wie allgemein oder einzigartig die Spezifikation ist.
Die Wahl der Größe zum Beispiel ist für jedes Getränk relevant und daher die häufigste, weshalb sie die erste Frage ist. Dasselbe gilt für die Zusatzstoffe, die ebenfalls für jedes Getränk abgefragt werden können, gefolgt von der Anzahl der Espresso-Shots, die für jedes Kaffeegetränk gilt. Falls du dich fragst, warum „Milch“ an letzter Stelle steht: Es ist tatsächlich am unwahrscheinlichsten, dass sie angepasst wird, da 2 %ige Milch die empfohlene und daher standardmäßige Auswahl des Geschäfts ist.
Formulierung der Formularfelder
Wenn du die Formulierungen und den Benutzerfluss für deine Formularfelder, Überschriften, Unterüberschriften, Beschreibungen usw. auswählst, sollte das Wort „Gewohnheit“ im Vordergrund deines Denkens stehen. Jeder Besucher sollte beim Ausfüllen seiner persönlichen Daten auf ein automatisches, gewohnheitsmäßiges Verhalten zurückgreifen. Er sollte nicht einmal darüber nachdenken müssen, er sollte in der Lage sein, deine Formulierungen und Formularfelder zu überfliegen und genau wissen, was zu tun ist, ohne groß darüber nachzudenken.
Je konventioneller die Terminologie deines Formulars ist, desto besser – es ist nicht an der Zeit, das Rad neu zu erfinden. JetBlue verbindet konventionelle Formulierungen mit einem einzigartigen Tonfall und kombiniert klassische Terminologien mit freundlichen, unterhaltsamen Überschriften und Zwischenüberschriften, die eine Beziehung zu potenziellen Passagieren aufbauen.
Ein Gefühl der Dringlichkeit
Ein Gefühl der Dringlichkeit kann Website-Besucher dazu anregen, aktiv zu werden und deine Fragen zu beantworten. Das ist viel einfacher, als es klingt. Starke Worte (wie „sparen“ und „einfach“ im obigen Popup der Groupon-Website) wecken den Anreiz und helfen, die Aufmerksamkeit der Benutzer auf natürliche Weise zu gewinnen. Dies gilt insbesondere für den Text deiner CTA-Schaltfläche, den du mit bunten Hintergrundfarben und anderen Effekten noch weiter aufwerten kannst.
#4 Formularelemente
Die kognitive Belastung ist der heilige Gral der Website-Benutzerfreundlichkeit und möglicherweise einer der wichtigsten (wenn nicht der wichtigste) Faktoren, die den Inhalt, das Layout und die Struktur deines Formulars bestimmen. Je weniger Anforderungen du an das Gehirn und die Denkprozesse des Benutzers stellst, desto höher ist die Wahrscheinlichkeit, dass er das Formular ausfüllt. Doch wie lässt sich diese gewaltige Herausforderung meistern?
Anzahl der Formularfelder
Eine minimale Anzahl von Formularfeldern hilft, deine Besucher nicht zu überwältigen. Eine einfache Möglichkeit, dies zu erreichen, besteht darin, von den Antworten auszugehen, nach denen du suchst. Auf diese Weise kannst du die Daten ermitteln, die du wirklich brauchst, um dein Ziel zu erreichen – und die Fragen darauf basierend verfeinern.
Das Anmeldeformular für das Prämienprogramm von J.Crew ist ein gutes Beispiel dafür, wie man die Anzahl der Formularfelder begrenzen kann, ohne die benötigten Informationen zu verlieren. Wie das geht?
- Das Formular fasst zwei Felder zu einem zusammen, indem es nur nach dem Vornamen des Benutzers fragt. Es besteht nicht unbedingt die Notwendigkeit, nach beiden zu fragen.
- Es gibt kein Feld zur Bestätigung des Passworts. Ein weiterer Fall, in dem zwei Felder zu einem zusammengefasst werden.
- Die Zustimmung zu den AGBs wird automatisch durch das Absenden des Formulars erteilt. Ein Kontrollkästchen zur Bestätigung ist nicht erforderlich.
Dieses Formular hätte leicht fünf Felder enthalten können, aber stattdessen hat man es auf drei reduziert. Ganz zu schweigen davon, dass der Text „Du hast bereits ein Konto? Anmelden“ viel weiter unten stehen würde und schwerer zu lesen wäre.
Arten von Formularfeldern
Ein idealer Ausgangspunkt für ein benutzerfreundliches Formular ist die Begrenzung der erforderlichen Benutzeraktivitäten (insbesondere die Notwendigkeit der Eingabe). Du hast die Qual der Wahl: Checkboxen, Radiobuttons oder andere – ersetze einfache Textfelder durch einfachere Formularfelder. Auf diese Weise werden mehrere Fragen in einem Feld zusammengefasst und gleichzeitig wird die Notwendigkeit des Tippens durch einfaches Klicken ersetzt.
Wie wäre es zum Beispiel, wenn du anstelle von drei Feldern für drei verschiedene Auswahlmöglichkeiten diese Antworten in einem Feld mit einem „Auswahl“-Feld zusammenfassen könntest, das ein Dropdown-Menü mit den drei (oder mehr) Optionen anzeigt? Eine einzige Designentscheidung kann sich dreifach auszahlen: weniger Formularfelder, weniger Tipparbeit und sogar eine geringere Anzahl von Spalten.
Feldbeschriftungen
Jedes Eingabefeld in deinem Formular sollte mit einer Feldbeschriftung versehen werden, die den Benutzer darüber informiert, was er schreiben oder auswählen soll. Die Benutzer schätzen es auch, wenn du angibst, welche Felder obligatorisch und welche optional sind, so dass sie die entsprechenden Felder überspringen können, wenn sie wenig Zeit haben.
Einige Tipps, die du aus dem Anmeldeformular von Officevibe ableiten kannst – diese werden deine Feldbeschriftungen und die gesamte Benutzeroberfläche deines Formulars perfektionieren:
- Richte alle Beschriftungen oben links über dem jeweiligen Feld aus.
- Alle Beschriftungen sollten sich in gleichem Abstand zu den jeweiligen Eingabefeldern befinden.
- Verwenden Sie Sternchen für erforderliche Felder, anstatt die Wörter „erforderlich“ oder „optional“ in die Beschriftung einzufügen.
CTA-Schaltflächen
Alles Geschmackssache natürlich, aber bestimmt auch auf User Tests basierend: Die belgische Design-Agentur WEPIC hat viele Best Practices für einen tollen CTA-Button in ihre mit Elementor erstellte Website integriert. Die leuchtend farbige CTA-Schaltfläche hat genau die gleiche Breite wie jedes Formularfeld – ein Muss für jedes Website-Formular. Die Schaltfläche ist nicht nur fett und farbenfroh, sondern ihre Hintergrund- und Textfarben ändern sich beim Hovern, und sie verwendet ein attraktives Symbol nach dem Aktionswort.
Das Design der WEPIC-Schaltfläche ist auch ein hervorragendes Beispiel dafür, wie du dein Formular mit Hilfe des Fitt’schen Gesetzes optimieren kannst, dem Prinzip des Webdesigns, das besagt, dass große Schaltflächen die Zeit, die ein Benutzer zum Anklicken benötigt, verkürzen können.
#5 Ermutigung der Nutzer*innen zum kompletten Formular Ausfüllen, Anleitung durch das Formular und Versand und Versandbestätigung für erfolgreichen Versand.
Die Bedeutung eines vollständig ausgefüllten Website-Formulars wird leicht unterschätzt. Die Minimierung der Anzahl von Fragen und Feldern ist nur die halbe Miete. Du kannst konkrete Designelemente einbauen, die die Nutzer ermutigen, dein Formular vollständig auszufüllen: Fortschrittsanzeigen, visuelle Hinweise, Erfolgs- oder Fehlermeldungen usw. Diese Komponenten tragen dazu bei, dass deine Benutzer verstehen, wie sie dein Formular ausfüllen müssen und ob sie es erfolgreich getan haben oder nicht.
Fortschrittsindikatoren
Nichts ist benutzerfreundlicher als ein Formular, das den Benutzern genau mitteilt, wie der Eingabevorgang abläuft. Das europäische Mobile-Banking-Unternehmen N26 teilt seinen potenziellen Kunden genau mit, wie der Prozess der Kontoeröffnung abläuft und wie lange es dauert, ihn abzuschließen. Mit Hilfe von Symbolen und kurzen Beschreibungen vermittelt die Zeitleiste im Breadcrumbs-Stil, wie unkompliziert der Anmeldeprozess ist und wie einfach es ist, von dem N26-Produkt zu profitieren.
Die Eröffnung eines Bankkontos (sei es bei einem stationären Finanzinstitut oder bei einer Online-Bank) kann zeitaufwändig und mühsam sein. Wenn den Besuchern gesagt wird, dass sie ein Debitkonto in acht Minuten eröffnen können, werden sie diese Option sicherlich in Betracht ziehen.
Visuelle Anreize für Nutzer*innen zum Formular Ausfüllen
Eine der logischsten (und nicht zu vergessen trendigsten) Methoden, um sicherzustellen, dass dein Formular sichtbar ist, besteht darin, einen Richtungshinweis zu schaffen, der explizit angibt, wohin man schauen muss. Das Einzigartige am Eingabeformular von Crazy Egg ist, dass es den Richtungshinweis in die Illustration selbst integriert: Der Finger des Mannes zeigt auf das Eingabefeld. Andere gängige Techniken, um die Aufmerksamkeit des Benutzers auf sich zu ziehen, sind handgezeichnete Pfeilillustrationen, animierte Schaltflächen oder Bildlaufanzeigen.
Erfolgsmeldungen für Nutzer*innen beim Formular Ausfüllen – hier erfolgreiche Registrierung
Benutzer freuen sich immer über eine Bestätigung, dass ihre Entscheidung, sich für eine Veranstaltung anzumelden oder eine Mailingliste zu abonnieren, erfolgreich war. Wenn du diese Bestätigung nimmst und sie mit einem anerkennenden „Danke“ verstärkst (wie in der obigen Elementor-Vorlage für die Landing Page), schließt sich der Kreis der Benutzererfahrung des Formulars und endet mit einer positiven Note.
Formular Fehlermeldungen als Nutzer*innen Feedback und Anleitung
Fehlermeldungen innerhalb eines Formulars helfen den Nutzern, sich zu vergewissern, dass sie das Formular abschicken können. Kurze, aber informative Meldungen garantieren außerdem, dass das abgeschickte Formular alle Datenelemente enthält, die du erhalten möchtest.
Dieser dynamische Prozess wird von Isolation.is, einem digitalen Postkartenarchiv, in dem Designer ihre Designarbeiten vorschlagen und einreichen können, sehr gut umgesetzt. Fehlermeldungen, die die Designer über unzureichende Inhalte informieren, können bei dieser Art von komplexem Formular, das einen Dateityp, eine begrenzte Wortzahl für den Titel und URLs von sozialen Netzwerken vorgibt, besonders hilfreich und effektiv sein.
Jetzt kannst du dich auf die Formularerstellung vorbereiten und loslegen!
Du verfügst nun über eine Fülle von Erkenntnissen, die dir bei der Erstellung von Formularen für deine Website von Anfang bis Ende helfen können. Sobald du deine Strategie und das Ziel deines Website-Formulars festgelegt hast, kannst du dich zu 100 % darauf vorbereiten, welche Informationen du abfragen möchtest und wie du das am besten bewerkstelligen kannst.
Übersetzt von Verena Jütte
von Website Freiburg
Quelle, unser Websoftware Partner Elementor Pro:
