a step form nest in another step form (WebApp)

Question

Hi, This is my first use of this website. I hope I could seeking some help here.(PS:i am not a UX designer)

Currently i am working on a form. the form has 7 steps (A 1 to 7). However, in one of step, such as step 2 , has multiple steps (B 1 to 3) as well and each one of them are mandatory to completed before you finishing step 2 (A 2).

The layout of the page is been settled. the Blue Area which represents the heading of the step (A). btn a and b is controlling the step movement for A(not for B).

I am having trouble to design how do i represent the B content.

Firstly, making an another wizard in B which seems to be a bit overlapping with A.

Secondly, what kind of buttons should I use for jumping between B steps and where should i put them?too many button on a page, is it a good idea?because in content B, there are buttons too.

Thirdly, What method should i use for user to know where they are and not losing their way in the process.

Finally, Only thing that i can redesign is B area.

Sorry for the bad english.

Answer 1

You don't have to put any buttons inside B section. So you can try one the below options

1. Since you have mentioned there are some mandatory fields inside section B just keep next arrow button for section A disabled until all of them are filled. and indicate all the fields which are mandatory in section B.
2. You can keep next button enabled, but if user doesn't fill any of the mandatory fields in section B just show some error notification and don't proceed to next step until all these fields are filled.

and keep section B simple, I mean don't put any buttons or any other controls as it will be overwhelming for the user. hope this helps.