Acht Regeln für effektive Webformulare
|
Wenn Sie Informationen von Ihren Benutzern sammeln, gibt es keinen einfacheren oder direkteren Weg als mit einem Webformular. Gut gestaltete Formulare können wertvolle Informationen liefern, Benutzer aber auch abschrecken. Vor diesem Hintergrund gibt es einige Regeln für die Gestaltung von Webformularen, die jeder Designer kennen sollte. Alle Beispiele in diesem Artikel wurden mit CoffeeCup Web Form Builder erstellt. 1. Konservative Konstruktion mit einer zielgerichteten Designform Seien wir ehrlich: Niemand verbringt gerne Stunden damit, Formulare auszufüllen. Halten Sie Ihre Formulare kurz und bündig. Und eliminieren Sie diejenigen, die absolut unnötig sind oder keine praktischen Ergebnisse bringen. Formularelemente. Stellen Sie sicher, dass jeder Teil des Formulars Jeder Punkt trägt zur Gesamtentwicklung bei und die Benutzer werden es Ihnen danken. Ihre Formularstruktur sollte so funktional sein wie die Elemente darin. Wenn Sie Ihr Formular gestalten, Denken Sie daran, dass die Menschen zumindest in westlichen Ländern von oben nach unten und von links nach rechts lesen. Sie Mit der Tabulatortaste können Sie zwischen den Formularelementen wechseln. Ihr Entwurf sollte durch die Anordnung und Beschriftung der Elemente klar erkennbar sein. Natürlich darf Ihr Formular nie unübersichtlich oder überladen aussehen - sicherstellen Alle Elemente sind gleichmäßig verteilt und übersichtlich angeordnet. Hier sind einige Standardformulare, die Sie als Ausgangspunkt für die Gestaltung kreativerer Formulare verwenden können: Die Beschriftung ist linksbündig und die Eingabefelder sind vertikal angeordnet:  Dieses Formular verfügt über linksbündige Beschriftungen und übersichtlich von oben nach unten angeordnete Eingabefelder. Formularelemente können leicht mit den Augen erfasst werden, insbesondere wenn Sie Fragen stellen, mit denen die Benutzer nicht vertraut sind. Da sie die Fragenliste problemlos von oben bis unten lesen können, ohne durch das Eingabefeld unterbrochen zu werden, sind sie Konzentrieren Sie sich auf die Frage, die Sie stellen. Dieser Stil verlängert jedoch die Zeit, die zum Ausfüllen des Formulars benötigt wird, da die Augen auf das Etikett gerichtet sind. Das Wechseln zwischen Registerkarten und Eingabefeldern nimmt viel Zeit in Anspruch. Die Beschriftung ist rechtsbündig und die Eingabefelder sind vertikal gestapelt:  Rechtsbündige Beschriftungen sind leichter zu erkennen und zu lesen und vermeiden den Leerraum zwischen der Beschriftung und dem Eingabefeld. Der unpassende Platz erschwert allerdings das Lesen, ist unansehnlich und sieht nicht schön aus. Beschriftungen oben ausrichten:  Oben ausgerichtete Etiketten können das Ausfüllen von Formularen schneller und einfacher machen, da das Auge nicht zwischen dem Etikett und dem Wechseln Sie zwischen Eingabefeldern hin und her. Mit diesem Stil können Sie außerdem verwandte Felder gruppieren und so Platz sparen. 2. Passen Sie Ihr Formular seinem Stil an Jedes Formular sollte auf die Situation oder den Kontext zugeschnitten sein, den es vermitteln soll. Wenn Sie Ihr Formulardesign planen, Stellen Sie sich diese Fragen: Welche Frage werden Sie stellen? Warum? Wie sieht es mit und ohne Formular aus? Enthält das Formular Informationen, die der Benutzer ausfüllen muss? Oder gibt es Informationen, die sie ausfüllen möchten? Ihre Antwort hat großen Einfluss auf die Gestaltung und den Inhalt Ihres Formulars. Hat geholfen. 3. Verwenden Sie, was Sie brauchen Wenn Sie zögern, Ihrem Formular ein Element hinzuzufügen, fragen Sie sich, ob Sie auch ohne es auskommen können. Wenn die Antwort „Ja“ lautet, verwenden Sie es nicht. Reset-Buttons sind oft unnötige Formularelemente. Dieses historische Relikt, das eigentlich hätte verschwinden sollen, ist immer noch da. In Formularen und sogar in zukünftigen Formularentwürfen. Denken Sie daran, wenn Sie Formularinformationen ändern möchten, Der Inhalt des Eingabefelds ist nicht wirklich wichtig. Warum also alle Informationen löschen? Der einzige Vorteil einer Reset-Schaltfläche besteht darin, dass Sie die gerade eingegebenen Informationen versehentlich löschen, was ärgerlich ist. Sie müssen es nicht erneut ausfüllen. 4. Verwenden Sie prägnante Beschreibungen nur, wenn es nötig ist Möglicherweise möchten Sie erklären, warum Sie im Formular relevante Informationen erfassen, insbesondere Informationen, die die Benutzer nicht gerne preisgeben. Wie etwa Telefonnummer oder E-Mail. Dies beseitigt nicht nur die Zweifel des Benutzers, sondern stellt auch die Authentizität der Daten sicher. Sicherheit. Halten Sie Beschreibungen und Kommentare kurz und prägnant. Sie können auch eine andere Farbe, Schriftgröße oder einen anderen Stil verwenden, um Unterscheiden Sie sie. Zu viel ist genauso schlecht wie zu wenig. Sie möchten nicht, dass diese Beschreibungen langweilig sind oder den Rest des Formulars überschatten. Dies ist ein Formular, das Druckdienste bereitstellt. Es verwendet effektiv eine Beschreibung, um zu erklären, was das Formular tut. Siehe das Bild unten:  5. Proaktive Kommunikation Stellen Sie sicher, dass Ihre Formulare eine benutzerfreundliche Sprache verwenden. Hier ist ein Tipp, um in einfachem Englisch zu schreiben: Konversationstext: Vermeiden Sie es, tatsächlich mit Ihren Benutzern zu sprechen. Wenn Sie den Namen einer Person wissen möchten, würden Sie ihr nicht in die Augen schauen und nach ihrem „vollständigen Namen“ fragen. Es ist wirklich schrecklich. Wenn Sie eine positive Antwort wollen, lächeln Sie und sagen: „Hallo, wie heißen Sie?“ Denken Sie daran, die Bezeichnung „Vollständiger Name“ durch eine benutzerfreundlichere Bezeichnung wie „Ihr Name“ zu ersetzen. 6. Teilen Sie das Formular in kleinere Teile auf Der Austausch von Ideen und Meinungen in einer kleinen Gruppe ist eine Form der Kommunikation. Jeder stellt sich den anderen vor. Man beschreibt sich selbst. Ihr Beruf, andere machen Kommentare oder stellen Fragen. Sie wiederholen, was Sie gesagt haben, oder beantworten die Fragen anderer. Fragen erhalten mehr Antworten. Ein sinnvolles und erfüllendes Gespräch, Informationen sind endlos, Einmal. Dasselbe gilt für Webformulare als weitere Form der Kommunikation. Sie möchten vielleicht viele Fragen stellen, aber Das heißt aber nicht, dass Sie den Leser damit überhäufen müssen. Versuchen Sie es mit horizontalen Linien, Farbblöcken, aussagekräftigen Bildern, oder verwenden Sie Überschriften, um die Informationen in kleine und leicht lesbare Gruppen aufzuteilen. Wenn keine der oben genannten Methoden funktioniert, Teilen Sie Ihr Formular einfach auf mehrere Seiten auf und fügen Sie oben einen Fortschrittsbalken hinzu, damit die Benutzer wissen, wie viel Zeit ihnen noch bleibt. Wie viel wurde noch nicht fertiggestellt? Wie unten dargestellt:  7. Verwenden Sie aussagekräftige, kontextbezogene Fehlermeldungen Ihre Fehlermeldung sollte klar angeben, was schiefgelaufen ist, und den Fehler hervorheben. Schließlich sucht niemand gerne nach einem fehlenden Feld in einem Formular. 8. Wenn Benutzer auf die Schaltfläche „Senden“ klicken, denken sie, sie seien fertig und verlassen die Seite. Im Grunde sagen sie damit: „Hier sind Ihre Informationen. Tschüß.“ Wenn es ein echtes Gespräch wäre, würden Sie ihnen die Hand schütteln, „Auf Wiedersehen“ sagen und dann gehen, oder Ihr Formular wird dasselbe tun. Gibt es eine Anleitung? Der Benutzer gelangt auf eine Seite mit der Meldung: „Vielen Dank für Ihre Einsendung! Wir melden uns bald bei Ihnen.“ Oder etwas in der Art. Außerdem sollte auf der Webseite ein Link zurück zur Startseite vorhanden sein. Das ist alles! Beachten Sie diese Regeln beim Entwerfen von Webformularen und Sie werden von der Qualität Ihrer Formulare begeistert sein. und viel Feedback bekommen. Originallink: http://www.wpdfd.com/ Ausgaben/87/Acht Regeln für effektive-web-formulare/ |
<<: Gängige Methoden und Probleme der Docker-Bereinigung
>>: Super ausführliches Tutorial zur Installation und Bereitstellung von mysql-canal-rabbitmq
Artikel empfehlen
Möglicherweise benötigen Sie einen digitalen Großbild-Scrolling-Effekt wie diesen
Der digitale Scrolleffekt auf großen Bildschirmen...
Eine kurze Analyse der CSS-Selektorgruppierung
Selektorgruppierung Angenommen, Sie möchten, dass...
Lösung für das Problem, dass der Hostname des Hosts im Docker-Container nicht abgerufen werden kann
Der Test wird in der Node.JS-Umgebung bestanden. ...
Zusammenfassung der für MySQL erforderlichen allgemeinen Kenntnisse
Inhaltsverzeichnis Primärschlüsseleinschränkung E...
Erste Schritte mit benutzerdefinierten Anweisungen in Vue 3.0
Inhaltsverzeichnis 1. Benutzerdefinierte Anweisun...
Zusammenfassung der Wissenspunkte zum Selbststudium der integrierten MySql-Funktionen
Zeichenfolgenfunktionen Überprüfen Sie den ASCII-...
Einfache Beispiele zum Erstellen gespeicherter Prozeduren, Trigger und zur Verwendung von Cursorn in Navicat (Bilder und Text)
1. Tabellen erstellen <br /> Erstellen Sie ...
So verbinden Sie Navicat mit der Docker-Datenbank auf dem Server
Starten Sie den MySQL-Container in Docekr Verwend...
Lösung für Workbench, das keine Verbindung zu MySQL auf Alibaba Cloud Server Ubuntu herstellt (getestet)
In den letzten zwei Tagen hatte ich große Problem...
FTP-Remoteverbindung zu Linux über SSH
Installieren Sie zunächst SSH in Linux. Nehmen Si...
Einführung in das Layout des HTML-Seitenquellcodes_Powernode Java Academy
Einführung in das Layout des HTML-Seitenquellcode...
So ändern Sie das MySQL-Datenbankdateiverzeichnis in Ubuntu
Vorwort Der Ubuntu-Server des Unternehmens platzi...
Nginx erstellt Implementierungscode für RTMP-Liveserver
1. Erstellen Sie ein neues RTMP-Verzeichnis im Ng...
Detaillierte Erläuterung der Verwendung der Vue3-Statusverwaltung
Inhaltsverzeichnis Hintergrund Bereitstellen / In...
Detaillierte Erläuterung der perfekten CSS3+JS-Implementierung des Lupenmodus
Vor etwa einem Jahr habe ich einen Artikel geschr...