Here’s an example of my hatred:

As I said, it’s super common on ecommerce product pages, but I also see them on SaaS/service landing pages like this:

The thinking behind horizontal tabs is reasonable:

• We don’t want to overwhelm people.
• It’s vertically compact, so it doesn’t require loads of scrolling.
• For product pages, this allows all the info to be above the fold.
• Only people who care to see the info will click it.

But there are a few problems.

Let’s dive into each:

1. 1 in 4 users never find the info hidden in them

27% of users in a study of Sephora’s old product page never even discovered the content in the unopened horizontal tabs. 

For REI’s old site, it was a staggering 43% never noticed the horizontal tabs:

Look at what’s contained in those tabs; Specs, Reviews, Shipping & Returns info, and Ingredients—all key pieces of info people use to make purchasing decisions.

18% of Sephora's users and 21% of Crutchfield's users never saw the tabs despite trying to find the information they contained.

That’s 1 in 5 users desperately trying to make an informed buying decision that will likely turn to a competitor.

2. They have an unclear ROI

When you see something listed in a horizontal tab, you don’t know what it contains or whether it’s worth it to click to see it.

Numerous users in the study were disappointed when they clicked the Reviews tab to find that it was completely empty. Or a Specs tab with three dinky bullet points.

Once they fail you once, you’re less likely to keep exploring.

3. They limit your ability to stumble upon info

As Baymard says it:

When content is hidden in “Horizontal Tabs” layouts it’s very difficult for users to “stumble” onto content that could end up being extremely valuable to their purchasing decision — for example, a fuller description of the materials used, or a discussion of production ethics (both of which were observed to be happy “accidental discoveries” some users had when exploring product pages).

Users have to actively choose to see the title of a tab and click it. So it better be clear and enticing

4. They can be confusing to navigate

Tabs like Reviews, Shipping, Specs, and Materials are really clear what they care.

Tabs like the ones below, however, are not immediately obvious what’s contained within them:

For example, where do you go if you want product dimensions? Maybe Details?

Well, they’re actually just in Overview.

5. The title is everything

As you can see, the title of the tab is really doing a ton of the work.

And due to design considerations, you often need to summarize it with a single word, which may not be enough to accurately convey what’s inside.

For example, “Details.” Details about what exactly?

6. It pigeon holes you to the horizontal tabs

Okay, you realize that maybe the horizontal tabs aren’t great for a lot of things.

So you decide to put some some info in the tabs, but other, more important information in separate sections below the fold.

Well this actually performs very poorly. This causes confusion because:

1. Some people won’t find the horizontal tab info.
2. Those that do might assume that all info is in there.
3. Many will be confused due to the complexity of info being in different places.

These little confusions end up mattering a lot when you’re talking about thousands to millions of people navigating a page.

Alternate formats

There are two major formats to use instead:

#1. Vertically collapsed sections

This has become increasingly common on modern sites.

For example, this is what Sephora does today:

Here’s why it’s better:

• It’s far easier to find everything.
• They can auto-expand the critical sections and auto-collapse the rest.
• This decreases the importance of enticing titles.
• Each section can be designed to present the information best.
• There are no limitations on the number of words used in the titles.

#2. Long page, sticky TOC

Present all the info in separate vertical sections, with no collapsing.

Have a sticky nav that lets people bounce between them.

This has nearly the same benefits as above. The primary consideration is whether you want anything to be auto-collapsed or not.

Takeaway

Designers often create something because it:

• Looks good
• Feels efficient

In reality, it confuses and obfuscates essential information.

Confused people don’t convert.

So, the next time you design a page on your site or an app, prioritize usability and clarity above all else.