Intro to UI Tab Navigation

Horizontal tabs, resembling traditional file tabs, are used for organizing and navigating content. They present different sections or categories of information in a compact, horizontal row, allowing users to switch between them easily. Each tab acts as a clickable header, displaying the relevant content in the space below.

They are ideal for situations requiring a clean, accessible way to separate content. For example, a news website might use horizontal tabs to categorize news by type: Local, International, Sports, and Entertainment.

While navigation is typically located along the top of a page, in mobile apps bottom tab bars (in iOS products) and bottom navigation (in Material Design) are also common. These are fixed elements along the bottom of the screen on mobile interfaces. Like top navigation, they allow users to switch between different parts of an app instantly. They’re used for global navigation, so they should always remain visible. Be sure you don’t include too many tabs in this area to avoid cluttering the interface — 3-5 is plenty.^[1]

Horizontal tabs come in two main varieties — fixed and scrollable. Fixed tabs have a set number of sections, all visible simultaneously.^[2] They’re more common on desktop interfaces with plenty of available horizontal space to display them.

When implementing fixed tabs, limit the number of tabs to ensure each one is easily selectable, especially on smaller screens. The labels should be concise and clear.

Scrollable tabs are organized in a horizontal row, but unlike fixed tabs, they can extend beyond the screen width, allowing the user to scroll horizontally to view additional tabs. This design is ideal for accommodating a large number of categories or sections without overwhelming the user with too many options at once.

As the list of categories is extensive, scrollable tabs enable users to navigate through them by swiping left or right, and selecting the category they wish to explore without needing to navigate to a separate menu or page.

To indicate more options in scrollable tabs, show partial visibility of off-screen tabs and use a fading edge effect or scroll arrows at the sides.

Tab spacing is important for readability and making interfaces look clean and visually appealing. Spacing between tabs should be consistent and large enough to define the relationships between elements.

On mobile, each tab should have an adequate touch target area of at least 44 x 44px.^[3] This ensures users have no trouble navigating between tabs and don't have to worry about accidentally switching between categories. 

Tab height is also vital for maintaining pleasing visuals and aiding in readability. Insufficient height makes tabs look cluttered.

Material Design guidelines specify adding at least 12px of vertical padding to make labels easy to scan and identify.^[4] On desktop, the padding may be a bit less but make sure labels have some breathing air.

If you want to give your users a little extra help when scanning your tabs, consider using tab icons. Icons help users identify a tab’s purpose more quickly, while also adding personality and visual appeal. Be sure to stick to simple, concrete, and familiar icons, and avoid duplicating icons for multiple tabs. Remember that icons are best used for primary navigation and be sure to keep state changes in mind when styling them.

Text labels for tabs should clearly and succinctly describe the content within each tab. This clarity ensures users can easily find the information they need.

Here are a few recommendations on how to maintain effective tab labels:

• Keep labels concise: Use short, descriptive words. Ask yourself, "Does this word add to the meaning, or is the label clear without it?" For instance, use "Settings" instead of "User Settings" or "Orders" instead of "Order History." Ideally, check the viability of labels with user research.
• Avoid truncation: Truncated labels can confuse users. A label that cuts off to "Prod..." instead of "Product Details" can leave users guessing its meaning.
• Use scrollable tabs for longer titles: Scrollable tabs are a good alternative for accommodating longer titles without truncation. This approach ensures that each label remains fully visible, maintaining readability and comprehension.^[5]