Should Your Online Store Use Tabbed Boxes?

Tabbed boxes are one of the best ways to fit more content on a page without increasing page length or cluttering the page and they have become more and more popular on ecommerce sites in the past few years – especially on product pages.

But one concern I always have when reviewing websites that use tabbed boxes is – do they really get noticed by customers? Or are they too subtle?

I recently worked with an online retailer that had very poor attachment rates for cross-sells and upsells. The culprit? Product recommendations were hidden behind a tab that nobody clicked.

Here are some examples of tabbed boxes on e-stores:

Home page / navigation

Category page

Product information

Subtle text link tabs can also be overlooked easily:

Sometimes “tabs” don’t even look like tabs (Eddie Bauer uses orange boxes):

These examples are shown in isolation – so it’s easy to notice the tabs. But when you place these elements on a web page that competes with other design elements, the tabs can “hide.”

Did you notice…?

Did you notice the “video” tab as your eye scanned this page?

Checkout / sign in

How many returning customers suffering from “banner blindness” start the sign up process all over again because the returning customer option is “hiding”?

If your site uses tabbed boxes – make sure you know that the benefits of the box outweighs the risks that content and calls to action may be missed. Make sure you’re testing them against expanded versions of your content, tracking clicks on tabs or conducting user tests where you observe customer interactions.

Related Articles

13 Responses to “Should Your Online Store Use Tabbed Boxes?”

  1. Dan Auns says:

    My friends at http://www.islandsurf.com overhauled their site earlier this year, and included a tabbed box on the bottom of the product pages.

    I quite like how it defaults to a merch/upsell tab, and has other ‘soft sell’ customer service/logistics type information a quick click away ….. all with out having to deviate from the page.

    The fact that it is executed in a very SEO friendly (i.e. CSS/DIV) package – IMHO it is a great implementation.

    D.

  2. Linda,

    Excellent points here. Through our constant efforts to cram more and more value and info into pages I think far too many of us are sacrificing clarity for compact pages. Whenever space compromises are made there is fallout – it sounds like you’ve stumbled upon a great case for testing! :)

    Thanks for the clear post with great examples.

    Adam @covati

  3. I was involved in a similar decision to move from all-on-one-long-page to a tabbed layout. Certainly tradeoffs, but something that only a proper AB Split testing could show.

    A recommendation I would have it to make them “smart”. Meaning, based on certain behavior or persona, show a tab that would be most relevant to them. For this, of course, you need a decent personalization engine….

  4. Great topic Linda, one that deserves much attention in the design community.

    Since redesigning our product page on C28.com, I’ve noticed quite a few comments from customers who thought we removed features that are now behind tabs. We’re working on a/b testing a long, scrolling product page vs. the tabbed design. My gut tells me the tabbed version will lose.

  5. Marshall says:

    Thanks for this article. It confirms what I’ve suspected, but does so at a good time.

    My company’s home page is waaaaaaayyyyyyy too wordy. There’s a huge amount of information there, and the biggest problem is that it’s all important. We know we need a redesign, but haven’t figured out the best way yet.

    One solution I’ve been reluctantly considering is breaking it into tabs. But I suspect that either people just won’t see them or (in order to solve that) they’ll be horribly stick-outtish.

    You’ve reaffirmed my reluctance and we’re just going to have to find a way to break it into other pages. At least people expect the navigation area to have links. They’ll be more likely to click them there.

  6. Many thanks for your Explanations.
    This year we’ve relaunched our shop and during designing we often asked ourselfs to use tabbed boxes. But our decision was nearly almost “no” so there are only on the homepage some kind of tabbed boxes just to keep the homepage in short length.

    Now we are satisfied with it.

  7. Hey Linda, great question. In all usability tests I’ve ever done the users always tend to overlook tabs.
    If you are forced to make tabs then at least obey to web conventions and make the links blue and underlined to minimize the “banner blindness” that occur when decorating your tabs.

    BTW thanks for the tweeting of our “lower your chargeback rate”-blogpost.

  8. Personally I often miss the tabs, and I consider myself fairly computer savvy. I think web designers like tabs better, they are cooler looking, they do something when you click on them, etc…

    From a usability stand point, I think users are more comfortable scrolling down the page instead of looking for tabs.

    If they do not easily see it, they do not spend a lot of time looking for it, in tabbed format.

    Just my 2 cents…..

  9. Leah Culver from Six Apart had a great write up on the last point of Login/Register screens:

    Log in or sign up? – Leah Culver’s Blog http://j.mp/3NKhgV

  10. Thanks for all your comments and links. To be honest I was expecting this to be a controversial post with some strong disagreements from folks defending their tabs :)

  11. Nice post, on a topic we’ve discussed several times. Sso far, stuck with a single long page. Haven’t been able to test the other alternative some mention here: separate pages. Been hesitant to try that because want the SEO benefits for a product to accrue to a single location, rather than scattered across (for example) a technical specs page, an application instructions page, and so on.

    Maybe a topic for the future?

    Amazon is training web buyers to just keep scrolling, most of the time.

  12. Tabs are fine for frequent customers but new customers may miss a lot. I would try to avoid them if you can.

  13. IMHO it should not be a “all-on-one-long-page” OR “tabbed layout” decision. I believe that a combination of BOTH is the right approach.

    Every product page contains “Priority 1″ and “Priority 2″ information. We put Priority 1 content (“everything most customers need to know”) in the visible scrolling area and Priority 2 stuff (“additional information”) in the tabbed area. In other words: we use the best of both worlds: Everything important is constantly visible and it is no harm if less important information is overlooked.

    Our product pages look like this: http://www.laufstar.de/product_info.php/info/p207_CEP-Running-Socken-mit-Kompression–Herren-.html

Leave a Reply

© 2014 Get Elastic Ecommerce Blog. All rights reserved. Site Admin · Entries RSS · Comments RSS