Using Tabs and Accordions: Some Things To Consider

Introduction

Being able to fit as much content in a confined space is very hard. When you have to highlight your most important content above the fold, you have to choose what is best to get your users to convert.There are many ways to fit a lot of content in a little space. Content carousels are one way to show a lot of content above the fold. Another way is using tabs and accordions. In this article, I talk about tabs and accordions and why they only work for one form factor and not another. First, let us talk about what a form factor is.

What is Form Factor?

Form factor is a very simple concept. Basically what we are referring to are different sizes for the different devices that we use. We have TVs, desktops, laptops, tablets and phones. Each of these devices have a different screen size that goes from large to small. What this means is that each device has a screen size that controls how much content can be shown on it at a time. To show more content, the content has to change either through some kind of interaction with the screen like clicking a button or scrolling the screen. 

Larger Screens Can Hold More Content At a Time

Either way, the general idea is that the larger the form factor, the more content that you can place on the screen. So as the screen sizes become smaller, we have to be more selective and discretionary on what kind of content to show our users first. What we show first is content above the fold, which is why I talk about it so much. This is obvious since content above the fold must deliver its mark and make a good first impression on people.

This concept of form factors is important when explaining the difference between tabs and accordions and why they are just different forms of the same thing.

What are Tabs?

Tabs used to be very popular before smartphones became prevalent. What tabs are, are containers on a web page that can hold content in a specific confined space. These tabs have buttons at the top that allow you to change the content contained within the space. This lets you show so much content above the fold without making users scroll to view it.

Why are Tabs Popular?

Tabs became popular because they kept users on the same spot on the page without scrolling. This is good for when you have elements on the page that you want users to see and disappears when they scroll down. The header comes to mind because header navigation elements like menus and buttons are typically the first things that you see on a page. If you have a call-to-action on your header and it is not sticky, then you might want tabs to keep your users in place. I have written an article if you want to know how to make your element sticky and stay in place while your users scroll down.

Infinite Scrolling and the Endless Page Problem

Tabs are also popular because you can fit so many of them on a page. Which means that you can technically place all of your content on there and not have a need to scroll. One issue with scrolling is that users do not know when it ends. Pages really do not have a standardized and widely-adopted method to indicate how long a page is. There is a scroll bar on the side but with infinite scrolling becoming popular today, we have no idea when a page really ends. So that begs the question for another article, is infinite scrolling good?

One thing that is good about tabs is that you know when the page ends so you do not have to keep looking for more content to appear. This makes it easier to know if your users are actually seeing your content because you are not relying on them to constantly scroll and scroll. This is why infinite scroll has some challenges to overcome since it expects users to keep scrolling to see more content.

Making Tabs SEO Friendly

I talked about making carousel SEO friendly and I will do the same for tabs. Both carousels, tabs and accordions are all created with JS because it is the only way to show lots of content in a small space via CSS manipulation, which is what JS does. Any SEO efforts involving JS means placing the content directly inside the content for each tab on page load. They key here being always on page load, never after. Any content that appears on the page after page load means that it was generated via AJAX. AJAX and SEO have a complicated relationship together because optimization usually means sacrificing one or the other.

Why Can AJAX and SEO Not Get Along?

The main issue lies with AJAX content not showing up in the HTML source when it is loaded because it happens after page load, not on. This is because AJAX requires the use of JS and I have discussed the complications between JS and SEO on this blog. I mean AJAX is great for loading additional content if the user requests it, but search engines will miss and skip a lot of that content if it finds out that it is too much trouble to find.

Tabs Work Well On Desktop Because the Screen Widths Are So Long

Tabs were meant to be on wider screens because you can really stretch content out without running out of space. This means that form forms that grant use of plenty of horizontal space means that you can really fit your entire page in a set of tabs. This is why I mentioned earlier that you technically no longer need to scroll when desktops have ample room for tabs.

However, the challenge with responsive design means that we always have to design for smaller screens and what works for desktops does not always work for mobile. Hence, this is where tabs transform in accordions on mobile.

Keep Your Total Number of Tabs to Only One Line: Too Many Are Bad

One thing that you need to consider is that your total number of tabs should never extend past a single line. If you have so many tabs that go to a second line, then you have way too many tabs and you might have to opt for an accordion. The problem with multi-row tabs is that they interfere with the content container underneath them. It looks confusing when more than one tab belongs to a container of content. This happens because rows of tabs are being stacked on top of each other. There are just too many tabs close together that the logical sense of grouped elements is lost. This is easy enough to avoid. You just need to limit the total number of tabs and if you have that much content to show on the page, then either move it outside the tabs or group your content under fewer tabs. Meaning, if you have ten total tabs, try to get that number down to five and take content from those ten tabs and group them so that you only need five tabs.

