2

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 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. 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.

  • Thank you for taking the time to add illustrations. It makes your question easier to understand. – JeromeR Jul 6 '15 at 4:30
  • Using tabs as the mean to organize sequential task flow isn't the best decision. Any reasons to have all these on a single screen? – Alexey Kolchenko Jul 6 '15 at 9:09
  • @alexy, the overarching goal of the page is to allow students to generate a schedules from a set of courses. In specifics, the page will first allows students to filter a set of courses (that are pulled in from another page), and adding those to "Selected Results" to be considered for generating a schedule. Then they will use these courses to generate the schedules. It all sits on one page so students don't have to go between pages to view their courses, and schedules. – Kai Wang Jul 6 '15 at 13:52
2

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.

  • This is very useful, thank you. It's certainly a good starting point to question the general premises of the UI. I have also referred to Tabs, Used Right by Nielsen Norman. I am wondering how it can be properly scaled to web applications. – Kai Wang Jul 6 '15 at 13:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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