it-swarm.com.de

Formularerstellungsanwendung: So unterscheiden Sie die Schaltfläche "Formular speichern" von der Schaltfläche "Senden" im Formular

Ich habe eine Webanwendung zum Erstellen von Formularen.

Derzeit sieht die Benutzeroberfläche zum Erstellen von Formularen folgendermaßen aus:

mockup

bmml source herunterladen - Wireframes erstellt mit Balsamiq Mockups

Die Benutzeroberfläche ist so konzipiert, dass der Benutzer beim Erstellen des Formulars das sieht, was der Benutzer des Formulars sieht. Das hier erstellte Formular wird von den Benutzern in der Anwendung verwendet.

Es gibt einige Übereinstimmungen in der gesamten Anwendung:

  • Alle Senden-Schaltflächen sind einheitlich gestaltet und links vom Formular ausgerichtet.
  • Alle Formularfelder sind ebenfalls einheitlich gestaltet.

Problem: Da die Schaltflächen zum Senden einheitlich gestaltet sind, werden die Schaltflächen "Senden" und "Formular speichern" auf dieselbe Weise gestaltet. Die Schaltfläche zum Senden von Formularen muss vorhanden sein, damit Benutzer den Text der Schaltfläche zum Senden anpassen können.

Was kann getan werden, um diese Schaltflächen zu unterscheiden und gleichzeitig die Konsistenz über die gesamte Anwendung hinweg aufrechtzuerhalten? Es sollte keine Mehrdeutigkeit bestehen, damit Benutzer die Schaltfläche "Formular senden" nicht mit der Schaltfläche "Formular speichern" verwechseln.

5
F21

Wenn ich Sie richtig verstehe, ist dies ein Formularersteller, bei dem die Schaltfläche "Senden" Teil des Formulars ist. In diesem Fall würde ich das Formular in einem Container gruppieren, der die Aktivität zum Erstellen von Formularen effektiv von der Aktivität zum Speichern trennt.

mockup

bmml source herunterladen - Wireframes erstellt mit Balsamiq Mockups

Ich würde auch den eigenen Abschnitt "Neues Feld hinzufügen" mit einer Beschriftungstext-Eingabe und einer Dropdown-Liste des Feldeingabetyps gruppieren. Bei der Beschriftungseingabe fügen Sie Ihren Text "Einige Felder" hinzu, und mit dem Dropdown-Steuerelement können Sie (1) Texteingabe, (2) Dropdown-Eingabe, (3) Listeneingabe für Kontrollkästchen, (4) Optionsfeldeingabe auswählen und eine (5) Datums-/Uhrzeitauswahl. Bei Bedarf können weitere Steuerelemente hinzugefügt werden.

Wenn der Benutzer den zu verwendenden Eingabetyp auswählt, ändert sich die Ansicht, um die Optionen (falls vorhanden) und bearbeitbaren Texteingabebeschriftungen für die verschiedenen Optionen der Steuerelemente anzuzeigen.

Ich würde auch die Schaltfläche "Senden" an den anderen Steuerelementen und nicht an deren Beschriftung ausrichten. Dies erleichtert dem Benutzer des Formulars die Lesbarkeit.

Um das vollständige Formular zu speichern, würde ich zwei Schaltflächen verwenden. Speichern und Abbrechen . Dies ist jedoch optional und hat unterschiedliche Bedeutungen, ob eine Schaltfläche zum Abbrechen in einem Webformular etwas Gutes bewirkt. Mein Grund dafür ist jedoch die akzeptierte Antwort auf die Frage Ist in einem Windows-Formular eine Schaltfläche zum Abbrechen erforderlich .

Der Hauptteil besteht jedoch darin, den Form Builder in einem Container zu gruppieren.

9
Benny Skogberg

Da beide Schaltflächen gleich aussehen, ist es ein Fehler, sie nebeneinander zu platzieren.

Am besten erstellen Sie eine explizite, sogar offensichtliche räumliche Aufteilung zwischen Formularzone und Formularbearbeitungszone. Verwenden Sie die Hintergrundfarbe, um die Unterscheidung noch deutlicher zu machen:

enter image description here

2
Nikita Prokopov