Share
Heute untersuchen wir, was die Formularvalidierung ist und warum Sie, Joe Webdesigner, sollte sich darum kümmern. Hier ist ein Teaser: Dies ist eine der einfachsten Methoden, um die Benutzerfreundlichkeit Ihrer Designs zu verbessern, und die meisten Webdesigner vergessen es ständig! Wir werden auch einige Beispiele für das Design von Formularvalidierungen vorstellen. Lesen Sie über junge Heuschrecken… Wissen erwartet.
Im Kontext einer zwischenmenschlichen Beziehung bedeutet Validierung, dass Sie das Gefühl haben, dass Sie Recht haben. Im Kontext eines Webformulars wird überprüft, ob Sie das falsche Formular sehen. Um genau zu sein, Die Formularvalidierung ist der Prozess, bei dem ein Webformular prüft, ob die eingegebenen Informationen korrekt sind.
Zum Beispiel:
Sie haben die Idee… Validierung stellt nur sicher, dass der Benutzer keinen Fehler gemacht hat.
Es ist jedoch eine menschliche Natur, Fehler zu machen, und leider ist Ihr Webformular wahrscheinlich nicht für menschliche Fehler freigestellt. An dieser Stelle spielt die Validierung eine benutzerfreundliche Form. Eine einfache visuelle Erinnerung an den Benutzer, dass etwas nicht richtig ausgefüllt ist, kann den Unterschied zwischen der Freude an einem erfolgreich ausgefüllten Formular und der intensiven Frustration, die erraten muss, was falsch gelaufen ist, ausmachen.
Das Hauptprinzip der Validierung eines guten Formulars lautet: "Sprechen Sie mit dem Benutzer! Sagen Sie, wenn etwas nicht stimmt!"
Die Validierung in Ihre Webdesigns zu integrieren ist nicht schwer… aber die überwiegende Mehrheit der Designer enthält keine Designs dafür. Warum? Weil die Validierung den Entwicklern in den letzten Phasen eines Projekts häufig Sorgen bereiten muss.
Dadurch entsteht ein Szenario, in dem Sie, Joe Webdesigner, einem Entwickler einen der wichtigsten Aspekte der Benutzererfahrung anvertrauen, der wahrscheinlich nicht weiß, wie die Validierung gestaltet werden soll. Heck, in vielen Fällen werden sich die Entwickler nicht um etwas kümmern, was über die Formulierungsprüfung hinausgeht ... was Benutzer frustriert machen kann.
Dies ist keine Suche nach Entwicklern oder irgendetwas (und es gibt viele großartige Entwickler, die dies mit Bravour erledigen werden), aber nehmen wir an, der Entwickler schenkt der Argumentation keine Aufmerksamkeit.
Untersuchen Sie die folgende Grafik:
Was ist los mit diesem Formular? Sicher - das Formular "validiert" sich selbst, indem es dem Benutzer mitteilt, dass etwas nicht stimmt ... aber der Benutzer kann nur raten, was es ist.
Das Hauptprinzip der Validierung eines guten Formulars lautet: "Sprechen Sie mit dem Benutzer! Sagen Sie, wenn etwas nicht stimmt!"
Schauen wir uns die nächste Grafik an:
Viel besser richtig? Nun erhält der Benutzer die Informationen, die er zur Behebung des Problems benötigt. Dies ist ein vereinfachtes Beispiel. Beachten Sie jedoch, wie die Integration eines grundlegenden Antwortsystems die Benutzerfreundlichkeit um Sprünge und Grenzen verbessert.
Nachdem Sie nun verstanden haben, was Validierung ist, möchten Sie dies hoffentlich auf Ihre Webformulare anwenden. Im Allgemeinen gibt es drei Fehler, auf die Benutzer in Ihrem Formular stoßen könnten:
Dies ist wahrscheinlich das größte Problem, auf das Benutzer stoßen werden. Haben Sie schon einmal ein Formular ausgefüllt, nur um herauszufinden, ob Sie ein ungültiges Zeichen in das Feld für den Benutzernamen eingegeben oder ein Leerzeichen in einer Webadresse verwendet haben? Hier kommt die Validierung der Formatierung ins Spiel.
Die meisten Felder in einem Webformular sind nur alphanumerisch. Wenn Sie jedoch ein E-Mail-, eine Webadresse, eine Telefonnummer oder ein Kennwortfeld haben, ist möglicherweise eine bestimmte Formatierung erforderlich. Sie können wahrscheinlich die Syntax jedes Feldes erraten. Die Überprüfung der Formatierung ist also effektiv, wenn Sie bestimmte Informationen im Auge haben.
Diese Fehler treten auf, wenn ein Benutzer vergessen hat, ein von Ihnen als "erforderlich" angegebenes Feld auszufüllen..
Dies geschieht, wenn Sie prüfen müssen, ob ein Wert einem anderen entspricht. Dies ist vor allem in Anmeldeformularen so wichtig, weil Sie Benutzern nicht erlauben möchten, sich anzumelden, wenn ihr Passwort nicht dem richtigen entspricht.
Es kann auch dazu verwendet werden, dass Benutzer ihre E-Mail oder ihr Passwort erneut eingeben, wenn es wichtig ist, dass sie keinen Fehler machen.
Während Sie Ihr Formular auf tausend verschiedene Arten gestalten können, gibt es im Allgemeinen drei grundlegende Schritte, um Ihren Benutzer bei der Behebung des Validierungsproblems zu unterstützen:
Farbe ist eines der besten Werkzeuge zu verwenden, wenn Validierung entworfen wird. Weil es instinktiv funktioniert, und zwar rot zu Fehlermeldungen oder Grün Erfolgsbotschaften sind unglaublich mächtig.
Nähe ist ein weiteres wichtiges Werkzeug: Halten Sie bestimmte Benachrichtigungen in der Nähe der Problemfelder und halten Sie Meldungen über das gesamte Formular von den einzelnen Feldern fern. Wenn Sie benutzerdefinierte "Skin" -Lösungen erstellen können, durch die diese Strategien noch offensichtlicher werden (z. B. wenn die Benachrichtigung so aussieht, als wäre sie physisch an ein bestimmtes Feld gebunden), ist dies noch besser.
Es empfiehlt sich auch, den Benutzern vorab mitzuteilen, wo sie Fehler erzeugen könnten. Viele Websites enthalten eine Seitenleiste mit Anweisungen zum Ausfüllen des Formulars. Andere Websites haben die richtige Syntax unter dem Etikett. Beide Methoden funktionieren, solange sie vorhanden sind.
Wie wir im Abschnitt "Funktionsweise der Validierung" erwähnen, möchten Sie, falls möglich, auch "Instant Validation" ausführen.
Nun, da wir die Theorie der Formularvalidierung durchlaufen haben ... schauen wir uns einige Beispiele in der Praxis an!
Beachten Sie, dass die Lösung immer einfach ist: ein QuickInfo, ein Feld in der Benachrichtigung oder ein Klartext. Solange Sie die Benachrichtigungen in der Nähe des Problemfelds aufbewahren, können Sie diese beliebig gestalten, gestalten oder gestalten. Das einzige, was Sie sich merken sollten, ist, dass Sie dem Benutzer tatsächlich einige Ratschläge geben.
Lass uns durchforsten:
ThemeForest zeigt sofort eine Fehlermeldung unter dem Feld an. Erfolgreiche Einsendungen erhalten sogar einen grünen "Erfolg!" Botschaft.
Frexy verwendet einen einfachen, aber effektiven Ansatz: Färben Sie das falsche Feld ein und fügen Sie unten hellen Text hinzu. Edit: Wie Boba in den Kommentaren bemerkt hat, könnte die grüne Farbe für einige Benutzer irreführend sein, aber Sie müssen Branding und Verwendbarkeit nach Ihrem eigenen Geschmack ausbalancieren.
Twitter fügt eine Nachricht rechts neben dem Feld hinzu, um einen Fehler anzuzeigen. Das geschieht sofort… und sie fügen dem Antwortsystem sogar Farbe hinzu, um die Nachricht zu betonen!
Mint validiert die Formularfelder nicht nur sofort, sondern auch beides positiv und negativ Es ist fast so, als ob Sie sich mit dem Formular unterhalten!
FancyForm ist ein Formular-Tool, das zeigt, wie nützlich es sein kann, Inline-Feedback in Form von Symbolen bereitzustellen.
Virb fügt eine helle Nachricht hinzu, wenn Sie etwas falsch gemacht haben. Bonuspunkte: Virb lässt Sie nicht einmal einen unerlaubten Charakter eingeben! Probieren Sie es einfach aus ... sie wagen es.
WordPress gibt Ihnen eine grundlegende Nachricht…, aber das Besondere daran ist, dass das Formular selbst eigentlich ist schüttelt wenn Sie die falschen Informationen eingeben.
InvoiceMachine verwendet den einfachsten Ansatz. Anstelle einer Texthilfe färbt sie den Hintergrund rot, um ein Problem anzuzeigen. Beachten Sie, dass ein Text-Tooltip, wenn der Benutzer über das Formular fährt, dies noch verbessern wird.
WPCoder zeigt, dass ein einfaches Javascript-Popup auch gut funktionieren kann.
Yahoo verwendet eine humorvolle Herangehensweise… anstatt einen grundlegenden Fehler zu melden, wenn ein Geburtstag falsch ist, geben sie Ihnen ein wenig Haltung.
Aus technologischer Sicht gibt es zwei Möglichkeiten, die Validierung in ein Formular zu integrieren:
Die clientseitige Validierung bietet die benutzerfreundlichste Alternative, da das Feedback sofort und sofort angezeigt werden kann, sodass der Benutzer seinen Fehler sofort beheben kann. Ein großer Nachteil der clientseitigen Validierung ist jedoch, dass sie im Allgemeinen auf eine Art JavaScript angewiesen ist. Wenn der Benutzer JavaScript deaktiviert hat, wird die Live-Validierung daher nicht angezeigt. Stellen Sie daher sicher, dass Sie weiterhin auf serverseitige Validierungen zurückgreifen können
Weitere Informationen zur technologischen Seite der Validierung finden Sie an unserem Netzwerkstandort Nettuts!
Die besten Formen sind diejenigen, die das Benutzerverhalten antizipieren. Es ist wichtig, ein Formular zu planen und zu verstehen, wie ein Benutzer Fehler machen kann, bevor es überhaupt erstellt wird. Warum? Wenn Sie ein Problem vorhersehen können, ist es einfach, eine Lösung zu entwerfen, die Benutzern hilft, das Problem zu überwinden. Es kann jedoch teuer sein, das Validierungsdesign bis zur letzten Minute zu verlassen, wenn die Codierung abgeschlossen ist. Wenn Sie sich etwas Zeit nehmen, um Strategien zu entwerfen und Ihre Formulare zu gestalten, sparen Sie auf lange Sicht Zeit, Geld und Frustration.
Accentsconagua