it-swarm.com.de

Vorschläge für ein Webformular-Modell

Ich arbeite an einer Webanwendung und eines der Formulare in meiner Anwendung enthält viele Eingaben. Ich habe mein Bestes versucht, um sie so zu organisieren und platzsparend und nicht verwirrend anzuzeigen, aber ich suche immer noch nach Vorschlägen. Die Mehrheit der Benutzer dieser Anwendung sind Leute, die keine Art von Bildlauf mögen.

So sieht mein aktuelles Modell aus.

Mockup v.1

2
zSysop

Es ist am besten, horizontale und vertikale Strömungen im selben Dokument zu vermeiden. Dies kann zu erheblicher Verwirrung führen und sollte nicht empfohlen werden.

Es gibt einige Lösungen, um vertikale Bildlaufprobleme zu vermeiden. Dies haben Sie versucht, indem Sie ein gemischtes Layout verwendet haben. Ich glaube, diese Lösungen sind besser als das Mischen des Layoutflusses.

  • Verwenden Sie mehrere Schritte. Lassen Sie den Benutzer einen Teil ausfüllen und klicken Sie dann auf Weiter, um den nächsten Teil des Formulars anzuzeigen. Dies ist die am häufigsten verwendete Methode und verfügt über eine umfangreiche Literatur, die ihre Benutzerfreundlichkeit unterstützt. Ich empfehle es. Aber...

  • Wenn das aus irgendeinem Grund nicht akzeptabel ist, wie wäre es dann mit dieser Alternative? Verwenden Sie einen vertikalen Standardfluss für Ihr Dokument. Wenn der Fokus jedoch in einen neuen Abschnitt des Formulars eintritt, scrollen Sie automatisch durch das Dokument, um diesen Abschnitt auf dem Bildschirm vertikal zu zentrieren.

mockup

bmml source herunterladen - Wireframes erstellt mit Balsamiq Mockups

Kein Abschnitt sollte höher sein als die erwartete Bildschirmgröße. Wenn der Benutzer das Ende eines Abschnitts erreicht und der Fokus das erste Steuerelement im nächsten Teil eingibt, sollte der Bildschirm sanft scrollen, um diesen Teil des Formulars zu zentrieren. Auf diese Weise können sie weiterhin ohne Verwendung der Bildlaufleiste auf und ab navigieren, obwohl sie immer noch nicht das gesamte Formular auf einmal auf dem Bildschirm sehen können. Diese Navigationsmethode bezieht sich auf einen vertikalen Deckungsfluss, ist jedoch zur Bildung von Segmenten angepasst.

Nicht dass sich ein 'Formularabschnitt' in diesem Zusammenhang auf einen Teil von Feldern bezieht, nicht auf jedes einzelne Steuerelement. "Adresse", "Persönliche Informationen" usw.

4
Myrddin Emrys

sieht so aus, als könnten Sie Name und andere Informationen in einem einzigen Abschnitt kombinieren, ohne den vertikalen Raum aufzugeben. Versuchen Sie, die Namensfelder in eine einzelne Zeile zu setzen. Außerdem sind andere Informationen keine gute Überschrift, insbesondere für eine Gruppe von Feldern, die so wichtig sind, dass sie oben rechts in Ihrem Formular landen.

Außerdem ist das Wechseln von einem gestapelten Layout (links) zu einem Seitenflusslayout (rechts) oben und unten keine gute Entwurfsentscheidung. Es macht mich auf die Tatsache aufmerksam, dass Sie zwei verschiedene Layouts für Adressen verwenden, was mich dann auf die Tatsache aufmerksam macht, dass Sie unterschiedliche Daten zu jeder Adresse erfassen. Die Benutzerfreundlichkeit der App wird nicht beeinträchtigt, ist aber eine merkwürdige Inkonsistenz.

3
Untermensch

Es gibt viele Probleme mit Ihrer Form, genau wie andere erwähnt, und es ist viel zu frustrierend. Hier sind einige grundlegende Tipps für Sie, die Sie berücksichtigen sollten, bevor Sie ein Registrierungsformular planen.

  • frage nur die notwendigen Informationen (am wenigsten möglich), weil die Leute ihre persönlichen Daten nicht gerne weitergeben
  • vermeiden Sie zwei Spaltenlayouts - Leute bemerken die zweite Spalte kaum und werden verwirrt
  • betrachten Sie Paginierung - wenn Sie das Scrollen vermeiden möchten oder eine lange Form haben

Meine Idee : warum fragst du nicht nur nach einem Benutzernamen und einer E-Mail? Oder mit Facebook anmelden? Und überzeugen Sie Benutzer, ihre Profilseite mit zusätzlichen Informationen auszufüllen, die Sie benötigen. Nachdem sie Ihren Service ausprobiert haben und damit zufrieden sind, geben sie ihre persönlichen Daten weiter.

1