Best Practices – Tabs

Tabs

Tabs allow for organization of the information into focused, streamlines views. Use tabs to break up the information and reduce information overload.

Tabs can be hidden & shown based on visibility rules. Try to keep the total # of tabs ever visible at one time to 5. Use visibility rules to limit tabs based on initiative lifecycle, role, etc…

If similar information is being displayed at multiple levels within a hierarchy, use tabs with the same name to organize it. This promotes consistency and usability.

There are three layout types for tabs

  • Two Column Layout – splits the page into two columns. You can either choose full width or half-width for your sections. Sections automatically grow depending on content.
  • Standard Layout – Provides more granular control over height and width of sections. Sections will respect height and width, regardless of amount of content. Includes padding around each section, giving the layout a modern look.
  • Condensed Layout – Provides the same controls as Standard Layout with thinner boundaries between sections. Allows you to fit the most content onto a tab.

* Always test the template using multiple screen widths to be sure it’ll display correctly on desktops, tablets & smartphones and in multiple browsers and OSs.

Too many tabs?  Consider visibility rules to reduce the number of tabs visible to a standard user.   E.g. do users really need to see History?

 

Updated on May 18, 2021

Related Articles