Plusieurs formulaires sur un seul écran
J'ai environ 5 jeux de formulaires à remplir par l'utilisateur, un par un. La plupart des champs de cet ensemble de formulaires sont obligatoires, il est donc évident que l'utilisateur doit vérifier tous ces 5 formulaires. Maintenant, j'ai besoin de vos conseils et de vos conseils sur la meilleure approche pour rendre ce formulaire moins ennuyeux.
Considérez cela comme une console de conception d'e-mails où vous continuez à éditer le formulaire à gauche et vous obtenez un aperçu en direct à droite.
1. La même forme longue ennuyeuse, encore!:
Voici ma première approche, même si je ne suivrai jamais cela. Ainsi, le simulateur/aperçu en direct est fixé à droite de l'écran et le formulaire à gauche est modifié. Les 5 froms sont placés l'un en dessous de l'autre. L'utilisateur doit faire le défilement pauvre tout le temps. Je trouve cela un UX peu satisfaisant (au moins pour mon implémentation) parce que l'utilisateur ne sait jamais ce qui était un top et ce qui va suivre. Défilement Défilement Défilement (haut-bas, bas-haut) ...
Voici la capture d'écran. 
2. Solution 2: (plus de défilement) - Une approche console dynamique
Maintenant, j'ai mis ces formulaires dans un format de menu accordéon. Un seul formulaire est visible à la fois et d'autres sont repliés. La page Web n'a pas de barres de défilement, tout est clair et l'utilisateur sait quelle est la prochaine étape. L'utilisateur dispose d'un bouton suivant à la fin de chaque formulaire individuel. Cela lui montrerait la forme suivante dans le prochain menu accordéon lors de son ouverture. Je pense que cette approche est bonne car j'implémenterais également la validation de formulaire individuel, réduisant ainsi la douleur de valider le formulaire entier à la fin.
Voici la capture d'écran. 
3. Beaucoup plus simplifié, plus d'espace.
Cette approche est donc similaire à la seconde mais pas d'accordéon. C'est juste une forme après l'autre. Mais a une barre de progression en haut permettant à l'utilisateur de naviguer dans les formulaires. J'aime cette approche car elle a beaucoup d'espace pour le contenu du formulaire. Dans le type précédent, la tête correspondante occupait des espaces verticaux, ce qui la minimisait.
Capture d'écran. 
Je suggérerais l'option 3. Alors que 2 et 3 sont proches, l'indicateur de processus en haut de 3 est beaucoup plus propre/moins distrayant à mon humble avis. L'utilisateur a un contexte dans lequel il en est dans le processus global et devrait être capable de cliquer intuitivement d'avant en arrière en utilisant l'indicateur d'étape en haut de la page.
Trois donne aux utilisateurs une idée précise de ce qui va être nécessaire, combien de temps ils vont devoir passer et une idée de la façon dont le système est "modélisé". Il leur permet également de deviner quelles réponses sont pertinentes pour les questions ambiguës de la page actuelle en excluant les informations qui seront évidemment couvertes dans les pages suivantes.
Deux offre également ces avantages, mais avec un "bruit" accru grâce au contrôle en accordéon. Avec Three, les utilisateurs seront également moins susceptibles d'essayer de progresser de manière non linéaire, car la barre de progression communique un peu mieux que les divs qui s'effondrent.