How to reduce complexity of nested form interface?

Question

I have a complex design on my hand which is essentially a wizard. Following mockup should give you a fair idea:

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

step1,step2 .... step 5 are additional steps which must be kept separate. I have issue with "Step2" as it contains a tabbed modal ( I don't even know if I should call it that or if such thing exists) with tabs "Add Product", add link etc.

The reason Add product has been kept in separate tab is that user can go on to multiple product. Thus after clicking on submit, user will be notified that the product has been added successfully and form will be cleared for new product to add if required. Same wiht Add link.

My question is , is there a way to reduce the complexity and make it a more simpler process for the user to get by this "step 2" as easily as possible?

Answer 1

The first problem is that you have only one link "add" for different kind of content. If you can it should be better to contextualize each link :

• "add a product" on your product list
• "add a link" on your link list
• "add an image" wherever you need to insert the picture

Then when you ask him to choose a kind of product, he is already answering a question, he is not browsing. So this question must be a part of your form not a Tab

Two more things :

• Find a more specific term than "other", especially if it is the default value
• Don't use a Reset button, it is used only by mistake.

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

Answer 2

You can simplify it by transforming the tabs into a decision tree.

Something like this accordion control :

Then you can just pop up the right(single) window, instead of popping up a window with tabs.

Answer 3

An accordion as suggested by Boranas is your best bet. Another suggestion would be to add highly visible + and - buttons to the accordion headers to be touch friendly