Showing the user the hierarchy of inputs in a form

Question

I'm working on a form where the user can enter multiple "disciplines" using multiple text fields, the form starts out like this:

then if they press the button (Add SUB), this happens:

As you can see the button got disabled and a new "Sub Discipline" field got added.

If they start typing in a "discipline" field another field will be created, and the same thing goes for the "Sub Discipline".

like the above image.

Does this design deliver the idea of hierarchy in the form to the user? If not, how can I improve it? Should I add a line the connects each sub with its parent like a tree?

Thanks

EDIT :

That's what I've come up with so far:

2nd option:

3rd option:

EDIT #2:

I changed things around a bit.

now the use is presented with a box (the container of the inputs) but it acts as a button to add a new container, like this:

^{download bmml source – Wireframes created with Balsamiq Mockups}

and on click the box shifts down and another box with the appropriate inputs is added, like this:

^{download bmml source}

Answer 1

You could place controls in the way, which more clearly conveys the hierarchy. It's close to inplace editing pattern idea.

Some other changes to convey hierarchy idea are based on Gestalt principles:

.

UPDATE
To support in-place editing option, consider task flows for some use cases.
Scenario 1 Adding multiple items. In-place option provides more smooth flow
Scenario 2 Adding single flow. First user search whether the item exists in a list. If it doesn't exist, he adds it. Again, in-place editing works better.
So in-place editing moves controls close to a decision point.

Answer 2

Three main things.

First - does the user understand what 'Sub' means? What is the common language used by the users, not the internal name.

Secondly - you don't need to indent the sub part, i'm guessing you're a programmer (or maybe not). Just put it underneath and ensure it's visually grouped with the first item (just by being close, no need for a box).

Third - do you even need a button? The simplest solution is just show the two boxes or use some form of progressive disclosure (showing another box when one is typed into). Others will be able to provide examples of that - and there are probably some on this site already.