I have 2 sets of buttons on a pop-up box of a website. Set 1 consists of multiple options the user can choose from, i.e. option 1, option 2, etc. Another one is "Back" "Next" "Start over". What will be the best arrangement for the buttons? I have tried the 2 arrangements. I have attached the images. Please tell me if it's fine or there is a much better way to arrange the button.
< means closing the modal (as well as
x button), the 1st option is OK, as it is commonly accepted to be there. Otherwise, if it is intended to be a "go to previous step", I would say 2nd option.
In case of "go to previous step" meaning of
<, I would make the button look like
< Previous Step.
The "reset" button, could look some ambiguous. Does it means (a) start again the step to step 1 or (b) does it means reset option? In case of (b) I would choose your 1st approach. In case of (a), I would choose your 2nd approach.
I believe the first image in your examples has a sound hierarchy and structure, also especially since the back button's location has more or less become a standard and people are used to it being there.
The only thing I think would need change is the "start over" button. It would be better to tell users what it is, simply by adding the text "Start Over" in it, even if that means that the Next button's width will shrink a bit. Or place it at the very bottom like Image 2, and extend "Next" at full width.