Dois-je faire de la place pour les messages d'erreur dans les formulaires?

Question

Je conçois une application mobile pour iOS et Android, qui comprend un formulaire. Le formulaire comporte plusieurs champs de saisie obligatoires que l'utilisateur doit remplir avant de continuer.

Si l'utilisateur clique sur Continuer avant de saisir tout ce qui est requis, un message d'erreur apparaîtra sous le champ. Tout va bien jusqu'à présent.

Mais, selon les développeurs iOS de mon équipe, il est impossible (ou du moins difficile) de faire apparaître quelque chose dans la mise en page qui pousse le reste du contenu vers le bas. Ce n'est pas un problème sur Android apparemment.

Je ne connais pas assez le développement pour iOS et j'ai du mal à trouver une alternative décente pour les développeurs iOS, donc mes questions sont:

• Est-ce vraiment un problème lors du développement pour iOS?
• Dois-je faire de la place pour le message d'erreur sous le champ de saisie, avant qu'il ne s'affiche?
• Existe-t-il d'autres bonnes solutions pour afficher le message d'erreur, qui ne poussent pas le contenu vers le bas?

Voici une capture d'écran pour présenter mon problème. J'ai également fait un exemple où j'ai réservé de l'espace pour le message d'erreur, mais je ne pense pas que cela semble assez bon d'avoir autant d'espace entre les éléments, alors que ça ne sera pas cohérent dans toute l'application.

Answer 1

Je suis en désaccord avec @colmcq. Donner de l'espace pour les messages d'erreur, qui pourraient arriver comme 10% des cas n'est pas du tout une bonne option.

En fait, il n'est pas impossible ou difficile d'afficher les messages de validation de formulaire comme vous l'avez montré dans l'option 2. De nombreuses applications utilisent uniquement cette méthode.

Référence
- Veuillez demander à votre équipe de développement de vérifier une méthode simple dans stackoverflow.com ou developer.Apple
- Vous pouvez trouver des informations utiles ici: https://www.davidbritch.com/2017/03/validating-user-input-in-xamarinforms-iv .

Il y a une nouvelle validation de formulaire intuitive ici : https://github.com/adamwaite/Validator

Answer 2

L'affichage d'un message d'erreur sous un champ de saisie est l'une des pratiques les plus courantes. Google Material Design recommande également l'utilisation de cette méthode .

Dans l'iPhone, différentes méthodes sont utilisées pour afficher ces messages d'erreur. Certains d'entre eux sont énumérés ci-dessous.

1. Activez le bouton d'action uniquement lorsque l'utilisateur entre la valeur de tous les champs de saisie requis - par exemple. Whatsapp

   

2. Affichez un toast en haut de l'écran sur la barre de navigation des applications - par exemple. Myntra

   

3. Afficher le message d'erreur sous forme de bannière en haut de l'écran sous la barre de navigation - par exemple. Instagram

   

4. Affichage de messages d'erreur courts (principalement une seule ligne) sous le champ de saisie sans prendre d'espace supplémentaire c'est-à-dire que le message est affiché dans l'espace disponible sous le champ et donc la séparation entre les champs ne tache pas les écrans asthétiques - ex. BookMyShow

   

Answer 3

Je pense que le design avec l'espace a du sens pour deux raisons:

• la disposition ne saute pas lorsque des messages d'erreur sont affichés
• plus d'espace blanc rend le design moins encombré

Alors allez avec l'option 3

Answer 4

sur notre dernier projet, nous avons utilisé des info-bulles pour afficher des messages d'erreur. la raison en était que nous utilisions des formulaires longs, et les messages d'erreur affichés créaient des espaces vides qui divisaient les composants logiques.

pour une inspiration: réagir aux info-bulles - https://react-tooltip.netlify.com/

Answer 5

Jetez un œil aux Material Design Guidelines . Je comprends que vous utilisez un style classique, mais vous pouvez appliquer la même solution.

Saisie de champ de texte Le texte d'aide peut être inclus avant, pendant ou après qu'un utilisateur interagit avec chaque champ d'un formulaire.

Afficher le texte d'erreur uniquement après interaction de l'utilisateur avec un champ. Si l'utilisateur entre des données incorrectes, le texte d'aide peut se transformer en texte d'erreur.

Réduisez le texte du formulaire à l'essentiel. Tous les champs de texte n'ont pas besoin d'aide ni de texte d'erreur.

Spécification:

Placez 16dp d'espace vertical entre les champs de texte et sous le texte d'erreur.