10 Regeln für die Herstellung von benutzerfreundlichen Webformularen

Jan 29, 2026

wie man

Illustration of web forms on an iMac and tablet

Trotz der Entwicklung der Mensch-Computer-Interaktion bleiben Formen noch eines der wichtigsten Arten von Interaktion für Benutzer. Menschen, die Ihre Bewerbung oder Website verwenden, haben ein bestimmtes Ziel, und oft ist das eine, die zwischen dem Benutzer und ihrem Ziel steht, ein Formular. Jeden Tag verwenden wir sie für unsere wesentlichen Aktivitäten - um Käufe abzuschließen, um sich für soziale Netzwerke anzumelden, um ein Feedback zu einem Produkt bereitzustellen, das wir gekauft haben, und mehr - sie sind ein großer Teil von Benutzererfahrung .

Infolgedessen ist es sehr wichtig, dass wir Online-Formulare schnell und ohne Verwirrung erfüllen können. Je weniger Anstrengungen, die wir ausgeben müssen, desto glücklicher sind wir. Als Designer und Entwickler sollten wir uns bemühen, schnellere, einfachere und produktivere Formers für unsere Benutzer zu produzieren.

In der zweiten meiner beiden Artikeln erforschen die Erstellung besserer Formen ( finde den ersten hier ), hier sind meine 10 Tipps zum Entwerfen von Formularen, die benutzerfreundlich sind. Nicht ganz was suchst du? Möglicherweise brauchen Sie unsere Guides nach oben Webseitenersteller oder Cloud-Speicherung. Bedienung.

01. Fragen Sie nur, was erforderlich ist

Das Abschneiden der Anzahl der erforderlichen Informationen macht das Formular leichter ausfüllen. Sie sollten immer fragen, warum und wie die von Ihnen angeforderten Informationen verwendet werden. Versuchen Sie, die Anzahl der Felder so weit wie möglich zu minimieren, da jedes Feld, das Sie zu einem Formular hinzufügen, seine Konvertierungsrate beeinträchtigen. Die Anzahl der Fragen und Felder einschränken Erstellen Sie Ihr Formular weniger geladen, insbesondere wenn Sie viele Informationen von Ihren Benutzern anfordern.

02. Bestellen Sie die Felder logisch

Screenshot compares two forms - one with fields in an odd order, one with headings explaining field groupings, ordered logically — Denken Sie an Ihre Form wie ein Gespräch; Sie möchten die Felder in einer Reihenfolge gruppieren und bestellen, die dem Benutzer sinnvoll ist

Es ist hilfreich, an ein Formular zu denken, das einem Gespräch ähnlich ist. Wie jedes normale Gespräch sollte es durch eine logische Kommunikation zwischen zwei Parteien dargestellt werden: einer Person und Ihrer App. Details sollten in einer Reihenfolge gefragt werden, die aus der Perspektive des Benutzers logisch ist, nicht die der Anwendung oder Datenbank. Zum Beispiel ist es ungewöhnlich, die Adresse einer Person vor ihrem Namen zu fragen.

Es ist auch sehr wichtig, verwandte Fragen in Blöcken zu gruppieren, sodass der Fluss von einem Satz von Fragen an den nächsten eine Konversation ähneln wird. Die Gruppierung verwandter Felder hilft Benutzern auch, die Informationen zu erkennen, die sie ausfüllen müssen.

Vorstehend sind Beispiele für zwei Registrierungsformulare. Lange Formen können sich überwältigend fühlen, wenn Sie keine verwandten Felder gruppieren - das Formular links in die verbesserte Version auf der rechten Seite vergleichen.

Die Gruppierung muss visuell als auch im Code durchgeführt werden. Zum Beispiel könnten Sie das verwenden & lt; feldeset & gt; und & lt; Legend & GT; Elemente, um verwandte Formularsteuerungen zuzusetzen:

 & lt; fieldset & gt;
  & lt; Legend & GT; Persönliche Informationen: & lt; / Legend & GT;
  & lt; div & gt;
    & lt; Label für = "First_Name" & GT; Vorname & lt; / label & gt;
    & lt; Eingangstyp = "Text" Name = "First_Name" ID = "First_Name" & GT;
  & lt; / div & gt;
  & lt; div & gt;
    & lt; label für = "last_name" & gt; Nachname & lt; / label & gt;
    & lt; Eingangstyp = "Text" Name = "LAST_NAME" ID = "LAST_NAME" & GT;
  & lt; / div & gt;
    & lt; label für = "Gender" & gt; Beruf & lt; / label & gt;
    & lt; Eingangstyp = "Text" Name = "Beruf" ID = "Beruf" & GT;
  & lt; / div & gt;
& lt; / fieldset & gt;

