Demand Curve - Growth Newsletter #217

The Growth Newsletter #217

The horrors of horizontal tabs

I’ve always hated horizontal tabs.

To my shock and horror, they’re extremely common on product pages, but I also see them on homepages and landing pages all the time.

So, I was pleased when I found research from The Baymard Institute that validated my hatred.

(Yes, that's called Confirmation Bias)

Let’s dive into a significant source of user frustration.

– Neal

Brought to you by Positional—an all-in-one SEO toolset for startups.

Positional makes starting, growing, and scaling your inbound marketing and SEO strategy easy. 

Tools for every step of the journey with one single workflow...

• keyword research and tracking
• content optimization (Positional's Optimize toolset is its most popular)
• auditing and technical SEO
• content analytics

It works, too.

Positional is backed by Y Combinator, and works with some incredible companies like ClickUp, GoodRx, and Netlify.

Positional just launched self-serve. Get 20% off by mentioning DEMANDCURVE at checkout.

Want to be featured in front of over 101,000 founders and marketers? Learn more here.

The horrors of horizontal tabs

Insight from The Baymard Institute.

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 clearly state their contents.

Tabs like the ones below, however, are not immediately apparent:

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 pigeonholes you to the horizontal tabs

Okay, you realize the horizontal tabs aren’t great for many things.

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

Well, this performs very poorly. This confuses because:

• Some people won’t find the horizontal tab info.
• Those that do might assume that all info is in there.
• 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.

What to do instead

Okay, you know what not to do. Let's focus on the two 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.

What did you think of today's newsletter?

😍 Loved it:  Forward to a friend, or reply—a simple 😍 will do! It really helps.

🤷‍♀️ Meh: You can unsubscribe here, or manage your subscription here.

🤔 I'm new here: You can join the party here.
🤩 Give me more: Check out all previous growth tactics in our Growth Vault.

Something fun

Thanks to Maxim Poulsen for this gem.

How we can help you grow

• Read our free playbooks, articles, growth guide, and teardowns—we break down the strategies & tactics used by fast-growing startups.
• Need help running ads? We’ve built the ads agency for startups.

• Looking for a growth freelancer or agency? We’ll match you with a vetted partner for free.

• Get in front of 101,000+ founders by sponsoring this newsletter.

Thanks, everyone!

Neal O'Grady

Justin Setzer

Nick Costelloe