Formulaire en plusieurs étapes iOS et validation des entrées utilisateur
J'ai besoin de concevoir un formulaire qui peut comprendre 3 ou 4 étapes, toutes demandant des données obligatoires et facultatives. Le formulaire global contient beaucoup d'entrées de données, j'ai donc pensé qu'il serait préférable de diviser le formulaire en pages ou en étapes, pour éviter d'avoir un défilement vertical trop long.
Je ne trouve aucun exemple pratique d'un formulaire aussi long dans une application iOS existante, car la plupart d'entre eux ne demandent que peu de données pour créer un compte, mais mon application nécessite de collecter davantage de données utilisateur.
Serait-ce une bonne approche pour créer une vue pour chaque étape du formulaire et les pousser toutes dans un contrôleur de navigation?
L'idée est d'avoir le bouton retour dans la barre de navigation pour permettre de passer à l'étape précédente, et un bouton "suivant" pour avancer, je ne sais pas si je le place aussi dans la barre de navigation, ou en bas Edge de la vue actuelle. Ou peut-être pourrais-je utiliser un stepper avec des flèches similaire à l'application Mail? Je n'ai rien trouvé à ce sujet dans iOS Human Interface Guidelines, seulement un stepper avec des boutons +/-. Ou un contrôle segmenté, avec un segment par étape?
Cependant, dans iOS Human Interface Guidelines, dans la section de la barre de navigation, j'ai lu qu'il est destiné à "la navigation dans une hiérarchie d'informations" ( iOS Human Interface Guidelines ) . Je ne sais pas à quel point stricte Apple lors de l'application des directives du document lors de la soumission à l'App Store, et si l'utilisation de cette approche pour les vues par les pairs, comme dans ce cas, serait rejetée. Une autre option que je pensais, c'était d'utiliser à la place un contrôle de page et une vue de défilement ... mais ici entre en jeu la validation des entrées. Je suppose que pour un long formulaire à plusieurs étapes, il devrait être préférable de valider les entrées de chaque étape avant d'autoriser la poursuite, ne devrait pas Je trouve cela plus facile à gérer dans la première approche (contrôleur de navigation et barre), en activant simplement le bouton "suivant" lorsque les entrées sont correctement remplies, que dans l'approche de contrôle de page (où je ne sais pas vraiment si c'est le cas). possible de désactiver momentanément le défilement de page).
Concernant le bouton Suivant en haut ou en bas: faites les deux!
Cela semble être une excellente idée de le diviser en plusieurs étapes, surtout si vous devez valider certaines parties avant de passer à d'autres. Dans ce cas, vous devrez désactiver le bouton Suivant dans le moteur pas à pas ou dans votre barre de navigation personnalisée.
À partir d'iOS, le bouton Retour devrait se trouver dans le coin supérieur gauche. Maintenant, où placer le bouton "Suivant" ou "Suivant" correspondant?
Garder les deux boutons en haut, dans la barre de navigation, facilitera le basculement entre les pages. Je les placerais là, si vous vous attendez à ce que les utilisateurs naviguent entre les pages.
Cependant, en parcourant le formulaire de haut en bas, il sera naturel de placer le bouton suivant en bas. Si vous vous attendez à ce que les utilisateurs se concentrent sur chaque champ de saisie, un par un, de haut en bas, je mettrais certainement le bouton suivant en bas. Si l'une des pages est plus élevée que ce qui tient à l'écran, c'est encore plus vrai.
De plus, si vous avez besoin de clarifier votre validation avant de continuer, le texte informatif s'adapte mieux au bouton Suivant en bas qu'en haut à la barre de navigation.
Exemples: Gauche: Scrollview avec navigation en haut et en bas de la vue déroulante. Milieu: Effacer le bouton Suivant, en attente à la fin de la page, en complément. À droite: validation.
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
