I've read through the 13 Tab Usability Guidelines and we're mostly on track there.
For #13 Fast Response Time: We're not going to hit the target of less than 0.1s. This is an obvious disadvantage of server side tabs. I think we're looking at 1.0 - 1.5 seconds to load the next tab's page.
I'm shopping for other usability guidelines that are specific to server side tabs, like:
- Keep the tabs above the fold by ensuring the repeated content above the tabs is short and sweet
Shuffle the active tab to the leftmost position when it was the first requested page in the tab group (open to debate)
What are your best practices for server side tabs?
Side Note: I'm not thrilled about this. I'm ok with using server side tabs as the topmost nav, but not that far down a page because the experience can jerk you back up to the top of a new page (scroll down just a little on the reference site before clicking a tab, or try it in a mobile browser where the tabs start below the fold then scroll down to click a tab and find yourself back at the top with no tabs in site). I think I've formed an expectation for something like jQuery UI Tabs when I see a tabs widget that far down a page. But I lost that debate and we're moving forward with server side tabs.
Client's rationale (was asked about in the comments)...
Why tabs? The tabs here serve as a 3rd level of navigation for the other pages that talk about the same product. In the top nav they can choose Products or a specific product in the flyout, the side nav also allows them to choose a specific product and matches the flyout, there is a short product intro and then the tabs get you to the specific pages that talk about the different aspects of that product. In the previous design these pages were a second level in the side nav and a 3rd level in the flyouts--both felt clumsy. The old design made heavy use of overview pages that simply introduced the other pages--we want to get to the meat of the content quicker.
Why content above the tabs? Because you might enter the section on any one of the tabs they each deserve a short intro and a screen grab. The content above the tabs is identical for each page in the section because that's what tabs require. One thing I like about this design is that the h1 is still the product name rather than something generic like "features" that sounds and looks better as a tab name.
Why server side tabs instead of client side tabs? The pages already exist and we want to encourage outsiders (blogs, search engines, etc) to directly link to any one of them. There are already plenty of direct links from our own site and other sites. I've pitched solutions about direct linking using hash tags to open a specific tab and redirecting the old pages but that's considered too risky at this point. Maybe someday down the road.
Disclaimer: I'm just a developer who dabbles in the tidbits of UX wisdom that ocassionally float down to me--I've never conducted my own user testing so I won't count myself in your ranks (yet). I'm just hoping for some good tips to help my team pull this off. Thanks in advance!