Tabs serve to break up similar content by highlighting what’s necessary–when it’s necessary–without confusing the user.
Tabs exist both horizontally and vertically. Sometimes, if the interface requires, use them in combination.
Horizontal: Place tabs next to one another and display content beneath them.
Depending on the content they’re showing, tabs may need to call more attention to themselves. In some cases, like the video player, tabs should take a backseat to the primary focus of the page.
Content Selection: If content is visually similar between tabs, bump up the contrast of the active tab.
Tabs come in many different forms in mobile interface design. Between segmented controls, tab bars and switches, there are a lot of ways to divide content in a way that makes sense. But don’t worry, we’ve sorted when to use what below.
Too many tabs can make separated content difficult to find and having too few can hide content from view for no reason. With vertical space in abundance on both web and mobile, use as many tabs as makes sense. But space is at a premium horizontally, so limit the number of tabs to five.
Don'tbreak up content into more tabs than necessary.
Dogroup similar content into a few tabs that make sense.
Labels should describe the content within the tab it’s describing. We recommend labels be no more than two words. Internationalization may expand the label beyond that, but we’d rather be limited than unreadable.
Don'twrite sentences to describe the content within the tab.
Dokeep it clear and easy to understand.
In some cases, icons add an affordance to breaking up content. When using them in tabs, it’s all or nothing–either use them or don’t, don’t pick and choose. If you decide to use them, keep them to the left.
When using tabs that follow our content selection, use the edge in the direction that flows into the content.
Don'tadd visual flourish to an active tab in a way that is confusing.
Douse selection to guide the eye to the enabled content.
Only one tab should ever be active so the focus can be on the content shown within.
Don'tmake a user switch between tabs to complete a task.
Doseparate content into smaller, relatable sections.
Only use tabs to navigate between similar types of content, not another area of the app or to complete a workflow.
Don'tuse tabs in place of buttons or links.
Douse them within the context of the tabbed content.
When navigating to other portions of the app on mobile, use the tab bar component over Uniform's tab pattern.