Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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?

Thanks

EDIT :

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:

mockup

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:

mockup

download bmml source

share|improve this question
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. –  Mike Lischke Jan 24 at 8:54
add comment

2 Answers 2

up vote 1 down vote accepted

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

.

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

share|improve this answer
    
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 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. –  Alexey Kolchenko Jan 23 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 at 13:24
    
@Kmelkon, I've updated my answer, please watch update section. –  Alexey Kolchenko Jan 23 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. –  Alexey Kolchenko Jan 27 at 14:52
show 4 more comments

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.

share|improve this answer
    
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 at 12:47
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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