1

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

mockup

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?

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.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

2

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

Something like this accordion control :

accordion control

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

0

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

  • I agree, that would be the best solution. But, unfortunately, exactly same accordion exists already in the page (its hidden by default, can be revealed by user if required) and is used to list the products, pictures, links that have been added by user. Thus enabling user to remove/check the items. – md1hunox Aug 9 '14 at 20:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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