Issues with Tabbed Layout

Question

Larger View

Here's a screenshot of something I'm currently working on. I decided to use tabs at the top because filling in the "Office Details" is just as important as the list of employees and because in the future it could expand into other tabs, such as "Stats" for example.

The Details tab includes information that will be used to create all kinds of CSV reports, but once it's completed at the beginning of the year, it doesn't get accessed as often.

My problem is that the "Period" and "Filter" inside the sidebar, as well as the "New Employee" button at the top only affect the "Office Employees" tab. The "Other Offices" list is useful for both.

I tried cramming everything inside that tab, the period and filter as selects above the table of employees, but it just didn't work.

Any ideas on how to get this layout to make more sense?

Answer 1

You could make the tab-container as wide as the entire page, and put the column inside the tab (in the shape it is now). Then you can make the content of that column to only contain the items relevant to the tab it is in:

• Period, Filter, New Employee, Other Offices are shown in the Office Employees tab.
• Only show Other Offices in the Office Details tab.

Answer 2

First of all the suggestion of Kim Does would be good option, but I would like to suggest another one.

Blockquote I tried cramming everything inside that tab, the period and filter as selects above the table of employees, but it just didn't work.

I've tried in the mockup below and in my opinion it is possible to fit in the add employee button, the period selector and the filter.

The add employee button could expand into the necessary form items or even a modal screen. The trimester can be selected in the top right.

And a simple text based filter just below the table header (I would recommend to add a header to your table)

^{download bmml source – Wireframes created with Balsamiq Mockups}

Switching tabs would keep the office selection the same and the sidebar would be more of a navigational bar to select an office with the tabs as a details view for the particular office