In the following sections, I will discuss what accordions are and why they must be used on desktop instead of tabs

What are Accordions?

You might have seen accordions on websites that want to display content vertically rather than horizontally. This means that you will have to scroll to view more accordion content because of the nature of vertical content. Being longer than wider means that long accordions can be a drag on users who do not want to scroll so much to see more content. However, accordions by design are meant to combat the lack of screen width to show more content at a time.

Why are Accordions Popular?

The popularity of accordions comes from how they work. When you open one accordion, the other ones close. So you are only able to read the content of one section of an accordion at a time. This makes it so that the accordion is as tight and small as possible to keep as much content on the screen without having to resort to scrolling. 

Tabs work in a similar fashion in that you only see content for one tab at a time because each tab’s content appears in the same exact spot. The difference though is that with tabs, you are less likely to scroll because tabs typically appear on larger screens that can accommodate their size.

Tabs and Accordions Allow Users to Focus on One Piece of Content at a Time

Accordions and tabs are great in showing only one piece of content at a time as it allows you to focus on content without being bombarded. This is important when you are trying to control the drip of content and slowly deliver it so that users have time to ingest it. You want to show your users pieces of information at a time so that they can consume it, understand it, and then apply it to your next piece of content. 

JS Widgets Like Carousels, Pop-Ups, Tabs, and Accordions Allows Us To Slowly Drip Content to Users

I have written a couple of articles on my thoughts of information overload and why we need to slowly ingest information to properly consume it. The first article talks about the difference between memorizing and utilizing information.  The second article discusses information consumption and production. Understanding what information is and how to distribute it for proper assimilation is crucial in making sure that people are able to comprehend what you are trying to say to them.

You need to drip content slowly to your users because they are more likely to convert if you give them to think between drips. When you give your users content one piece at a time, they are able to formulate their own opinions about your content and will continue reading what you wrote if they feel that your content is worthy enough. As they say, “slow and steady wins the race”.

Which is Better: Tabs or Accordions?

Neither one is really better than the other since they are effectively the same thing on a different screen. You can never have tabs in the traditional sense because you simply do not have enough space in portrait mode on mobile to accommodate something that needs a lot of horizontal space. Since no one browses websites on their phone in landscape mode, you can basically expect mobile websites to pretty much be used vertically over horizontally. 

Consider the other way around, accordions on desktop? Actually, accordions on desktop work better than tabs on mobile. Why? The reason why is because desktop screens are large enough to handle an accordion. What this means is that depending on the size of your accordion, your users might have to scroll to view the entire accordion. So the practicality of using an accordion and desktop really depends on how long your accordion will be to the point where your users might incur excessive scrolling.

Remember, too much scrolling is bad in general because users feel that they will never find what they are looking for if they have to keep scrolling forever.

So this is why tabs might be better for desktops over accordions. Again, if you have that much content to show on page, maybe you should just take the simple route and just create a new page. There are so many ways to organize your content and this is why websites are so fun. There is not a single way to build a web page. There are, however, best practices that you should adhere to.

Summary

Tabs and accordions are great ways to show content to your users using JavaScript. Tabs lets you show content above the fold without having to scroll. Your users just need to either click or hover over the tabs to change the content. On mobile however, the limited screen width will convert your tabs into an accordion. Accordions work because they are meant to serve content on a screen that is vertical over horizontal. 

Some things to know about tabs is that saving your users from scrolling means that you do have to deal with the infinite scrolling problem where users will not know when a page ends unless they keep scrolling and scrolling. 

Just like with any content inside a tab or accordion, try to get it shown in the HTML source to receive SEO benefits. AJAX conflicts with this because it generates content after page load. One solution, which has been mentioned earlier might be to just create a new page and show the AJAX content on there. This is why “View More” or “Learn More” buttons that link to a new page might be better than those that just show more content on-the-fly.

Other considerations for tabs include making sure that you keep the total number of tabs to only one line and not have them extend to a second line. Accordions do not have this problem because they grow vertically instead of horizontally. Vertical content can just grow and scroll but not horizontal content. No page should ever have horizontal scrolling because that is not common practice.

Slowly dripping content to your users is a great way to guide your users into converting. These JS widgets allow you send users targeted content one piece at a time. Each piece of content is a step closer to converting and you are giving users a choice on how far they want to go down the conversion funnel, which is great. Users like being in control of what they are doing and where they are going. So this is why dripping content is a great idea instead of drowning your users in information overload.