Contents
The Navigation tabs pattern is an extension of the desktop metaphor in which physical objects are represented as GUI elements. Navigation tabs are derived from the idea of folders in a file-cabinet and are thus familiar to the end user.
Why are module tabs important in web design?
The primary goal of the module tabs UI pattern is to permit users to view a group of related data one at a time, which in turn allows designers to modularize this group of information in a compacted manner, saving valuable screen real estate. In this section, we’ll discuss the instances when module tabs are desirable.
How are tabs and panes related in web design?
A pane is where information is displayed; it should have a corresponding tab control so that panes that are not displayed are accessible by clicking its tab control. Pane content is the content being presented inside of a pane. The active pane is the pane that is currently being shown; it is paired with the active tab control.
When to avoid using module tabs in bgpatterns?
As a counter-example, the module tabs implementation in BGPatterns is a situation where you should avoid using module tabs. When designing a background pattern, users must click back and forth through the tabs to tweak their designs; this adds an unnecessary hindrance for modifying the background pattern being designed.
What should be included in a tab design?
Equally important as content in tab design is how you display it. As Nick Babich points out, text should be easy to scan and so labels should provide short, meaningful descriptions of what the tab contains. For instance, use of logical, short key words (one or two words) and plain language.
Why do we use in page tabs in web design?
In-page tabs that modularize content are a popular UI design pattern, and rightly so. They’re an intuitive way to present lots of information on-screen, whilst allowing you to save on real estate and avoid overwhelming the user. Tick, tick and tick! Free all-in-one Prototyping tool for websites.
The navigation tab is persistent across all pages that the tabs link to. The same structure (order) of the navigation tabs should be maintained from page to page, so that the user can relate the navigation of the different pages to each other. The selected tab should be highlighted to indicate current location.