Alternatives for tabs in UI design

Progressive disclosure is a powerful tool to keep the interface clean so users can focus on the primary tasks or areas of interest. By selectively revealing just the relevant information and options needed at each step, unnecessary clutter and distractions can be avoided.

Tabs – a form of progressive disclosure, commonly used to divide lengthy or complex information into more digestible sections. Tabs have made our life much easier, both for users and designers, in almost every product you can spot the appearance of tabs, be it e-commerce sites or mobile applications.

However, like any interface element, tabs have advantages and disadvantages, depending on the specific user needs and workflow. There is no single solution that is optimal for all scenarios.

Tabs may not be suitable when the content is nonlinear or the relationships between different sections are more interconnected rather than distinct. Switching between tabs frequently can interrupt the user’s thought process and context. Long lists of tabs also consume valuable screen real estate without providing clear benefits.

What are tabs alternatives?

1. Choice chips

Okay, this is the term I came up with, based on the Material Design system and the appearance of the element. I was surprised to find that there aren’t many design systems that mention this particular element.

Essentially, it functions just like tabs. Each chip, when selected, displays a different set of views. However, think of it as a filter based on tags, which narrows down the content based on its characteristics.

On the other hand, tabs divide the content into categories based on the overall information within the content.

You can have chips as the secondary layer tabs as using two layers of tabs can confuse the users, therefore, is not recommended.

2. Accordions

It’s sections vertically stacked that can be expanded/collapsed one at a time using headings as triggers. Accordions are good for horizontal space-constrained displays. Below are comparisons between tabs and accordions

Space usage: Accordions are more efficient in terms of horizontal space as they stack elements in a vertical row. On the other hand, tabs are more efficient in terms of vertical space. Therefore, accordions perform better on mobile devices where horizontal space is limited.

Grouping. Tabs emphasize grouping-related sections. Accordion sections don’t rely on logical grouping, only on section headings.

Selection. Tabs allow switching between any section quickly. Accordion limits viewing one section at a time in a linear flow.

In general, tabs are better when there are distinct sections that don’t rely on each other, and quick scanning and selection across sections are important. Accordions are preferable for space-constrained interfaces, non-linear content exploration, and guided step-by-step processes.

3. Dropdown menus

Dropdown menus hide sections behind a menu title that drops down a list on selection. It is useful for hiding large amounts of information but requires extra clicks.

Usually, with dropdown menus, each section will be divided into different pages. Below are some situations that may need to use dropdown menus instead of tabs:

Content Overload: If the content within a tab becomes too lengthy or overwhelming, it may be a good idea to split it into separate pages. This helps to improve readability, reduce scrolling and allows users to focus on specific information without getting lost in a sea of content.

Improved Navigation: If the tabs represent distinct sections or categories that have a significant amount of content, splitting them into separate pages can enhance navigation. Users can easily navigate between different pages to access the specific information they need, rather than having to scroll through a long tabbed interface.

Performance Optimization: Loading a large amount of content within a single page, especially if it includes media or complex elements, can affect the page’s performance and load times. By breaking sections into separate pages, you can optimize the loading speed for each page, improving the overall user experience.

Contextual Separation: If the content within each tab represents different contexts or tasks, separating them into dedicated pages can provide a clearer separation and context for users. This helps users understand where they are within the overall flow and allows for better focus and task completion.

Mobile Responsiveness: Tabs that work well on larger screens may not translate effectively to smaller mobile screens. In such cases, breaking sections into separate pages can be a more responsive and user-friendly approach, allowing for easier navigation and improved readability on mobile devices.

4. Carousels

Carousels have sections that are horizontally scrollable through with left/right arrows. Carousels work well with small to medium amounts of information.

Choosing between carousels and tabs depends on evaluating specific contextual factors and design goals:

Content visibility. Tabs allow users to see all available options at once through easy toggles between options, while carousels only display one item sequentially.

Engagement. Carousels often include animation that can draw more visual attention, especially for promotional displays. Tabs provide direct access without additional interactions.

Sequential or random order of content. Carousels naturally guide users through items in a linear flow, while tabs allow jumping around freely.

Ease of use. Tabs offer more straightforward navigation, whereas carousels require arrow clicks to change what’s shown.

5. Tabbed Sidebars

Tabbed Sidebars are positioned vertically on the side rather than across the top. Reduces width impact but moves sections further from content. Sidebar tabs are usually used in complex systems and information architecture. As with horizontal displays, you can show more navigation items.

For example, Instagram with more navigation options uses sidebar tabs while Facebook uses topbar tabs.

A lot of SAAS products also utilize sidebar tabs, as they can support hierarchical nested structures well.

You can also use sidebar tabs to display items with a lot of categories, for example, on the Harvest website:

However, you have to take responsiveness into account. Sidebar tabs take a lot of horizontal space, so it is not suited to display on mobile. 

6. Toggle Buttons

Toggle Buttons have sections that are toggled individually with labeled buttons rather than collectively through tabs. They are clearer for fewer sections. They are used when there are 3 options or fewer.

You can use the switch button or segmented button to switch between different views. The most common application of the toggle button is in the price plan section design, where you can toggle between monthly and annual plans.

7. Scroll

You can consider using the scroll function when there is a limited horizontal place. Scrolling removes the ability to directly link to or bookmark specific sections. But for certain content types where flow is king, it can be a better navigation approach.

Situations where scroll is better are: 

On mobile interfaces where screen real estate is limited, tabs can take up valuable horizontal space. Scrolling allows you to fit more content in a linear flow.

When the sections are so closely related and are better treated as a singular long-form piece of content.

In cases where you want to minimize distractions and keep users focused on consuming content without interruptions from tabs. For example, in an image-heavy section, where you want users to focus more on the image gallery, scroll can be a better option. 

Conclusion

In conclusion, tabs are a commonly used and effective design pattern for dividing lengthy or complex information. However, they are not always the optimal solution depending on user needs, workflow, and design constraints.

Progressive disclosure through various methods of revealing information sequentially, such as:

• Choice chip
• Accordions
• Carousels
• Drop-down menus
• Toggle buttons
• Scrolling