Web GUI pattern: How to design complicated multi-level nested forms in an ERP system

Question

I am on designing an ERP application. We have many forms with nested objects inside and many form elements.

I tried to design the form like this example.

But it seems that showing nested forms and objects may confuse the user.

What is the best way to design a form like the above example?

Footnote: The "Next" and "Back" buttons not represents a multi-step form. In fact, all the inputs and objects -shown as collapsible- are part of a single object and should be shown as a single page in our form. I just need a way to represent multi-level (nested) object in best way to prevent confusing users.

Answer 1

• As Tomaz said, break down the form in simpler, logical steps;

• Indicate the number of steps in the interface at all times;

• Avoid sub-steps;

• Use a single column for input, otherwise it might confuse users about what's optional and what's required (http://baymard.com/blog/avoid-multi-column-forms);

• Each page should check for errors before advancing;

• Show very clear indicators of completion for every step;

Answer 2

I'd flatten out multi-level stuff in a single linear sequence of steps, eventually skipping forward/backwards more than one as needed, I'm thinking something similar to Microsoft SQL Server setup.

Let's say your wizard needs the user to input two multilevel objects O1 and O2, the interface could look like this:

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

Something like the above. You gain:

• Capability of step-by-step validation

• Detailed logging as needed (error at step X: ...)

• Ability to split up data entry and reusability of code