Affichage à l'utilisateur de la hiérarchie des entrées dans un formulaire

Question

Je travaille sur un formulaire où l'utilisateur peut entrer plusieurs "disciplines" en utilisant plusieurs champs de texte, le formulaire commence comme ceci:

puis s'ils appuient sur le bouton (Ajouter SUB), cela se produit:

Comme vous pouvez le voir, le bouton a été désactivé et un nouveau champ "Sub Discipline" a été ajouté.

S'ils commencent à taper dans un champ "discipline", un autre champ sera créé, et il en va de même pour la "sous-discipline".

comme l'image ci-dessus.

Cette conception donne-t-elle à l'utilisateur une idée de hiérarchie dans le formulaire? Sinon, comment puis-je l'améliorer? Dois-je ajouter une ligne qui relie chaque sous-marin à son parent comme un arbre?

Merci

ÉDITER :

C'est ce que j'ai trouvé jusqu'à présent:

2ème option: 

3ème option: 

EDIT # 2:

J'ai un peu changé les choses.

maintenant l'utilisation est présentée avec une boîte (le conteneur des entrées) mais elle agit comme un bouton pour ajouter un nouveau conteneur, comme ceci:

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

et au clic, la boîte se déplace vers le bas et une autre boîte avec les entrées appropriées est ajoutée, comme ceci:

^{télécharger la source bmml}

Answer 1

Vous pouvez placer des contrôles sur le chemin, ce qui transmet plus clairement la hiérarchie. C'est proche de l'idée de modèle d'édition sur place.

Certains autres changements pour transmettre l'idée de hiérarchie sont basés sur les principes de la Gestalt:

.

MISE À JOUR
Pour prendre en charge l'option d'édition sur place, tenez compte des flux de tâches pour certains cas d'utilisation.
Scénario 1 Ajout de plusieurs éléments. L'option sur place offre un écoulement plus fluide
Scénario 2 Ajout d'un flux unique. Le premier utilisateur recherche si l'élément existe dans une liste. S'il n'existe pas, il l'ajoute. Encore une fois, l'édition sur place fonctionne mieux.
Donc la modification sur place déplace les contrôles près d'un point de décision.

Answer 2

Trois choses principales.

Premièrement - l'utilisateur comprend-il ce que signifie "Sub"? Quel est le langage commun utilisé par les utilisateurs, pas le nom interne.

Deuxièmement - vous n'avez pas besoin de mettre en retrait la sous-partie, je suppose que vous êtes un programmeur (ou peut-être pas). Placez-le simplement en dessous et assurez-vous qu'il est visuellement groupé avec le premier article (juste en étant proche, pas besoin de boîte).

Troisièmement - avez-vous même besoin d'un bouton? La solution la plus simple consiste simplement à afficher les deux cases ou à utiliser une forme de divulgation progressive (en montrant une autre case lorsque l'une est tapée). D'autres pourront en fournir des exemples - et il y en a probablement déjà sur ce site.