Comment éditer des formulaires complétés par étapes?
J'ai restructuré un grand formulaire en 5 étapes (boîtier progressif) comme le processus de paiement sur les sites de commerce électronique. À la dernière étape, nous affichons un aperçu de tous les champs avec un bouton de soumission.
Ce processus consiste essentiellement à ajouter un produit dans le système.
La question concerne la fonction d'édition, pour laquelle je veux savoir si je dois suivre un processus en 5 étapes ou mettre tous les champs sur une seule page?
De plus, chaque modification doit être approuvée par une autorité supérieure, j'ai donc besoin d'inspiration pour afficher les valeurs ajoutées et précédentes à l'écran. Toute référence sera appréciée.
Je pense qu'une seule page est meilleure pour le mode édition (il suffit de regarder la fonction d'édition pour le profil utilisateur sur StackExchange). Peut-être que vous pouvez donner le contrôle pour chaque champ (comme Linkedin).
Mais je pense que votre choix dépend de l'habitude de l'utilisateur avec le mode d'édition et la fréquence des changements pour chaque champ.
Vous pouvez représenter les étapes utilisées pour créer le produit sur une seule page. Divisez simplement les informations en sections visuellement distinctes, où chaque section se rapporte à une étape. (voir les wireframes)
Dans le premier filaire ci-dessous, cliquer sur le bouton "Modifier la section 1" pourrait soit rendre les champs de la page directement modifiables, soit ouvrir une superposition qui ressemble à l'écran sur lequel l'utilisateur a configuré les informations pour la première fois.
Dans le deuxième filaire, un utilisateur disposant de privilèges suffisants a accédé à un écran de produit et est averti que certains changements nécessitent leur attention. Les champs modifiés sont mis en surbrillance (comme pour la validation de formulaire), certaines informations sont incluses sur la modification et des options pour approuver/rejeter sont fournies.
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
