Fun fact: did you notice that even wordpress.org uses WordPress tabs to chunk information?
Check this out:
Source: wordpress.org
WordPress tabs are a type of navigation that can improve the customer experience. How so? By not cluttering a lot of info into paragraphs, but using a better organizing method.
Tabbed navigation is similar to files organization in an office or at the doctor.Â
Not to be confused with menus. Most of the time, menu items open up a separate page with its own URL. Here no URL change will happen.
Not to be confused with accordions either. An accordion will stack information vertically. Headers can be clicked to reveal or hide content associated with them.Â
Now, why would your WordPress site need tabs? To improve navigation, usability, and therefore customer satisfaction and conversion rates.
Plenty of reasons, right?
Tabbed navigation is still a common practice in e-commerce to present products. Many visitors already recognize tabs or expect tabs in certain places.
Let’s say you sell electronics. You will need to present lots of product info:
- Product description
- Product photos
- Technical specs
- Reviews
- Warranty info
- Shipping details
Tabs will help you to compress big content into limited spaces.
Now, in this article, we will start by providing you with some tab design inspiration. Next, we’ll go a bit into some best case practices. In the end, I’ll guide you through the technical WordPress tabs aspects.
Let’s get going!
Tabs: some inspiration
Now, let’s check some websites out there that use tabs. I’m definitely in for proof. Images can explain better things than words, don’t you think?
Let’s see, eBay is using tabs for product description. All the tech specs go under “Description”, and they gathered “shipment and payment” under the same tab. I’m pretty sure they’ve tested the layout because, for a site with such traffic, any change can affect conversion rates heavily.
Source: ebay.com
BobbyBrown cosmetics goes for a minimalist approach, the tabs don’t have a button-like approach. They use an underline to inform the user that he selected a tab.
Source: bobbibrowncosmetics.com
I’m always feeling lost when I go to booking.com. They have lots of information you need to scroll down for. Recently I noticed that they made some changes to reduce scroll, but still, it ain’t enough (for me).
Trivago, on the other hand, seems to organize information a little better. I know it’s hard to do when you need to provide so many details.
They use tabs to organize hotel information such as overview, info, photos, reviews, deals.Â
Source: trivago.com
Tabs are a common practice on websites that offer travel packages such as flights, accommodations, car rentals.
Expedia does it nicely when it presents its offering for 6 services. The experience is clean and unintrusive.
Source: expedia.com
Honda uses tabs in a more creative way. It mixes images and videos alongside text to sell a great Honda experience.
Source: automobiles.honda.com
WordPress tabs: best case practices
Simply put, tabs are a set of buttons usually set horizontally. This is why their design should be really close to a button design.
Now, let’s look a bit at the best case practices for using tabs in your WordPress website:
- Don’t go for multiple rows, it will make it hard for the user to remember which tab he visited. If you realize you need more rows, this means you’ll need to find a better way to organize information
- Keep tab headings short and sweet
- Use tabs only when users don’t need to see content from multiple tabs at the same time
- Clearly indicate which tab is active
- The unselected tabs should remain visible, and not lost in the background
- Make sure your tab appear like separate buttons that you can interact with
- Add hover effects on tabs as you would on buttons
- Use tabs when you have between two and nine different categories of content
- The categories are similar in nature, a user would expect to see them there (eg: product description, product reviews)
- Don’t use tabbed navigation when you intend to insert a “more” link
- You can use gradients to add depth and dimension to the tabs.
How to create WordPress tabs using page builders
I am using the Colibri page builder for the purpose of this exercise.
Tabs can be found as a component.
You can find components when you click on “+” from the upper left.
Go to Components and drag the “Tab” component to your website preview on the right.
Next, you can play with the customization options on the left.
When your tab looks like you want to, just hit “Publish” and you’re live.
Tabs: a plugin to help you with setting up WordPress tabs
If you run an online store integrated with WooCommerce, in WordPress there are two very popular plugins for WordPress tabs.
Source: wordpress.org
But, I want to introduce you to a favorite of mine: Tabs.
Source: wordpress.org
Tabs has a lot of customization options that you’ll soon be fond of. Why I feel that you will love it too:
- You will design mobile-friendly WordPress tabs
- You can work with shortcodes
- Tabs works by drag and drop
- It has 20+ design templates so that you don’t need to bother with inspiration
- 500+ Google Fonts
- Tabs works with most of the themes out there.
WordPress tabs: the conclusions
Tabs are here to make information easier to digest in a world of shorter attention spans. In terms of tools, there are plenty of them out there that can help you out with setting up WordPress tabs. This is the easiest thing to do.
More important is to figure out what kind of information can fit in your tabs. If you’re not sure that a tab will help you organize certain information, you can always do some user research or an A/B test. Our own assumptions are not enough. Real behavioral data will lead you to the right answer.
At the end of the day, you need to care about usability, chunking, and website speed.
Now, if you liked this article, and you want to learn more about how to design a WordPress website, make sure to subscribe to our Youtube channel and follow us on Twitter and Facebook!
[sibwp_form id=1]
Alina is a digital marketer with a passion for web design. When she's not strategizing she's doing photography, listening to podcasts on history and psychology, and playing with her 2 dogs and cat.
