1

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.

  • 1
    It seems you will use a wizard architecture for this task (as Previous and Next buttons are shown in the example) so it should be easier to break this huge form in several separate steps. Showing huge forms with different levels of abstraction will very likely scare users away. – Tomaž Tekavec Jul 15 '15 at 12:59
  • @TomažTekavec Thank you for guidance. But We have to use these multi-level objects in multi step wizard forms. Do you have any other suggestion? – Meghdad Hadidi Jul 19 '15 at 18:39
  • 1
    I'd say you could at least perform separation of concerns - looking at your UI mock it seems you could encapsulate basic user information on a separate wizard page and then deal with the complex multi-level object. Please describe your business case in more detail, maybe someone can find a better solution to your problem. From the UI mock, it's not clear why or if you really need such approach. – Tomaž Tekavec Jul 20 '15 at 5:46
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;

  • Thank you for the guidance @JayFlow. Yes we are using wizard (multi-step) forms. In each step we have to use multi-level objects and it can not be overlooked. – Meghdad Hadidi Jul 19 '15 at 18:38
0

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:

mockup

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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