2

I have 7 step wizard. The first step contains 3 subsections that i organized in vertical tabs:

enter image description here Right now when you go to 1.1. you will have a "Next" button that will take you to 1.2. When you are at 1.3 you have a "Previous" button and a "Nest step" button.

So my buttons are as follows:

1. Step 1 (this takes you to 1.1)
    1.1. NEXT 
    1.2. PREVIOUS, NEXT
    1.3. PREVIOUS, NEXT STEP
1. Step 2: PREVIOUS, NEXT STEP
2. Step 3: PREVIOUS, FINISH

A user said that it is confusing for him when in step 1.1 - 1.3 to know where the next button takes him.

What is a better way to make the user understand what is the current step and what the next button does? The order of the sub-steps is optional (but they are all mandatory). I was also thinking of putting the subsections in an accordion but some of the subsections can be lengthy.

Improve this question

2 Answers 2

Reset to default
2

If question is - user needs to know what "Next" or "Previous" buttons take the action to ? then you can explicitly put a label in the button as shown or show a tool tip. You can use highlighting button or section/tab to display what tab or step is active currently. enter image description here

enter image description here

Improve this answer
1

The sub section tabs are too far away from the parent tab for the user to understand the relationship between them (gestalt principles). Perhaps move the sub tabs to the row below the main ones? It might look something roughly like how these tabs are organised, and there should be no doubt about where the next button will take you:

enter image description here

Or something like this for bubbles (obviously add appropriate text etc. inside each bubble)

enter image description here

Improve this answer
4
  • Hmm, this could be tricky since the steps are not tabs but bubbles.
    – Daniel
    Jan 6, 2016 at 12:24
  • @Daniel I am absolutely not suggesting you use tab controls, I am using nested tabs as a rough example of how to visually group steps and sub-steps so that it is obvious which comes next.
    – Franchesca
    Jan 6, 2016 at 12:56
  • Yes, thanks, i understand that. I was just thinking of how i can bring those closer together.
    – Daniel
    Jan 6, 2016 at 13:49
  • @Daniel made a quick update, sorry didn't have time to make nicer graphic
    – Franchesca
    Jan 6, 2016 at 14:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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