it-swarm.com.de

Sollte ich Platz für Fehlermeldungen in Formularen schaffen?

Ich entwerfe eine mobile App für iOS und Android, die ein Formular enthält. Das Formular enthält mehrere erforderliche Eingabefelder, die der Benutzer ausfüllen muss, bevor er fortfahren kann.

Wenn der Benutzer auf Weiter klickt, bevor er alles Erforderliche eingibt, wird eine Fehlermeldung unter dem Feld angezeigt. Bis jetzt alles in Ordnung.

Laut den iOS-Entwicklern in meinem Team ist es jedoch unmöglich (oder zumindest schwierig), etwas im Layout anzuzeigen, das den Rest des Inhalts nach unten drückt. Dies ist anscheinend kein Problem auf Android).

Ich weiß nicht genug über die Entwicklung für iOS und habe Schwierigkeiten, eine anständige Alternative für die iOS-Entwickler zu finden. Meine Fragen lauten daher:

  • Ist das wirklich ein Problem bei der Entwicklung für iOS?
  • Sollte ich Platz für die Fehlermeldung unter dem Eingabefeld schaffen, bevor sie angezeigt wird?
  • Gibt es andere gute Lösungen für die Anzeige der Fehlermeldung, die den Inhalt nicht nach unten drücken?

(enter image description here

Hier ist ein Screenshot, um mein Problem zu veranschaulichen. Ich habe auch ein Beispiel erstellt, in dem ich Speicherplatz für die Fehlermeldung reserviert habe, aber ich denke nicht, dass es ziemlich gut aussieht, so viel Platz zwischen den Elementen zu haben, wenn dies nicht in der gesamten App konsistent ist.

12
NBK

Ich bin mit @colmcq nicht einverstanden. Es ist überhaupt keine gute Option, Platz für Fehlermeldungen zu schaffen, die in etwa 10% der Fälle auftreten können.

Tatsächlich ist es nicht unmöglich oder schwierig, die Formularüberprüfungsnachrichten anzuzeigen, wie Sie in Option 2 gezeigt haben. Viele Apps verwenden nur diese Methode.

Referenz
- Bitte fragen Sie Ihr Entwicklerteam nach einer einfachen Methode in stackoverflow.com oder developer.Apple
- Hier finden Sie möglicherweise nützliche Informationen: https://www.davidbritch.com/2017/03/validating-user-input-in-xamarinforms-iv .

Hier gibt es eine neue und intuitive Formularvalidierung : https://github.com/adamwaite/Validator

4
Kishan

Das Anzeigen einer Fehlermeldung unter einem Eingabefeld ist eine der häufigsten Methoden. Googles Material Design empfiehlt ebenfalls die Verwendung dieser Methode .

Im iPhone werden verschiedene Methoden verwendet, um diese Fehlermeldungen anzuzeigen. Einige von ihnen sind unten aufgeführt.

  1. Aktivieren Sie die Aktionsschaltfläche nur, wenn der Benutzer den Wert für alle erforderlichen Eingabefelder eingibt - z. WhatsApp

    (enter image description here

  2. Zeigen Sie oben auf dem Bildschirm über der Navigationsleiste der Apps einen Toast an - z. Myntra

    (enter image description here

  3. Zeigen Sie die Fehlermeldung als Banner oben auf dem Bildschirm unter der Navigationsleiste an - z. Instagram

    (enter image description here

  4. Anzeigen kurzer Fehlermeldungen (meist einzeilig) unterhalb des Eingabefeldes ohne zusätzlichen Platz , dh die Meldung wird im verfügbaren Platz unterhalb des Feldes und damit angezeigt Die Trennung zwischen den Feldern beeinträchtigt die Asthethik der Bildschirme nicht - z. BookMyShow

    (enter image description here

3
Akhil Ashok

Ich denke, das Design mit Raum macht aus zwei Gründen Sinn:

  • das Layout springt nicht, wenn Fehlermeldungen angezeigt werden
  • durch mehr Leerraum wirkt das Design weniger überladen

Fahren Sie also mit Option 3 fort

0
colmcq

bei unserem letzten Projekt haben wir Tooltips verwendet, um Fehlermeldungen anzuzeigen. Der Grund war, dass wir lange Formulare verwendeten und die angezeigten Fehlermeldungen leere Bereiche ergaben, die logische Komponenten trennten.

als Inspiration: Reagieren Sie auf Tooltips - https://react-tooltip.netlify.com/

Schauen Sie sich einfach die Material Design Guidelines an. Ich verstehe, dass Sie einen klassischen Stil verwenden, aber Sie können dieselbe Lösung anwenden.

Eingabe von Textfeldern Hilfetext kann vor, während oder nach der Interaktion eines Benutzers mit jedem Feld in einem Formular enthalten sein.

Fehlertext nur nach Benutzerinteraktion mit einem Feld anzeigen. Wenn der Benutzer falsche Daten eingibt, wird der Hilfetext möglicherweise in Fehlertext umgewandelt.

Minimieren Sie den Formulartext auf das Wesentliche. Nicht jedes Textfeld benötigt Hilfs- und/oder Fehlertext.

Spezifikation:

Platzieren Sie 16 dp vertikalen Abstand zwischen Textfeldern und unter dem Fehlertext.

(enter image description here

(enter image description hereenter image description hereenter image description hereenter image description here

0
Madalina Taina