4

I'm trying to investigate existing designs that solve this problem:

We have three major contexts inside our application, let's call them Build, Analyze, Configure. These contexts are bound to a particular selection from a list of items, and that list of items is intended to be "globally available". How might I represent the visual hierarchy such that the main contexts are both tied to the globally available selected item, but also the context of the main page?

I realize this is not entirely clear from text alone, so here is a picture to illustrate my problem:

Contextualized or "scoped" tabs?

** edited to add information **

To give some examples of the data available in these different views...

The sidebar contains a list of Tests where each test has a name, date, and statistics: [ name, date_created, number_a, number_b, ... number_n ]. The sidebar only shows a small summary representation of a test, but the full realization of that test is contained inside the main page context. This includes complex equations and statistical configurations associated with that item. Again, clicking on a test summary found in the sidebar will populate the main context with that test's full representation. How can I visualize "these contextual tabs belong to a single Test and the test they belong to is selected"?

Improve this question
2
  • Could you say the actual tabs (those that when pressed change something else BUT the actual tab context? hope i got it right) are like a submenu works for any other case. Problem here (to understand and try to give you some help) is that everything depends on data (type, co-relation, dependencies, etc...) thats the only way you can find a proper visual solution, and I can't see any example data in here, just containers and generic tags. Any more info you'd like to share? Love this kind of puzzles (UX'er here ;)
    – Sam
    Commented Feb 25, 2016 at 4:18
  • Added more information.
    – Clever
    Commented Feb 25, 2016 at 14:28

1 Answer 1

Reset to default
1

I believe what you are talking about is a Master-detail interface.

The active item in your master view and the active context in your detail view are (visually at least) completely independent. You usually show the selected item in the master view with some form of highlighting. The contexts in the detail view can then be indicated by tabs.

When switching between items in the master view, the current active context in the detail should remain the same. So if you are viewing Item 5 with Context 2 visible, Switching to Item 2 will show Context 2 of Item 2, as opposed to resetting the detail view to some default state.

Here is a quick mockup illustrating switching between contexts of the same item and switching items in the same context.

enter image description here

Improve this answer
2
  • This is very clear, thank you. I think the actual design implementation will have a lot of influence on whether or not this "works" visually. Stacked on top (shadows) versus flat-linked, for example. I'll play with a few different styles.
    – Clever
    Commented Feb 25, 2016 at 17:18
  • A lot will depend on your design of course and there may be other options but I think the tabbed contexts work best - and since you specifically asked about tabs :)
    – Cai
    Commented Feb 25, 2016 at 17:33

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.