03. Halten Sie Etiketten kurz

Feld-Labels geben den Benutzern an, was die entsprechenden Eingabefelder bedeuten. Clear-Label-Text ist eine der wichtigsten Möglichkeiten, UIS zugänglicher zu machen. Etiketten sagen dem Benutzer den Zweck des Feldes, aber sie helfen keine Texte. Daher ist sicherzustellen, dass sie leicht scannen, eine Priorität - Sie sollten kürzere, kurze und beschreibende Etiketten entwerfen (halten Sie sie auf ein oder zwei Wörter).

04. Duplizieren Sie keine Felder

Screenshot compares bad and good forms - the bad asks users to retype their email and retype their password — Lassen Sie Ihre Nutzer nicht zweimal eintippen - Sie werden sie nur frustrieren, indem Sie ihre Zeit verschwenden

Dieses Problem ist besonders häufig für Anmeldeformulare: Fast jeder ist auf ein Formular gestoßen, mit dem Sie zweimal eine E-Mail-Adresse oder ein Kennwort eingeben müssen. Historisch wurde dies entwickelt, um Fehlfehler zu vermeiden. Die meisten Benutzer kopieren jedoch einfach das erforderliche Feld, wenn die App es erlaubte. Und wenn die Daten des Originalfelds einen Fehler enthalten, wurde es dupliziert.

05. Markieren Sie optionale Felder

Idealerweise ist es am besten, keine optionalen Felder zu haben. In Übereinstimmung mit der Regel Nummer 1, wenn kein Informationsstück erforderlich ist, gibt es keinen Punkt, um die Zeit eines Benutzers zu verschwenden. Wenn Sie sie jedoch verwenden, sollten Sie eindeutig unterscheiden, welche Eingabefelder nicht leer bleiben können. Normalerweise reicht eine kleine Marke wie ein Asterisk (*) oder ein "optionales" Etikett aus.

06. Seien Sie vorsichtig mit Standards

Vermeiden Sie einschließlich eines statischen Standards, es sei denn, Sie glauben, dass ein großer Teil Ihrer Benutzer (z. B. 90 Prozent) diesen Wert auswählt - insbesondere wenn es ein erforderliches Feld ist. Warum? Mit diesem Ansatz führen Sie wahrscheinlich Fehler, da die People-Formulare schnell online scannen. Gehen Sie nicht davon aus, dass sie sich die Zeit nehmen werden, um alle Entscheidungen zu analysieren. Sie können von etwas überspringen, das bereits einen Wert hat.

Die einzige Ausnahme für diesen Punkt ist intelligente Standardeinstellungen - wie diejenigen, die das Land des Benutzers basierend auf ihren Geolocation-Daten vorwählen, das das Formular schneller und genauer erstellen kann. Sie sollten diese jedoch immer noch mit Vorsicht verwenden, da Benutzer dazu neigen, vorgewählte Felder wie sie zu hinterlassen.

07. Minimieren Sie die Notwendigkeit der Eingabe

Das Tippen ist ein langsamer und fehleranfälliger Prozess, und es ist besonders schmerzhaft auf einem Mobiltelefon, in dem Benutzer den Einschränkungen des limitierten Bildschirms stehen. Und mit immer mehr Menschen, die kleine Bildschirme verwenden, wird alles, was getan werden kann, um ein unnötiges Tippen zu verhindern, das Benutzererfahrung verbessert. Falls vorhanden, können Sie Funktionen wie Autocomplete und Vorabfüllung für Daten verwenden, sodass Benutzer nur den nackten Mindestbetrag angeben müssen.

Die Ausfüllung Ihrer Adressinformationen ist oft der umständlichste Teil eines Online-Anmeldeformulars dank mehrerer Felder, langen Namen und so weiter. Speichern Sie Ihre Benutzer daran, ihre gesamte Adresse eingeben zu müssen, indem Sie Vorspiele für diese Felder umsetzen. Bibliotheken wie Google Maps Bieten Sie eine einfache Javascript-API an um das zu erreichen. Sie können Finden Sie hier eine Arbeitslösung .

08. Verwenden Sie Echtzeit-Validierung

Illustration shows two fields filled with green ticks beside them, one field filled but with a red x beside it — Benachrichtigungsbenutzer sofort, wenn sie einen Fehler erstellen - lassen Sie sie nicht warten, bis sie das gesamte Formular abgeschlossen haben

In einer idealen Welt füllen die Benutzer Formulare mit notwendigen Informationen aus und beenden ihren Job erfolgreich, aber in der realen Welt machen die Menschen oft Fehler. Es ist frustrierend, den Prozess des Ausfüllens eines ganzen Formulars, nur um den Vorgang herauszufinden, den Sie einen Fehler gemacht haben.

