1

I'm modernizing an enterprise level business application that currently does not have a graphical user interface, it's a CHUI. The application has a customer profile screen with a persistent profile header, basic info (name, customer number, etc.), and a details area.

This details area can have multiple actions to view related content below it. When an "action" is invoked the detail view switches to show the related content, but the profile header remains persistent. Each related view can have multiple actions to view other related information views. The user can "drill" through up to 4 related information screens using these actions. Most actions that a user can take will NOT have a 4th level drill, very often will have at least 3. Four levels is the worst case scenario. Here is a diagram visualizing what currently happens:

enter image description here

The desire is to translate this to a single page application. That said my current solution is to translate up to three of these individual views to embedded tab sets as pictured here. The fourth level I could handle in a modal. The modal may have a number of tabs as well but will not have further drilling.

enter image description here

My concern is primarily with wayfinding, the user getting lost within the complex hierarchy of this page. I'm confident I can find a way to visually distinguish between the different tabsets. Does anyone have any experience with drilling to this level of related content all under a single view. I'm obviously not hot on this solution for various reasons and I'm open to other solutions/insights.

  • Deep hierarchies are not uncommon, but the solution to these sort of problems is highly dependent on specifics. It seems odd to me that you have 4 levels of hierarchy just for the details of someone - your mockup suggest that there are 256 headings! So what's on level 1, 2, 3, 4 etc.? – Izhaki Aug 25 '15 at 21:22
  • There could be that many headings, but not likely. Many of the first level tabs will not have other views to drill into. However, there are a few that will have up to 4 levels to drill to. The application essentially tracks the gambling and transaction activity of customers in a casino. An example of a fist level tab might be the header details of their account at the money window, which would show a number of tabs below, history being one in tab 2, a facet of that history would be credit in tab 3 leading to a detail of a credit history item in a modal (level 4) – Mark Aug 25 '15 at 21:40
2

There are a few strategies that can help you with deep hierarchies, some demonstrated in this screenshot (source):

A screenshot of a dash board

Hierarchical sidebar

  • Probably the most useful one of all
  • May involve 1 or more sub levels

Tabs

  • Limited vertical space could be an issue, specifically with dynamic tabs

Vertical stack (scroll)

  • Would be tabs are unfolded to panels stacked one on top of the other.
  • In the screen shot below the white and blue-grey panels can be seen as subs.

Navigation

  • Is it really important for users to jump between level 1 sections? For instance, if the level 1 is a list of bank accounts do users really need to jump between them that often, or would they spend most time at level 2 and below? (note that single page applications still allow a changing content view.)

So in your particular case, possibly:

  • Sidebar: level 1 and 2
  • Tabs: level 3
  • Stack: level 4

It's really hard to give a definite answer without really seeing the hierarchy, but I hope this helps.

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.