UI/UX Development Tip 9: When & when not to use tabs

Tabs allow web designers to make it easy for users to navigate between different sections of the site or pages.

They are similar to tabbed dividers found in filing cabinets – users can click a tab to locate pages containing similar content.

Tabs are not meant to be ignored. Tabs should be used wisely. Tabs can be an excellent tool for navigation and grouping related content. However, sometimes tabs are better than none.

Well-structured navigation is essential for a website that is efficient and high-quality. Tabs are certainly an option. Tabs are an important navigation tool that can be used for both local and global navigation.

When to Use Tabs

Because tabs are a common convention, they are easy to use. Tabs can be used to organize content and connect related information.

Chapter 4 Safari Books Online explains that tabs are used commonly for main navigation and vertical mechanisms on the left to local navigation. However, there are many variations and no established usage rules. [ . . . ] Try to think like a visitor. Consider how users perceive navigation. Knowing the type of navigation a menu represents will help users predict links and reorient on new pages.

When:

• Information must be easy to find and scan. Many people scan websites rather than reading them . Tabs can be helpful in these situations to help users locate the information they are looking for.
• An organized page can be more beneficial. Tabs can make a page more efficient and result in a better user experience.

Tabs may not always be needed.

To determine if tabs are right for you, ask yourself: “If I printed this page, would all the information be grouped together?” Tabs are a good choice if you want each section to be accessible separately.

Why Not Use Tabs

Space, which can be described as vertical or horizontal real estate on a website page, is a valuable but limited resource. To give your users the best possible user experience, you need to control what your users click on and where they look. If you want to create a cohesive experience, get rid of tabs. It is logical for information to be organized on one page that encourages scrolling.

When:

• It is more effective to see similar content grouped together. Amazon’s product pages are an example of this. They encourage users to stay on the page and read more about the product. Tabbed navigation would interrupt the experience by breaking up the experience. Instead, users are encouraged to scroll down to explore the page.
• Sequential content is best. When customers need specific answers, it is not wise to use tabs on customer support pages.
• Page space is very limited. A well-designed layout with vertical sections can be a better solution if you have limited space.

Ask yourself these questions if you are unsure whether tabs should be used.

• Is it possible to scan the pages?
• Is it more time-consuming for users to open new tabs than to go through the pages?

Tabs are like dividers in filing cabinets. If you only have one piece of paper you don’t need to store it in a filing cupboard. You might be able to put everything on one page. It comes down to usability and overall design strategy.

If in Doubt, Try!

It’s important to conduct usability tests as with all aspects UX design. It’s not enough to just assume that what works is the best. A little usability testing can make a big difference, as we’ve discussed in other posts.

You can test by creating basic clickable prototypes at an early stage of the design process. You can test both options if you are deciding between them.

• Compare the speed with tabs and without tabs to see how users can complete a task.
• Ask them which one they prefer.
• When deciding how to proceed, you must balance user reactions with your overall design strategy.

Now you’re ready to use tabs. Now what?

Tabs can be used in a variety of ways. Here are some design guidelines:

1. Tabs that are symmetrical and interactive
   • Tab organization should be logical. This is closely related to information architecture
   • The user should be able easily to identify which tab is active
   • Interactivity should be enhanced by effects so that users can see if they have clicked on something.
2. Concise Copy
   • Labels should be concise
   • Use plain language
   • Use consistent typography
3. Clear Interaction
   • Highlight current tabs
   • Not all tabs should be highlighted
   • Each tab should clearly be linked to a different content section

Tabs can be very effective, depending on the nature of your website, who you users are and how they expect to interact with your site. There are many best practices in web design that can improve usability and user experience. However, the ultimate decision about including tabs is to decide which tab makes most sense.