Using 2 tabs on a page: one for filter, and one for content

Question

I might be trying to do too much on a single page, but I have a page where I need to filter courses, and generate a schedule.

On the Filters tab:

1. use 'Filters' (in the sidebar) to filter a set of courses in the 'Filter Results' tab
2. add these filtered courses to the 'Selected Results' tab

And from the 'Selected Results' tab, I will have a 'Generate Schedule' button that will tally up the courses, and display it in a schedule, which will take you to the 'Schedules' tab.

Image 1: Filters tab in the sidebar will allow user to filter the 'filter results

Image 2: User will click on the 'Generate Schedule' button, that will take them to the Schedules tab.

The operations are going to happen on this page, it's just a matter of displaying the steps of the process (i.e. sidebar A leads to main content A, and sidebar B leads to main content B).

I'm hoping to get a feedback on whether it's a good idea to use multiple tabs on this page, and if there's an alternative way to display these information/conducting these operations.

This is not the most mobile friendly method (or at all), but it is, at this time, the only way to conduct all the operations on one page.

Answer 1

You want to know whether tabs are a good idea. It's good that you're asking, because they are not.

In the Windows UX guidelines, Microsoft asks a series of questions to help developers and designers determine when a tab is the right control. Here's an excerpt:

• If used for settings, are settings on different pages completely independent? Will changing a setting on one page affect settings on other pages? If they're not independent, use task pages or a wizard instead.
• Are the tabs mostly peers of each other, or is there a hierarchical relationship? If hierarchical, consider using progressive disclosure or child dialog boxes to show related information.
• Are the tabs used to display steps within a task? You can use "tabs" to display steps within a task only if they are presented to look like steps, and there is an obvious, alternative way to get to the text step, such as a Next button. Otherwise, if the steps are required, use pages in a page flow or a wizard. If the steps are optional, display the optional steps using modal dialog boxes instead.
• Are the tabs different views of the same data? If so, consider using a split button or drop-down list to change views. While tabs can be used effectively for changing views, the alternatives are more lightweight.

I think several of the above questions may apply to your case. You can read the above at the source, where you'l find links to the other design patterns mentioned.

Once you decide what design pattern to use then you can check the UX guidelines for iOS and Android (and Windows Phone, depending on where your users are) and see what their equivalent is. For example, guidelines for mobile devices usually allow for a modal UI (if it's simple) as well as a wizard-like succession of pages (if it's less simple).

Please consider providing clear embedded assistance—the helpful instructions that nobody reads until they get stuck. Writing short (so it can be skipped) and clear (so it can be understood) embedded assistance is an art. Ask for help from a technical communicator, if you need it. And in your usability testing, take note of how easily users can figure out the process.

I hope that helps you look for good options.