it-swarm.com.de

Wie kann ein Online-Formular mit 20 Feldern benutzerfreundlicher gestaltet werden?

Ich habe ein ziemlich einfaches Formular für die Dateneingabe erstellt, das von Büroangestellten zum Erstellen einer Datenbank verwendet wird. Das Formular besteht aus einem Jahrzehnt von Excel-Dateien, die von der Organisation verwendet wurden. Dies ist einer der Gründe, warum es so viele Felder gibt. Ein weiteres Problem besteht darin, dass das Formular zwei verschiedene Arten von Einträgen abdeckt - es gibt "Abonnenten" und "Mitwirkende", aber der Manager besteht absolut darauf, dass es nur ein Formular gibt, das beide behandelt, und dass alle Felder bearbeitet werden können (also kein Verstecken) Felder, bis sie benötigt werden).

Im Moment habe ich also 2 Feldspalten - 1 Spalte mit physischen Informationen (Name, Adresse, Faxnummer usw.) und 1 Spalte mit Metainformationen (E-Mail-Adresse, Kontonotizen usw.)

Ist dies das beste Layout angesichts der Einschränkungen, die ich habe?

hier ist ein Link zu dem, was ich bisher habe:

enter image description here

13
Zrb0529

Ich habe eine Version des Formulars in HTML verspottet, die meiner Meinung nach einige Dinge verbessert (aber nicht alle, weil ich nicht Sie bin und Ihre spezifischen Domain-Probleme nicht kenne):

http://newlyminted.handcraft.com/

enter image description here

Einige der Änderungen, die ich vorgenommen habe:

  • Gruppenbezogene Felder . Vorname, zweiter Vorname und Nachname sind Teil desselben Ablaufs. Gruppieren Sie sie daher visuell. Gleiches gilt für Dinge wie Adresse usw.
  • Teilen Sie das Formular in Feldsätze auf . Dies bricht die Dinge auf und ermöglicht es mir, jeweils einen Teil des Formulars zu bearbeiten, und gleichzeitig fühlt sich das Formular weniger lang an, da ich nicht das Ganze auf einmal bearbeiten muss.
  • Verwenden Sie ein Dropdown-Menü für state . Dies verhindert Fehler und erleichtert die Arbeit insgesamt. Ich habe auch die Größe des Postleitzahlfelds reduziert, da Sie wissen, dass es niemals mehr als 5 Zeichen enthalten wird. Ein Vorteil hier ist, dass das Feld jetzt eine Art Erschwinglichkeit hat, weil ich es intuitiv als Postleitzahlfeld nur anhand der Größe identifizieren kann.
  • Verwenden Sie gegebenenfalls die richtigen Eingabesteuerelemente . Wie bei der Auswahl für Zustände oben habe ich das Feld "Notizen" zu einem Textbereich gemacht, da "Notizen" naturgemäß impliziert, dass Sie mehr Informationen eingeben möchten, als in ein einzelnes Eingabefeld passen, und das Scrollen in diesen Dingen zum Kotzen ist.

Ich hoffe, das hilft. Fühlen Sie sich frei, wiederzuverwenden.

33
Rahul

Es tut mir leid, von Ihren Einschränkungen zu hören. Das Hauptproblem bei der Benutzerfreundlichkeit dieses Formulars ist der Manager, der zwei Workflows in einem Formular zusammenführen möchte.

Folgendes müssen Sie tun, um die Situation ein wenig zu entlasten:

  1. Teilen Sie das Formular in mehrere Schritte auf (mindestens "Kontaktinformationen" und "Zahlungsinformationen"). Wenn dies nicht möglich ist, erstellen Sie visuell getrennte Abschnitte auf einer Seite und beschriften und nummerieren Sie sie: "Kontaktdetails - 1/4" (oder was auch immer).
  2. Da es sich um eine lange vertikale Form handelt, richten Sie die Beschriftungen nach oben aus, um die Fertigstellungsgeschwindigkeit zu erhöhen.
  3. Kürzen Sie Beschriftungsnamen, die derzeit aus 2 Zeilen bestehen.
  4. Entfernen Sie Standardwerte aus den Dropdown-Listen - sie sollten beim Laden leer sein.
  5. Wenn die Dropdown-Listen nicht mehr als 3 Optionen enthalten, ändern Sie sie in Optionsfelder und platzieren Sie sie vertikal - schnellere Erkennung.
  6. Richten Sie die Schaltfläche "Senden" an den Textfeldern und nicht an den Beschriftungen aus.

Allgemeine Informationen zum Formularentwurf finden Sie im Smashing Magazine " Ein umfassender Leitfaden zur Benutzerfreundlichkeit von Webformularen " und in den darin verlinkten Artikeln und Büchern.

4
dnbrv

Das erste, was Ihnen in den Sinn kommt, ist, dass Sie ein Formular für Mitwirkende und Abonnenten haben.

Teilen Sie das Formular in drei Teile:

  • Gemeinsame Felder
  • Abonnentenfelder
  • Mitwirkende Felder

Im Idealfall werden die Felder für Abonnenten oder Mitwirkende nur angezeigt, wenn dieser Benutzertyp ausgewählt ist, wodurch sich die Anzahl der Felder im Formular erheblich verringert. Wenn dies jedoch wirklich nicht möglich ist, ordnen Sie sie in separaten Bereichen an (mithilfe von Gruppenfeldern oder unterschiedlichen Hintergrundfarben) und prüfen Sie, ob Sie die inaktiven Felder ausgrauen können.

Andere Dinge, nach denen Sie suchen könnten:

  • Reduzieren Sie die Adressfelder und lassen Sie ein Postleitzahl-/Postleitzahlensuchfeld die Werte für den Benutzer ausfüllen.
3
ChrisF

Zusätzlich zur Aufteilung des Formulars in Felder "Allgemein"/"Abonnent/Mitwirkender" möchten Sie möglicherweise Farbtipps verwenden. Verwenden Sie zwei helle Hintergrundfarben für Abonnenten- und Mitwirkendefelder. Verschieben Sie die Auswahl Abonnent/Mitwirkender direkt nach den allgemeinen Feldern und verwenden Sie eine hellgraue Vordergrundfarbe für die nicht zutreffenden Textfelder. (Natürlich sind sie sollten deaktiviert sein, aber das ist die Sturheit Ihres Managers).

Für die "zusätzlichen" Felder wie "Hinzufügen. E-Mail" möchten Sie möglicherweise eine kleinere Schriftart verwenden. Dies dient als visueller Hinweis darauf, dass sie häufig übersprungen werden.

2
MSalters