Tabs are navigation elements in web design that help display large amounts of information in a more organized manner. The content of the tabs can be completely different: from images to descriptions of services and prices.
Example of tabs on the site
Here is a good example of using tabs to describe medical services.
Why use tabs
By adding a tab, you help users easily find the information they need. They just need to click on the corresponding heading on the tab bar. This way, visitors don’t have to scroll the entire page to find the section of the site they’re interested in.
At the same time, this design option saves space on the page, despite the fact that all the necessary information will be on one screen in front of the user. This means that it is not necessary to create several different pages.
When is it best to use tabbed navigation?
Data shows that people often scan websites rather than read them, so tabs are a great way to highlight elements on your site, as long as:
You have 2 to 5 categories for the tab bar (they must fit in one horizontal row).
The content on the tabs is interconnected. For example, they are similar in topic, so it makes sense that they are located together.
You are going to post a small amount of information. Tabs are usually used for multiple paragraphs of text, short lists, and images.
When Not to Use Tabs
On the one hand, a tab focuses attention and simplifies the perception of the page. On the other hand, it hides content, forcing users to guess where it is or whether it exists at all.
To check if your site needs them, use a piece of web wisdom: ask yourself, “If I were to print this page, would I want visitors to see all the information grouped together? Or would they want to open each section individually?”
If you want users to access each section separately, then it would be logical to use tabs. But if all the information is important and should be in front of the user's eyes, then it is worth abandoning them.
Examples of correct placement of tabs on the site
The best way to understand all the intricacies of tabbed navigation (especially considering that they can be used in a variety of ways) is to look at some successful examples.
1. Uber
tabs on the site
On this page, Uber is addressing both drivers and couriers. To ensure that each group has the information they need, the site uses tabs to separate the content into two different audiences.
2. Treaty
tab on the site
The content on this site is a product card, which consists of an image, description, and call to action that leads to a separate product page.
The online store page uses vertical tabs in a left column format. Vertical new zealand phone number material tabs are suitable for a large number of tabs (ten or more) - they will look organic and will have enough space.
3. Weblium
tab on the site is
On builder pages, we often use tabs to show how they will look on your site. In this example, the tabs contain the main advantages of the website builder, the description of which consists of a text field and an image or video.
4. Casper
site tab
The mattress manufacturer's website also uses a tab bar. It is designed with separate buttons with different types of mattresses. By clicking on one of them, the site visitor can read user reviews.
5. Restaurant website
tabs on the site
Tabs are great for displaying menus on a website. The main tabs are dishes, drinks, and desserts. The same principle can be used for recipes if you are blogging about food.
Tab Design Guidelines
Use 2 to 5 tabs on your site. Designers say that having more tabs on the bar can make it difficult to choose the right one. The first tab should be the one with the most important content in your opinion.
Symmetry is important in the design of tabs: you can align them to the center, right or left edge.
The user should be able to easily determine which tab he is on. That is, when clicked, the tab title should change color so that the user understands that he is already on a different tab.
Use proper case. Only the first character of the title on the tab bar should be capitalized.
Tab names should be relatively short (one or two words) and relevant.
Don't use only icons for tabs. It is recommended to add text nearby. Most icons can have multiple meanings, and text labels are necessary to reduce ambiguity.
Useful resources for adding tabs to Weblium
The peculiarity of all blocks on Weblium is that you don't need to write the code yourself. The logic of the tabs' behavior is already built, when clicked, they automatically change color when clicked, automatically redirect to another tab. All you have to do is fill them with content.
In this video, we'll go into more detail about tabbed blocks. You'll get step-by-step instructions on how to work with tabs on the Weblium website builder:
2. A step-by-step guide in the Knowledge Base on working with tabs will help you add a block with tabs to your site in a couple of clicks, as well as enable the tab mode in existing blocks.
