Within the detail pages of a website, we have a great many tools for content design and layout. It’s absolutely vital to the conversion rate of web pages to think about how content and layout intersect at this point in the user journey. But I see many websites that fail at this stage, simply due to a lack of thought about content priority, which messages to ensure are primary and which are secondary.
What are tabs and accordions used for?
Tabs and accordions are groups of stacked headings, giving you the ability to introduce a number of topics for the user to quickly select from without a lot of scrolling. Tabs are usually horizontal across the page, accordions are stacked vertically. If your headings are understandable with short titles, and of a quantity that can fit within the page width, they save space. If you need longer titles then an accordion is more appropriate. NB: Do check this on both desktop and mobile, I see many sites where these layouts look fine on desktop, but are horribly broken in the mobile layout.
Tabs usually show the content of the first tab by default. With accordions you have the choice to display just the headers, making it easier to scan the entire list within the viewport, or with the first header expanded to show its content, (thus helping the user understand how this content works and promoting the first item more heavily). For both types, this allows for highly effective signposting, but does mean that the user has to click to read the content. Fail to get the click and the contents will never be seen.
Planning content priority within the page topic
There are two critical factors to using tabs and accordions from a content POV. First, as mentioned above, craft your headings carefully! Dull headings stifle the click needed to read, and your content will be ignored. Second, think through what is essential, primary information and what is secondary.
Essential content should not be placed within these layouts, it should be there for the user to see in the page without requiring a click interaction.
Common uses for these layouts
Perhaps the most common usage of accordions is for FAQs. A handy content device, but often misused! Perhaps the most critical questions should be outside a stacked section, for faster access and only the less critical ones hidden in a larger section? It’s these small bits of thought that prove to a customer that the brand is really thinking about them and trying to help them. This example is a site we created, but where the client insisted on volume, somewhat against my advice! It’s comprehensive, sure, but also perhaps overwhelming on initial view. As always, these choices need to be considered in the context of user motivation. For recruitment, people would probably rather have too much info than too little (so I didn’t fight this as hard as I might have otherwise!)
The other commonplace use if within product pages on e-commerce websites to group supporting information. Have a look at this example, there is quite a bit of description below the 3 tabbed areas. Does this feel like the right balance? For me, not quite. The main description area has 8 sub-headings, I would have been tempted to perhaps use a fourth tab to separate some of the less important info and make it feel less of a slog to read.
Is there an impact on SEO ?
I’ve seen this one argued about over the years but, if it was an issue back in the day, it seems Google have addressed this in how sites are crawled and we don’t need to be concerned about any “hidden content penalty these days. Phew!
The difference between good and great
You might think I’m being finicky with this post! But I believe it is in these areas of content detail that we PROVE our brand values. Whether it’s obvious or subliminal, we all read enough digital content every day to spot when something works better than expected, by doing it with more intent and care. These are the things that cost very little, but improve your website conversion. It’s not always technical, often it’s just about thoughtful, user-centric content planning that allows decisions to be made with more speed and confidence!