11

I am working on a Financial web application and It has 6 categories and I am showing those categories as a tabs and each category has around 20 subcategories with 4-5 lines of description. Main thing is User has to go through each and every category as well as subcategory in a flow and he has to fill some data in each sub category.

Ex. I am on the category 1 tab and in that selected sub category 1 and filled all fields of sub category 1. Once I completed with the sub category 1 data filling, I can move to sub category 2 and so on. then same for category 2,category 3 etc. step by step and can't skip any category and sub category in the flow.

eg. I have to go through following flow step by step

category 1--> sub category 1 
category 1--> sub category 2
category 1--> sub category 3 
category 1--> sub category 4
category 1--> sub category 5
category 1--> sub category n

category 2--> sub category 1
category 2--> sub category 2
category 2--> sub category n   etc.

I need something better design suggestions to layout the sub categories so that I can show sub categories and their description on the same page and user will have track that this sub categories has been covered/completed.

See Image below: [![enter image description here][1]][1]

I am showing pop up but I want Design something like I can show subcategories on the same page.

Improve this question
2
  • Is it a sequential navigation or non-modal sequential navigation?
    – Deekshit-CUA
    Oct 19, 2016 at 14:25
  • Is it viewable only in desktop or mobile as well?
    – NB4
    Jun 5, 2017 at 5:52

6 Answers 6

Reset to default
5

This is how I have designed which covers all the categories under section: All the below part will be disabled until I complete the previous one. enter image description here

Improve this answer
4

This pattern has been solved for by tax and insurance applications for a while. Since the tabs, primary and secondary, reflect the workflow then drop the concept of tabs all together and work with a nested left navigation. Start by showing all the main categories but disable those that the user can not gotten to yet. This enforces the work flow and allows for business rules to adjust what is enabled and disabled based on prior answers.

The over all impact of this has a wizard like feel and enables the user to jump backward to any point without losing their place in the over all workflow.

enter image description here

Improve this answer
4

Sequential Navigation (Wizard)

The below wireframe can be one of the solutions for dealing with multiple tabs, especially for the second level when you have 20 sections.

You can also use icons for representing the status (warnings or success / completed) on each category (shown a tick mark and an exclamation in the below wireframe).

The carousel arrows for the sub-categories allows the user to scroll left or right. But jumping from one section to another in a sequence or randomly depends on the type of wizard you select (sequential or non-modal).

Clicking on the Burger Menu (icon), shows the list of the tab items which are hidden or on the right-hand side.

enter image description here

Note: Non-modal term here is not used for a popup. This design is meant for the page.

Updated: enter image description here

Improve this answer
5
  • IF I select a Sub Eighteen from burger menu list then it will shift to sub eighteen but if I want to go back to the previous sub (i.e sub Two to sub four etc.) How will I go?
    – Sarita Khutale
    Oct 21, 2016 at 7:54
  • You can consider these options: 1. Use burger menu and select the desired item name (but you need to separate the left items which are hidden and right items which are hidden, may be just a divider) 2. Provide a dynamic link back to the tab item (something like “back to Sub Two”) on top right corner (main tab items). 3. Consider keyboard shortcuts 4. Use left carousel arrow to navigate back (time consuming)
    – Deekshit-CUA
    Oct 21, 2016 at 9:21
  • @Deekshit-CUA Just thinking out aloud - For the menu style and the layout that you have suggested, would it make sense to have burger menu on both sizes so that any item can be reached in max 2 clicks. BTW, I am unable to follow your points 1,2 & 3. May I please request you to explain - a quick wireframe sketch would be highly appreciated.
    – Moiz Tankiwala
    Oct 26, 2016 at 7:46
  • @MoizTankiwala - I agree with you on the distance, but having burger menus twice I don’t recommend. From the UX standpoint, hiding the menu items or content is not at all advised. You can read more @ NN-g nngroup.com/articles/hamburger-menus. For 1, 2 & 3 – I have attached the screenshot (under updated) for your reference. Please let me know if you still have any questions or suggestions.
    – Deekshit-CUA
    Oct 27, 2016 at 8:20
  • Thanks. Most of my research has shown that burger menu is hard on UX. I will post what we settled for finally.
    – Moiz Tankiwala
    Oct 29, 2016 at 5:37
2

Don't use multi level tabs on the same page. You really have tabs for categories or you have links and you displayed them in this way?

I recommend using tabs just for the subcategory. After you select the category, don't display the menu anymore. For navigation, use breadcrumbs.

Improve this answer
1

Don't hide your second level in that way, as this will add more effort to your user.

There are two potential solutons:

Option 1:

enter image description here

Option 2:

enter image description here

In both options, all of the second level menu items are visible when you select top level menu item. Styling plays a part in associating level on to level 2.

Improve this answer
1
  • I can go with Option 1 but thing is sub-categories are more than 20 and has max character size 50-60 in my application, which won't fit.
    – Sarita Khutale
    Oct 19, 2016 at 12:54
0

My suggestion: Explore the breadcrumb application used on the Harvard Business School website hbs.edu to display sub-categories and their descriptions.

Here's their style guide, which can spur other ideas: http://www.hbs.edu/marketing/web-development/desktop/navigation.html

Hope that helps.

Improve this answer

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.