web-dev-qa-db-fra.com

Comment réduire la complexité de l'interface de formulaire imbriqué?

J'ai un design complexe sur ma main qui est essentiellement un assistant. La maquette suivante devrait vous donner une idée juste:

mockup

télécharger la source bmml - Wireframes créés avec Balsamiq Mockups

step1, step2 .... step 5 sont des étapes supplémentaires qui doivent être séparées. J'ai un problème avec "Step2" car il contient un modal à onglets (je ne sais même pas si je dois l'appeler ainsi ou si une telle chose existe) avec les onglets "Ajouter un produit", ajouter un lien, etc.

La raison pour laquelle Ajouter un produit a été conservé dans un onglet séparé est que l'utilisateur peut passer à plusieurs produits. Ainsi, après avoir cliqué sur soumettre, l'utilisateur sera informé que le produit a été ajouté avec succès et le formulaire sera effacé pour un nouveau produit à ajouter si nécessaire. Idem avec Ajouter un lien.

Ma question est la suivante: existe-t-il un moyen de réduire la complexité et de simplifier au maximum le processus de l'utilisateur pour cette "étape 2"?

1
md1hunox

Le premier problème est que vous n'avez qu'un seul lien "ajouter" pour différents types de contenu. Si vous le pouvez, il est préférable de contextualiser chaque lien:

  • "ajouter un produit" sur votre liste de produits
  • "ajouter un lien" sur votre liste de liens
  • "ajouter une image" partout où vous devez insérer l'image

Ensuite, lorsque vous lui demandez de choisir une sorte de produit, il répond déjà à une question, il ne navigue pas. Cette question doit donc faire partie de votre formulaire et non un onglet

Deux autres choses:

  • Trouvez un terme plus spécifique que "autre", surtout s'il s'agit de la valeur par défaut
  • N'utilisez pas de bouton de réinitialisation, il n'est utilisé que par erreur.

mockup

télécharger la source bmml - Wireframes créés avec Balsamiq Mockups

1
Renaud

Vous pouvez le simplifier en transformant les onglets en arbre de décision.

Quelque chose comme ce contrôle accordéon:

accordion control

Ensuite, vous pouvez simplement faire apparaître la fenêtre (unique) de droite, au lieu de faire apparaître une fenêtre avec des onglets.

2
Boranas

Un accordéon comme l'a suggéré Boranas est votre meilleur pari. Une autre suggestion serait d'ajouter des boutons + et - très visibles aux en-têtes de l'accordéon pour qu'ils soient tactiles

0
Jonathan Cardoz