It would be easy if my audiences are computer literate already or somehow has knowledge in using computers.

This is my first time designing for those who are not.

I have Cancel/Back and Next button originally like this.

Would like to move it on the Panel's footer to make the button's location consistent throughout the wizard like this.

But something just feel like it's not right, or I don't know if I'm biased.

Aside from that,

I made two versions of step 2 which is creating a Product Category in case it is not on the list from step 1.

I have 2 goals here:

  • Explain what each option will do
  • Guide them on their selection.

2 somewhat different form will be presented whichever they would choose

Version 1

Upon choosing an option, they will proceed to the step 3 which is the form already.

Image v1

Version 2

Explanation and form is included already in one page separated by navigation tabs

Image v2

-- EDIT --

My final design that looks good so far:

The Form


The Modal


  • The images you've linked above are not available anymore, or not currently loading. Is it possible for you to put these images inside of your question?
    – Adnan Khan
    Commented Jul 31, 2017 at 23:11

3 Answers 3


At the moment, the user flow is not very clear to me. Might be worth to sketch a few interaction flows and wireframes before proceeding.

Suggestions based on first impressions:

1) make more obvious which step the user is in ( I assume the icons on top represent the steps along the multi step wizard?) and how much the user has progressed in the completion of the form

2) Use 'previous' instead of cancel

3) Is there any chance to open an accordion when the user ticks 'category not on the list' to give them the choice of choosing between category and sub-category without leaving the page (saving them an extra step)


  • Number 3, that's what this question for actually. But I managed to solved this all I guess. I found out that I don't need to make this wizard. There's a link/help text at the bottom of category dropdown that opens up a modal and will ask what type of category would they want to create. I'll make an edit
    – jen
    Commented Jul 6, 2016 at 9:36

The two primary points I got from what you want above, is a clear way to describe what's going on in the page/tab they're on, and consistency.

What I do to facilitate this is I create a panel on the bottom, very similar to the one you have on top that contains the title.

This is where I put the buttons Next, Previous, Cancel.

If I need to display a description of the page, or a description of the selected form element, I usually crate an additional panel above the one I just described to hold that information.

A quick google search gave me the image below as an example.

enter image description here

Another option for 'Description/Help' is to use a Help Button/Icon in the same button panel that can describe the page if needed, but doesn't take up real estate unless needed.

Googling around, it looks like this is a pretty normal/standard way of presenting a wizard.

  • Not the page/tab but rather the choices.
    – jen
    Commented Jul 1, 2016 at 14:39

Some suggestions:

  • In your first image, Move the "Back" button to the far left, and the "Next" button to the far right. (I am assuming that your users read left to right.)

  • Make the colored graphic that contains the icons the same width as the content below it

  • Instead of labeling the buttons "Back" and "Next," label them with the destination. For example, "<- Basic Information" and "Product Category -->". You can use fa-caret-right and fa-caret-left if you're using FontAwesome.

You should avoid use of the two dots as navigation as in your second image. By convention, form wizards generally don't use them for navigation. They are usually used for carousels that contain images.

  • That dots aren't navigation. It's actually a radio button. Just put it there to show that the 2 options are labels. 1st suggestion's good, i did not get the 2nd one tho, 3rd one is good also. I'll try those 2
    – jen
    Commented Jul 1, 2016 at 14:36
  • nevermind. Got what you mean now.
    – jen
    Commented Jul 1, 2016 at 14:57
  • Did you mean the exact opposite about the back/next buttons? I would have presumed you meant Back button on the far left and Next button on the far right?
    – scunliffe
    Commented Jul 6, 2016 at 10:34
  • Sorry, correct - will update the answer Commented Jul 6, 2016 at 12:48

Your Answer

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

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