Die richtige Zeit, um jemanden über den Erfolg oder Misserfolg der von ihnen bereitgestellten Daten zu informieren, ist gleich, nachdem sie die Informationen eingereicht haben. Hier kommt die Echtzeit-Validierung ins Spiel. Es weckt Benutzer, sich sofort zu fehlern, und ermöglicht es ihnen, sie schneller zu korrigieren, ohne warten, bis sie die Taste 'Senden' drücken.

Und denken Sie daran, dass die Validierung den Benutzern nicht nur sagen, was sie falsch gemacht haben. Es sollte ihnen auch sagen, was sie richtig machen. Dies gibt Benutzern mehr Vertrauen, um sich durch das Formular zu bewegen.

Petersilie ist eine ausgezeichnete JavaScript-Formularvalidierungsbibliothek. Es ist Open Source und UX-fokussiert, so dass Sie fast jedes Standardverhalten überschreiben können, um Ihren genauen Anforderungen anzupassen. Im folgenden Code ist ein einfaches Beispiel für ein einfaches Parsley-Validierungsbeispiel für ein Feld "MESSAGE". Das Feld sollte mindestens 20 Zeichen sein, aber nicht mehr als 100.

 & lt; Label für = "Nachricht" & GT; Nachricht (20 Zeichen min, 100 max): & lt; / label & gt;
& lt; textarea id = "Meldung" Klasse = "Form-Control" -Name = "Meldung" Data-PARSLEY-Trigger = "KEYUP" -DATE-PARSLEY-MINUENGTH = "20" Daten-Peterley-MAXLENGTH = "100" -Daten-Petersilie -MinLength-Meldung = "KOMMEN EIN! Sie müssen mindestens einen 20-stelligen Kommentar eingeben." Daten-Petersilie-Validierungsschwelle = "10" & GT; & lt; / textarea & gt;

Sie können Finden Sie hier das komplette Code-Beispiel .

09. Vermeiden Sie feste Eingabeformate

Der häufigste Grund für das Erzwingen eines festen Formats ist die Validierungsskriptbegrenzung (das hintere Ende kann das benötigte Format nicht ermitteln), das in den meisten Fällen ein Implementierungsproblem ist. Anstatt das Format von so etwas wie eine Telefonnummer während des Benutzereintrags zu zwingen, sollten Sie es ermöglichen, umzuwandeln, was der Benutzer in das in das Anzeigen oder Speicher in das Format eingeht.

10. Verwenden Sie keine Reset-Tasten

Illustration shows Reset button next to a Save button below a form, with a red cross through it — Kleines Gutes kam jemals von einer Reset-Taste direkt neben der Option Senden

Eine Reset-Taste hilft Benutzern fast nie. Es ist schwer vorstellbar, dass jemand einen Knopf wünschen, der ihre gesamte Arbeit rückgängig macht, geschweige denn, dass sie diese Schaltfläche, um neben der Schaltfläche zu sitzen, die sie rettet. Das Web wäre ein glücklicherer Ort, wenn praktisch alle Reset-Tasten entfernt wurden.

Möchten Sie wissen, wie Ihre Benutzer auf Ihre Website antworten? Ein anständiger Web-Hosting Service gibt Ihnen die Analyse, die Sie benötigen.

Dieser Artikel erschien ursprünglich in Netz Das Magazin für professionelle Webdesigner und Entwickler. Abonnieren Sie hier das Netz .

Zum Thema passende Artikel:

29 Webdesign-Tools, um Ihren Workflow zu beschleunigen
Die 41 besten kostenlosen Web-Schriften
13 Beste Stücke der Benutzer-Testsoftware

10 Regeln für die Herstellung von benutzerfreundlichen Webformularen

01. Fragen Sie nur, was erforderlich ist

02. Bestellen Sie die Felder logisch

03. Halten Sie Etiketten kurz

04. Duplizieren Sie keine Felder

05. Markieren Sie optionale Felder

06. Seien Sie vorsichtig mit Standards

07. Minimieren Sie die Notwendigkeit der Eingabe

08. Verwenden Sie Echtzeit-Validierung

09. Vermeiden Sie feste Eingabeformate

10. Verwenden Sie keine Reset-Tasten

wie man - Die beliebtesten Artikel

So reinigen Sie Painthushes: den endgültigen Guide

Konzept-Design-Tipps für Künstler

Wie man digital in ZbrushCore digital skulpt

Wie man ansprechende und gerichtete agnostische Formen entwarf

Design SVG-Grafiken in Ihrem Browser

Malen Sie ein Porträt wie Van Gogh

Dokumentieren Sie Ihre Designsysteme mit Fraktal

Erstellen Sie einfache Abbildungen für das Web

Kategorien