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

initial state

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

second state

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".

3rd state

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?



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

enter image description here

2nd option: enter image description here

3rd option: enter image description here

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

  • 1
    I like this approach very much. It clearly transports the idea, is visually appealing and (as noted in an answer) "speaks an understandable language". Keep the indentation as this is a very common paradigm to indicate child items in a group and their hierarchy. Jan 24, 2014 at 8:54

2 Answers 2


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:
enter image description here


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.
enter image description here

  • So you're saying that I should keep the sub fields tabbed, give each group a background and separate each group by space ?
    – Kmelkon
    Jan 23, 2014 at 12:52
  • 1
    Tabs convey idea of subelements, space divides the groups. Background could be used to highlight "active" set, which is hovered or being edited. Jan 23, 2014 at 13:10
  • I'll edit the question in a minute with what I've come up with. please take a look.
    – Kmelkon
    Jan 23, 2014 at 13:24
  • @Kmelkon, I've updated my answer, please watch update section. Jan 23, 2014 at 14:32
  • 1
    @Kmelkon, I mean design, where control is placed locally, and gives the result of its action in-place (place, where new item will be created). The surrounding context brings better action understanding and is great for feedback. Jan 27, 2014 at 14:52

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.

  • 1- Yes the user understands the word "sub" 2- I am a web developer, yes. even I can't tell if it's "just close" that it belongs to this parent, that's why I want a visual indication, I might be wrong though. 3-This could be done easily,guess this will work.
    – Kmelkon
    Jan 23, 2014 at 12:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.