It’s generally a good idea to use tabs when there’s multiple categories of content for a particular section. Tabs can help consolidate content more efficiently by reducing the amount of scrolling a user has to do.
Tabs Best Practice:
- Tab category names should be short and concise.
- Tabs should fit nicely in a single row.
- Tabbed category content should be similar in nature. It should make logical sense that they’re tabbed together.
- BAD Nesting tabs within tabs creates jumping UI elements and is considered bad practice. It also creates an excessive level of complexity and visual hierarchy issues. The purpose of the tabbed navigation is to allow people to compare content simultaneously in a seamless manner by clicking on adjacent tabs to read relevant content.
- Active tab color should be the same color as the background color of the open content. This provides clarity to users that the content is associated with the current tab in its active state.
- Inactive tab colors should be either be a lighter or darker version of the active state color. The colors need to consistent with the active state. Tabs should not be all different kinds of colors.