4

My client wants to use server side tabs as described here and found here and here.

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.

  • For #10 One Row: We're close but I'm worried we may go over by 3 or 4 tabs occasionally. I'll pitch the "more" idea I saw in a couple answers on this site (here and here) if we do.

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!

Improve this question
4
  • What is the client's rationale for using that kind of tab?
    – Virtuosi Media
    Jan 20, 2013 at 2:25
  • Don't shuffle tabs. Most users rely on "positional memory" to find stuff. One of the reasons that "personalized menu's" were a failure.
    – Marjan Venema
    Jan 20, 2013 at 10:04
  • @VirtuosiMedia I added some info about the client's rationale.
    – twamley
    Jan 20, 2013 at 15:22
  • @MarjanVenema I like the positional memory argument for not shuffling tabs. I was going to say "but they won't have positional memory when they first hit this page and we won't shuffle it again after that" but then I realized that the tabs will be highly regular between the products and they'll quickly form positional memory as they browse from one product to the next. Thanks.
    – twamley
    Jan 20, 2013 at 15:23

1 Answer 1

Reset to default
1

First off, the solution is generally fine, but 1sec is waaay too much.

Having content above the tabs is also fine as long as it's short (let's say, a product picture, and at most 5 lines of product description)

The technical solution would be to use client-side tabs with pushState. This way the tabs look like serverside but act as clientside instead. You can have fallback methods, also for search engines, but generally you can solve it with clientside well with them. (See also this SO topic on search engines vs pushState)

If you're still going on the server-side route, consider using ESI-compliant proxy servers / caches, or fill in some caches after the first request so that tab switching won't be as slow.

In general, always conduct user testing, and monitor page load times. If you run some kind of analytics, grab the window sizes and make sure tabs will be visible for 98% or even more of your visitors.

Don't let multiple level of tabs to happen. I'm pretty sure there's a solution for that, you seem to have waaay many tabs.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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