28% of sites use horizontal tabs on the product page. While professionals like web developers have little issue with them, ordinary Joes are experiencing some trouble with them.
Users don’t see them
According to Baymard, 27% of users overlook the hidden content in the inactive horizontal tabs. In fact, horizontal tabs happen to be the worst performing layout format across all categories and industries.
Why are horizontal tabs so bad?
They offer very little to go on. Horizontal tabs are not expandable so the title is the only thing customers have to hint at available content.
Due to space limitations, these titles are usually shortened as much as possible. If you use a vague or overly broad title, it will be hard for customers to determine just how much information is stored under a tab.
Some sections may also be placed away from the other tabs due to space limitations making them all but impossible to find.
The example below from Crutchfield contains horizontal tabs.
What can you use instead?
- An accordion
- A sticky TOC bar
Accordion
An accordion consists of vertical tabs that can be expanded or collapsed at will to give a preview of their content.
Here’s what an Accordion looks like:
Sticky TOC bar
A sticky Table of Contents auto-selects and highlights your current navigation path. Adidas has implemented the sticky “table of contents” on their navigation bar:
Both options work
So my recommendation is to go for one of those two variants mentioned above, either an accordion or a sticky navigation. They have both been shown to work much better than horizontal tabs.
Examples