Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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?

share|improve this question

2 Answers 2

up vote 5 down vote accepted

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.

A wireframe of this solution

share|improve this answer
    
Thank you! This makes sense. –  Norbert Mar 20 '13 at 15:01

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)

mockup

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

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.