Design idea for Multiple level pages

Question

We have a framework with multiple plugins (for different functionality). Each plugin has it's own configuration/information pages. These pages also have sub levels; sometimes up to four level. If we consider each plugin as a tab in an application, each tab has been divided to sub level tabs again and so on. Also we want to display more than one plugin pages simultaneously. Can anyone please suggest an idea on how to design these pages and improve the usability and accessibility?

Answer 1

If the number of levels are unknown, or just potentially very deep, then consider using breadcrumb navigation, where each item in said breadcrumb is a drop-down menu itself. E.G.:

Home > Plugin > Page > Subpage > Page settings > Confirm page

If, for example, you hover over "Plugin", you would get a drop-down as such:

Home > Plugin 1 > Page > Subpage > Page settings > Confirm page
       Plugin 1
       Plugin 2
       Plugin 3

And for other breadcrumb elements, where it applies, you could do the same:

Home > Plugin > Page 1 > Subpage > Page settings > Confirm page
                Page 1
                Page 2
                Page 3
                Page 4

Et cetera.

• On mouseover/hover of the breadcrumb item, give the user an indicator of whether there are items below it;
• Repeat the current breadcrumb item to allow the user to jump back to that level, if at all possible;
• If items in the breadcrumb are filters, you might want to add an option to remove the filter from your results;
• The last item in the breadcrumb is the current page being displayed, always make sure this is not a link and doesn't behave as such to properly indicate this fact.

Also we want to display more than one plugin pages simultaneously.

Bad idea in my opinion, but if you really need to you could simply open the plugin in a new window/tab (also a bad idea) or position the two plugins side-by-side... which obviously leads to issues when the user's screen resolution is too low.

If technically feasible, allow a link to be opened inside a modal window that can be dragged around. But keep things simple, usually you don't want to overload users with too much information. If they really need to, they'll just have to open the plugin in a new browser window.

Answer 2

I am still a little confused as to how "deep" your application will go but after a certain number of levels your navigation is going to get bigger and the space dedicated to content smaller.

Old software was often like this, you would burrow deeper and deeper until you found the setting you needed. All sub sections were still visible and still accessible.

The thing is that the user often doesn't need to access every part of the application at any given time.

How about breadcrumbing once you start getting really deep into settings?

Answer 3

Currently, web seems to steer away from tabbed navigation to prefer in-page navigation. This would be my recommendation to you. Use one large page per plugin, and ways to navigate within the page.