What's the best way to work with master/details when inside a tabbed control?

Question

I am working on a Windows Forms desktop application and I'm trying to come up with a good design for the whole application.

I am using a sort of vertical ribbon on the left side of the main application form that acts as a main menu of sorts.

The right area of the application is then used to display a tab control that keeps the list of open tabs, where each open tab can be any of the items that you can choose from the menu on the left.

I find this kind of UI quite easy to use and intuitive for the kind of users the application is aiming for.

Now I need to add some forms that let the user choose an item to work on from a grid and then add the information needed in a detail panel.

Right now I went with the solution that you can see here:

The Intervention report and Change password tabs that you see at the top are two different forms that I opened by clicking on the buttons on the left (respectively Report and Change password).

The tabs Intervention Reports and Report details are the one I'm not satisfied with as the Report details shouldn't actually be there until I select one of the items in the grid. I know that I could just hide it until then but I feel that this approach is bit clunky.

The details tab is like this:

Basically it's just an input form with a lot of fields.

Is there a better way to display those forms?

I thought about using a modal dialog for the details but I don't really like it as it doesn't fit the overall design of the application at all as it would lock the rest of the main tabs.

Any suggestion is very much appreciated. Thanks in advance!

Answer 1

I question the need for your double row of tabs here. The user gains no additional utility from this layout, especially if they wish to compare data and information across sections of your program.

Let's say that your user is looking at data in the Report Details page of your Work Orders section, and wishes to compare information there to information under the Design section of your "Work Orders" section. In order to compare these two pieces under your current layout, the click path requires you to click on "Work Orders" -> "Design." If you have a number of different section tabs open, it may take some time to locate the Work Orders tab. Once there, you take additional time to locate the Design tab. This puts quite a bit of additional strain on the user's cognitive load, increases navigational time, decreases the ease-of-use when comparing tabbed pages (one of the big reasons to have a tabbed layout in the first place), and has an overall negative effect on usability.

For all of these reasons, do away with the first row of tabs. Allow users to select only the pages they want open, to organize those tabs in a single row as they see fit, and provide a mechanism to quickly and easily switch between tabs.

You may find this article from SmashingMagazine.com to be helpful in providing some best practices when building your tabular navigation going forward. Though the article itself is a bit dated (2009), many of the concepts and practices still hold their value today.

---

Edited for grammar.