Nimm das Formular einer beliebigen Marke, und du findest wahrscheinlich Designprobleme, die sie Leads kosten. Die meisten achten darauf, was sie abfragen, nicht darauf, wie sie es darstellen. Die Marken, die konvertieren, kennen aber ein Geheimnis: Wie du Felder anordnest, wie viel Platz dazwischen liegt und welches visuelle Gewicht jedes Element hat, macht den Unterschied zwischen mühelos und mühsam.
Dieser Unterschied ist riesig. Die Lücke zwischen 50 % und 85 % Abschlussrate liegt oft nur an drei Dingen.
Prinzipien für Formular-Design sind die praktischen Regeln, die dieses unsichtbare Erlebnis steuern. Layout, Abstände und visuelle Hierarchie führen deine Besucher gemeinsam ganz natürlich durch dein Formular, ohne Reibung und Verwirrung. Beherrschst du diese drei, fühlt sich jedes Formular, das du baust, intuitiv an.
In diesem Leitfaden lernst du genau, wie du jedes Prinzip anwendest. Keine Theorie. Kein Geschwafel. Nur das praktische Vorgehen, das verwirrende Formulare in Conversions verwandelt.
Was sind Prinzipien für Formular-Design?
Prinzipien für Formular-Design sind die Regeln für Aufbau und visuelle Darstellung, die Formulare funktionieren lassen. Es geht nicht um Dekoration oder Geschmack. Es geht um das Verhalten der Nutzer. Wie überfliegt das menschliche Auge ein Formular? Wie gruppiert das Gehirn zusammengehörige Informationen? Welche Signale zeigen, dass ein Feld wichtig, optional oder mit einem anderen Feld verbunden ist? Auf diese Fragen antwortet das Formular-Design.
Die besten Prinzipien gelten für alle Arten von Formularen. Ob du ein Kontaktformular, ein Checkout-Formular oder ein Anmeldeformular für eine Veranstaltung gestaltest, es gelten dieselben Regeln für Layout, Abstände und Hierarchie. Diese Prinzipien beruhen darauf, wie Menschen visuelle Informationen tatsächlich verarbeiten und unter geistiger Belastung Entscheidungen treffen.
Werden die Prinzipien ignoriert, brechen die Abschlussraten ein. Studien zeigen, dass schlecht abgestufte Formulare 20 bis 40 % höhere Abbruchraten haben als gut abgestufte. Eine unklare visuelle Hierarchie führt dazu, dass Nutzer wichtige Felder überspringen oder optionale Felder ausfüllen, die sie gar nicht ausfüllen wollten. Ein schlechtes Layout lässt ein Formular mit fünf Feldern wie eins mit zwanzig wirken.
Warum Prinzipien für Formular-Design für dein Geschäft wichtig sind
Jedes Formular auf deiner Website ist ein Conversion-Punkt. Hier werden Interessenten zu Leads, hier schließen Kunden Käufe ab, hier werden Daten erfasst. Sind deine Formulare schwer zu bedienen, verlierst du direkt Umsatz.
Denk daran, was passiert, wenn jemand bei deinem Formular landet. Er hat sich schon entschieden, mit dir Geschäfte zu machen. Er will das Formular ausfüllen. Das Einzige, was ihn aufhält, ist Reibung im Design. Er kann nicht erkennen, ob ein Feld Pflicht oder optional ist. Er versteht nicht, warum eine Information abgefragt wird. Er sieht nicht leicht, wo er als Nächstes klicken soll. Also geht er.
Prinzipien für Formular-Design wirken sich direkt auf deine Geschäftskennzahlen aus. Marken, die starke Designprinzipien auf ihre Formulare anwenden, sehen höhere Abschlussraten, weniger Abbrüche und bessere Datenqualität. Ein Technologieunternehmen, das Abstände und visuelle Hierarchie im Formular verbesserte, sah die Abschlussrate von 62 % auf 84 % springen. Ein Onlineshop, der das Layout seines Checkout-Formulars neu ordnete, senkte die Warenkorbabbrüche um 23 %.
Das ist nicht theoretisch. So entscheiden Nutzer, ob dein Formular ihre Zeit wert ist.
Die drei Kernprinzipien für Formular-Design: Layout, Abstände und visuelle Hierarchie
Formular-Design ruht auf drei Säulen. Jede hat einen bestimmten Zweck. Zusammen ergeben sie ein Formular, das einfach wirkt und Nutzer von Anfang bis Ende führt.
Prinzip 1: Formular-Layout
Das Layout ist die Art, wie du Informationen auf der Seite ordnest. Es ist die räumliche Anordnung von Feldern, Labels, Schaltflächen und Abschnitten. Ein starkes Layout macht sofort klar, wie das Formular auszufüllen ist und in welcher Reihenfolge.
Das wirkungsvollste Formular-Layout folgt einer einspaltigen Struktur. Das ist kein Designtrend, sondern beruht darauf, wie Menschen lesen. Das Auge bewegt sich auf einer Seite von oben nach unten. Setzt du Formularfelder in eine einzige Spalte, gehen Nutzer ganz natürlich durch sie hindurch, ohne nach links und rechts zu schauen oder zurückzugehen, um zu prüfen, ob sie etwas übersehen haben.
Mehrspaltige Formulare zwingen das Auge zu mehr Arbeit. Der Nutzer muss entscheiden, ob er zuerst die linke oder die rechte Spalte ausfüllt. Er muss sich merken, wo er war. Schon ein zweispaltiges Formular erhöht die geistige Belastung und die Abbrüche. Einspaltige Formulare konvertieren deutlich besser, manchmal um 20 % oder mehr.
Innerhalb dieser einen Spalte sollten zusammengehörige Felder optisch gruppiert sein. Ein Formular für die Lieferadresse sollte alle Adressfelder zusammen haben (Straße, Ort, Bundesland, Postleitzahl). Ein Abschnitt für die Rechnungsadresse sollte optisch von dem für die Lieferadresse getrennt sein. Diese Gruppen zeigen den Nutzern, dass die Felder zusammengehören und als Einheit ausgefüllt werden können. Ungruppierte Felder wirken zufällig und unorganisiert, selbst wenn die Informationen Sinn ergeben.
Auch Labels bestimmen das Layout. Jedes Label sollte direkt über seinem Eingabefeld stehen, nicht links davon. Steht das Label links neben dem Eingabefeld, wird der Abstand zwischen beiden größer, und es ist unklar, welches Feld zu welchem Label gehört. Labels oberhalb halten die Beziehung zwischen Label und Feld offensichtlich. Das ist besonders auf dem Handy wichtig, wo Labels und Felder nebeneinander gar nicht möglich sind.
Auch die Platzierung der Schaltfläche zählt. Deine wichtigste Schaltfläche mit Handlungsaufruf sollte am Ende des Formulars direkt unter dem letzten Feld stehen. Sie sollte klar und auffällig sein und das Erste, worauf das Auge fällt, wenn der Nutzer mit dem Ausfüllen fertig ist. Sekundäre Schaltflächen (wie "Als Entwurf speichern" oder "Abbrechen") sollten kleiner sein oder unter der primären Schaltfläche stehen, damit sie nicht von der Hauptaktion ablenken.
Prinzip 2: Abstände in Formularen
Abstände sind Weißraum. Es ist der Platz zwischen Feldern, zwischen Abschnitten und zwischen einem Label und seinem Eingabefeld. Abstände fühlen sich nicht wie ein "Prinzip" an. Sie sind unsichtbar. Aber sie leisten die wichtigste Arbeit in deinem Formular-Design.
Richtige Abstände bewirken zwei Dinge. Sie schaffen Klarheit darüber, was zusammengehört, und sie geben Luft zum Atmen, sodass das Formular weniger überwältigend wirkt.
Die Regel ist einfach. Zusammengehörige Felder sollten enge Abstände haben. Zwischen einem Feld "Vorname" und einem Feld "Nachname" sollten 8 bis 12 Pixel vertikaler Abstand liegen. Das ist nah genug, dass sie wie ein Paar wirken. Ist eine Gruppe fertig (wie ein Namensabschnitt), vergrößere den Abstand vor der nächsten Gruppe auf 24 bis 32 Pixel. Diese optische Lücke zeigt dem Nutzer, dass ein neuer Abschnitt beginnt.
Stell dir Abstände als Satzzeichen vor. Enge Abstände sagen "diese gehören zusammen". Große Abstände sagen "hier beginnt ein neuer Gedanke". Nutzer lesen diese Signale sofort.
Das passiert, wenn die Abstände überall zu eng sind. Ein Formular mit zehn Feldern, die ohne Luft zusammengequetscht sind, wirkt wie eine Wand aus Eingabefeldern. Der Nutzer fühlt sich überwältigt, noch bevor er anfängt. Sein Gehirn weiß nicht, welche Felder zu welchen anderen gehören. Der Abbruch passiert, bevor das erste Feld ausgefüllt ist.
Das passiert mit richtigen Abständen. Dasselbe Formular mit zehn Feldern wirkt überschaubar. Der Nutzer sieht, dass manche Felder zusammengehören (Rechnungsadresse), dann kommt eine Lücke, dann eine weitere Gruppe (Lieferadresse). Das Formular wirkt kürzer, weil es in verdauliche Happen aufgeteilt ist.
Eine Studie zur Formular-UX von 2024 fand heraus, dass Formulare mit richtigen Abständen und Gruppierung 32 % höhere Abschlussraten haben als dieselben Formulare mit gedrängtem Layout. Die einzige Variable, die sich änderte, waren die Abstände.
Formulare auf dem Handy brauchen mehr Platz, nicht weniger. Handybildschirme sind klein, und Finger sind groß. Felder auf dem Handy zusammenzuquetschen, ist ein Conversion-Killer. Jedes Feld braucht so viel Abstand um sich herum, dass ein Nutzer es antippen kann, ohne benachbarte Felder zu treffen. Gemeint ist nicht der Innenabstand im Eingabefeld (der aber auch zählt). Gemeint ist der Platz zwischen den Feldern. Ein Formular für das Handy mit großzügigen vertikalen Abständen und einspaltigem, gestapeltem Layout konvertiert deutlich besser als eins, das für den Desktop gebaut und fürs Handy verkleinert wurde.
Prinzip 3: Visuelle Hierarchie in Formularen
Visuelle Hierarchie ist die Reihenfolge, in der Auge und Gehirn das Gesehene verarbeiten. Im Formular ist das der Unterschied zwischen einem Pflichtfeld, das dem Nutzer ins Auge springt, und einem, das im Hintergrund verschwindet. Es ist der Unterschied zwischen einer primären Absende-Schaltfläche, die klickbar aussieht, und einer sekundären Abbrechen-Schaltfläche, die wie Text aussieht.
Visuelle Hierarchie in Formularen entsteht mit vier wichtigen Mitteln. Größe, Farbe, Kontrast und Platzierung lenken jeweils die Aufmerksamkeit des Nutzers.
Größe signalisiert Wichtigkeit. Ein auffälliges Feld-Label in 16 px Schrift ist wichtiger als ein Hilfetext in 12 px. Eine große Absende-Schaltfläche wirkt bedeutender als eine kleine Schaltfläche "Zurücksetzen". Die Pflichtmarkierung sollte etwas auffälliger sein als Labels optionaler Felder. Mach diesen Unterschied nicht übertrieben deutlich. Mach ihn nur etwas sichtbarer. Dieser feine Größenunterschied lenkt das Auge, ohne zu schreien.
Farbe schafft Hierarchie durch Kontrast. Ein dunkles Label auf weißem Hintergrund hat hohen Kontrast und fällt auf. Hellgrauer Hilfetext hat weniger Kontrast und tritt zurück. Eine leuchtend blaue Absende-Schaltfläche in einem Formular mit grauen Eingabefeldern hat sofort Kontrast und zieht das Auge an. Eine sekundäre Schaltfläche im selben Grau wie der Formularhintergrund tritt zurück. Das Auge landet zuerst auf der Hauptaktion, genau dort, wo du es willst.
Die Begrenzung ist wichtig. Nutze in einem einzelnen Formular nicht mehr als drei visuelle Gewichte. Ein Gewicht kann eine Farbe sein, eine Größe, ein Farbton oder ein Stil (fett oder normal). Ist alles hell, ist nichts hell. Hast du fünf verschiedene Textfarben, weiß der Nutzer nicht, worauf er achten soll. Drei Stufen visueller Wichtigkeit reichen, um die Aufmerksamkeit ohne Verwirrung zu lenken. Das ist die Regel der Hierarchie, gegen die die meisten Formulare verstoßen, und sie zeigt sich als "Ich wusste nicht, dass das optional ist" oder "Ich dachte, die Schaltfläche sei inaktiv."
Auch die Platzierung schafft Hierarchie. Das erste Feld, das ein Nutzer sieht, ist das auffälligste. Die primäre Schaltfläche mit Handlungsaufruf am Ende ist das Letzte, was er sieht, und die Aktion, die am ehesten ausgeführt wird. Pflichtmarkierungen, Hilfetexte und Fehlermeldungen brauchen eine Platzierung, die sie offensichtlich macht, ohne abzulenken.
Der "Blinzel-Test" zeigt, ob deine visuelle Hierarchie funktioniert. Verschwimme den Blick (oder kneif wirklich die Augen zusammen) und schau auf dein Formular. Was siehst du zuerst? Siehst du die wichtigsten Felder und die primäre Schaltfläche, funktioniert deine Hierarchie. Springt dein Blick an zufällige Stellen oder weiß er nicht, was zu tun ist, braucht deine Hierarchie Arbeit.
So wendest du die Prinzipien für Formular-Design auf jede Art von Formular an
Diese drei Prinzipien gelten für jedes Formular auf deiner Website. Ein Kontaktformular nutzt dieselben Regeln für Layout, Abstände und Hierarchie wie ein Checkout-Formular, ein Anmeldeformular oder ein Formular für die Anmeldung zu einer Veranstaltung. Der Unterschied liegt nicht in den Prinzipien selbst. Er liegt darin, welche Felder für diese Art von Formular am wichtigsten sind.
Um diese Prinzipien auf deine Formulare anzuwenden, beginne mit dem Layout. Wähle einspaltig, von oben nach unten. Gruppiere zusammengehörige Felder und setze größere Lücken zwischen die Gruppen.
Wende dann die Abstände an. Nutze gleichmäßige Abstände zwischen den Feldern einer Gruppe (8 bis 12 px). Nutze größere Abstände zwischen Gruppen (24 bis 32 px). Teste auf dem Handy und stelle sicher, dass sich jedes Feld leicht antippen lässt.
Lege zuletzt die visuelle Hierarchie fest. Bestimme, was der Nutzer zuerst bemerken soll. Ist es die Überschrift des Formulars? Die Pflichtmarkierung? Die primäre Schaltfläche? Sorge dafür, dass dieses Element optisch hervorsticht. Alles andere bleibt in unterstützenden Rollen.
Das Ergebnis ist ein Formular, das sich intuitiv anfühlt. Nutzer müssen nicht nachdenken. Sie füllen es aus und schicken es ab.
Wie WEMASY dir hilft, bessere Formulare zu bauen
WEMASY enthält einen Formular-Builder, der diese Designprinzipien schon eingebaut hat. Das einspaltige Layout ist die Voreinstellung. Die Abstände sind vorab nach der 8-px/24-px-Regel eingestellt. Die visuelle Hierarchie entsteht durch fertige Stile für Formularfelder, die Labels, Pflichtmarkierungen und Eingabefelder richtig in Beziehung halten.
Du kannst Farben, Schriften und Schaltflächentexte an deine Marke anpassen. Die zugrunde liegende Struktur bleibt solide. So bekommst du ein Formular, das nach dir aussieht und gut funktioniert.
Sieh dir den Formular-Builder in Aktion an und entdecke die Preise von WEMASY, um zu sehen, welcher Tarif das Erstellen und Anpassen von Formularen enthält.